cherry-pick

app/composables/useQueryCRUD.ts

@@ -3,18 +3,18 @@ import { useRoute, useRouter } from 'vue-router'
 
 export function useQueryCRUD(modeKey: string = 'mode', recordIdKey: string = 'record-id') {
   type params = {
-    mode: string,
+    mode: string
     recordId: any
   }
 
   const route = useRoute()
   const router = useRouter()
 
-  const crudQueryParams = computed<params> ({
+  const crudQueryParams = computed<params>({
     get: () => {
       return {
         mode: route.query[modeKey] && route.query[modeKey] === 'entry' ? 'entry' : 'list',
-        recordId: route.query[recordIdKey]
+        recordId: route.query[recordIdKey],
       }
     },
     set: (val) => {
@@ -30,7 +30,7 @@ export function useQueryCRUD(modeKey: string = 'mode', recordIdKey: string = 're
   })
 
   const goToEntry = (myRecord_id?: any) => {
-    if(myRecord_id) {
+    if (myRecord_id) {
       crudQueryParams.value.mode = 'entry'
       crudQueryParams.value.recordId = myRecord_id
     } else {
@@ -57,8 +57,15 @@ export function useQueryCRUDMode(key: string = 'mode') {
   const route = useRoute()
   const router = useRouter()
 
-  const mode = computed<'list' | 'entry'>({
-    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
+  const mode = computed<'list' | 'entry' | 'view'>({
+    get: () => {
+      const q = route.query[key]
+
+      if (q === 'entry') return 'entry'
+      if (q === 'view') return 'view'
+
+      return 'list'
+    },
     set: (val) => {
       router.push({
         path: route.path,
@@ -70,9 +77,22 @@ export function useQueryCRUDMode(key: string = 'mode') {
     },
   })
 
-  const goToEntry = (myRecord_id?: any) => {
-    mode.value = 'entry'
-    if(myRecord_id) {
+  const fromView = computed(() => route.query['from'] === 'view')
+
+  const goToEntry = (options?: { fromView?: boolean }) => {
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        [key]: 'entry',
+        from: options?.fromView ? 'view' : undefined,
+      },
+    })
+  }
+
+  const goToView = (myRecord_id?: any) => {
+    mode.value = 'view'
+    if (myRecord_id) {
       myRecord_id.value = myRecord_id
     }
   }
@@ -83,13 +103,32 @@ export function useQueryCRUDMode(key: string = 'mode') {
       query: {
         ...route.query,
         mode: 'list',
-        // HAPUS record-id
         recordIdKey: undefined,
+        from: undefined,
       },
     })
   }
 
-  return { mode, goToEntry, backToList }
+  const backToView = () => {
+    router.push({
+      path: route.path,
+      query: {
+        ...route.query,
+        mode: 'view',
+        from: undefined,
+      },
+    })
+  }
+
+  const goBack = () => {
+    if (fromView.value) {
+      backToView()
+    } else {
+      backToList()
+    }
+  }
+
+  return { mode, fromView, goToEntry, goToView, backToList, backToView, goBack }
 }
 
 export function useQueryCRUDRecordId(key: string = 'record-id') {
@@ -112,4 +151,3 @@ export function useQueryCRUDRecordId(key: string = 'record-id') {
 
   return { recordId }
 }
-