Skip to content

Commit

Permalink
fix(abc:st): fix sorting trigger misalignment in mulit-column (#1767)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cipchk
cipchk authored Mar 11, 2024
1 parent 11a5daf commit 4e9aab8
Show file tree
Hide file tree
Showing 5 changed files with 62 additions and 37 deletions.
29 changes: 18 additions & 11 deletions packages/abc/st/st-data-source.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import type {
STStatisticalResults,
STStatisticalType
} from './st.interfaces';
import { _STColumn, _STColumnButton, _STDataValue } from './st.types';
import type { _STColumn, _STColumnButton, _STDataValue, _STHeader } from './st.types';

export interface STDataSourceOptions {
pi: number;
Expand All @@ -47,6 +47,7 @@ export interface STDataSourceOptions {
res: STRes;
page: STPage;
columns: _STColumn[];
headers: _STHeader[][];
singleSort?: STSingleSort | null;
multiSort?: STMultiSort;
rowClassName?: STRowClassName | null;
Expand Down Expand Up @@ -89,7 +90,7 @@ export class STDataSource {
process(options: STDataSourceOptions): Observable<STDataSourceResult> {
let data$: Observable<STData[]>;
let isRemote = false;
const { data, res, total, page, pi, ps, paginator, columns } = options;
const { data, res, total, page, pi, ps, paginator, columns, headers } = options;
let retTotal: number;
let retPs: number;
let retList: STData[];
Expand Down Expand Up @@ -141,7 +142,7 @@ export class STDataSource {
map((result: STData[]) => {
rawData = result;
let copyResult = deepCopy(result);
const sorterFn = this.getSorterFn(columns as _STColumn[]);
const sorterFn = this.getSorterFn(headers);
if (sorterFn) {
copyResult = copyResult.sort(sorterFn);
}
Expand Down Expand Up @@ -277,7 +278,7 @@ export class STDataSource {
}

private getByRemote(url: string, options: STDataSourceOptions): Observable<unknown> {
const { req, page, paginator, pi, ps, singleSort, multiSort, columns } = options;
const { req, page, paginator, pi, ps, singleSort, multiSort, columns, headers } = options;
const method = (req.method || 'GET').toUpperCase();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
let params: { [param: string]: any } = {};
Expand All @@ -298,7 +299,7 @@ export class STDataSource {
params = {
...params,
...req.params,
...this.getReqSortMap(singleSort, multiSort, columns),
...this.getReqSortMap(singleSort, multiSort, headers),
...this.getReqFilterMap(columns)
};
if (options.req.ignoreParamNull == true) {
Expand Down Expand Up @@ -417,12 +418,18 @@ export class STDataSource {

// #region sort

private getValidSort(columns: _STColumn[]): STSortMap[] {
return columns.filter(item => item._sort && item._sort.enabled && item._sort.default).map(item => item._sort!);
private getValidSort(headers: _STHeader[][]): STSortMap[] {
return headers.reduce((a, header) => {
const ls = header
.map(i => i.column)
.filter(item => item._sort && item._sort.enabled && item._sort.default)
.map(item => item._sort!);
return a.concat(...ls);
}, [] as STSortMap[]);
}

private getSorterFn(columns: _STColumn[]): ((a: STData, b: STData) => number) | void {
const sortList = this.getValidSort(columns);
private getSorterFn(headers: _STHeader[][]): ((a: STData, b: STData) => number) | void {
const sortList = this.getValidSort(headers);
if (sortList.length === 0) {
return;
}
Expand Down Expand Up @@ -453,10 +460,10 @@ export class STDataSource {
getReqSortMap(
singleSort: STSingleSort | undefined | null,
multiSort: STMultiSort | undefined,
columns: _STColumn[]
headers: _STHeader[][]
): STMultiSortResultType {
let ret: STMultiSortResultType = {};
const sortList = this.getValidSort(columns);
const sortList = this.getValidSort(headers);

if (multiSort) {
const ms: STMultiSort = {
Expand Down
4 changes: 2 additions & 2 deletions packages/abc/st/st.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
@if ($first && expand) {
<th nzWidth="50px" [rowSpan]="_headers.length"></th>
}
@for (h of row; track index; let index = $index; let last = $last) {
@for (h of row; track h; let index = $index; let last = $last) {
<th
*let="h.column as _c"
[colSpan]="h.colSpan"
Expand All @@ -73,7 +73,7 @@
[attr.data-col-index]="index"
[nzShowSort]="_c._sort.enabled"
[nzSortOrder]="$any(_c)._sort.default"
(nzSortOrderChange)="sort(_c, index, $event)"
(nzSortOrderChange)="sort(_c, $event)"
[nzCustomFilter]="!!_c.filter"
[class.st__has-filter]="_c.filter"
nz-resizable
Expand Down
17 changes: 11 additions & 6 deletions packages/abc/st/st.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -337,7 +337,7 @@ export class STComponent implements AfterViewInit, OnChanges {
}

private loadData(options?: STDataSourceOptions): Observable<STDataSourceResult> {
const { pi, ps, data, req, res, page, total, singleSort, multiSort, rowClassName } = this;
const { pi, ps, data, req, res, page, total, singleSort, multiSort, rowClassName, _columns, _headers } = this;
return this.dataSource
.process({
pi,
Expand All @@ -347,7 +347,8 @@ export class STComponent implements AfterViewInit, OnChanges {
req,
res,
page,
columns: this._columns,
columns: _columns,
headers: _headers,
singleSort,
multiSort,
rowClassName,
Expand Down Expand Up @@ -620,26 +621,30 @@ export class STComponent implements AfterViewInit, OnChanges {

// #region sort

sort(col: _STColumn, idx: number, value: NzSafeAny): void {
sort(col: _STColumn, value: NzSafeAny): void {
if (this.multiSort) {
col._sort.default = value;
col._sort.tick = this.dataSource.nextSortTick;
} else {
this._columns.forEach((item, index) => (item._sort.default = index === idx ? value : null));
this._headers.forEach(row => {
row.forEach(item => (item.column._sort.default = item.column === col ? value : null));
});
}
this.cdr.detectChanges();
this.loadPageData().subscribe(() => {
const res = {
value,
map: this.dataSource.getReqSortMap(this.singleSort, this.multiSort, this._columns),
map: this.dataSource.getReqSortMap(this.singleSort, this.multiSort, this._headers),
column: col
};
this.changeEmit('sort', res);
});
}

clearSort(): this {
this._columns.forEach(item => (item._sort.default = null));
this._headers.forEach(row => {
row.forEach(item => (item.column._sort.default = null));
});
return this;
}

Expand Down
39 changes: 26 additions & 13 deletions packages/abc/st/test/st-data-source.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ describe('abc: table: data-souce', () => {
res: deepCopy(ST_DEFAULT_CONFIG.res),
page: deepCopy(ST_DEFAULT_CONFIG.page),
columns: [{ title: '', index: 'id' }] as _STColumn[],
headers: [[{ colSpan: 1, rowSpan: 1, hasSubColumns: false, column: { title: '', index: 'id' } as _STColumn }]],
paginator: true
};
TestBed.configureTestingModule({
Expand Down Expand Up @@ -167,29 +168,29 @@ describe('abc: table: data-souce', () => {
describe('[sort]', () => {
beforeEach(() => {
options.data = genData(DEFAULT.total, true);
options.columns[0]._sort = {
options.headers[0][0].column._sort = {
enabled: true,
compare: (a: any, b: any) => a.id - b.id
};
});
it(`should be decremented`, done => {
(options.data as STData[])[1].id = 100000;
options.columns[0]._sort.default = 'descend';
options.headers[0][0].column._sort.default = 'descend';
srv.process(options).subscribe(res => {
expect(res.list[0].id).toBe(100000);
done();
});
});
it(`should be incremented`, done => {
(options.data as STData[])[1].id = -100000;
options.columns[0]._sort.default = 'ascend';
options.headers[0][0].column._sort.default = 'ascend';
srv.process(options).subscribe(res => {
expect(res.list[0].id).toBe(-100000);
done();
});
});
it('should be null, muse be ingore sort processing', done => {
options.columns[0]._sort = {
options.headers[0][0].column._sort = {
enabled: true,
compare: null,
default: 'descend'
Expand Down Expand Up @@ -464,7 +465,7 @@ describe('abc: table: data-souce', () => {
beforeEach(() => {
genModule();
options.data = '/mockurl';
options.columns[0]._sort = {
options.headers[0][0].column._sort = {
enabled: true,
key: 'id'
};
Expand All @@ -474,30 +475,30 @@ describe('abc: table: data-souce', () => {
});
});
it(`should be decremented`, done => {
options.columns[0]._sort.default = 'descend';
options.headers[0][0].column._sort.default = 'descend';
srv.process(options).subscribe(() => {
expect(resParams.get('id')!).toBe('descend');
done();
});
});
it(`should be incremented`, done => {
options.columns[0]._sort.default = 'ascend';
options.headers[0][0].column._sort.default = 'ascend';
srv.process(options).subscribe(() => {
expect(resParams.get('id')!).toBe('ascend');
done();
});
});
it(`should be re-name`, done => {
options.columns[0]._sort.default = 'ascend';
options.columns[0]._sort.reName = { ascend: 'A', descend: 'D' };
options.headers[0][0].column._sort.default = 'ascend';
options.headers[0][0].column._sort.reName = { ascend: 'A', descend: 'D' };
srv.process(options).subscribe(() => {
expect(resParams.get('id')!).toBe('A');
done();
});
});
it(`should be used default key when invalid re-name paraments`, done => {
options.columns[0]._sort.default = 'ascend';
options.columns[0]._sort.reName = {};
options.headers[0][0].column._sort.default = 'ascend';
options.headers[0][0].column._sort.reName = {};
srv.process(options).subscribe(() => {
expect(resParams.get('id')!).toBe('ascend');
done();
Expand All @@ -522,6 +523,12 @@ describe('abc: table: data-souce', () => {
_sort: { enabled: true, default: 'ascend', key: 'id2' }
}
];
options.headers = [
[
{ colSpan: 1, rowSpan: 1, hasSubColumns: false, column: options.columns[0] },
{ colSpan: 1, rowSpan: 1, hasSubColumns: false, column: options.columns[1] }
]
];
});
it(`should be`, done => {
srv.process(options).subscribe(() => {
Expand Down Expand Up @@ -553,6 +560,12 @@ describe('abc: table: data-souce', () => {
sort: true
}
] as _STColumn[];
options.headers = [
[
{ colSpan: 1, rowSpan: 1, hasSubColumns: false, column: options.columns[0] },
{ colSpan: 1, rowSpan: 1, hasSubColumns: false, column: options.columns[1] }
]
];
srv.process(options).subscribe(() => {
expect(resParams.has('SORT')).toBe(false);
done();
Expand Down Expand Up @@ -586,15 +599,15 @@ describe('abc: table: data-souce', () => {
});
describe('[singleSort]', () => {
it(`should working`, done => {
options.columns[0]._sort.default = 'ascend';
options.headers[0][0].column._sort.default = 'ascend';
options.singleSort = {};
srv.process(options).subscribe(() => {
expect(resParams.get('sort')).toBe('id.ascend');
done();
});
});
it(`should specify options`, done => {
options.columns[0]._sort.default = 'ascend';
options.headers[0][0].column._sort.default = 'ascend';
options.singleSort = { key: 'SORT', nameSeparator: '-' };
srv.process(options).subscribe(() => {
expect(resParams.get('SORT')).toBe('id-ascend');
Expand Down
10 changes: 5 additions & 5 deletions packages/abc/st/test/st-sort.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,22 +39,22 @@ describe('abc: st-sort', () => {
it('muse provide the compare function', fakeAsync(() => {
spyOn(console, 'warn');
page.updateColumn([{ title: '', index: 'i', sort: { compare: 'a' } as NzSafeAny }]);
comp.sort(comp._columns[0], 0, 'descend');
comp.sort(comp._columns[0], 'descend');
page.cd();
expect(console.warn).toHaveBeenCalled();
page.asyncEnd();
}));
it('should be auto generate compose when sort is true', fakeAsync(() => {
context.data = [{ i: 1 }, { i: 2 }];
page.updateColumn([{ title: '', index: 'i', sort: true }]);
comp.sort(comp._columns[0], 0, 'descend');
comp.sort(comp._columns[0], 'descend');
page.cd();
expect(context.comp.list[0].i).toBe(2);
page.asyncEnd();
}));
it('should be sorting', fakeAsync(() => {
page.cd();
comp.sort(comp._columns[0], 0, 'descend');
comp.sort(comp._columns[0], 'descend');
const sortList = comp._columns
.filter(item => item._sort && item._sort.enabled && item._sort.default)
.map(item => item._sort!);
Expand All @@ -67,8 +67,8 @@ describe('abc: st-sort', () => {
beforeEach(() => (context.multiSort = true));
it('should be sorting', fakeAsync(() => {
page.cd();
comp.sort(comp._columns[0], 0, 'descend');
comp.sort(comp._columns[1], 0, 'ascend');
comp.sort(comp._columns[0], 'descend');
comp.sort(comp._columns[1], 'ascend');
const sortList = comp._columns
.filter(item => item._sort && item._sort.enabled && item._sort.default)
.map(item => item._sort!);
Expand Down

0 comments on commit 4e9aab8

Please sign in to comment.