fix: switch tab should save data

Postcatlab · Jan 19, 2022 · df1e9d6 · df1e9d6
1 parent 6889648
commit df1e9d6
Show file tree

Hide file tree

Showing 14 changed files with 210 additions and 155 deletions.
diff --git a/build/SetupScripts/nim/skin/form/pic.png b/build/SetupScripts/nim/skin/form/pic.png
diff --git a/build/SetupScripts/nim/skin/pic.png b/build/SetupScripts/nim/skin/pic.png
diff --git a/src/app/pages/api/api.component.ts b/src/app/pages/api/api.component.ts
@@ -76,7 +76,6 @@ export class ApiComponent implements OnInit, OnDestroy {
    */
   buildGroupTreeData(): void {
     this.groupByID = {};
-    this.apiDataItems = {};
     this.treeItems = [];
     this.getGroups();
   }
@@ -98,9 +97,10 @@ export class ApiComponent implements OnInit, OnDestroy {
   }
   getApis() {
     this.apiDataService.loadAllByProjectID(this.projectID).subscribe((items: Array<ApiData>) => {
+      let apiItems={};
       items.forEach((item) => {
         delete item.updatedAt;
-        this.apiDataItems[item.uuid] = item;
+        apiItems[item.uuid] = item;
         this.treeItems.push({
           title: item.name,
           key: item.uuid,
@@ -110,8 +110,8 @@ export class ApiComponent implements OnInit, OnDestroy {
           isLeaf: true,
         });
       });
+      this.apiDataItems=apiItems;
       this.generateGroupTreeData();
-      this.apiTabComponent.initTab();
     });
   }
   /**
@@ -211,7 +211,6 @@ export class ApiComponent implements OnInit, OnDestroy {
   generateGroupTreeData(): void {
     this.treeItems.sort((a, b) => a.weight - b.weight);
     this.treeNodes = [];
-    console.log('generateGroupTreeData=>',this.treeItems)
     listToTree(this.treeItems, this.treeNodes, 0);
   }
 

diff --git a/src/app/pages/api/api.module.ts b/src/app/pages/api/api.module.ts
@@ -11,8 +11,7 @@ import { EouiModule } from '../../eoui/eoui.module';
 import { ParamsImportModule } from '../../shared/components/params-import/params-import.module';
 
 import { ApiComponent } from './api.component';
-import { ApiGroupEditComponent} from './group/edit/api-group-edit.component';
-
+import { ApiGroupEditComponent } from './group/edit/api-group-edit.component';
 
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzIconModule } from 'ng-zorro-antd/icon';
@@ -25,6 +24,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 
 import { ApiDataService } from '../../shared/services/api-data/api-data.service';
 import { GroupService } from '../../shared/services/group/group.service';
+import { ApiTabService } from './tab/api-tab.service';
 import { MessageService } from '../../shared/services/message';
 import { ApiGroupTreeComponent } from './group/tree/api-group-tree.component';
 import { ApiTabComponent } from './tab/api-tab.component';
@@ -54,6 +54,6 @@ const COMPONENTS = [ApiComponent, ApiGroupEditComponent, ApiGroupTreeComponent];
   ],
   declarations: [...COMPONENTS, ApiTabComponent],
   exports: [],
-  providers: [ApiDataService, GroupService, MessageService],
+  providers: [ApiDataService, GroupService, MessageService, ApiTabService],
 })
 export class ApiModule {}
diff --git a/src/app/pages/api/tab/api-tab.component.html b/src/app/pages/api/tab/api-tab.component.html
@@ -1,19 +1,18 @@
-
 <nz-tabset
   [(nzSelectedIndex)]="selectedIndex"
   nzType="editable-card"
   (nzAdd)="newTab()"
   (nzClose)="closeTab($event)"
+  (nzSelectChange)="switchTab($event)"
   [nzTabBarExtraContent]="extraTemplate"
 >
   <nz-tab
     *ngFor="let tab of tabs; let i = index"
     nzClosable
     [nzTitle]="titleTemplate"
-    (nzSelect)="tabSelect({index:i,tab:tab})"
   >
     <ng-template #titleTemplate>
-      <span class="mr5 method_text_{{tab.method}}"  *ngIf="tab.method">{{ tab.method | uppercase }}</span>
+      <span class="mr5 method_text_{{ tab.method }}" *ngIf="tab.method">{{ tab.method | uppercase }}</span>
       {{ tab.title }}
     </ng-template>
   </nz-tab>

diff --git a/src/app/pages/api/tab/api-tab.component.ts b/src/app/pages/api/tab/api-tab.component.ts
@@ -1,16 +1,17 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
 
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
-import { filter } from 'rxjs/operators';
 
 import { TabItem } from './tab.model';
+import { ApiTabService } from './api-tab.service';
+import { filter } from 'rxjs';
 
 @Component({
   selector: 'eo-api-tab',
   templateUrl: './api-tab.component.html',
   styleUrls: ['./api-tab.component.scss'],
 })
-export class ApiTabComponent implements OnInit {
+export class ApiTabComponent implements OnInit, OnChanges {
   @Input() apiDataItems;
   id: number;
   /**
@@ -31,20 +32,26 @@ export class ApiTabComponent implements OnInit {
     detail: { path: '/home/api/detail', title: 'API 详情' },
   };
 
-  constructor(private router: Router, private route: ActivatedRoute) {}
+  constructor(private router: Router, private route: ActivatedRoute, private tabSerive: ApiTabService) {}
 
   ngOnInit(): void {
-    this.id = Number(this.route.snapshot.queryParams.uuid);
     this.watchChangeRouter();
   }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.apiDataItems && changes.apiDataItems.currentValue) {
+      this.initTab();
+    }
+  }
   /**
-   * Get current path to update tab
+   * path change
    */
   watchChangeRouter() {
     this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe((event: NavigationEnd) => {
       this.id = Number(this.route.snapshot.queryParams.uuid);
       if (!this.id) return;
-      this.tabs[this.selectedIndex] = this.getCurrentTabByID(this.id);
+      this.tabs[this.selectedIndex] =Object.assign({
+        uuid:this.tabs[this.selectedIndex].uuid
+      }, this.getTabInfoByID(this.id));
     });
   }
   /**
@@ -57,35 +64,52 @@ export class ApiTabComponent implements OnInit {
    * Init tab data after load or update.
    */
   initTab() {
-    if (!this.apiDataItems[this.id]) {
+    this.id = Number(this.route.snapshot.queryParams.uuid);
+    let apiHasDelete = !this.apiDataItems[this.id];
+    if (apiHasDelete) {
       this.closeTab({ index: this.selectedIndex });
       return;
     }
-    let module = Object.keys(this.defaultTabs).find((keyName) =>
-      this.router.url.split('?')[0].includes(this.defaultTabs[keyName].path)
-    );
-    const tab = this.getCurrentTabByID(this.id);
-    if (this.tabs.length < 1) {
-      this.appendTab(module, tab);
-    } else {
-      this.tabs[this.selectedIndex] = tab;
-    }
+    const tab = this.getTabInfoByID(this.id);
+    this.appendTab('unset', tab);
   }
   /**
    * Push new tab.
    *
    * @param tab TabItem
    */
   appendTab(which = 'test', apiData = {}): void {
-    let tab: TabItem = Object.assign({}, this.defaultTabs[which], apiData);
+    let tab: TabItem = Object.assign(
+      {
+        uuid: new Date().getTime(),
+      },
+      which === 'unset' ? {} : this.defaultTabs[which],
+      apiData
+    );
     let existTabIndex = this.tabs.findIndex((val) => val.key === tab.key);
     if (tab.key && existTabIndex !== -1) {
-      this.tabSelect({ index: existTabIndex, tab: tab });
+      this.selectedIndex = existTabIndex;
     } else {
       this.tabs.push(tab);
-      this.tabSelect({ index: this.tabs.length - 1, tab: tab });
+      this.selectedIndex = this.tabs.length - 1;
     }
   }
+  /**
+   * Remove api data tabs.
+   *
+   * @param uuids Array<string|number>
+   */
+  removeApiDataTabs(uuids: Array<string | number>): void {
+    const items = [];
+    this.tabs.forEach((tab: TabItem, index: number) => {
+      if (uuids.indexOf(tab.key)) {
+        items.push({ index });
+      }
+    });
+    items.reverse().forEach((item) => {
+      this.closeTab(item);
+    });
+  }
   /**
    * Close current tab.
    *
@@ -99,42 +123,29 @@ export class ApiTabComponent implements OnInit {
   }
   /**
    * Switch the tab.
-   *
    * @param {TabItem} inArg.tab
    * @param inArg.index
    */
-  tabSelect(inArg) {
-    this.selectedIndex = inArg.index;
-    this.activeRoute(inArg.tab);
+  switchTab() {
+    let tab = this.tabs[this.selectedIndex];
+    this.tabSerive.tabChange$.next(tab);
+    this.activeRoute(tab);
   }
 
   /**
    * Action new tab route.
    *
    * @param tab
    */
-  activeRoute(tab) {
+  private activeRoute(tab) {
     this.router
-      .navigate([tab.path], { queryParams: { uuid: tab.key, groupID: tab.groupID, projectID: tab.projectID } })
+      .navigate([tab.path], {
+        queryParams: { uuid: tab.key, groupID: tab.groupID, projectID: tab.projectID },
+      })
       .finally();
   }
-  /**
-   * Remove api data tabs.
-   *
-   * @param uuids Array<string|number>
-   */
-  removeApiDataTabs(uuids: Array<string | number>): void {
-    const items = [];
-    this.tabs.forEach((tab: TabItem, index: number) => {
-      if (uuids.indexOf(tab.key)) {
-        items.push({ index });
-      }
-    });
-    items.reverse().forEach((item) => {
-      this.closeTab(item);
-    });
-  }
-  private getCurrentTabByID(id) {
+
+  private getTabInfoByID(id) {
     const result = {
       path: this.router.url.split('?')[0],
       title: this.apiDataItems[id].name,

diff --git a/src/app/pages/api/tab/api-tab.service.spec.ts b/src/app/pages/api/tab/api-tab.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiTabService } from './api-tab.service';
+
+describe('ApiTabService', () => {
+  let service: ApiTabService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiTabService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/api/tab/api-tab.service.ts b/src/app/pages/api/tab/api-tab.service.ts
@@ -0,0 +1,17 @@
+import { ReplaySubject, Subject } from 'rxjs';
+import { TabItem } from './tab.model';
+
+export class ApiTabService {
+  currentTab: TabItem;
+  tabs = {};
+  tabChange$: ReplaySubject<TabItem> = new ReplaySubject(1);
+  saveTabData$: Subject<{ tab: TabItem; data: any }> = new Subject();
+  constructor() {
+    this.saveTabData$.subscribe((inData) => {
+      this.tabs[inData.tab.uuid] = inData.data;
+    });
+    this.tabChange$.subscribe((tab) => {
+      this.currentTab = tab;
+    });
+  }
+}
diff --git a/src/app/pages/api/tab/tab.model.ts b/src/app/pages/api/tab/tab.model.ts
@@ -1,54 +1,54 @@
 /**
  * Tab item.
  */
- export interface TabItem {
-    /**
-     * 标签标题
-     *
-     * @type {string}
-     */
-    title: string;
-
-    /**
-     * 标签对应的路径
-     *
-     * @type {string}
-     */
-    path: string;
-
-    /**
-     * 路径的主键参数
-     *
-     * @type {string | number}
-     */
-    key?: string|number;
-
-    /**
-     * 路径的分组参数
-     *
-     * @type {string | number}
-     */
-    groupID?: string|number;
-
-    /**
-     * 路径的项目参数
-     *
-     * @type {string | number}
-     */
-    projectID?: string|number;
-
-    /**
-     * 标签路径的请求类型，用于显示
-     *
-     * @type {string | number}
-     */
-    method?: string;
-
-    /**
-     * 实体类型，为后期加上其他类型到Tab预留，如Group
-     *
-     * @type {string}
-     */
-    entity?: string;
-  }
-  
+export interface TabItem {
+  uuid: number;
+  /**
+   * 标签标题
+   *
+   * @type {string}
+   */
+  title: string;
+
+  /**
+   * 标签对应的路径
+   *
+   * @type {string}
+   */
+  path: string;
+
+  /**
+   * 路径的主键参数
+   *
+   * @type {string | number}
+   */
+  key?: string | number;
+
+  /**
+   * 路径的分组参数
+   *
+   * @type {string | number}
+   */
+  groupID?: string | number;
+
+  /**
+   * 路径的项目参数
+   *
+   * @type {string | number}
+   */
+  projectID?: string | number;
+
+  /**
+   * 标签路径的请求类型，用于显示
+   *
+   * @type {string | number}
+   */
+  method?: string;
+
+  /**
+   * 实体类型，为后期加上其他类型到Tab预留，如Group
+   *
+   * @type {string}
+   */
+  entity?: string;
+}