Skip to content

Commit

Permalink
feat(module:st): add no type (#261)
Browse files Browse the repository at this point in the history
  • Loading branch information
cipchk committed Nov 6, 2018
1 parent c2ae65f commit 8fc29ce
Show file tree
Hide file tree
Showing 10 changed files with 71 additions and 26 deletions.
8 changes: 4 additions & 4 deletions packages/abc/table/demo/type.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ title:

## zh-CN

支持十种不同列类型:多选、单选、徽标、标签、图片、数字、货币、日期、布尔徽章。也可以使用自定义列完成更复杂渲染。
支持十种不同列类型:行号、多选、单选、徽标、标签、图片、数字、货币、日期、布尔徽章。也可以使用自定义列完成更复杂渲染。

## en-US

Support for ten different column types: checkbox, radio, badge, tag, image, number, currency, date, boolean badge.
Support for ten different column types: no, checkbox, radio, badge, tag, image, number, currency, date, boolean badge.

```ts
import { Component } from '@angular/core';
Expand Down Expand Up @@ -43,9 +43,9 @@ const r = (min: number, max: number) => Math.floor(Math.random() * (max - min +
export class DemoComponent {
users: any[] = [];
columns: STColumn[] = [
{ title: '编号', index: 'id' },
{ title: '行号', type: 'no' },
{ title: '姓名', index: 'name' },
{ title: '年龄', index: 'age' },
{ title: '年龄', index: 'age', type: 'number' },
{ title: 'tag', index: 'tag', type: 'tag', tag: TAG },
{ title: 'badge', index: 'badge', type: 'badge', badge: BADGE },
{ title: 'yn', index: 'yn', type: 'yn' },
Expand Down
2 changes: 1 addition & 1 deletion packages/abc/table/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ Property | Description | Type | Default
-------- | ----------- | ---- | -------
`[title]` | Name of this column | `string` | -
`[i18n]` | I18n key of this column | `string` | -
`[type]` | `checkbox` selection, `radio` selection, `link` Link that triggers `click`, `img` Align to the center, `number` Align to the right, `currency` Align to the right, `date` Align to the center, `badge` [Nz-Badge](https://ng.ant.design/components/badge/en), `tag` [Nz-Tag](https://ng.ant.design/components/tag/en), `yn` Make boolean as [badge](/theme/yn) | `string` | -
`[type]` | `no` Rows number<br>`checkbox` selection<br>`radio` selection<br>`link` Link that triggers `click`<br>`img` Align to the center<br>`number` Align to the right<br>`currency` Align to the right<br>`date` Align to the center<br>`badge` [Nz-Badge](https://ng.ant.design/components/badge/en)<br>`tag` [Nz-Tag](https://ng.ant.design/components/tag/en)<br>`yn` Make boolean as [badge](/theme/yn) | `string` | -
`[index]` | Display field of the data record, could be set like `a.b.c` | `string, string[]` | -
`[render]` | Custom render template ID | `string` | -
`[renderTitle]` | Title custom render template ID | `string` | -
Expand Down
3 changes: 2 additions & 1 deletion packages/abc/table/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ class TestComponent {
----|------|-----|------
`[title]` | 列名 | `string` | -
`[i18n]` | 列名i18n | `string` | -
`[type]` | `checkbox` 多选`radio` 单选`link` 链接,可触发 `click``img` 图像且居中`number` 数字且居右`currency` 货币且居右`date` 日期格式且居中`badge` [徽标](https://ng.ant.design/components/badge/zh)`tag` [标签](https://ng.ant.design/components/tag/zh)`yn``boolean`类型徽章化 [document](/theme/yn) | `string` | -
`[type]` | `no` 行号<br>`checkbox` 多选<br>`radio` 单选<br>`link` 链接,可触发 `click`<br>`img` 图像且居中<br>`number` 数字且居右<br>`currency` 货币且居右<br>`date` 日期格式且居中<br>`badge` [徽标](https://ng.ant.design/components/badge/zh)<br>`tag` [标签](https://ng.ant.design/components/tag/zh)<br>`yn``boolean`类型徽章化 [document](/theme/yn) | `string` | -
`[index]` | 列数据在数据项中对应的 key,支持 `a.b.c` 的嵌套写法 | `string, string[]` | -
`[render]` | 自定义渲染ID | `string` | -
`[renderTitle]` | 标题自定义渲染ID | `string` | -
Expand All @@ -222,6 +222,7 @@ class TestComponent {
`[click]` | 链接回调 | `(record: any, instance?: STComponent) => void` | -
`[badge]` | 徽标配置项 | `STColumnBadge` | -
`[tag]` | 徽标配置项 | `STColumnTag` | -
`[noIndex]` | 行号索引开始值 | `STColumnTag` | `1`

### STColumnSort

Expand Down
5 changes: 5 additions & 0 deletions packages/abc/table/table-column-source.ts
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@ export class STColumnSource {
if (!list || list.length === 0)
throw new Error(`[st]: the columns property muse be define!`);

const { noIndex } = this.cog;
let checkboxCount = 0;
let radioCount = 0;
const columns: STColumn[] = [];
Expand All @@ -246,6 +247,10 @@ export class STColumnSource {
if (item.i18n && this.i18nSrv) {
item.title = this.i18nSrv.fanyi(item.i18n);
}
// no
if (item.type === 'no') {
item.noIndex = item.noIndex == null ? noIndex : item.noIndex;
}
// checkbox
if (item.selections == null) {
item.selections = [];
Expand Down
9 changes: 6 additions & 3 deletions packages/abc/table/table-data-source.ts
Original file line number Diff line number Diff line change
Expand Up @@ -137,8 +137,8 @@ export class STDataSource {
// data accelerator
data$ = data$.pipe(
map(result => {
for (const i of result) {
i._values = columns.map(c => this.get(i, c));
for (let i = 0, len = result.length; i < len; i++) {
result[i]._values = columns.map(c => this.get(result[i], c, i));
}
return result;
}),
Expand All @@ -158,7 +158,7 @@ export class STDataSource {
});
}

private get(item: any, col: STColumn) {
private get(item: any, col: STColumn, idx: number) {
if (col.format) {
const formatRes = col.format(item, col) as string;
if (~formatRes.indexOf('<')) {
Expand All @@ -171,6 +171,9 @@ export class STDataSource {

let ret = value;
switch (col.type) {
case 'no':
ret = col.noIndex + idx;
break;
case 'img':
ret = value ? `<img src="${value}" class="img">` : '';
break;
Expand Down
22 changes: 6 additions & 16 deletions packages/abc/table/table.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -102,22 +102,12 @@
<span class="ant-table-rep__title" [innerHTML]="c.title"></span>
<ng-template #render [ngTemplateOutlet]="c.__render" [ngTemplateOutletContext]="{$implicit: i, index: index, column: c }"></ng-template>
<ng-container *ngIf="!c.__render; else render">
<ng-container *ngIf="c.index" [ngSwitch]="c.type">
<ng-container *ngSwitchCase="'checkbox'">
<label nz-checkbox [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_checkSelection(i, $event)"></label>
</ng-container>
<ng-container *ngSwitchCase="'radio'">
<label nz-radio [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_refRadio($event, i)"></label>
</ng-container>
<ng-container *ngSwitchCase="'link'">
<a (click)="_click($event, i, c)" [innerHTML]="i._values[cIdx]"></a>
</ng-container>
<ng-container *ngSwitchCase="'tag'">
<nz-tag [nzColor]="c.tag[i._values[cIdx]].color">{{c.tag[i._values[cIdx]].text || i._values[cIdx]}}</nz-tag>
</ng-container>
<ng-container *ngSwitchCase="'badge'">
<nz-badge [nzStatus]="c.badge[i._values[cIdx]].color" [nzText]="c.badge[i._values[cIdx]].text || i._values[cIdx]"></nz-badge>
</ng-container>
<ng-container [ngSwitch]="c.type">
<label *ngSwitchCase="'checkbox'" nz-checkbox [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_checkSelection(i, $event)"></label>
<label *ngSwitchCase="'radio'" nz-radio [nzDisabled]="i.disabled" [ngModel]="i.checked" (ngModelChange)="_refRadio($event, i)"></label>
<a *ngSwitchCase="'link'" (click)="_click($event, i, c)" [innerHTML]="i._values[cIdx]"></a>
<nz-tag *ngSwitchCase="'tag'" [nzColor]="c.tag[i._values[cIdx]].color">{{c.tag[i._values[cIdx]].text || i._values[cIdx]}}</nz-tag>
<nz-badge *ngSwitchCase="'badge'" [nzStatus]="c.badge[i._values[cIdx]].color" [nzText]="c.badge[i._values[cIdx]].text || i._values[cIdx]"></nz-badge>
<span *ngSwitchDefault [innerHTML]="i._values[cIdx]"></span>
</ng-container>
<ng-container *ngFor="let btn of _validBtns(i, c); let last=last">
Expand Down
5 changes: 5 additions & 0 deletions packages/abc/table/table.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -102,4 +102,9 @@ export class STConfig {
theme: 'outline',
spin: false,
};
/**
* 行号索引,默认:`1`
* - 计算规则为:`index + noIndex`
*/
noIndex? = 1;
}
9 changes: 8 additions & 1 deletion packages/abc/table/table.interfaces.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export interface STColumn {
index?: string | string[];
/**
* 类型
* - `no` 行号,计算规则:`index + noIndex`
* - `checkbox` 多选
* - `radio` 单选
* - `link` 链接,务必指定 `click`
Expand All @@ -159,7 +160,8 @@ export interface STColumn {
| 'currency'
| 'number'
| 'date'
| 'yn';
| 'yn'
| 'no';
/**
* 链接回调,若返回一个字符串表示导航URL会自动触发 `router.navigateByUrl`
*/
Expand Down Expand Up @@ -255,6 +257,11 @@ export interface STColumn {
* 标签配置项
*/
tag?: STColumnTag;
/**
* 行号索引,默认:`1`
* - 计算规则为:`index + noIndex`
*/
noIndex?: number;

[key: string]: any;
}
Expand Down
16 changes: 16 additions & 0 deletions packages/abc/table/test/table-column-source.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,22 @@ describe('abc: table: column-souce', () => {
});
});
describe('[type]', () => {
describe(`with no`, () => {
it('should be working', () => {
const res = srv.process([
{ title: '', type: 'no' },
]);
expect(res[0].type).toBe('no');
expect(res[0].noIndex).toBe(1);
});
it('should be start zero', () => {
const res = srv.process([
{ title: '', type: 'no', noIndex: 0 },
]);
expect(res[0].type).toBe('no');
expect(res[0].noIndex).toBe(0);
});
});
describe(`with checkbox`, () => {
it('should be keep an empty list', () => {
const res = srv.process([
Expand Down
18 changes: 18 additions & 0 deletions packages/abc/table/test/table-data-source.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -535,6 +535,24 @@ describe('abc: table: data-souce', () => {
done();
});
});
describe('via no', () => {
it('with start 1', (done: () => void) => {
options.columns[0].type = 'no';
options.columns[0].noIndex = 1;
srv.process(options).then(res => {
expect(res.list[0]._values[0]).toBe(1);
done();
});
});
it('with start 0', (done: () => void) => {
options.columns[0].type = 'no';
options.columns[0].noIndex = 0;
srv.process(options).then(res => {
expect(res.list[0]._values[0]).toBe(0);
done();
});
});
});
describe('via img', () => {
it('with value', (done: () => void) => {
options.columns[0].type = 'img';
Expand Down

0 comments on commit 8fc29ce

Please sign in to comment.