feat(module:st): support response body is an array type (#327)

_mock/user.ts

@@ -1,4 +1,4 @@
-import { MockStatusError, MockRequest } from '@delon/mock';
+import { MockRequest, MockStatusError } from '@delon/mock';
 // import * as Mock from 'mockjs';
 
 const r = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
@@ -11,7 +11,9 @@ export const USERS = {
  list: [],
  total,
  };
- for (let i = 0; i < +req.queryString.ps; i++) {
+ const onlyList = req.queryString!.field === 'list';
+ const num = onlyList ? total : +req.queryString.ps;
+ for (let i = 0; i < num; i++) {
  res.list.push({
  id: i + 1,
  picture: {
@@ -26,10 +28,10 @@ export const USERS = {
  email: `aaa${r(1, 10)}@qq.com`,
  phone: `phone-${r(1000, 100000)}`,
  price: r(10, 10000000),
- registered: new Date()
+ registered: new Date(),
  });
  }
- return res;
+ return onlyList ? res.list : res;
  },
  'GET /user/check/': () => false,
  'GET /user/check/:name': (req: MockRequest) => req.params.name === 'cipchk',

packages/abc/table/demo/basic.md

@@ -23,7 +23,7 @@ import { STColumn } from '@delon/abc';
  <st [data]="url" [req]="{params: params}" [columns]="columns"></st>`,
 })
 export class DemoComponent {
- url = `/users?total=100`;
+ url = `/users?total=2&field=list`;
  params = { a: 1, b: 2 };
  columns: STColumn[] = [
  { title: '编号', index: 'id' },

packages/abc/table/index.en-US.md

@@ -22,6 +22,7 @@ The value is URL.
 - Resolve backend data format through `res.reName` mapping data
 - Use `res.process` to optimize data before rendering table
 - Use `page.zeroIndexed` to adjust the http request when `pi` parameter follows the `0` base index, default is `1` base index
+- Automatically cancel paging when the response body value is an array type
 - Use `_HttpClient` send request, so applies to [AlainThemeConfig](/theme/http#AlainThemeConfig) configuration
 
 ### Static

packages/abc/table/index.zh-CN.md

@@ -22,6 +22,7 @@ config: STConfig
 - 通过 `res.reName` 重置数据 `key` 而无须担心后端数据格式是否满足 `st` 需求
 - 通过 `res.process` 可以对表格渲染前对数据进一步优化
 - 通过 `page.zeroIndexed` 可以调整 http 请求时 `pi` 参数是否遵循 0 基索引，默认情况下为 1 基索引
+- 若返回体的值是数组类型，则强制不分页
 - 使用 `_HttpClient` 发起请求，因此满足 [AlainThemeConfig](/theme/http#AlainThemeConfig) 的配置也适用
 
 ### 静态数据

packages/abc/table/table-data-source.ts

@@ -38,6 +38,8 @@ export interface STDataSourceResult {
  pageShow?: boolean;
  /** 新 `pi`，若返回 `undefined` 表示用户受控 */
  pi?: number;
+ /** 新 `ps`，若返回 `undefined` 表示用户受控 */
+ ps?: number;
  /** 新 `total`，若返回 `undefined` 表示用户受控 */
  total?: number;
  /** 数据 */
@@ -61,24 +63,32 @@ export class STDataSource {
  let isRemote = false;
  const { data, res, total, page, pi, ps, columns } = options;
  let retTotal: number;
+ let retPs: number;
  let retList: STData[];
  let retPi: number;
+ let showPage = page.show;
 
  if (typeof data === 'string') {
  isRemote = true;
  data$ = this.getByHttp(data, options).pipe(
  map((result) => {
- // list
- let ret = deepGet(result, res.reName.list as string[], []);
- if (ret == null || !Array.isArray(ret)) {
- ret = [];
+ let ret: STData[];
+ if (Array.isArray(result)) {
+ ret = result;
+ retTotal = ret.length;
+ retPs = retTotal;
+ showPage = false;
+ } else {
+ // list
+ ret = deepGet(result, res.reName.list as string[], []);
+ if (ret == null || !Array.isArray(ret)) {
+ ret = [];
+ }
+ // total
+ const resultTotal = res.reName.total && deepGet(result, res.reName.total as string[], null);
+ retTotal = resultTotal == null ? total || 0 : +resultTotal;
  }
- // total
- const resultTotal =
- res.reName.total &&
- deepGet(result, res.reName.total as string[], null);
- retTotal = resultTotal == null ? total || 0 : +resultTotal;
- return ret as STData[];
+ return ret;
  }),
  catchError(err => {
  rejectPromise(err);
@@ -152,11 +162,14 @@ export class STDataSource {
  );
 
  data$.forEach((result: STData[]) => (retList = result)).then(() => {
+ const realTotal = retTotal || total;
+ const realPs = retPs || ps;
  resolvePromise({
  pi: retPi,
+ ps: retPs,
  total: retTotal,
  list: retList,
- pageShow: typeof page.show === 'undefined' ? (retTotal || total) > ps : page.show,
+ pageShow: typeof showPage === 'undefined' ? realTotal > realPs : showPage,
  });
  });
  });

packages/abc/table/table.component.ts

@@ -233,6 +233,9 @@ export class STComponent implements AfterViewInit, OnChanges, OnDestroy {
  if (typeof result.pi !== 'undefined') {
  this.pi = result.pi;
  }
+ if (typeof result.ps !== 'undefined') {
+ this.ps = result.ps;
+ }
  if (typeof result.total !== 'undefined') {
  this.total = result.total;
  }

packages/abc/table/test/table-data-source.spec.ts

@@ -385,6 +385,19 @@ describe('abc: table: data-souce', () => {
  done();
  });
  });
+ it('should be support array data', (done: () => void) => {
+ spyOn(http, 'request').and.callFake(
+ (method: string, url: string, opt: any) => {
+ return of(genData(DEFAULT.ps));
+ },
+ );
+ srv.process(options).then(res => {
+ expect(res.total).toBe(DEFAULT.ps);
+ expect(res.list.length).toBe(DEFAULT.ps);
+ expect(res.ps).toBe(res.total);
+ done();
+ });
+ });
  });
  describe('[sort]', () => {
  let resParams: any;

packages/abc/table/test/table.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { Component, DebugElement, Injector, Type, ViewChild } from '@angular/core';
 import {
  discardPeriodicTasks,
@@ -825,7 +825,11 @@ describe('abc: table', () => {
  });
  });
  });
- describe('#data', () => {
+ describe('[data source]', () => {
+ let httpBed: HttpTestingController;
+ beforeEach(() => {
+ httpBed = injector.get(HttpTestingController);
+ });
  it('support null data', (done: () => void) => {
  context.data = null;
  fixture.detectChanges();
@@ -842,6 +846,26 @@ describe('abc: table', () => {
  done();
  });
  });
+ it('should only restore data', () => {
+ // tslint:disable-next-line:no-string-literal
+ const dataSource: STDataSource = comp['dataSource'];
+ spyOn(dataSource, 'process').and.callFake(() => Promise.resolve({}));
+ fixture.detectChanges();
+ expect(comp.ps).toBe(PS);
+ });
+ it('should be automatically cancel paging when the returned body value is an array type', (done) => {
+ context.pi = 1;
+ context.ps = 2;
+ context.data = '/mock';
+ fixture.detectChanges();
+ httpBed.expectOne(req => true).flush([ {}, {}, {} ]);
+ fixture.whenStable().then(() => {
+ expect(comp.pi).toBe(1);
+ expect(comp.ps).toBe(3);
+ expect(comp._isPagination).toBe(false);
+ done();
+ });
+ });
  });
  describe('#req', () => {
  it('should be keep reName valid', () => {
@@ -1037,15 +1061,6 @@ describe('abc: table', () => {
  });
  });
  });
- describe('[data source]', () => {
- it('should only restore data', () => {
- // tslint:disable-next-line:no-string-literal
- const dataSource: STDataSource = comp['dataSource'];
- spyOn(dataSource, 'process').and.callFake(() => Promise.resolve({}));
- fixture.detectChanges();
- expect(comp.ps).toBe(PS);
- });
- });
  describe('[filter]', () => {
  describe('in local-data', () => {
  let filter: STColumnFilter;

src/app/shared/shared.module.ts

@@ -1,35 +1,33 @@
-import { NgModule, ModuleWithProviders } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { HttpClientModule } from '@angular/common/http';
 import { RouterModule } from '@angular/router';
 
-import { AlainThemeModule } from '@delon/theme';
 import { DelonABCModule } from '@delon/abc';
 import { DelonACLModule } from '@delon/acl';
-import { DelonFormModule } from '@delon/form';
-import { DelonChartModule } from '@delon/chart';
-import { DelonMockModule } from '@delon/mock';
 import { DelonCacheModule } from '@delon/cache';
+import { DelonChartModule } from '@delon/chart';
+import { DelonFormModule } from '@delon/form';
+import { AlainThemeModule } from '@delon/theme';
 
-import { NgZorroAntdModule } from 'ng-zorro-antd';
 import { TranslateModule } from '@ngx-translate/core';
-import { HighlightJsModule } from 'ngx-highlight-js';
 import { GithubButtonModule } from 'ng-github-button';
+import { NgZorroAntdModule } from 'ng-zorro-antd';
+import { HighlightJsModule } from 'ngx-highlight-js';
+import { SimplemdeModule } from 'ngx-simplemde';
 import { NgxTinymceModule } from 'ngx-tinymce';
 import { UEditorModule } from 'ngx-ueditor';
-import { SimplemdeModule } from 'ngx-simplemde';
 
-import { MainMenuComponent } from './components/main-menu/main-menu.component';
-import { ContentComponent } from './components/content/content.component';
-import { ConfigButtonComponent } from './components/config-button/config-button.component';
-import { EditButtonComponent } from './components/edit-button/edit-button.component';
-import { DocsComponent } from './components/docs/docs.component';
 import { CodeBoxComponent } from './components/code-box/code-box.component';
-import { DemoModalComponent } from './components/dialog/modal.component';
+import { ConfigButtonComponent } from './components/config-button/config-button.component';
+import { ContentComponent } from './components/content/content.component';
 import { DemoDrawerComponent } from './components/dialog/drawer.component';
-import { RouteTransferDirective } from './components/route-transfer/route-transfer.directive';
+import { DemoModalComponent } from './components/dialog/modal.component';
+import { DocsComponent } from './components/docs/docs.component';
+import { EditButtonComponent } from './components/edit-button/edit-button.component';
 import { IconComponent } from './components/icon/icon.component';
+import { MainMenuComponent } from './components/main-menu/main-menu.component';
+import { RouteTransferDirective } from './components/route-transfer/route-transfer.directive';
 
 const DIALOG_COMPONENTS = [
  DemoModalComponent,
@@ -45,7 +43,7 @@ const COMPONENTS = [
  DocsComponent,
  CodeBoxComponent,
  RouteTransferDirective,
- ...DIALOG_COMPONENTS
+ ...DIALOG_COMPONENTS,
 ];
 
 const THIRDS = [
@@ -70,7 +68,6 @@ const THIRDS = [
  DelonFormModule,
  DelonChartModule,
  DelonCacheModule,
- DelonMockModule.forChild(),
  ...THIRDS,
  ],
  declarations: COMPONENTS,

src/styles.less

@@ -1,8 +1,10 @@
 // alain
-@import '../packages/theme/styles/index';
-@import '../packages/theme/styles/layout/default/index';
-@import '../packages/abc/index';
-@import '../packages/chart/index';
+@import '../packages/theme/styles/index.less';
+@import '../packages/theme/styles/layout/default/index.less';
+@import '../packages/abc/index.less';
+@import '../packages/chart/index.less';
 
 // docs
 @import './app/styles/index.less';
+
+.scrollbar-mixin(~'.ant-affix');