Fix: refactor Kai CRUD UI to no redirect

app/components/content/document-upload/add.vue

@@ -10,13 +10,13 @@ import { toFormData } from '~/lib/utils'
 import { uploadAttachment } from '~/services/supporting-document.service'
 
 // #region Props & Emits
-const props = defineProps<{
-  callbackUrl?: string
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number 
+}>(), {
+
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
 const inputForm = ref<ExposedForm<any> | null>(null)
 const { user } = useUserStore()
 // #endregion
@@ -43,20 +43,14 @@ async function handleConfirmAdd() {
   const inputFormData: FormData = toFormData(inputData)
 
   const response = await handleActionSave(inputFormData, () => { }, () => { }, toast, )
-  const data = (response?.body?.data ?? null)
-  if (!data) return
-
-  // // If has callback provided redirect to callback with patientData
-  if (props.callbackUrl) {
-    navigateTo(props.callbackUrl + '?control-letter-id=' + inputData.id)
-  }
+  // const data = (response?.body?.data ?? null)
   goBack()
 }
 
 async function composeFormData(): Promise<any> {
   inputForm.value?.setValues({
     ...inputForm.value?.values,
-    ref_id: encounterId,
+    ref_id: props.encounter_id,
     upload_employee_id: user.employee_id
   })
 
@@ -83,13 +77,7 @@ async function handleActionClick(eventType: string) {
     isConfirmationOpen.value = true
   }
 
-  if (eventType === 'back') {
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-    goBack()
-  }
+  if (eventType === 'back') goBack()
 }
 
 function handleCancelAdd() {

app/components/content/document-upload/edit.vue

@@ -8,15 +8,15 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import { DocumentUploadSchema } from '~/schemas/document-upload.schema'
 import { getDetail } from '~/services/supporting-document.service'
 
-// #region Props & Emits
-const props = defineProps<{
-  callbackUrl?: string
-}>()
+const props = withDefaults(defineProps<{ 
+  encounter_id: number 
+  record_id: number 
+}>(), {
+  
+})
 
 // form related state
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const docId = typeof route.params.document_id == 'string' ? parseInt(route.params.document_id) : 0
+const docId = props.record_id
 const inputForm = ref<ExposedForm<any> | null>(null)
 // #endregion
 
@@ -77,7 +77,7 @@ async function composeFormData(): Promise<any> {
   if (!allValid) return Promise.reject('Form validation failed')
 
   const formData = inputFormState?.values
-  formData.encounter_id = encounterId
+  formData.encounter_id = props.encounter_id
   return new Promise((resolve) => resolve(formData))
 }
 // #endregion region
@@ -88,14 +88,7 @@ async function handleActionClick(eventType: string) {
     isConfirmationOpen.value = true
   }
 
-  if (eventType === 'back') {
-    if (props.callbackUrl) {
-      await navigateTo(props.callbackUrl)
-      return
-    }
-
-    goBack()
-  }
+  if (eventType === 'back') goBack()
 }
 
 function handleCancelAdd() {
@@ -109,7 +102,7 @@ function handleCancelAdd() {
 
 <template>
   <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">
-    <h1>Upload Dokumen</h1>
+    <h1>Update Upload Dokumen</h1>
   </div>
   <AppDocumentUploadEntryForm
     ref="inputForm"

app/components/content/document-upload/list.vue

@@ -9,33 +9,30 @@ import type { Encounter } from '~/models/encounter'
 import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
-import type { PagePermission } from '~/models/role'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import type { Permission, RoleAccesses, } from '~/models/role'
 import { unauthorizedToast } from '~/lib/utils'
+import { permissions } from '~/const/page-permission/ambulatory'
+import { usePageChecker } from '~/lib/page-checker'
 // #endregion
 
 
 // #region Permission
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const roleAccess: RoleAccesses = permissions['/ambulatory/encounter'] || {}
 const { getPagePermissions } = useRBAC()
 const pagePermission = getPagePermissions(roleAccess)
-
-// const {user,userRole} = useUserStore()
-// const {getUserPermissions} = useRBAC()
 // #endregion
 
 // #region State
-const props = defineProps<{
-  encounter?: Encounter
-  refresh: () => void
-}>()
-
-const route = useRoute()
-const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const props = withDefaults(defineProps<{ 
+  encounter_id: number
+  redirectToForm?: (myRecord_id?: any) => void
+}>(), {
+  redirectToForm: () => { }
+})
 
 const { data, paginationMeta, handlePageChange, handleSearch, searchInput, fetchData } = usePaginatedList({
   fetchFn: (params) => getList({
-    'encounter-id': encounterId,
+    'encounter-id': props.encounter_id,
     // includes: "employee",
     ...params,
   }),
@@ -56,10 +53,9 @@ const headerPrep: HeaderPrep = {
 if (pagePermission.canCreate) {
   headerPrep.addNav = {
     label: "Upload Dokumen",
-    onClick: () => navigateTo({
-        name: 'rehab-encounter-id-document-upload-add',
-        params: { id: encounterId },
-      }),
+    onClick: () => {
+      props.redirectToForm()
+    },
    }
 }
 
@@ -78,6 +74,7 @@ const refSearchNav: RefSearchNav = {
 
 // #region Lifecycle Hooks
 onMounted(() => {
+
 })
 // #endregion
 
@@ -99,7 +96,6 @@ async function handleConfirmDelete(record: any, action: string) {
   }
 }
 
-
 function handleCancelConfirmation() {
   // Reset record state when cancelled
   recId.value = 0
@@ -124,10 +120,7 @@ watch([recId, recAction, timestamp], () => {
 
     case ActionEvents.showEdit:
       if(pagePermission.canUpdate){
-        navigateTo({
-          name: 'rehab-encounter-id-document-upload-document_id-edit',
-          params: { id: encounterId, "document_id": recId.value },
-        })
+        props.redirectToForm(recId.value)
       } else {
         unauthorizedToast()
       }

app/components/content/document-upload/main.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { crudQueryParamsMode } from '~/lib/system-constants';
+import List from './list.vue'
+import Add from './add.vue'
+import Edit from './edit.vue'
+
+const props = defineProps<{
+  encounter_id: number
+}>()
+
+const { crudQueryParams, goToEntry } = useQueryCRUD()
+</script>
+
+<template>
+  <List v-if="crudQueryParams.mode === crudQueryParamsMode.list" :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+  <Add v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && !crudQueryParams.recordId" :encounter_id="encounter_id" />
+  <Edit v-else-if="crudQueryParams.mode === crudQueryParamsMode.entry && crudQueryParams.recordId"
+    :encounter_id="encounter_id" 
+    :record_id="crudQueryParams.recordId" />
+    
+  <List v-else :encounter_id="encounter_id" :redirectToForm="goToEntry" />
+</template>