From afb926a687a5125f27e0cad0898c07ffb26c925c Mon Sep 17 00:00:00 2001 From: Dustin Davis Date: Mon, 5 Dec 2022 17:20:08 -0700 Subject: [PATCH 1/2] Fix table sorting bug with reverseSort --- dev-app/app.html | 2 +- .../tables/table/properties/index.ts | 11 ++++++ package.json | 2 +- src/components/tables/c-table/c-table.ts | 36 ++++++++++--------- yarn.lock | 6 ++-- 5 files changed, 36 insertions(+), 21 deletions(-) diff --git a/dev-app/app.html b/dev-app/app.html index 3ccde28d..be3ab97a 100644 --- a/dev-app/app.html +++ b/dev-app/app.html @@ -52,7 +52,7 @@ diff --git a/dev-app/routes/components/tables/table/properties/index.ts b/dev-app/routes/components/tables/table/properties/index.ts index a3d41c12..2705d93c 100644 --- a/dev-app/routes/components/tables/table/properties/index.ts +++ b/dev-app/routes/components/tables/table/properties/index.ts @@ -155,6 +155,13 @@ export class TableProperties { colHeadName: 'gender', colHeadValue: 'Gender', }, + { + colClass: 't85', + colHeadName: 'number', + colHeadValue: 'revSort', + sort: true, + reverseSort: true, + }, ]; this.sortableData = [ @@ -162,23 +169,27 @@ export class TableProperties { gender: 'Male', name: 'Luke Skywalker', ship: 'X-Wing', + number: 4, }, { _status: 'critical', gender: 'Male', name: 'Fin', ship: 'Tie Fighter', + number: 2, }, { gender: 'Male', name: 'Han Solo', ship: 'M. Falcon', + number: 3, }, { _status: 'healthy', gender: 'Female', name: 'Rey', ship: 'M. Falcon', + number: 1, }, ]; } diff --git a/package.json b/package.json index 13c0951b..8bf71e05 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@bindable-ui/bindable", "description": "An Aurelia component library", - "version": "1.11.9", + "version": "1.11.10", "repository": { "type": "git", "url": "https://github.com/bindable-ui/bindable" diff --git a/src/components/tables/c-table/c-table.ts b/src/components/tables/c-table/c-table.ts index a9b5bee5..39652662 100644 --- a/src/components/tables/c-table/c-table.ts +++ b/src/components/tables/c-table/c-table.ts @@ -190,19 +190,18 @@ export class CTable { } let sortClass = this.styles.sortNone; - const isReverse = /^-/.test(this.defaultSortCol); + const isDescending = /^-/.test(this.defaultSortCol); const defaultSortCol = this.defaultSortCol.replace(/^-/, ''); + // I think the classes are backwards + const asc = this.styles.sortAsc; + const desc = this.styles.sortDesc; + if (col.colHeadName === defaultSortCol) { + const reversedColumn: boolean = Boolean(col.reverseSort); const {reverseSort = false} = col; - if (isReverse) { - sortClass = this.styles.sortDesc; - } else if (reverseSort) { - sortClass = col.reverseSort ? this.styles.sortDesc : this.styles.sortAsc; - } else { - sortClass = this.reverseSort ? this.styles.sortDesc : this.styles.sortAsc; - } + sortClass = isDescending ? desc : asc; } col.sortClass = sortClass; @@ -217,21 +216,26 @@ export class CTable { }); let reverse: boolean; + const reversedColumn: boolean = Boolean(col.reverseSort); + + const asc = this.styles.sortAsc; + const desc = this.styles.sortDesc; + // Use reverseSort property of column or reverse-sort binding of table (in that order) // to determine initial sort. After initial sort, just toggle. if (col.sortClass === this.styles.sortNone) { - if (typeof col.reverseSort === 'boolean') { - col.sortClass = col.reverseSort ? this.styles.sortDesc : this.styles.sortAsc; - reverse = col.reverseSort; + if (reversedColumn) { + col.sortClass = desc; + reverse = true; } else { - col.sortClass = this.reverseSort ? this.styles.sortDesc : this.styles.sortAsc; - reverse = this.reverseSort; + col.sortClass = asc; + reverse = false; } - } else if (col.sortClass === this.styles.sortAsc) { - col.sortClass = this.styles.sortDesc; + } else if (col.sortClass === asc) { + col.sortClass = desc; reverse = true; } else { - col.sortClass = this.styles.sortAsc; + col.sortClass = asc; reverse = false; } if (this.actions && this.actions.sortColumn) { diff --git a/yarn.lock b/yarn.lock index 90106230..dc739284 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2217,9 +2217,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001317: - version "1.0.30001328" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001328.tgz#0ed7a2ca65ec45872c613630201644237ba1e329" - integrity sha512-Ue55jHkR/s4r00FLNiX+hGMMuwml/QGqqzVeMQ5thUewznU2EdULFvI3JR7JJid6OrjJNfFvHY2G2dIjmRaDDQ== + version "1.0.30001436" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001436.tgz" + integrity sha512-ZmWkKsnC2ifEPoWUvSAIGyOYwT+keAaaWPHiQ9DfMqS1t6tfuyFYoWR78TeZtznkEQ64+vGXH9cZrElwR2Mrxg== capture-exit@^2.0.0: version "2.0.0" From 4bb0256eae9fd3bae2fa391df93fb4de1b2ecef0 Mon Sep 17 00:00:00 2001 From: Dustin Davis Date: Tue, 6 Dec 2022 08:43:01 -0700 Subject: [PATCH 2/2] update unit test --- src/components/tables/c-table/c-table.test.ts | 22 ++----------------- 1 file changed, 2 insertions(+), 20 deletions(-) diff --git a/src/components/tables/c-table/c-table.test.ts b/src/components/tables/c-table/c-table.test.ts index 4cce01a9..f4cc9a8c 100644 --- a/src/components/tables/c-table/c-table.test.ts +++ b/src/components/tables/c-table/c-table.test.ts @@ -579,7 +579,7 @@ describe('c-table component', () => { expect(col.sortClass).toBe(component.styles.sortDesc); }); - it('will sort desc when col reverseSort', () => { + it('will sort asc still when col reverseSort', () => { const col: any = { _class: 'code', _status: 'warning', @@ -594,25 +594,7 @@ describe('c-table component', () => { component.setColSortClass(col); - expect(col.sortClass).toBe(component.styles.sortDesc); - }); - - it('will sort desc when table reverseSort', () => { - const col: any = { - _class: 'code', - _status: 'warning', - colClass: 't150', - colHeadName: 'name', - colHeadValue: 'Name', - sort: true, - }; - - component.reverseSort = true; - component.defaultSortCol = `${col.colHeadName}`; - - component.setColSortClass(col); - - expect(col.sortClass).toBe(component.styles.sortDesc); + expect(col.sortClass).toBe(component.styles.sortAsc); }); });