simrsx-fe/app/components/app/therapy-protocol/detail.vue

<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import { toTypedSchema } from '@vee-validate/zod'
import { Form } from '~/components/pub/ui/form'
import { FieldArray } from 'vee-validate'
import SelectDate from './_common/select-date.vue'
import InputBase from '~/components/pub/my-ui/form/input-base.vue'

import * as DE from '~/components/pub/my-ui/doc-entry'
import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
import SelectSecondaryDiagnosis from './_common/select-secondary-diagnosis.vue'
import SelectPrimaryDiagnosis from './_common/select-primary-diagnosis.vue'
import SelectArrangement from './_common/select-arrangement.vue'
import type { ResumeArrangementType } from '~/schemas/resume.schema'
import SelectFaskes from './_common/select-faskes.vue'
import SelectDeathCause from './_common/select-death-cause.vue'
import { cn } from '~/lib/utils'
import RadioRelationship from './_common/radio-relationship.vue'
import RadioIllnessBcsWork from './_common/radio-illness-bcs-work.vue'
import { functionalDiagnosisConfig, medicalDiagnosisConfig, proceduralConfig } from './add-list.cfg'
import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
import Badge from '~/components/pub/ui/badge/Badge.vue'
import { detailTherapyProtocolListConfig } from './detail-list.cfg'
import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'

const props = defineProps<{

}>()

const router = useRouter()
const formRef = ref()
const isConfirmationOpen = ref(false)

defineExpose({
  validate: () => formRef.value?.validate(),
  resetForm: () => formRef.value?.resetForm(),
  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
  values: computed(() => formRef.value?.values),
})

function goBack() {
  router.go(-1)
}
async function handleConfirmAdd() {
  // handleActionClick('submit')
  console.log(`tersubmit wak`)
}

function handleCancelAdd() {
  isConfirmationOpen.value = false
}
// #endregion region

// #region Utilities & event handlers
async function handleActionClick(eventType: string) {
  if (eventType === 'submit') {
    isConfirmationOpen.value = true
    // const patient: Patient = await composeFormData()
    // let createdPatientId = 0

    // const response = await handleActionSave(
    //   patient,
    //   () => {},
    //   () => {},
    //   toast,
    // )

    // const data = (response?.body?.data ?? null) as PatientBase | null
    // if (!data) return
    // createdPatientId = data.id

    // If has callback provided redirect to callback with patientData
    // if (props.callbackUrl) {
    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
    //   return
    // }

    // Navigate to patient list or show success message
    // await navigateTo('/outpatient/encounter')
    // return
  }

  if (eventType === 'back') {   
    goBack()
  }
}

const dummymedicalDiagnosis = [
  { id: `asdfouno182y49128y3`, program: 'Latihan penguatan otot', icd_x: 'E11' },
  { id: `asdfouno182y49128g8`, program: 'Mobilisasi otot', icd_x: 'I10' },
]
</script>

<template>
  <div class="flex items-center">         
    <Button type="button" variant="outline" class="ml-auto text-gray-500 border border-orange-400 bg-orange-50" @click="handleActionClick('back')">
      <Icon name="i-lucide-arrow-left" class="h-4 w-4 align-middle transition-colors" />
      Kembali
    </Button>
  </div>

  <section class="">
    <h1 class="mb-2 text-base font-medium">Form 1</h1>
    <DetailRow label="Tanggal Pemeriksaan">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Diagnosa">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Permintaan Terapi">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Frekuensi Terapi">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Waktu Mencapai Target">{{ `aaaaaa bulan` }}</DetailRow>
  </section>
  <Separator class="my-5" />

  <section class="">
    <h1 class="mb-2 text-base font-medium">Form 2</h1>
    <DetailRow label="Hubungan dengan Tertanggung">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Anamnesa">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Pemeriksaan Fisik dan Uji Fungsi">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Diagnosa Medis (ICD-X)" class="mb-1">
      <Badge variant="outline" class="bg-gray-200">aaaaaa</Badge>
    </DetailRow>
    <DetailRow label="Diagnosa Fungsional (ICD-X)" class="mb-1">
      <Badge variant="outline" class="bg-gray-200">aaaaaa</Badge>
    </DetailRow>
    <DetailRow label="Prosedur Tata Laksana (ICD-IX CM)" class="mb-1">
      <Badge variant="outline" class="bg-gray-200">aaaaaa</Badge>
    </DetailRow>
    <DetailRow label="Pemeriksaan Penunjang">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Evaluasi">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Anjuran">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Suspek Penyakit Akibat Kerja">{{ `aaaaaa` }}</DetailRow>
  </section>
  <Separator class="my-5" />

  <section class="">
    <h1 class="mb-2 text-base font-medium">Form 3</h1>
    <DetailRow label="Diagnosa">{{ `aaaaaa` }}</DetailRow>
    <DetailRow label="Permintaan Terapi">{{ `aaaaaa` }}</DetailRow>

    <div class="mt-3">
      <PubMyUiDataTable 
        v-bind="detailTherapyProtocolListConfig"
        :rows="dummymedicalDiagnosis" />
    </div>  

  </section>
</template>