simrsx-fe/app/components/app/therapy-protocol/edit.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'

const props = defineProps<{
  schema: any
  initialValues?: any
  resumeArrangementType: ResumeArrangementType
  errors?: FormErrors
}>()

const formSchema = toTypedSchema(props.schema)
const formRef = ref()

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

const dummymedicalDiagnosis = [
  { number: 1, diagnosis: 'Diabetes Mellitus', icd_x: 'E11' },
  { number: 2, diagnosis: 'Hipertensi',  icd_x: 'I10' },
  { number: 3, diagnosis: 'Asma Bronkial', icd_x: 'J45' },
]
</script>

<template>
  <Form ref="formRef" v-slot="{ values }" as="" keep-values :validation-schema="formSchema" :validate-on-mount="false"
    validation-mode="onSubmit" :initial-values="initialValues ? initialValues : {}">
    <h1 class="mb-1 text-base font-medium">Terapi ke 1</h1>


    <!-- FORM 2 -->
    <h1 class="mb-3 text-base">Form 1</h1>
    <DE.Block :col-count="2" :cell-flex="false">
      <SelectDate field-name="checkDate" label="Tanggal Pemeriksaan" :errors="errors"/>
      <div></div>
      <TextAreaInput
        field-name="diagnosis"
        label="Diagnosa"
        placeholder="Diagnosa"
        :errors="errors" />
      <TextAreaInput 
        field-name="therapyRequest"
        label="Permintaan Terapi"
        placeholder="Permintaan Terapi"
        :errors="errors" />
      <DE.Block class="flex items-end h-fit" :col-count="3" :cell-flex="false">        
        <div>
          <h1 class="mb-1 font-medium">Frekuensi Terapi</h1>
          <div :class="cn('bg-gray-50 dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex justify-between items-center h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-300 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',)">
            <p class="">{{ `2` }}</p>
            <p class="text-muted-foreground">x / Minggu</p>
          </div>
        </div>
        <div :class="cn('bg-gray-50 dark:bg-slate-950 ring-offset-background placeholder:text-muted-foreground flex justify-between items-center h-9 md:h-8 2xl:h-9 w-full rounded-md border border-gray-300 px-3 py-2 md:text-xs 2xl:text-sm file:border-0 file:bg-transparent md:file:!text-xs xl:file:!text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',)">
          <p>
            <span class="text-muted-foreground">Selama</span>
              {{ `1` }}
            <span class="text-muted-foreground">Bulan</span>
          </p>
        </div>
        <InputBase
          field-name="targetPeriodInMonths"
          label="Waktu mencapai target (Bulan)"
          placeholder="Masukkan angka"
          :errors="errors"
          numeric-only
        />
      </DE.Block>
      <TextAreaInput 
        field-name="therapyTarget"
        label="Target Terapi"
        placeholder="Target Terapi"
        :errors="errors" />
    </DE.Block>
    <Separator class="my-4" />



    <!-- FORM 2 -->
    <h1 class="mb-3 text-base font-medium">Form 2</h1>
    <DE.Block :col-count="2" :cell-flex="false">
      <DE.Cell :col-span="2">        
        <RadioRelationship
          field-name="relationshipToPatient"
          label="Hubungan dengan tertanggung"
          :errors="errors"
          is-required
        />
      </DE.Cell>
      <TextAreaInput 
        field-name="anamnesa"
        label="Anamnesa"
        placeholder="Anamnesa"
        :errors="errors" />
      <TextAreaInput 
        field-name="physicalExamination"
        label="Pemeriksaan Fisik & Uji Fungsi"
        placeholder="Pemeriksaan Fisik & Uji Fungsi"
        :errors="errors" />
      
      <div class="">
        <h1 class="mb-2 font-medium">Diagnosis Medis (ICD-X)</h1>
        <PubMyUiDataTable
          v-bind="medicalDiagnosisConfig"
          :rows="dummymedicalDiagnosis"
          :skeleton-size="dummymedicalDiagnosis.length"
        />
      </div>
      
      <div class="">
        <h1 class="mb-2 font-medium">Diagnosis Fungsional (ICD-X)</h1>
        <PubMyUiDataTable
          v-bind="functionalDiagnosisConfig"
          :rows="dummymedicalDiagnosis"
          :skeleton-size="dummymedicalDiagnosis.length"
        />
      </div>
      
      <div class="">
        <h1 class="mb-2 font-medium">Prosedur Tata Laksana (ICD-IX CM)</h1>
        <PubMyUiDataTable
          v-bind="proceduralConfig"
          :rows="dummymedicalDiagnosis"
          :skeleton-size="dummymedicalDiagnosis.length"
        />
      </div>

      <TextAreaInput 
        field-name="supportingExamination"
        label="Pemeriksaan Penunjang"
        placeholder="Pemeriksaan Penunjang"
        :errors="errors" />
      <TextAreaInput 
        field-name="evaluation"
        label="Evaluasi"
        placeholder="Evaluasi"
        :errors="errors" />
      <TextAreaInput 
        field-name="recommendation"
        label="Anjuran"
        placeholder="Anjuran"
        :errors="errors" />
      <DE.Cell :col-span="2">        
        <RadioIllnessBcsWork
          field-name="illnessBcsWork"
          label="Suspek penyakit akibat kerja"
          :errors="errors"
          is-required
        />
      </DE.Cell>
    </DE.Block>
    <Separator class="my-4" />

    
    <!-- FORM 3 -->
    <h1 class="mb-3 text-base">Form 3</h1>
    <DE.Block :col-count="2" :cell-flex="false">
      <SelectDate field-name="checkDate" label="Tanggal Pemeriksaan" :errors="errors"/>
      <div></div>
      <TextAreaInput
        field-name="form3-diagnosis"
        label="Diagnosa"
        placeholder="Diagnosa"
        :errors="errors" />
      <TextAreaInput 
        field-name="form3-therapyRequest"
        label="Permintaan Terapi"
        placeholder="Permintaan Terapi"
        :errors="errors" />
      
      <DE.Cell class="mt-2" :col-span="2">
          <FieldArray v-slot="{ fields, push, remove }" name="form3-programActivity">
            <div v-for="(field, idx) in fields" :key="idx" class="w-1/2 flex items-center gap-3 mb-3">
              <TextAreaInput 
                class=""
                :field-name="`form3-programActivity[${idx}]`"
                :label="`Program/Kegiatan ${idx + 1}`"
                :placeholder="`Masukkan Program/Kegiatan ${idx + 1}`"
                :errors="errors" />
              <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
              </Button>
            </div>

            <Button type="button" variant="outline"
              class="mt-3 w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
              @click="push(``)">
              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
              Tambah Program
            </Button>
          </FieldArray>
      </DE.Cell>
    </DE.Block>

  </Form>
</template>