simrsx-fe/app/composables/useQueryCRUD.ts

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()

  const mode = computed<'list' | 'entry'>({
    get: () => (route.query[key] && route.query[key] === 'entry' ? 'entry' : 'list'),
    set: (val) => {
      router.push({
        path: route.path,
        query: {
          ...route.query,
          [key]: val,
        },
      })
    },
  })

  const goToEntry = (myRecord_id?: any) => {
    mode.value = 'entry'
    if(myRecord_id) {
      myRecord_id.value = myRecord_id
    }
  }

  const backToList = () => {
    router.push({
      path: route.path,
      query: {
        ...route.query,
        mode: 'list',
        // HAPUS record-id
        recordIdKey: undefined,
      },
    })
  }

  return { mode, goToEntry, backToList }
}

export function useQueryCRUDRecordId(key: string = 'record-id') {
  const route = useRoute()
  const router = useRouter()

  // const recordId = useState('route-query-' + key, () => '')
  const recordId = computed({
    get: () => route.query[key],
    set: (val: string) => {
      router.replace({
        path: route.path,
        query: {
          ...route.query,
          [key]: val,
        },
      })
    },
  })

  return { recordId }
}