feat(module:table): add select all function to column header

close #14

lib/ng-nest/ui/find/find.property.ts

@@ -168,7 +168,7 @@ export class XFindProperty extends XControlValueAccessor<any | any[]> implements
    * @zh_CN 表格行高度，单位 px
    * @en_US Table row height, unit px
    */
-  @Input() @XWithConfig<XNumber>(X_CONFIG_NAME, 42) @XInputNumber() tableRowHeight: XNumber;
+  @Input() @XWithConfig<number>(X_CONFIG_NAME, 42) @XInputNumber() tableRowHeight: number;
   /**
    * @zh_CN 树节点数据
    * @en_US Tree node data

lib/ng-nest/ui/table/examples/en_US/default/checkbox/checkbox.component.html

@@ -0,0 +1,6 @@
+<x-table
+  [columns]="columns"
+  [data]="data"
+  loading
+>
+</x-table>

lib/ng-nest/ui/table/examples/en_US/default/checkbox/checkbox.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { CheckboxService } from './checkbox.service';
+import { XQuery } from '@ng-nest/ui/core';
+import { XTableColumn } from '@ng-nest/ui/table';
+import { delay } from 'rxjs/operators';
+
+@Component({
+  selector: 'ex-checkbox',
+  templateUrl: './checkbox.component.html',
+  providers: [CheckboxService]
+})
+export class ExCheckboxComponent {
+  data = (index: number, size: number, query: XQuery) => this.service.getList(index, size, query).pipe(delay(1000));
+  columns: XTableColumn[] = [
+    { id: 'checked', label: '', rowChecked: true, headChecked: true, type: 'checkbox', width: 60 },
+    { id: 'index', label: 'serial', flex: 0.5, left: 0, type: 'index' },
+    { id: 'name', label: 'user', flex: 1.5, sort: true },
+    { id: 'position', label: 'position', flex: 0.5, sort: true },
+    { id: 'email', label: 'mailbox', flex: 1 },
+    { id: 'phone', label: 'phone', flex: 1 },
+    { id: 'organization', label: 'organization', flex: 1, sort: true }
+  ];
+
+  constructor(private service: CheckboxService) {}
+
+  ngOnInit() {}
+}

lib/ng-nest/ui/table/examples/en_US/default/checkbox/checkbox.service.ts

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import { XRepositoryAbstract, XQuery, XResultList, XGroupItem, XFilter, chunk, groupBy, XSort, XId } from '@ng-nest/ui/core';
+import { Observable } from 'rxjs';
+import { map, orderBy } from 'lodash';
+
+@Injectable()
+export class CheckboxService extends XRepositoryAbstract {
+  organizations = ['Manufacturing Center', 'R&D Center', 'Finance Center', 'Marketing Center', 'Administrative Center'];
+  positions = ['Technician', 'Sales', 'Manager', 'Director', 'Production'];
+  users: User[] = Array.from({ length: 123456 }).map((x, i) => {
+    i++;
+    return {
+      id: i,
+      name: 'name' + i,
+      position: this.positions[Math.floor(Math.random() * 10 + 1) % 5],
+      email: 'email' + i,
+      phone: 'phone' + i,
+      organization: this.organizations[Math.floor(Math.random() * 10 + 1) % 5]
+    };
+  });
+
+  getList(index: number, size: number, query?: XQuery): Observable<XResultList<User | XGroupItem>> {
+    return new Observable((x) => {
+      let data: User[] | XGroupItem[] = [];
+      data = this.setFilter(this.users, query?.filter as XFilter[]);
+      if (query?.group) {
+        data = this.setGroup(data, query.group);
+      }
+      if (query?.sort) {
+        data = this.setSort(data, query.sort);
+      }
+      let chunks = chunk(data, size);
+      if ((index as number) <= chunks.length) {
+        x.next({ total: data.length, list: chunks[index - 1] });
+      } else {
+        x.next({ total: data.length, list: [] });
+      }
+      x.complete();
+    });
+  }
+  get(id: number | string): Observable<User> {
+    return new Observable();
+  }
+  post(entity: User): Observable<User> {
+    return new Observable();
+  }
+  put(entity: User): Observable<User> {
+    return new Observable();
+  }
+  delete(id: number | string): Observable<boolean> {
+    return new Observable();
+  }
+
+  private setFilter(data: User[], filters: XFilter[]): User[] {
+    let result = data;
+    if (filters && filters.length > 0) {
+      filters.forEach((x) => {
+        result = result.filter((y) => y[x.field].indexOf(x.value) >= 0);
+      });
+    }
+    return result;
+  }
+
+  private setGroup(data: User[], group: string): XGroupItem[] {
+    return map(groupBy(data, group), (value, key) => {
+      let groupItem: XGroupItem = { id: key, count: value.length };
+      groupItem[group] = key;
+      return groupItem;
+    });
+  }
+
+  private setSort(data: User[] | XGroupItem[], sort: XSort[]): User[] | XGroupItem[] {
+    return orderBy(
+      data,
+      map(sort, (x) => x.field),
+      map(sort, (x) => x.value) as ('desc' | 'asc')[]
+    ) as User[] | XGroupItem[];
+  }
+}
+
+export interface User extends XId {
+  name?: string;
+  account?: string;
+  password?: string;
+  email?: string;
+  phone?: string;
+  organization?: string;
+  [property: string]: any;
+}

lib/ng-nest/ui/table/examples/en_US/default/checkbox/readme.md

@@ -0,0 +1,7 @@
+---
+order: 8
+label: 'Checkbox'
+---
+
+- Specify the type `type` as `checkbox` in the `column` column configuration
+- Clicking on the current row of `rowChecked` will select/cancel `checkbox`, only one of the columns can be specified -`headChecked` displays all selected `checkboxes` in the current column header

lib/ng-nest/ui/table/examples/en_US/default/default/default.component.ts

@@ -1,47 +1,26 @@
 import { Component } from '@angular/core';
-import { DefaultService, User } from './default.service';
-import { XQuery, XSort } from '@ng-nest/ui/core';
+import { DefaultService } from './default.service';
+import { XQuery } from '@ng-nest/ui/core';
 import { XTableColumn } from '@ng-nest/ui/table';
+import { delay } from 'rxjs/operators';
 
 @Component({
   selector: 'ex-default',
   templateUrl: './default.component.html',
   providers: [DefaultService]
 })
 export class ExDefaultComponent {
-  query: XQuery = {};
-  index = 1;
-  size = 10;
-  total = 0;
-  data: User[] = [];
+  data = (index: number, size: number, query: XQuery) => this.service.getList(index, size, query).pipe(delay(1000));
   columns: XTableColumn[] = [
-    { id: 'index', label: 'serial no', flex: 0.5, left: 0, type: 'index' },
+    { id: 'index', label: 'serial', flex: 0.5, left: 0, type: 'index' },
     { id: 'name', label: 'user', flex: 1.5, sort: true },
     { id: 'position', label: 'position', flex: 0.5, sort: true },
-    { id: 'email', label: 'email', flex: 1 },
+    { id: 'email', label: 'mailbox', flex: 1 },
     { id: 'phone', label: 'phone', flex: 1 },
     { id: 'organization', label: 'organization', flex: 1, sort: true }
   ];
 
   constructor(private service: DefaultService) {}
 
-  ngOnInit() {
-    this.getData();
-  }
-
-  getData() {
-    this.service.getList(this.index, this.size, this.query).subscribe((x) => {
-      [this.data, this.total] = [x.list as User[], Number(x.total)];
-    });
-  }
-
-  indexChange(index: number) {
-    this.index = index;
-    this.getData();
-  }
-
-  sortChange(sort: XSort[]) {
-    this.query.sort = sort;
-    this.getData();
-  }
+  ngOnInit() {}
 }

lib/ng-nest/ui/table/examples/en_US/default/drag-width/drag-width.component.ts

@@ -13,7 +13,7 @@ export class ExBorderedComponent {
   size = 1000;
   data = (index: number, size: number, query: XQuery) => this.service.getList(index, size, query).pipe(delay(2000));
   columns: XTableColumn[] = [
-    { id: 'index', label: 'serial number', width: 100, left: 0, type: 'index' },
+    { id: 'index', label: 'serial', width: 100, left: 0, type: 'index' },
     { id: 'name', label: 'user', width: 200, sort: true, dragWidth: true },
     { id: 'position', label: 'position', width: 300, sort: true, dragWidth: true },
     { id: 'email', label: 'mailbox', width: 300, dragWidth: true },

lib/ng-nest/ui/table/examples/en_US/default/scroll/scroll.component.ts

@@ -13,12 +13,12 @@ export class ExScrollComponent {
   size = 1000;
   data = (index: number, size: number, query: XQuery) => this.service.getList(index, size, query).pipe(delay(2000));
   columns: XTableColumn[] = [
-    { id: 'index', label: '序号', width: 100, left: 0, type: 'index' },
-    { id: 'name', label: '用户', width: 200, sort: true },
-    { id: 'position', label: '职位', width: 300, sort: true },
-    { id: 'email', label: '邮箱', width: 300 },
-    { id: 'phone', label: '电话', width: 300 },
-    { id: 'organization', label: '组织机构', flex: 1, sort: true }
+    { id: 'index', label: 'serial', width: 100, left: 0, type: 'index' },
+    { id: 'name', label: 'user', width: 200, sort: true },
+    { id: 'position', label: 'position', width: 300, sort: true },
+    { id: 'email', label: 'mailbox', width: 300 },
+    { id: 'phone', label: 'phone', width: 300 },
+    { id: 'organization', label: 'organization', flex: 1, sort: true }
   ];
 
   constructor(private service: ScrollService) {}

lib/ng-nest/ui/table/examples/zh_CN/default/checkbox/checkbox.component.html

@@ -0,0 +1 @@
+<x-table [columns]="columns" [data]="data" loading> </x-table>

lib/ng-nest/ui/table/examples/zh_CN/default/checkbox/checkbox.component.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { CheckboxService } from './checkbox.service';
+import { XQuery } from '@ng-nest/ui/core';
+import { XTableColumn } from '@ng-nest/ui/table';
+import { delay } from 'rxjs/operators';
+
+@Component({
+  selector: 'ex-checkbox',
+  templateUrl: './checkbox.component.html',
+  providers: [CheckboxService]
+})
+export class ExDefaultComponent {
+  data = (index: number, size: number, query: XQuery) => this.service.getList(index, size, query).pipe(delay(1000));
+  columns: XTableColumn[] = [
+    { id: 'checked', label: '', rowChecked: true, headChecked: true, type: 'checkbox', width: 60 },
+    { id: 'index', label: '序号', flex: 0.5, left: 0, type: 'index' },
+    { id: 'name', label: '用户', flex: 1.5, sort: true },
+    { id: 'position', label: '职位', flex: 0.5, sort: true },
+    { id: 'email', label: '邮箱', flex: 1 },
+    { id: 'phone', label: '电话', flex: 1 },
+    { id: 'organization', label: '组织机构', flex: 1, sort: true }
+  ];
+
+  constructor(private service: CheckboxService) {}
+
+  ngOnInit() {}
+}

lib/ng-nest/ui/table/examples/zh_CN/default/checkbox/checkbox.service.ts

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import { XRepositoryAbstract, XQuery, XResultList, XGroupItem, XFilter, chunk, groupBy, XSort, XId } from '@ng-nest/ui/core';
+import { Observable } from 'rxjs';
+import { map, orderBy } from 'lodash';
+
+@Injectable()
+export class CheckboxService extends XRepositoryAbstract {
+  organizations = ['制造中心', '研发中心', '财务中心', '营销中心', '行政中心'];
+  positions = ['技术员', '销售', '经理', '总监', '生产员'];
+  users: User[] = Array.from({ length: 123456 }).map((x, i) => {
+    i++;
+    return {
+      id: i,
+      name: '姓名' + i,
+      position: this.positions[Math.floor(Math.random() * 10 + 1) % 5],
+      email: '邮箱' + i,
+      phone: '手机' + i,
+      organization: this.organizations[Math.floor(Math.random() * 10 + 1) % 5]
+    };
+  });
+
+  getList(index: number, size: number, query?: XQuery): Observable<XResultList<User | XGroupItem>> {
+    return new Observable((x) => {
+      let data: User[] | XGroupItem[] = [];
+      data = this.setFilter(this.users, query?.filter as XFilter[]);
+      if (query?.group) {
+        data = this.setGroup(data, query.group);
+      }
+      if (query?.sort) {
+        data = this.setSort(data, query.sort);
+      }
+      let chunks = chunk(data, size);
+      if ((index as number) <= chunks.length) {
+        x.next({ total: data.length, list: chunks[index - 1] });
+      } else {
+        x.next({ total: data.length, list: [] });
+      }
+      x.complete();
+    });
+  }
+  get(id: number | string): Observable<User> {
+    return new Observable();
+  }
+  post(entity: User): Observable<User> {
+    return new Observable();
+  }
+  put(entity: User): Observable<User> {
+    return new Observable();
+  }
+  delete(id: number | string): Observable<boolean> {
+    return new Observable();
+  }
+
+  private setFilter(data: User[], filters: XFilter[]): User[] {
+    let result = data;
+    if (filters && filters.length > 0) {
+      filters.forEach((x) => {
+        result = result.filter((y) => y[x.field].indexOf(x.value) >= 0);
+      });
+    }
+    return result;
+  }
+
+  private setGroup(data: User[], group: string): XGroupItem[] {
+    return map(groupBy(data, group), (value, key) => {
+      let groupItem: XGroupItem = { id: key, count: value.length };
+      groupItem[group] = key;
+      return groupItem;
+    });
+  }
+
+  private setSort(data: User[] | XGroupItem[], sort: XSort[]): User[] | XGroupItem[] {
+    return orderBy(
+      data,
+      map(sort, (x) => x.field),
+      map(sort, (x) => x.value) as ('desc' | 'asc')[]
+    ) as User[] | XGroupItem[];
+  }
+}
+
+export interface User extends XId {
+  name?: string;
+  account?: string;
+  password?: string;
+  email?: string;
+  phone?: string;
+  organization?: string;
+  [property: string]: any;
+}

lib/ng-nest/ui/table/examples/zh_CN/default/checkbox/readme.md

@@ -0,0 +1,8 @@
+---
+order: 8
+label: '多选框'
+---
+
+- 在 `column` 列配置中指定类型 `type` 为 `checkbox`
+- `rowChecked` 当前行点击会选中/取消 `checkbox`，只能指定其中的一列
+- `headChecked` 当前列头中显示全选的 `checkbox`

lib/ng-nest/ui/table/examples/zh_CN/default/default/default.component.html

@@ -1,10 +1 @@
-<x-table
-  [columns]="columns"
-  [data]="data"
-  [(index)]="index"
-  [(size)]="size"
-  [total]="total"
-  (indexChange)="indexChange($event)"
-  (sortChange)="sortChange($event)"
->
-</x-table>
+<x-table [columns]="columns" [data]="data" loading> </x-table>