feat(abc:reuse-tab): add canClose property (#1497)

Author: cipchk

packages/abc/reuse-tab/index.en-US.md

@@ -225,6 +225,7 @@ Turning on `keepingScroll` will restore the previous scrollbar position after re
 | `[disabled]` | Whether to disabled | `boolean` | `false` |
 | `[titleRender]` | Custom rendering of the title | `TemplateRef<{ $implicit: ReuseItem }>` | - |
 | `[storageState]` | Whether to store the state, keep the last browser state | `boolean` | `false` |
+| `[canClose]` | A function to determine what should be closed | `(options: { item: ReuseItem; includeNonCloseable: boolean }) => Observable<boolean>` | - |
 | `(close)` | Close callback event | `EventEmitter` | - |
 | `(change)` | Callback when switching | `EventEmitter` | - |
 

packages/abc/reuse-tab/index.zh-CN.md

@@ -42,6 +42,7 @@ alainProvides.push({
 > **注意：若不指定 `(activate)` 事件，无法刷新未缓存过的当前标签页。**
 
 > 位置 `src/app/layout/layout.module.ts`
+
 ```ts
 import { ReuseTabModule } from '@delon/abc/reuse-tab'; // 新增 import
 
@@ -227,6 +228,7 @@ export class DemoComponent implements OnReuseInit, OnReuseDestroy {
 | `[disabled]` | 是否禁用 | `boolean` | `false` |
 | `[titleRender]` | 自定义标题渲染 | `TemplateRef<{ $implicit: ReuseItem }>` | - |
 | `[storageState]` | 是否存储状态，保持最后一次浏览器的状态 | `boolean` | `false` |
+| `[canClose]` | 关闭时二次校验 | `(options: { item: ReuseItem; includeNonCloseable: boolean }) => Observable<boolean>` | - |
 | `(close)` | 关闭回调 | `EventEmitter` | - |
 | `(change)` | 切换时回调，接收的参数至少包含：`active`、`list` 两个参数 | `EventEmitter` | - |
 

packages/abc/reuse-tab/reuse-tab.component.spec.ts

@@ -3,7 +3,7 @@ import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick
 import { By } from '@angular/platform-browser';
 import { ExtraOptions, Router, RouteReuseStrategy, ROUTER_CONFIGURATION } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 
 import { ALAIN_I18N_TOKEN, DelonLocaleModule, DelonLocaleService, en_US, MenuService, zh_CN } from '@delon/theme';
 import { ScrollService } from '@delon/util/browser';
@@ -12,6 +12,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { AlainI18NServiceFake } from '../../theme/src/services/i18n/i18n';
 import { ReuseTabComponent } from './reuse-tab.component';
 import {
+  ReuseCanClose,
   ReuseCustomContextMenu,
   ReuseItem,
   ReuseTabMatchMode,
@@ -167,6 +168,12 @@ describe('abc: reuse-tab', () => {
       it('issues-363', fakeAsync(() => {
         page.to('#b').expectCount(2).close(1).expectCount(1).expectAttr(0, 'closable', false).end();
       }));
+      it('#canClose', fakeAsync(() => {
+        layoutComp.canClose = () => of(false);
+        page.cd().to('#b').expectCount(2).close(1).expectCount(2);
+        layoutComp.canClose = () => of(true);
+        page.cd().to('#b').expectCount(2).close(1).expectCount(1).end();
+      }));
     });
 
     describe('#title', () => {
@@ -858,6 +865,7 @@ class AppComponent {}
       [disabled]="disabled"
       [titleRender]="titleRender"
       [storageState]="storageState"
+      [canClose]="canClose"
       (change)="change($event)"
       (close)="close($event)"
     >
@@ -884,6 +892,7 @@ class LayoutComponent {
   disabled = false;
   titleRender?: TemplateRef<{ $implicit: ReuseItem }>;
   storageState = false;
+  canClose?: ReuseCanClose;
   change(): void {}
   close(): void {}
 }

packages/abc/reuse-tab/reuse-tab.component.ts

@@ -20,7 +20,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { Subject, debounceTime, filter, takeUntil } from 'rxjs';
+import { Subject, debounceTime, filter, takeUntil, of } from 'rxjs';
 
 import { AlainI18NService, ALAIN_I18N_TOKEN } from '@delon/theme';
 import { BooleanInput, InputBoolean, InputNumber, NumberInput } from '@delon/util/decorator';
@@ -29,6 +29,7 @@ import { NzTabSetComponent } from 'ng-zorro-antd/tabs';
 
 import { ReuseTabContextService } from './reuse-tab-context.service';
 import {
+  ReuseCanClose,
   ReuseContextCloseEvent,
   ReuseContextI18n,
   ReuseCustomContextMenu,
@@ -98,6 +99,7 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
   @Input() routeParamMatchMode: ReuseTabRouteParamMatchMode = 'strict';
   @Input() @InputBoolean() disabled = false;
   @Input() titleRender?: TemplateRef<{ $implicit: ReuseItem }>;
+  @Input() canClose?: ReuseCanClose;
   @Output() readonly change = new EventEmitter<ReuseItem>();
   @Output() readonly close = new EventEmitter<ReuseItem | null>();
 
@@ -251,9 +253,11 @@ export class ReuseTabComponent implements OnInit, OnChanges, OnDestroy {
       e.stopPropagation();
     }
     const item = this.list[idx];
-    this.srv.close(item.url, includeNonCloseable);
-    this.close.emit(item);
-    this.cdr.detectChanges();
+    (this.canClose ? this.canClose({ item, includeNonCloseable }) : of(true)).pipe(filter(v => v)).subscribe(() => {
+      this.srv.close(item.url, includeNonCloseable);
+      this.close.emit(item);
+      this.cdr.detectChanges();
+    });
     return false;
   }
 

packages/abc/reuse-tab/reuse-tab.interfaces.ts

@@ -1,4 +1,5 @@
 import { ActivatedRouteSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
 
 import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 
@@ -136,3 +137,5 @@ export interface ReuseComponentInstance {
   _onReuseDestroy: () => void;
   destroy: () => void;
 }
+
+export type ReuseCanClose = (options: { item: ReuseItem; includeNonCloseable: boolean }) => Observable<boolean>;