Refactor sorting logic in TermTable.vue and use-app.ts

components/SortKey.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex cursor-pointer items-center gap-1" @click="toggleSort">
+    <slot>
+      {{ label }}
+    </slot>
+    <Icon :name="sortIcon" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SORT_MODE } from '~/constants';
+import type { SortKey } from '~/types';
+
+interface Props {
+  label?: string;
+  field: string;
+  modelValue: SortKey;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits(['update:modelValue']);
+
+function toggleSort() {
+  const { mode } = props.modelValue;
+  const newMode = mode === SORT_MODE.ASC ? SORT_MODE.DESC : SORT_MODE.ASC;
+  emit('update:modelValue', { key: props.field, mode: newMode });
+}
+
+const sortIcon = computed(() => {
+  const { key, mode } = props.modelValue;
+  if (key === props.field) {
+    return mode === SORT_MODE.ASC
+      ? 'system-uicons:arrow-up'
+      : 'system-uicons:arrow-down';
+  }
+  return 'system-uicons:question-circle';
+});
+</script>

components/term/TermTable.vue

@@ -31,16 +31,12 @@
         <thead class="border-b-2 text-left">
           <tr>
             <th class="py-1">
-              <div class="cursor-pointer" @click="handleSort">
-                {{ $t('name') }}
-                <Icon
-                  :name="
-                    mode === 'desc'
-                      ? 'system-uicons:arrow-down'
-                      : 'system-uicons:arrow-up'
-                  "
-                />
-              </div>
+              <SortKey
+                v-model="orderBy"
+                label="name"
+                field="name"
+                @update:model-value="handleSort"
+              />
             </th>
             <th class="text-right">{{ $t('action') }}</th>
           </tr>
@@ -100,8 +96,8 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const mode = ref('asc');
-
+const { orderBy } = useApp();
+orderBy.value.key = 'name';
 const {
   frm,
   isDelete,
@@ -120,7 +116,6 @@ const {
 handleSearch(props.groupId);
 
 function handleSort() {
-  mode.value = mode.value === 'desc' ? 'asc' : 'desc';
-  handleSearch(props.groupId, mode.value);
+  handleSearch(props.groupId, orderBy.value.mode);
 }
 </script>

composables/use-app.ts

@@ -1,20 +1,38 @@
-import type { KeyValue } from '~/types';
+import { SORT_MODE } from '~/constants';
+import type { KeyValue, SortKey } from '~/types';
 
 export const useApp = () => {
   const title = useState('app-title', () => 'Dashboard');
 
   // setting app
-  const setting = useState<KeyValue>('app-setting', () => ({}));
+  const setting = useState<KeyValue>('app-setting', () => ({
+    formatDate: 'dd/MM/yyyy',
+    formatDateTime: 'dd/MM/yyyy HH:mm:ss',
+    formatTime: 'HH:mm:ss',
+  }));
 
   const page = ref(1);
   const limit = 10;
   const search = ref('');
+  const orderBy = useState<SortKey>('app-order-by', () => ({
+    key: 'id',
+    mode: SORT_MODE.ASC,
+  }));
+
+  function getOrderBy() {
+    const { key, mode } = orderBy.value;
+    return {
+      [key]: mode,
+    };
+  }
 
   return {
     title,
     setting,
     page,
     limit,
     search,
+    orderBy,
+    getOrderBy,
   };
 };

composables/use-term.ts

@@ -1,6 +1,7 @@
 import { TERMS_QUERY } from '~/gql/query';
 import { DELETE_TERM, INSERT_TERM, UPDATE_TERM } from '~/gql/mutate';
 import type { Term, TermInput, Variable } from '~/types';
+import { SORT_MODE, type SortMode } from '~/constants';
 
 export const useTerm = () => {
   const { client } = useApolloClient();
@@ -110,7 +111,10 @@ export const useTerm = () => {
 
   const pageCount = computed(() => Math.ceil(count.value / limit));
 
-  async function handleSearch(groupId: number, orderBy: string = 'asc') {
+  async function handleSearch(
+    groupId: number,
+    orderBy: SortMode = SORT_MODE.ASC
+  ) {
     const { items } = await getTerms({
       where: {
         group_id: {

constants/app-core.ts

@@ -11,3 +11,10 @@ export enum TermGroupID {
   projectStatus = 7,
   productType = 8,
 }
+
+export enum SORT_MODE {
+  ASC = 'asc',
+  DESC = 'desc',
+}
+
+export type SortMode = Lowercase<keyof typeof SORT_MODE> | string;

package.json

@@ -38,6 +38,6 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "echarts": "^5.4.3"
+    "echarts": "^5.3"
   }
 }

types/app-type.ts

@@ -1,3 +1,10 @@
+import type { SORT_MODE } from '~/constants';
+
 export interface KeyValue {
   [key: string]: string | number | boolean;
 }
+
+export interface SortKey {
+  key: string;
+  mode: SORT_MODE;
+}

yarn.lock

@@ -3131,7 +3131,7 @@ eastasianwidth@^0.2.0:
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
   integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
 
-echarts@^5.4.3:
+echarts@^5.3:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/echarts/-/echarts-5.4.3.tgz#f5522ef24419164903eedcfd2b506c6fc91fb20c"
   integrity sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==