feat/mcu-order: added the components

app/composables/useQueryCRUD.ts

@@ -1,6 +1,58 @@
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
+export function useQueryCRUD(modeKey: string = 'mode', recordIdKey: string = 'record-id') {
+  type params = {
+    mode: string,
+    recordId: any
+  }
+
+  const route = useRoute()
+  const router = useRouter()
+
+  const crudQueryParams = computed<params> ({
+    get: () => {
+      return {
+        mode: route.query[modeKey] && route.query[modeKey] === 'entry' ? 'entry' : 'list',
+        recordId: route.query[recordIdKey]
+      }
+    },
+    set: (val) => {
+      router.push({
+        path: route.path,
+        query: {
+          ...route.query,
+          [modeKey]: val.mode,
+          [recordIdKey]: val.recordId,
+        },
+      })
+    },
+  })
+
+  const goToEntry = (myRecord_id?: any) => {
+    if(myRecord_id) {
+      crudQueryParams.value.mode = 'entry'
+      crudQueryParams.value.recordId = myRecord_id
+    } else {
+      crudQueryParams.value.mode = 'entry'
+      crudQueryParams.value.recordId = undefined
+    }
+  }
+
+  const backToList = () => {
+    delete route.query[recordIdKey]
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        mode: 'list',
+      },
+    })
+  }
+
+  return { crudQueryParams, goToEntry, backToList }
+}
+
 export function useQueryCRUDMode(key: string = 'mode') {
   const route = useRoute()
   const router = useRouter()
@@ -18,7 +70,13 @@ export function useQueryCRUDMode(key: string = 'mode') {
     },
   })
 
-  const goToEntry = () => (mode.value = 'entry')
+  const goToEntry = (myRecord_id?: any) => {
+    mode.value = 'entry'
+    if(myRecord_id) {
+      myRecord_id.value = myRecord_id
+    }
+  }
+
   const backToList = () => {
     router.push({
       path: route.path,
@@ -26,7 +84,7 @@ export function useQueryCRUDMode(key: string = 'mode') {
         ...route.query,
         mode: 'list',
         // HAPUS record-id
-        'record-id': undefined,
+        recordIdKey: undefined,
       },
     })
   }
@@ -54,3 +112,4 @@ export function useQueryCRUDRecordId(key: string = 'record-id') {
 
   return { recordId }
 }
+