feat: enhance SEP entry form and handling with new readonly mode and improved data fetching

app/components/app/sep/entry-form.vue

@@ -102,10 +102,11 @@ const titleLetterNumber = computed(() => (admissionType.value === '3' ? 'Surat K
 const titleLetterDate = computed(() =>
   admissionType.value === '3' ? 'Tanggal Surat Kontrol' : 'Tanggal Surat Rujukan',
 )
+const mode = props.mode !== undefined ? props.mode : 'add'
+const attendingDoctorName = ref('')
 const isAccidentally = computed(() => accident.value === '1' || accident.value === '2')
 const isProvinceSelected = computed(() => accidentProvince.value !== '')
 const isCitySelected = computed(() => accidentCity.value !== '')
-const mode = props.mode !== undefined ? props.mode : 'add'
 const isLoading = props.isLoading !== undefined ? props.isLoading : false
 const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const isService = ref(props.isService || false)
@@ -156,8 +157,8 @@ const onInitialized = (objects: any) => {
   if (objects?.sepType === 'external') {
     admissionType.value = '1'
   }
-  if (objects?.diagnoseLabel) {
+  if (objects?.initialDiagnosis) {
-    initialDiagnosis.value = objects?.diagnoseLabel
+    initialDiagnosis.value = objects?.initialDiagnosis
   }
   // Patient data
   if (objects?.serviceType) {
@@ -173,6 +174,9 @@ const onInitialized = (objects: any) => {
   if (objects?.attendingDoctor) {
     attendingDoctor.value = objects?.attendingDoctor
   }
+  if (objects?.attendingDoctorName) {
+    attendingDoctorName.value = objects?.attendingDoctorName
+  }
   if (objects?.cob) {
     cob.value = objects?.cob
   }
@@ -314,7 +318,7 @@ onMounted(() => {
               id="sepDate"
               v-model="sepDate"
               v-bind="sepDateAttrs"
-              :disabled="true"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih tanggal sep"
             />
           </Field>
@@ -511,7 +515,7 @@ onMounted(() => {
               id="referralLetterDate"
               v-model="referralLetterDate"
               v-bind="referralLetterDateAttrs"
-              :disabled="true"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih tanggal surat"
             />
           </Field>
@@ -527,6 +531,7 @@ onMounted(() => {
               v-model="clinicExcecutive"
               v-bind="clinicExcecutiveAttrs"
               class="flex items-center gap-2"
+              :disabled="isLoading || isReadonly"
             >
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
@@ -586,7 +591,7 @@ onMounted(() => {
           </Field>
         </Cell>
 
-        <Cell>
+        <Cell v-if="!isReadonly">
           <Label height="compact">
             Spesialis / Subspesialis
             <span class="text-red-500">*</span>
@@ -609,6 +614,7 @@ onMounted(() => {
           </Label>
           <Field :errMessage="errors.attendingDoctor">
             <Combobox
+              v-if="!isReadonly"
               id="attendingDoctor"
               v-model="attendingDoctor"
               v-bind="attendingDoctorAttrs"
@@ -619,6 +625,12 @@ onMounted(() => {
               empty-message="Item tidak ditemukan"
               @update:searchText="emit('fetch', { menu: 'doctor', value: $event })"
             />
+            <Input
+              v-else
+              v-model="attendingDoctorName"
+              v-bind="attendingDoctorAttrs"
+              :disabled="isLoading || isReadonly"
+            />
           </Field>
         </Cell>
 
@@ -629,6 +641,7 @@ onMounted(() => {
           </Label>
           <Field :errMessage="errors.initialDiagnosis">
             <Combobox
+              v-if="!isReadonly"
               id="initialDiagnosis"
               v-model="initialDiagnosis"
               v-bind="initialDiagnosisAttrs"
@@ -639,6 +652,12 @@ onMounted(() => {
               empty-message="Item tidak ditemukan"
               @update:searchText="emit('fetch', { menu: 'diagnosis', value: $event })"
             />
+            <Input
+              v-else
+              v-model="initialDiagnosis"
+              v-bind="initialDiagnosisAttrs"
+              :disabled="isLoading || isReadonly"
+            />
           </Field>
         </Cell>
       </Block>
@@ -763,6 +782,7 @@ onMounted(() => {
               v-model="cob"
               v-bind="cobAttrs"
               class="flex items-center gap-2"
+              :disabled="isLoading || isReadonly"
             >
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
@@ -792,6 +812,7 @@ onMounted(() => {
               v-model="cataract"
               v-bind="cataractAttrs"
               class="flex items-center gap-2"
+              :disabled="isLoading || isReadonly"
             >
               <div class="flex items-center space-x-2">
                 <RadioGroupItem
@@ -861,7 +882,7 @@ onMounted(() => {
               id="accidentDate"
               v-model="accidentDate"
               v-bind="accidentDateAttrs"
-              :disabled="true"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih tanggal kejadian"
             />
           </Field>

app/components/app/sep/list-cfg.ts

@@ -1,9 +1,7 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
-type SepDto = any
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
-
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
   cols: [

app/components/content/sep/entry.vue

@@ -83,6 +83,7 @@ onMounted(async () => {
     :mode="props.mode"
     :is-save-loading="isSaveLoading"
     :is-service="isServiceHidden"
+    :is-readonly="['detail', 'link'].includes(props.mode)"
     :doctors="doctors"
     :diagnoses="diagnoses"
     :facilities-from="facilitiesFrom"

app/components/content/sep/list.vue

@@ -14,7 +14,7 @@ import RangeCalendar from '~/components/pub/ui/range-calendar/RangeCalendar.vue'
 import { X, Check } from 'lucide-vue-next'
 
 // Libraries
-import useIntegrationSepList from '~/handlers/integration-sep-list.handler'
+import { useIntegrationSepList } from '~/handlers/integration-sep-list.handler'
 
 // use handler to provide state and functions
 const {
@@ -54,6 +54,9 @@ watch(
     if (recAction.value === 'showConfirmDel') {
       open.value = true
     }
+    if (recAction.value === 'showDetail') {
+      navigateTo(`/integration/bpjs-vclaim/sep/${recItem.value?.letterNumber}/detail`)
+    }
   },
 )
 
@@ -62,6 +65,7 @@ watch(
   (val) => {
     if (!val) return
     setDateRange()
+    getSepList()
   },
   { deep: true },
 )

app/handlers/integration-sep-detail.handler.ts

@@ -2,6 +2,7 @@ import { ref, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { toast } from '~/components/pub/ui/toast'
 import { getList as getSepList } from '~/services/vclaim-sep.service'
+import { getList as getMemberList } from '~/services/vclaim-member.service'
 
 export function useIntegrationSepDetail() {
   const route = useRoute()
@@ -33,7 +34,8 @@ export function useIntegrationSepDetail() {
         valueObjects.value = {
           sepNumber: response.noSep || noSep.value,
           eSep: response.eSEP === 'True' ? 'yes' : 'no',
-          serviceType: response.jnsPelayanan === 'Rawat Jalan' ? '2' : response.jnsPelayanan === 'Rawat Inap' ? '1' : null,
+          serviceType:
+            response.jnsPelayanan === 'Rawat Jalan' ? '2' : response.jnsPelayanan === 'Rawat Inap' ? '1' : null,
           sepDate: response.tglSep ? new Date(response.tglSep).toISOString().split('T')[0] : '',
           cardNumber: response.peserta?.noKartu || '-',
           patientName: response.peserta?.nama || '-',
@@ -80,6 +82,20 @@ export function useIntegrationSepDetail() {
           controlLetterDoctor: response.kontrol?.kdDokter || '-',
           controlLetterDoctorName: response.kontrol?.nmDokter || '-',
         }
+        if (valueObjects.value?.cardNumber !== '-') {
+          const resultMember = await getMemberList({
+            mode: 'by-card',
+            number: valueObjects.value.cardNumber,
+            date: new Date().toISOString().substring(0, 10),
+          })
+          if (resultMember && resultMember.success && resultMember.body) {
+            const memberRaws = resultMember.body?.response || null
+            valueObjects.value['nationalIdentity'] = memberRaws?.peserta?.nik || ''
+            valueObjects.value['phoneNumber'] = memberRaws?.peserta?.mr?.noTelepon || ''
+            valueObjects.value['classLevel'] = memberRaws?.peserta?.hakKelas?.kode || ''
+            valueObjects.value['status'] = memberRaws?.statusPeserta?.kode || ''
+          }
+        }
       } else {
         toast({
           title: 'Gagal',

app/handlers/integration-sep-entry.handler.ts

@@ -634,7 +634,6 @@ export function useIntegrationSepEntry() {
           number: queries['card-number'],
           date: new Date().toISOString().substring(0, 10),
         })
-        console.log(resultMember)
       }
       delete selectedObjects.value['is-service']
     }

app/handlers/integration-sep-list.handler.ts

@@ -280,5 +280,3 @@ export function useIntegrationSepList() {
     handleRemove,
   }
 }
-
-export default useIntegrationSepList