Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(abc:st): fix sorting trigger misalignment in mulit-column #1767

Merged
merged 1 commit into from
Mar 11, 2024
Merged

fix(abc:st): fix sorting trigger misalignment in mulit-column #1767

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 18 additions & 11 deletions packages/abc/st/st-data-source.ts
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading