simrsx-fe/app/composables/useQueryCRUD.ts

import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export function useQueryCRUDMode(key: string = 'mode') {
  const route = useRoute()
  const router = useRouter()

  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,
        query: {
          ...route.query,
          [key]: val,
        },
      })
    },
  })

  // Cek apakah form diakses dari view/detail
  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 = () => (mode.value = 'view')

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

  const backToView = () => {
    router.push({
      path: route.path,
      query: {
        ...route.query,
        mode: 'view',
        // HAPUS from
        from: undefined,
      },
    })
  }

  // Fungsi back yang otomatis menentukan kemana harus kembali
  const goBack = () => {
    if (fromView.value) {
      backToView()
    } else {
      backToList()
    }
  }

  return { mode, fromView, goToEntry, goToView, backToList, backToView, goBack }
}

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 }
}