✨ feat (soapi): integrate icd selection

app/components/app/soapi/early-entry.vue

@@ -63,13 +63,13 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
   <form id="entry-form">
-    {{ errors }}
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
         <Cell>
@@ -285,7 +285,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'diagnosa')"
+              @click="emit('modal', 'diagnosa')"
             >
               + Pilih Diagnosa
             </Button>
@@ -298,7 +298,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'prosedur')"
+              @click="emit('modal', 'prosedur')"
             >
               + Pilih Prosedur
             </Button>
@@ -307,8 +307,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
       </Block>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
+        <AppIcdPreview v-model="icdPreview.procedures" />
       </div>
 
       <Block :colCount="3">

app/components/app/soapi/early-rehab-entry.vue

@@ -85,6 +85,7 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
@@ -452,10 +453,18 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 
       <div class="my-2">
         <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="emit('click', 'fungsional')"
+        >
+          + Pilih Prosedur
+        </Button>
       </div>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
       </div>
 
       <div class="my-2">

app/components/app/soapi/entry.vue

@@ -43,5 +43,6 @@ defineExpose({ validate })
     @click="$emit('click', $event)"
     @submit="$emit('submit', $event)"
     @cancel="$emit('cancel', $event)"
+    @modal="$emit('modal', $event)"
   />
 </template>

app/components/app/soapi/function-entry.vue

@@ -86,6 +86,8 @@ const validate = async () => {
 
 defineExpose({ validate })
 
+const icdPreview = inject('icdPreview')
+
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 const disorders = ref<string[]>([])
 const therapies = ref<string[]>([])
@@ -558,33 +560,33 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'diagnosa')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.diagnoses" />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Fungsional (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emit('click', 'fungsional')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview v-model="icdPreview.fungsional" />
         </div>
         <div>
           <span class="text-md">Diagnosa Medis (ICD-X)</span>
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'prosedur')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
-        </div>
-        <div>
-          <span class="text-md">Diagnosa Medis (ICD-X)</span>
-          <Button
-            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
-            type="button"
-            @click="emits('click', 'prosedur')"
-          >
-            + Pilih Prosedur
-          </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.procedures" />
         </div>
       </div>
 

app/components/content/encounter/assesment-function/add.vue

@@ -1,3 +0,0 @@
-<template>
-  <div>halo</div>
-</template>

app/components/content/encounter/assesment-function/list.vue

@@ -1,64 +0,0 @@
-<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 AssesmentFunctionList from '~/components/app/encounter/assesment-function/list.vue'
-import Header from '~/components/pub/my-ui/nav-header/prep.vue'
-
-const props = defineProps<{
-  label: string
-}>()
-
-const data = ref([])
-
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
-
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  isTableLoading: false,
-})
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: props.label,
-  icon: 'i-lucide-users',
-  addNav: {
-    label: 'Tambah',
-    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
-  },
-}
-
-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
-provide('rec_id', recId)
-provide('rec_action', recAction)
-provide('rec_item', recItem)
-provide('table_data_loader', isLoading)
-</script>
-
-<template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AssesmentFunctionList :data="data" />
-  </div>
-</template>

app/components/content/encounter/process.vue

@@ -11,7 +11,7 @@ import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
 
 // PLASE ORDER BY TAB POSITION
 import Status from '~/components/content/encounter/status.vue'
-import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import AssesmentFunctionList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
 import PrescriptionList from '~/components/content/prescription/list.vue'

app/components/content/soapi/form-function.vue

@@ -2,14 +2,22 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.vue'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { FunctionSoapiSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
 const route = useRoute()
-const isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const isOpenFungsional = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const fungsional = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
+const selectedFungsional = ref<any>(null)
 const schema = FunctionSoapiSchema
 const payload = ref({
   encounter_id: 0,
@@ -60,29 +68,52 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
   }
   isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
-function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+function handleClick(type: string) {
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  } else if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
 }
