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

<script setup lang="ts">
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 { backToList } = useQueryMode('mode')

const route = useRoute()
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,
  time: '',
  typeCode: 'function',
  value: '',
})
const model = ref({
  'prim-compl': '',
  'past-disease': '',
  'current-disease': '',
  gcs: '',
  'respiratory-rate': '',
  'respiratory-rate-type': '',
  pulse: '',
  'pulse-type': '',
  'right-arm-bp': '',
  'left-arm-bp': '',
  'axillary-temp': '',
  'rektal-temp': '',
  skin: '',
  head: '',
  ear: '',
  nose: '',
  'oral-cavity': '',
  eye: '',
  'other-body-part': '',
  neck: '',
  thyroid: '',
  thorax: '',
  heart: '',
  lung: '',
  abdomen: '',
  heart2: '',
  lien: '',
  back: '',
  extremity: '',
  gender: '',
  rectum: '',
  'system-syaraf': '',
  'nervous-system': '',
  'cardio-respiratory': '',
  imaging: '',
  laboratory: '',
})

const isLoading = reactive<DataTableLoader>({
  isTableLoading: false,
})

async function getDiagnoses() {
  isLoading.isTableLoading = true
  const resp = await xfetch('/api/v1/diagnose-src')
  if (resp.success) {
    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(() => {
  getProcedures()
  getDiagnoses()
})

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) {
  if (type === 'back') {
    backToList()
    return
  }
  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(
      {
        ...payload.value,
        value: JSON.stringify(result.data),
        encounter_id: +route.params.id,
        time: new Date().toISOString(),
      },
      {},
      toast,
    )
  } else {
    console.log('Ada error di form', result)
  }
}

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
    ref="entryRehabRef"
    v-model="model"
    :schema="schema"
    type="function"
    @click="handleClick"
  />
  <div class="my-2 flex justify-end py-2">
    <Action @click="actionHandler" />
  </div>
  <Dialog
    v-model:open="isOpenProcedure"
    title="Pilih Prosedur"
    size="xl"
    prevent-outside
  >
    <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>