Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/cprj-146

app/components/content/soapi/list.vue

@@ -1,18 +1,45 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import { ActionEvents, type HeaderPrep, type RefSearchNav } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
 import List from '~/components/app/soapi/list.vue'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 
-const props = defineProps<{
-  label: string
-}>()
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const { goToEntry } = useQueryCRUDMode('mode')
+import { handleActionRemove } from '~/handlers/soapi-early.handler'
+// Services
+import { getList, getDetail } from '~/services/soapi-early.service'
+
+// Models
+import type { Encounter } from '~/models/encounter'
+
+// Props
+interface Props {
+  encounter: Encounter
+  label: string
+}
+const props = defineProps<Props>()
+const emits = defineEmits(['add', 'edit'])
+
+const { recordId } = useQueryCRUDRecordId()
+const { goToEntry, backToList } = useQueryCRUDMode('mode')
 const router = useRouter()
 const route = useRoute()
 
 const data = ref([])
+const encounterId = ref<number>(props?.encounter?.id || 0)
+const title = ref('')
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isLoading = ref(false)
+const isReadonly = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const paginationMeta = ref<PaginationMeta>(null)
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -26,13 +53,7 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+const typeCode = ref('')
 
 const hreaderPrep: HeaderPrep = {
   title: props.label,
@@ -43,8 +64,15 @@ const hreaderPrep: HeaderPrep = {
   },
 }
 
-async function getPatientList() {
-  const resp = await xfetch(`/api/v1/soapi?encounter_id=${route.params.id}?include=encounter`)
+const type = computed(() => (route.query.tab as string) || 'early-medical-assessment')
+
+onMounted(async () => {
+  await getMyList()
+})
+
+async function getMyList() {
+  const url = `/api/v1/soapi?type-code=${typeCode.value}?includes=encounter`
+  const resp = await xfetch(url)
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -61,18 +89,79 @@ const goEdit = (id: string) => {
   })
 }
 
-onMounted(() => {
-  getPatientList()
-})
+function handlePageChange(page: number) {
+  emits('pageChange', page)
+}
 
-watch(recId, () => {
-  console.log('recId', recId.value)
-  console.log('recIdaacin', recAction.value)
-  if (recAction.value === 'showEdit') {
-    goEdit(recId.value)
+function handleBack() {
+  recordId.value = ''
+  backToList()
+}
+
+watch(
+  () => type.value,
+  (val) => {
+    if (val) {
+      if (val === 'early-medical-assessment') {
+        typeCode.value = 'early-medic'
+      } else if (val === 'rehab-medical-assessment') {
+        typeCode.value = 'early-rehab'
+      } else if (val === 'function-assessment') {
+        typeCode.value = 'function'
+      }
+      getMyList()
+    }
+  },
+)
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      emits('edit')
+      isReadonly.value = false
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          mode: 'entry',
+          'record-id': recId.value,
+        },
+      })
+      break
+
+    case ActionEvents.showDetail:
+      emits('edit')
+      isReadonly.value = true
+      router.replace({
+        path: route.path,
+        query: {
+          ...route.query,
+          mode: 'entry',
+          'record-id': recId.value,
+        },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+
+    case ActionEvents.showAdd:
+      recordId.value = ''
+      goToEntry()
+      emits('add')
+      break
   }
 })
 
+// watch(recId, () => {
+//   console.log('recId', recId.value)
+//   console.log('recIdaacin', recAction.value)
+//   if (recAction.value === 'showEdit') {
+//     goEdit(recId.value)
+//   }
+// })
+
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
@@ -84,6 +173,35 @@ provide('table_data_loader', isLoading)
     :prep="{ ...hreaderPrep }"
     :ref-search-nav="refSearchNav"
   />
-
   <List :data="data" />
+
+  <PaginationView
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
 </template>