-
 const entryRehabRef = ref()
 async function actionHandler(type: string) {
   console.log(type)
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
+    if (
+      selectedProcedure.value?.length > 0 ||
+      selectedDiagnose.value?.length > 0 ||
+      selectedFungsional.value?.length > 0
+    ) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+      result.data.fungsional = selectedFungsional.value || []
+    }
     console.log('data', result.data)
     handleActionSave(
       {
@@ -99,7 +130,23 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+    icdPreview.value.fungsional = selectedFungsional.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -107,17 +154,52 @@ provide('table_data_loader', isLoading)
     v-model="model"
     :schema="schema"
     type="function"
-    @modal="handleOpen"
+    @click="handleClick"
   />
   <div class="my-2 flex justify-end py-2">
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
+    v-model:open="isOpenProcedure"
     title="Pilih Prosedur"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedProcedure"
+      :data="procedures"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Diagnosa"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenFungsional"
+    title="Pilih Fungsional"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedFungsional"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>

app/components/content/soapi/form-rehab.vue

@@ -2,14 +2,19 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.vue'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { EarlyRehabSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
 const route = useRoute()
-const isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
 const schema = EarlyRehabSchema
 const payload = ref({
   encounter_id: 0,
@@ -65,22 +70,33 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
   }
   isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
 function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+  if (type === 'fungsional') {
+    isOpenDiagnose.value = true
+  }
 }
 
 const entryRehabRef = ref()
@@ -88,6 +104,9 @@ async function actionHandler(type: string) {
   console.log(type)
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
+    if (selectedDiagnose.value?.length > 0) {
+      result.data.diagnose = selectedDiagnose.value || []
+    }
     console.log('data', result.data)
     handleActionSave(
       {
@@ -104,7 +123,22 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -112,17 +146,23 @@ provide('table_data_loader', isLoading)
     v-model="model"
     :schema="schema"
     type="early-rehab"
-    @modal="handleOpen"
+    @click="handleOpen"
   />
   <div class="my-2 flex justify-end py-2">
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
-    title="Pilih Prosedur"
+    v-model:open="isOpenDiagnose"
+    title="Pilih Fungsional"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>

app/components/content/soapi/form.vue

@@ -2,14 +2,19 @@
 import { z } from 'zod'
 import Entry from '~/components/app/soapi/entry.vue'
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import ActionDialog from '~/components/pub/my-ui/nav-footer/ba-su.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import { EarlySchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
 const route = useRoute()
-const isOpen = ref(false)
-const data = ref([])
+const isOpenProcedure = ref(false)
+const isOpenDiagnose = ref(false)
+const procedures = ref([])
+const diagnoses = ref([])
+const selectedProcedure = ref<any>(null)
+const selectedDiagnose = ref<any>(null)
 const schema = EarlySchema
 const payload = ref({
   encounter_id: 0,
@@ -38,22 +43,35 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
-async function getPatientList() {
+async function getDiagnoses() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/diagnose-src')
   if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
+    diagnoses.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+async function getProcedures() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/procedure-src')
+  if (resp.success) {
+    procedures.value = (resp.body as Record<string, any>).data
   }
   isLoading.isTableLoading = false
 }
 
 onMounted(() => {
-  getPatientList()
+  getProcedures()
+  getDiagnoses()
 })
 
 function handleOpen(type: string) {
-  console.log(type)
-  isOpen.value = true
+  if (type === 'prosedur') {
+    isOpenProcedure.value = true
+  } else if (type === 'diagnosa') {
+    isOpenDiagnose.value = true
+  }
 }
 
 const entryRef = ref()
@@ -61,6 +79,11 @@ async function actionHandler(type: string) {
   console.log(type)
   const result = await entryRef.value?.validate()
   if (result?.valid) {
+    if (selectedProcedure.value?.length > 0 || selectedDiagnose.value?.length > 0) {
+      result.data.procedure = selectedProcedure.value || []
+      result.data.diagnose = selectedDiagnose.value || []
+    }
+
     console.log('data', result.data)
     handleActionSave(
       {
@@ -77,7 +100,22 @@ async function actionHandler(type: string) {
   }
 }
 
+const icdPreview = ref({
+  procedures: [],
+  diagnoses: [],
+})
+
+function actionDialogHandler(type: string) {
+  if (type === 'submit') {
+    icdPreview.value.procedures = selectedProcedure.value || []
+    icdPreview.value.diagnoses = selectedDiagnose.value || []
+  }
+  isOpenProcedure.value = false
+  isOpenDiagnose.value = false
+}
+
 provide('table_data_loader', isLoading)
+provide('icdPreview', icdPreview)
 </script>
 <template>
   <Entry
@@ -91,11 +129,32 @@ provide('table_data_loader', isLoading)
     <Action @click="actionHandler" />
   </div>
   <Dialog
-    v-model:open="isOpen"
+    v-model:open="isOpenProcedure"
     title="Pilih Prosedur"
     size="xl"
     prevent-outside
   >
-    <AppIcdMultiselectPicker :data="data" />
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedProcedure"
+      :data="procedures"
+    />
+
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
+  </Dialog>
+  <Dialog
+    v-model:open="isOpenDiagnose"
+    title="Pilih Diagnosa"
+    size="xl"
+    prevent-outside
+  >
+    <AppIcdMultiselectPicker
+      v-model:model-value="selectedDiagnose"
+      :data="diagnoses"
+    />
+    <div class="my-2 flex justify-end py-2">
+      <ActionDialog @click="actionDialogHandler" />
+    </div>
   </Dialog>
 </template>