simrsx-fe/app/components/app/therapy-protocol/entry.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 { cn } from '~/lib/utils'
import RadioRelationship from './_common/radio-relationship.vue'
import RadioIllnessBcsWork from './_common/radio-illness-bcs-work.vue'
import { functionalDiagnosisConfig, proceduralConfig } from './add-list.cfg'
import FunctionalDiagnosisPicker from './picker-dialog/functional-diagnosis/diagnosis-picker.vue'
import MedicalDiagnosisPicker from './picker-dialog/medical-diagnosis/diagnosis-picker.vue'
import ArrangementProcedurePicker from './picker-dialog/arrangement-procedure/procedure-picker.vue'

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

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

// const isMedicalDiagnosisPickerDialogOpen = ref<boolean>(false)
// const isFunctionalDiagnosisPickerDialogOpen = ref<boolean>(false)
// const isProcedurePickerDialogOpen = ref<boolean>(false)

// function toggleMedicalDiagnosisPickerDialog() {
//   isMedicalDiagnosisPickerDialogOpen.value = !isMedicalDiagnosisPickerDialogOpen.value
// }
// function toggleFunctionalDiagnosisPickerDialog() {
//   isFunctionalDiagnosisPickerDialogOpen.value = !isFunctionalDiagnosisPickerDialogOpen.value
// }

// provide(`isDiagnosisPickerDialogOpen`, isDiagnosisPickerDialogOpen)
// provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)

defineExpose({
  validate: () => formRef.value?.validate(),
  resetForm: () => formRef.value?.resetForm(),
  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
  values: computed(() => formRef.value?.values),
})
</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 1 -->
    <h1 class="mb-3 text-base">Form 1</h1>
    <DE.Block :col-count="2" :cell-flex="false">
      <SelectDate field-name="form1ExaminationDate" label="Tanggal Pemeriksaan" :errors="errors"/>
      <div></div>
      <TextAreaInput
        field-name="form1Diagnose"
        label="Diagnosa"
        placeholder="Diagnosa"
        :errors="errors" />
      <TextAreaInput 
        field-name="form1TherapyRequest"
        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="form1TargetPeriod"
          label="Waktu mencapai target (Bulan)"
          placeholder="Masukkan angka"
          :errors="errors"
          numeric-only
        />
      </DE.Block>
      <TextAreaInput 
        field-name="form1TherapyTarget"
        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="form2RelationshipToInsured"
          label="Hubungan dengan tertanggung"
          :errors="errors"
          is-required
        />
      </DE.Cell>
      <TextAreaInput 
        field-name="anamnesis"
        label="Anamnesa"
        placeholder="Anamnesa"
        :errors="errors" />
      <TextAreaInput 
        field-name="form2PhysicalExamination"
        label="Pemeriksaan Fisik & Uji Fungsi"
        placeholder="Pemeriksaan Fisik & Uji Fungsi"
        :errors="errors" />
      
      <MedicalDiagnosisPicker
        field-name="medicalDiagnoses"
        title="Diagnosis Medis (ICD-X)" />
      <FunctionalDiagnosisPicker
        field-name="functionDiagnoses" 
        title="Diagnosis Fungsional (ICD-X)" />
      <ArrangementProcedurePicker
        field-name="procedures"
        title="Prosedur Tata Laksana (ICD-IX CM)" />
      
      <TextAreaInput 
        field-name="supportingExams"
        label="Pemeriksaan Penunjang"
        placeholder="Pemeriksaan Penunjang"
        :errors="errors" />
      <TextAreaInput 
        field-name="evaluation"
        label="Evaluasi"
        placeholder="Evaluasi"
        :errors="errors" />
      <TextAreaInput 
        field-name="instruction"
        label="Anjuran"
        placeholder="Anjuran"
        :errors="errors" />
      <DE.Cell :col-span="2">        
        <RadioIllnessBcsWork
          field-name="workCauseStatus"
          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="form3ExaminationDate" label="Tanggal Pemeriksaan" :errors="errors"/>
      <div></div>
      <TextAreaInput
        field-name="form3Diagnose"
        label="Diagnosa"
        placeholder="Diagnosa"
        :errors="errors" />
      <TextAreaInput 
        field-name="form3TherapyRequest"
        label="Permintaan Terapi"
        placeholder="Permintaan Terapi"
        :errors="errors" />
      
      <DE.Cell class="mt-2" :col-span="2">
          <FieldArray v-slot="{ fields, push, remove }" name="form3ProgramActivities">
            <div v-for="(field, idx) in fields" :key="idx" class="w-1/2 flex items-center gap-3 mb-3">
              <TextAreaInput 
                class=""
                :field-name="`form3ProgramActivities[${idx}]`"
                :label="`Program/Kegiatan ${idx + 1}`"
                :placeholder="`Masukkan Program/Kegiatan ${idx + 1}`"
                :errors="errors" />
              <Button v-if="idx !== 0" 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>