fix: updateOption values and type AppSelect

src/pages/obi/order/list/index.vue

@@ -32,12 +32,12 @@ const status = [
 const selectedType = ref()
 
 const type = [
-  'Delivery Order',
+  { id: 'PICKUP', title: 'Pickup Order' },
-  'Pickup Order',
+  { id: 'DELIVERY', title: 'Delivery Order' },
-  'Retail Pickup Order',
+  { id: 'SHIPTOSTORE', title: 'Ship-to-Store Order' },
-  'Ship-for-Pickup Order',
+  { id: 'RETAILPICKUP', title: 'Retail Pickup Order' },
-  'Ship-to-Store Order',
+  { id: 'SHIPFORPICKUP', title: 'Ship-for-Pickup Order' },
-  'unknown transaction type',
+  { id: 'UNKNOWN', title: 'unknown transaction type' },
 ]
 
 const searchQuery = ref('')
@@ -45,19 +45,9 @@ const searchQuery = ref('')
 // Data table options
 const itemsPerPage = ref(10)
 const page = ref(1)
-const sortBy = ref('meta.id')
+const sortBy = ref('request_id')
 const orderBy = ref('desc')
 
-const updateOptions = (options: any) => {
-  page.value = options.page
-
-  // updateOptions was called systematically by VDataTableServer with an empty object
-  if (options.sortBy[0]?.key) {
-    sortBy.value = options.sortBy[0].key
-    orderBy.value = options.sortBy[0].order
-  }
-}
-
 const sortByMapping = (sortby: string) => {
   const headerMapping: { [key: string]: string } = {
     'meta.id': 'request_id',
@@ -70,19 +60,31 @@ const sortByMapping = (sortby: string) => {
   return headerMapping[sortby] || sortby
 }
 
+const updateOptions = (options: any) => {
+  page.value = options.page
+
+  // updateOptions was called systematically by VDataTableServer with an empty object
+  if (options.sortBy[0]?.key) {
+    sortBy.value = sortByMapping(options.sortBy[0].key)
+    orderBy.value = options.sortBy[0].order
+  }
+}
+
 const { data: ordersData } = await useApi<any>(createUrl('/obi/order',
   {
     query: {
       q: searchQuery,
       page,
       itemsPerPage,
-      sortBy: sortByMapping(sortBy.value),
+      sortBy,
       orderBy,
+      status: selectedStatus,
+      type: selectedType,
     },
   },
 ))
 
-const widgetData = ref(ordersData.value.statistics)
+const widgetData = computed(() => ordersData.value.statistics)
 const orders = computed(() => ordersData.value.orders)
 const totalOrder = computed(() => ordersData.value.total)
 
@@ -198,6 +200,8 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
               :items="type"
               clearable
               clear-icon="tabler-x"
+              item-text="title"
+              item-value="id"
             />
           </VCol>
         </VRow>