From a97098794742b42fb97d3df756df591697fafd72 Mon Sep 17 00:00:00 2001
From: Yi Yang <Leopoldthecoder@users.noreply.github.com>
Date: Wed, 18 Dec 2024 21:22:30 +0800
Subject: [PATCH] fix(ktableview): sort order when changing sort column
 [KHCP-14449] (#2543)

---
 src/components/KTableView/KTableView.cy.ts | 21 +++++++++++++++++++--
 src/components/KTableView/KTableView.vue   |  6 +++++-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/KTableView/KTableView.cy.ts b/src/components/KTableView/KTableView.cy.ts
index 62501aea3c..e96ad2ae8a 100644
--- 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
index 93a80d4791..00070013b6 100644
--- 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)
   }