Skip to content

Commit

Permalink
refactor(abc:st): use Observable instead of Promise of load
Browse files Browse the repository at this point in the history 
- close ng-alain/ng-alain#2233
  • Loading branch information
@cipchk
cipchk committed Aug 4, 2023
1 parent d815dbd commit 16c0db8
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 129 deletions.
6 changes: 3 additions & 3 deletions packages/abc/st/st-data-source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ export interface STDataSourceOptions {
pi: number;
ps: number;
paginator: boolean;
data: string | STData[] | Observable<STData[]>;
data?: string | STData[] | Observable<STData[]>;
total: number;
req: STReq;
res: STRes;
Expand Down Expand Up @@ -127,8 +127,8 @@ export class STDataSource {
return deepCopy(ret);
})
);
} else if (Array.isArray(data)) {
data$ = of(data);
} else if (data == null || Array.isArray(data)) {
data$ = of(data ?? []);
} else {
// a cold observable
data$ = data;
Expand Down
2 changes: 1 addition & 1 deletion packages/abc/st/st-td.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
#render
[ngTemplateOutlet]="c.__render!"
[ngTemplateOutletContext]="{ $implicit: i, index: index, column: c }"
></ng-template>
/>
<ng-container *ngIf="!c.__render; else render">
<ng-container [ngSwitch]="c.type">
<label
Expand Down
167 changes: 72 additions & 95 deletions packages/abc/st/st.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import {
Inject,
Input,
OnChanges,
OnDestroy,
Optional,
Output,
SimpleChange,
Expand All @@ -25,7 +24,7 @@ import {
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { Router } from '@angular/router';
import { from, isObservable, Observable, of, Subscription, filter } from 'rxjs';
import { from, isObservable, Observable, of, filter, catchError, map, finalize, throwError } from 'rxjs';

import {
AlainI18NService,
Expand Down Expand Up @@ -97,7 +96,7 @@ import { _STColumn, _STDataValue, _STHeader, _STTdNotify, _STTdNotifyType } from
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
})
export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
export class STComponent implements AfterViewInit, OnChanges {
static ngAcceptInputType_ps: NumberInput;
static ngAcceptInputType_pi: NumberInput;
static ngAcceptInputType_total: NumberInput;
Expand All @@ -113,8 +112,6 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
static ngAcceptInputType_virtualMinBufferPx: NumberInput;

private destroy$ = inject(DestroyRef);
private isDestroy = false;
private data$?: Subscription;
private totalTpl = ``;
cog!: AlainSTConfig;
private _req!: STReq;
Expand All @@ -134,7 +131,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
_headers: _STHeader[][] = [];
_columns: _STColumn[] = [];
contextmenuList: STContextmenuItem[] = [];
@ViewChild('table') readonly orgTable!: NzTableComponent<STData>;
@ViewChild('table') readonly orgTable?: NzTableComponent<STData>;
@ViewChild('contextmenuTpl') readonly contextmenuTpl!: NzDropdownMenuComponent;

@Input()
Expand Down Expand Up @@ -166,7 +163,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
this._page = { ...this.cog.page, ...value };
this.updateTotalTpl();
}
@Input() data!: string | STData[] | Observable<STData[]>;
@Input() data?: string | STData[] | Observable<STData[]>;
@Input() columns?: STColumn[] | null;
@Input() contextmenu?: STContextmenuFn | null;
@Input() @InputNumber() ps = 10;
Expand Down Expand Up @@ -333,8 +330,8 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
* - 本地数据：包含排序、过滤后不分页数据
* - 远程数据：不传递 `pi`、`ps` 两个参数
*/
get filteredData(): Promise<STData[]> {
return this.loadData({ paginator: false } as NzSafeAny).then(res => res.list);
get filteredData(): Observable<STData[]> {
return this.loadData({ paginator: false } as unknown as STDataSourceOptions).pipe(map(res => res.list));
}

private updateTotalTpl(): void {
Expand All @@ -355,78 +352,62 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
}
}

private loadData(options?: STDataSourceOptions): Promise<STDataSourceResult> {
private loadData(options?: STDataSourceOptions): Observable<STDataSourceResult> {
const { pi, ps, data, req, res, page, total, singleSort, multiSort, rowClassName } = this;
return new Promise((resolvePromise, rejectPromise) => {
if (this.data$) {
this.data$.unsubscribe();
}

this.data$ = this.dataSource
.process({
pi,
ps,
total,
data,
req,
res,
page,
columns: this._columns,
singleSort,
multiSort,
rowClassName,
paginator: true,
customRequest: this.customRequest || this.cog.customRequest,
...options
})
.pipe(takeUntilDestroyed(this.destroy$))
.subscribe({
next: result => resolvePromise(result),
error: error => {
if (typeof ngDevMode === 'undefined' || ngDevMode) {
console.warn('st.loadDate', error);
}
rejectPromise(error);
}
});
});
return this.dataSource
.process({
pi,
ps,
total,
data,
req,
res,
page,
columns: this._columns,
singleSort,
multiSort,
rowClassName,
paginator: true,
customRequest: this.customRequest || this.cog.customRequest,
...options
})
.pipe(takeUntilDestroyed(this.destroy$));
}

private async loadPageData(): Promise<this> {
private loadPageData(): Observable<this> {
this.setLoading(true);
try {
const result = await this.loadData();
this.setLoading(false);
const undefinedString = 'undefined';
if (typeof result.pi !== undefinedString) {
this.pi = result.pi;
}
if (typeof result.ps !== undefinedString) {
this.ps = result.ps;
}
if (typeof result.total !== undefinedString) {
this.total = result.total;
}
if (typeof result.pageShow !== undefinedString) {
this._isPagination = result.pageShow;
}
this._data = result.list;
this._statistical = result.statistical as STStatisticalResults;
this.changeEmit('loaded', result.list);
// Should be re-render in next tike when using virtual scroll
// https://github.com/ng-alain/ng-alain/issues/1836
if (this.cdkVirtualScrollViewport) {
Promise.resolve().then(() => this.cdkVirtualScrollViewport.checkViewportSize());
}
return this._refCheck();
} catch (error) {
this.setLoading(false);
if (!this.isDestroy) {
this.cdr.detectChanges();
return this.loadData().pipe(
finalize(() => this.setLoading(false)),
catchError(error => {
this.error.emit({ type: 'req', error });
}
return this;
}
return throwError(() => error);
}),
map(result => {
const undefinedString = 'undefined';
if (typeof result.pi !== undefinedString) {
this.pi = result.pi;
}
if (typeof result.ps !== undefinedString) {
this.ps = result.ps;
}
if (typeof result.total !== undefinedString) {
this.total = result.total;
}
if (typeof result.pageShow !== undefinedString) {
this._isPagination = result.pageShow;
}
this._data = result.list ?? [];
this._statistical = result.statistical as STStatisticalResults;
this.changeEmit('loaded', result.list);
// Should be re-render in next tike when using virtual scroll
// https://github.com/ng-alain/ng-alain/issues/1836
if (this.cdkVirtualScrollViewport != null) {
Promise.resolve().then(() => this.cdkVirtualScrollViewport?.checkViewportSize());
}
this._refCheck();
return this;
})
);
}

/** 清空所有数据 */
Expand Down Expand Up @@ -502,7 +483,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {

_change(type: 'pi' | 'ps', options?: STLoadOptions): void {
if (type === 'pi' || (type === 'ps' && this.pi <= Math.ceil(this.total / this.ps))) {
this.loadPageData().then(() => this._toTop(options?.toTop));
this.loadPageData().subscribe(() => this._toTop(options?.toTop));
}

this.changeEmit(type);
Expand Down Expand Up @@ -663,13 +644,14 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
this._columns.forEach((item, index) => (item._sort.default = index === idx ? value : null));
}
this.cdr.detectChanges();
this.loadPageData();
const res = {
value,
map: this.dataSource.getReqSortMap(this.singleSort, this.multiSort, this._columns),
column: col
};
this.changeEmit('sort', res);
this.loadPageData().subscribe(() => {
const res = {
value,
map: this.dataSource.getReqSortMap(this.singleSort, this.multiSort, this._columns),
column: col
};
this.changeEmit('sort', res);
});
}

clearSort(): this {
Expand All @@ -688,8 +670,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
// 过滤表示一种数据的变化应重置页码为 `1`
this.pi = 1;
this.columnSource.updateDefault(col.filter!);
this.loadPageData();
this.changeEmit('filter', col);
this.loadPageData().subscribe(() => this.changeEmit('filter', col));
}

handleFilterNotify(value?: unknown): void {
Expand Down Expand Up @@ -833,11 +814,11 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
}
// #endregion

get cdkVirtualScrollViewport(): CdkVirtualScrollViewport {
return this.orgTable.cdkVirtualScrollViewport!;
get cdkVirtualScrollViewport(): CdkVirtualScrollViewport | undefined {
return this.orgTable?.cdkVirtualScrollViewport;
}

resetColumns(options?: STResetColumnsOption): Promise<this> {
resetColumns(options?: STResetColumnsOption): Observable<this> {
options = { emitReload: true, preClearData: false, ...options };
if (typeof options.columns !== 'undefined') {
this.columns = options.columns;
Expand All @@ -860,7 +841,7 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
return this.loadPageData();
} else {
this.cd();
return Promise.resolve(this);
return of(this);
}
}

Expand Down Expand Up @@ -914,16 +895,12 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
}
const changeData = changes.data;
if (changeData && changeData.currentValue && !(this.req.lazyLoad && changeData.firstChange)) {
this.loadPageData();
this.loadPageData().subscribe();
}
if (changes.loading) {
this._loading = changes.loading.currentValue;
}
}

ngOnDestroy(): void {
this.isDestroy = true;
}
}

@Component({
Expand Down
6 changes: 4 additions & 2 deletions packages/abc/st/test/base.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
STColumnTitle,
STContextmenuFn,
STCustomRequestOptions,
STError,
STMultiSort,
STPage,
STReq,
Expand Down Expand Up @@ -138,6 +139,7 @@ export class PageObject<T extends TestComponent> {
readonly comp: STComponent;
readonly i18nSrv: AlainI18NService;
readonly registerWidget: STWidgetRegistry;
spyErrorData?: STError;

constructor(minColumn: boolean = false, type: Type<T>) {
this.registerWidget = TestBed.inject(STWidgetRegistry);
Expand All @@ -153,7 +155,7 @@ export class PageObject<T extends TestComponent> {
this.context.columns = [{ title: '', index: 'id' }];
}

spyOn(this.context as NzSafeAny, 'error');
spyOn(this.context as NzSafeAny, 'error').and.callFake((res: STError) => (this.spyErrorData = res));
this.changeSpy = spyOn(this.context as NzSafeAny, 'change').and.callFake(
((e: NzSafeAny) => (this._changeData = e)) as NzSafeAny
);
Expand Down Expand Up @@ -419,7 +421,7 @@ export class PageObject<T extends TestComponent> {
[contextmenu]="contextmenu"
[customRequest]="customRequest"
(change)="change($event)"
(error)="error()"
(error)="error($event)"
/>
<ng-template #tpl let-handle="handle">
<span>In tpl</span>
Expand Down
3 changes: 1 addition & 2 deletions packages/abc/st/test/st-filter.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,9 @@ describe('abc: st-filter', () => {
filter = firstCol.filter!;
});
it('should be filter', () => {
expect(context.change).not.toHaveBeenCalled();
const filterComp = dl.query(By.directive(STFilterComponent)).context as STFilterComponent;
filterComp.confirm();
expect(context.change).toHaveBeenCalled();
expect(page._changeData?.type).toBe('filter');
});
it('should be clean', () => {
const m = filter.menus![0];
Expand Down
Loading

0 comments on commit 16c0db8

Please sign in to comment.