116 lines
2.4 KiB
TypeScript
116 lines
2.4 KiB
TypeScript
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 }
|
|
}
|
|
|