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' | '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,
        },
      })
    },
  })

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

  const backToList = () => {
    router.push({
      path: route.path,
      query: {
        ...route.query,
        mode: 'list',
        recordIdKey: undefined,
        from: undefined,
      },
    })
  }

  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') {
  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 }
}