feat/consultation-82: done

2025-10-05 03:30:22 +07:00
parent ce785f2092
commit 427d97c29f
10 changed files with 554 additions and 0 deletions
@@ -0,0 +1,179 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import List from '~/components/app/consultation/list.vue'
+import Entry from '~/components/app/consultation/entry.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { ConsultationSchema, type ConsultationFormData } from '~/schemas/consultation.schema'
+import type { Unit } from '~/models/unit'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/consultation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/consultation.service'
+// import { getList as getUnitList } from '~/services/unit.service' // previously uses getList
+import { getValueLabelList } from '~/services/unit.service'
+
+let units = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMyList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getList({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'consultation',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Konsultasi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getMyDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// const getUnits = async () => {
+//   const result = await getUnitList()
+//   if (result.success) {
+//     const currentMedicineGroups = result.body?.data || []
+//     units.value = currentMedicineGroups.map((item: Unit) => ({
+//       value: item.code,
+//       label: item.name,
+//     }))
+//   }
+// }
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getMyDetail(recId.value)
+      title.value = 'Detail Konsultasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getMyDetail(recId.value)
+      title.value = 'Edit Konsultasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMyList()
+  units.value = await getValueLabelList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <List :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Divisi'" size="xl" prevent-outside>
+    <Entry
+      :schema="ConsultationSchema"
+      :values="recItem"
+      :units="units"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: ConsultationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMyList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMyList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMyList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>