clientSortOptions compute from sortType and sortBy

A hacky workaround, for reference only. implementation of HC200ok#371 (sortBy sortType) => clientSortOptions => items
childe · Jun 6, 2024 · 96a1248 · 96a1248
1 parent aa77f92
commit 96a1248
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
@@ -362,8 +362,8 @@ const {
   serverItemsLength,
   serverOptions,
   showIndex,
-  sortBy,
-  sortType,
+  _sortBy,
+  _sortType,
   tableHeight,
   tableMinHeight,
   themeColor,
@@ -372,6 +372,9 @@ const {
   preventContextMenuRow
 } = toRefs(props);
 
+const sortBy = ref(props.sortBy);
+const sortType = ref(props.sortType);
+
 // style related computed variables
 const tableHeightPx = computed(() => (tableHeight.value ? `${tableHeight.value}px` : null));
 const tableMinHeightPx = computed(() => `${tableMinHeight.value}px`);

diff --git a/src/hooks/useHeaders.ts b/src/hooks/useHeaders.ts
@@ -53,7 +53,7 @@ export default function useHeaders(
     return null;
   };
 
-  const clientSortOptions = ref<ClientSortOptions | null>(generateClientSortOptions(sortBy.value, sortType.value));
+  const clientSortOptions = computed((): ClientSortOptions | null => generateClientSortOptions(sortBy.value, sortType.value));
 
   // headers for render (integrating sortType,z checkbox...)
   const headersForRender = computed((): HeaderForRender[] => {
@@ -148,22 +148,21 @@ export default function useHeaders(
       const index = clientSortOptions.value.sortBy.indexOf(newSortBy);
       if (index === -1) {
         if (newSortType !== null) {
-          clientSortOptions.value.sortBy.push(newSortBy);
-          clientSortOptions.value.sortDesc.push(newSortType === 'desc');
+          sortBy.value.push(newSortBy);
+          sortType.value.push(newSortType);
         }
       } else if (newSortType === null) {
-        clientSortOptions.value.sortDesc.splice(index, 1);
-        clientSortOptions.value.sortBy.splice(index, 1);
+        sortType.value.splice(index, 1);
+        sortBy.value.splice(index, 1);
       } else {
-        clientSortOptions.value.sortDesc[index] = newSortType === 'desc';
+        sortType.value[index] = newSortType ;
       }
     } else if (newSortType === null) {
-      clientSortOptions.value = null;
+        sortBy.value = '';
+        sortType.value = '';
     } else {
-      clientSortOptions.value = {
-        sortBy: newSortBy,
-        sortDesc: newSortType === 'desc',
-      };
+        sortBy.value = newSortBy,
+        sortType.value = newSortType ;
     }
     emits('updateSort', {
       sortType: newSortType,