fix(ktableview): sort order when changing sort column [KHCP-14449] (#…

…2543)
Kong · Dec 18, 2024 · a970987 · a970987
1 parent 04151e5
commit a970987
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/src/components/KTableView/KTableView.cy.ts b/src/components/KTableView/KTableView.cy.ts
@@ -68,7 +68,7 @@ const largeDataSet = [
 const options = {
   headers: [
     { label: 'Name', key: 'name', sortable: true },
-    { label: 'ID', key: 'id', sortable: false },
+    { label: 'ID', key: 'id', sortable: true },
     { label: 'Enabled', key: 'enabled', sortable: false },
     { label: '', key: 'actions', sortable: false },
   ] as TableHeader[],
@@ -445,7 +445,7 @@ describe('KTableView', () => {
       })
 
       cy.get('th').each(($el, index) => {
-        if (index === 0) {
+        if (index <= 1) {
           cy.wrap($el).should('have.class', 'sortable')
         }
       })
@@ -464,6 +464,23 @@ describe('KTableView', () => {
         cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'sort').and('have.length', 1)
       })
     })
+
+    it('should emit correct sort order when changing sort column', () => {
+      cy.mount(KTableView, {
+        props: {
+          headers: options.headers,
+          data: options.data,
+        },
+      })
+      cy.get('th').eq(0).click().then(() => {
+        cy.wrap(Cypress.vueWrapper.emitted('sort')).should('have.length', 1)
+        cy.wrap(Cypress.vueWrapper.emitted('sort')?.[0]?.[0]).should('have.property', 'sortColumnOrder', 'asc')
+        cy.get('th').eq(1).click().then(() => {
+          cy.wrap(Cypress.vueWrapper.emitted()).should('have.property', 'sort').and('have.length', 2)
+          cy.wrap(Cypress.vueWrapper.emitted('sort')?.[1]?.[0]).should('have.property', 'sortColumnOrder', 'asc')
+        })
+      })
+    })
   })
 
   describe('pagination', () => {

diff --git a/src/components/KTableView/KTableView.vue b/src/components/KTableView/KTableView.vue
@@ -701,10 +701,14 @@ const getHeaderClasses = (column: TableViewHeader, index: number): Record<string
 
 const onHeaderClick = (column: TableViewHeader) => {
   if (column.sortable && column.key !== TableViewHeaderKeys.BULK_ACTIONS && column.key !== TableViewHeaderKeys.ACTIONS) {
+    let newSortColumnOrder = 'asc'
+    if (column.key === sortColumnKey.value && sortColumnOrder.value === 'asc') {
+      newSortColumnOrder = 'desc'
+    }
     emit('sort', {
       prevKey: sortColumnKey.value,
       sortColumnKey: column.key,
-      sortColumnOrder: sortColumnOrder.value === 'asc' ? 'desc' : 'asc', // display opposite because sortColumnOrder outdated
+      sortColumnOrder: newSortColumnOrder,
     })
     sortClickHandler(column)
   }