refactored handleSort for disableBuiltInSorting mode

BabyElias · Jan 10, 2025 · 56142ea · 56142ea
1 parent 8531dc1
commit 56142ea
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 47 deletions.
diff --git a/lib/KTable/index.vue b/lib/KTable/index.vue
@@ -165,52 +165,43 @@
       const headers = ref(props.headers);
       const rows = ref(props.rows);
       const disableBuiltinSorting = ref(props.disableBuiltinSorting);
-      const sortKey = ref(null);
-      const sortOrder = ref(null);
-
 
       const defaultSort = ref({
         index: props.headers.findIndex(h => h.columnId === props.defaultSort.columnId),
         direction: props.defaultSort.direction,
       });
 
-      const { sortedRows, handleSort, getAriaSort } = useSorting(
-        headers,
-        rows,
-        defaultSort,
-        disableBuiltinSorting,
-        emit
-      );
+      const {
+        sortKey,
+        sortOrder,
+        sortedRows,
+        handleSort: localHandleSort,
+        getAriaSort,
+      } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
+
       const isTableEmpty = computed(() => sortedRows.value.length === 0);
 
       watch(
         () => props.rows,
         newRows => {
           rows.value = newRows;
-        }
+        },
       );
 
-      watch(
-        () => sortKey.value,
-        newSortKey => {
-          if (disableBuiltinSorting.value) {
-            console.log(`Received new sortKey: ${newSortKey}`);
-            sortKey.value = newSortKey;
-          }
+      const handleSort = index => {
+        if (headers.value[index].dataType === DATA_TYPE_OTHERS || !props.sortable) {
+          return;
         }
-      );
+        localHandleSort(index)
+        if (props.disableBuiltinSorting) {
+          // Emit the event to the parent to notify that the sorting has been requested
+          console.log('Emitting changeSort event with sortKey and sortOrder', index, sortOrder.value);
+          emit('changeSort', { sortKey: index, sortOrder: sortOrder.value });
 
-      watch(
-        () => sortOrder.value,
-        newSortOrder => {
-          if (disableBuiltinSorting.value) {
-            console.log(`Received new sortOrder: ${newSortOrder}`);
-            sortOrder.value = newSortOrder;
-          }
         }
-      );
+      };
+
 
-     
       const getHeaderStyle = header => {
         const style = {};
         if (header.minWidth) style.minWidth = header.minWidth;
@@ -380,12 +371,6 @@
       },
     },
     watch: {
-      sortOrder(newVal) {
-        console.log(`sortOrder updated in KTable: ${newVal}`);
-      },
-      sortKey(newVal) {
-        console.log(`sortKey updated in KTable: ${newVal}`);
-      },
       // Use a watcher on props to perform validation on props.
       // This is required as we need access to multiple props simultaneously in some validations.
       $props: {
@@ -685,4 +670,4 @@
     cursor: pointer;
   }
 
-</style>
+</style>
diff --git a/lib/KTable/useSorting/index.js b/lib/KTable/useSorting/index.js
@@ -18,10 +18,9 @@ export const DATA_TYPE_OTHERS = 'undefined';
  * default sorting, and 'direction' denoting the sort order.
  * @param {Ref<Boolean>} disableBuiltinSorting - Reactive reference to disable all forms of sorting
  * by the hook.
- * @param {Function} emit - Function to emit events.
  * @returns {Object} - An object containing reactive references and methods for sorting.
  */
-export default function useSorting(headers, rows, defaultSort, disableBuiltinSorting, emit) {
+export default function useSorting(headers, rows, defaultSort, disableBuiltinSorting) {
   const sortKey = ref(null);
   const sortOrder = ref(null);
 
@@ -44,10 +43,7 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor
    * If local sorting is disabled or no sort key is set, it returns the original rows.
    */
   const sortedRows = computed(() => {
-    if (disableBuiltinSorting.value) {
-      console.log('disableBuiltinSorting is true, returning original rows');
-      return rows.value;
-    }
+    if (disableBuiltinSorting.value) return rows.value;
 
     // No sort key or value has been explicitly set till now
     if (sortKey.value === null || sortOrder.value === null) {
@@ -59,7 +55,7 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor
         [defaultSort.value.direction],
       );
     }
-  
+
     return _.orderBy(rows.value, [row => getSortValue(row, sortKey.value)], [sortOrder.value]);
   });
 
@@ -82,11 +78,6 @@ export default function useSorting(headers, rows, defaultSort, disableBuiltinSor
       sortKey.value = index;
       sortOrder.value = SORT_ORDER_ASC;
     }
-
-    if (disableBuiltinSorting.value) {
-      console.log(sortKey.value, sortOrder.value);
-      emit('changeSort', { sortKey: sortKey.value, sortOrder: sortOrder.value, index });
-    }
   };
 
   /**