From 7effb86336a49c6277a090562a34210027701021 Mon Sep 17 00:00:00 2001 From: cipchk Date: Wed, 19 Jul 2023 17:14:03 +0800 Subject: [PATCH 1/2] feat(theme:layout-default): add `fetching` property - close https://github.com/ng-alain/ng-alain/issues/2403 --- packages/theme/layout-default/index.en-US.md | 2 ++ packages/theme/layout-default/index.zh-CN.md | 2 ++ .../layout-default/layout.component.spec.ts | 25 +++++++++++++++---- .../theme/layout-default/layout.component.ts | 23 ++++++++++++++--- 4 files changed, 43 insertions(+), 9 deletions(-) diff --git a/packages/theme/layout-default/index.en-US.md b/packages/theme/layout-default/index.en-US.md index eae0484f6..b769d7ee1 100644 --- a/packages/theme/layout-default/index.en-US.md +++ b/packages/theme/layout-default/index.en-US.md @@ -102,6 +102,8 @@ The layout can be dynamically managed at runtime through the `LayoutDefaultServi | `[nav]` | Nav | `TemplateRef` | `-` | | `[content]` | Content | `TemplateRef` | `-` | | `[customError]` | Custom exception routing error message, can't show when is `null` | `string, null` | `Could not load ${evt.url} route` | +| `[fetchingStrictly]` | Precise check top loading animation state | `boolean` | `false` | +| `[fetching]` | Top loading animation state | `boolean` | `false` | ### LayoutDefaultOptions diff --git a/packages/theme/layout-default/index.zh-CN.md b/packages/theme/layout-default/index.zh-CN.md index 89ddd35fa..4bc750c1a 100644 --- a/packages/theme/layout-default/index.zh-CN.md +++ b/packages/theme/layout-default/index.zh-CN.md @@ -102,6 +102,8 @@ export class LayoutBasicComponent { | `[nav]` | 导航信息 | `TemplateRef` | `-` | | `[content]` | 内容信息 | `TemplateRef` | `-` | | `[customError]` | 自定义异常路由错误消息，当 `null` 时表示不显示错误消息 | `string, null` | `Could not load ${evt.url} route` | +| `[fetchingStrictly]` | 是否完全受控顶部加载动画状态 | `boolean` | `false` | +| `[fetching]` | 顶部加载动画状态 | `boolean` | `false` | ### LayoutDefaultOptions diff --git a/packages/theme/layout-default/layout.component.spec.ts b/packages/theme/layout-default/layout.component.spec.ts index b2c7978d3..d554c389e 100644 --- a/packages/theme/layout-default/layout.component.spec.ts +++ b/packages/theme/layout-default/layout.component.spec.ts @@ -136,7 +136,7 @@ describe('theme: layout-default', () => { })); it('should toggle fetching status when load lzay config', fakeAsync(() => { - expect(context.comp.isFetching).toBe(true); + expect(context.comp.showFetching).toBe(true); lazyEnd(); })); @@ -144,7 +144,7 @@ describe('theme: layout-default', () => { it('should be invalid module', fakeAsync(() => { const spy = spyOn(msgSrv, 'error'); lazyError(); - expect(context.comp.isFetching).toBe(false); + expect(context.comp.showFetching).toBe(false); expect(spy).toHaveBeenCalled(); expect(spy.calls.first().args[0]).toContain('Could not load '); lazyEnd(); @@ -154,7 +154,7 @@ describe('theme: layout-default', () => { context.customError = 'test'; fixture.detectChanges(); lazyError(); - expect(context.comp.isFetching).toBe(false); + expect(context.comp.showFetching).toBe(false); expect(spy).toHaveBeenCalled(); expect(spy.calls.first().args[0]).toBe('test'); lazyEnd(); @@ -164,16 +164,27 @@ describe('theme: layout-default', () => { context.customError = null; fixture.detectChanges(); lazyError(); - expect(context.comp.isFetching).toBe(false); + expect(context.comp.showFetching).toBe(false); expect(spy).not.toHaveBeenCalled(); lazyEnd(); })); it('should be cancel load config', fakeAsync(() => { lazyCancel(); - expect(context.comp.isFetching).toBe(false); + expect(context.comp.showFetching).toBe(false); lazyEnd(); })); }); + + it('#fetchingStrictly', () => { + const cls = '.alain-default__progress-bar'; + context.fetchingStrictly = true; + context.fetching = true; + fixture.detectChanges(); + page.expectEl(cls, true); + context.fetching = false; + fixture.detectChanges(); + page.expectEl(cls, false); + }); }); class PageObject { @@ -197,6 +208,8 @@ describe('theme: layout-default', () => { [nav]="nav" [content]="content" [customError]="customError" + [fetchingStrictly]="fetchingStrictly" + [fetching]="fetching" > left @@ -227,4 +240,6 @@ class TestComponent { nav?: TemplateRef | null; content?: TemplateRef | null; customError?: string | null; + fetchingStrictly = false; + fetching = false; } diff --git a/packages/theme/layout-default/layout.component.ts b/packages/theme/layout-default/layout.component.ts index 9a4bb8721..d94f88e86 100644 --- a/packages/theme/layout-default/layout.component.ts +++ b/packages/theme/layout-default/layout.component.ts @@ -19,10 +19,11 @@ import { Router, Event } from '@angular/router'; -import { Subject, takeUntil } from 'rxjs'; +import { Subject, filter, takeUntil } from 'rxjs'; import { SettingsService } from '@delon/theme'; import { updateHostClass } from '@delon/util/browser'; +import { BooleanInput, InputBoolean } from '@delon/util/decorator'; import type { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzMessageService } from 'ng-zorro-antd/message'; @@ -34,7 +35,7 @@ import { LayoutDefaultOptions } from './types'; selector: 'layout-default', exportAs: 'layoutDefault', template: ` -
+
@@ -59,6 +60,8 @@ import { LayoutDefaultOptions } from './types'; ` }) export class LayoutDefaultComponent implements OnDestroy { + static ngAcceptInputType_fetchingStrictly: BooleanInput; + @ContentChildren(LayoutDefaultHeaderItemComponent, { descendants: false }) headerItems!: QueryList; @@ -75,9 +78,16 @@ export class LayoutDefaultComponent implements OnDestroy { @Input() nav: TemplateRef | null = null; @Input() content: TemplateRef | null = null; @Input() customError?: string | null; + @Input() @InputBoolean() fetchingStrictly = false; + @Input() @InputBoolean() fetching = false; private destroy$ = new Subject(); - isFetching = false; + private isFetching = false; + + get showFetching(): boolean { + if (this.fetchingStrictly) return this.fetching; + return this.isFetching; + } get collapsed(): boolean { return this.settings.layout.collapsed; @@ -100,8 +110,13 @@ export class LayoutDefaultComponent implements OnDestroy { @Inject(DOCUMENT) private doc: NzSafeAny, private srv: LayoutDefaultService ) { - router.events.pipe(takeUntil(this.destroy$)).subscribe(ev => this.processEv(ev)); const { destroy$ } = this; + router.events + .pipe( + takeUntil(destroy$), + filter(() => !this.fetchingStrictly) + ) + .subscribe(ev => this.processEv(ev)); this.srv.options$.pipe(takeUntil(destroy$)).subscribe(() => this.setClass()); this.settings.notify.pipe(takeUntil(destroy$)).subscribe(() => this.setClass()); } From dab8b20a13cc37a8352976794e03c17de4ff390f Mon Sep 17 00:00:00 2001 From: cipchk Date: Wed, 19 Jul 2023 17:16:01 +0800 Subject: [PATCH 2/2] chore: fix lose code --- packages/theme/layout-default/layout.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/theme/layout-default/layout.component.ts b/packages/theme/layout-default/layout.component.ts index d94f88e86..a2de5aab6 100644 --- a/packages/theme/layout-default/layout.component.ts +++ b/packages/theme/layout-default/layout.component.ts @@ -61,6 +61,7 @@ import { LayoutDefaultOptions } from './types'; }) export class LayoutDefaultComponent implements OnDestroy { static ngAcceptInputType_fetchingStrictly: BooleanInput; + static ngAcceptInputType_fetching: BooleanInput; @ContentChildren(LayoutDefaultHeaderItemComponent, { descendants: false }) headerItems!: QueryList;