simrsx-fe/app/components/content/division/entry.vue

<script setup lang="ts">
import type { FormErrors } from '~/types/error'
import AppDivisionEntryForm from '~/components/app/divison/entry-form.vue'
import { division as divisionConf, schema as schemaConf } from './entry'

// Tipe data untuk tree item division
interface DivisionTreeItem {
  value: string
  label: string
  code: string
  hasChildren: boolean
  children?: DivisionTreeItem[]
}

// Props untuk komponen
const props = defineProps<{
  initialValues?: {
    name: string
    code: string
    parentId: string
  }
  errors?: FormErrors
}>()

// Events yang di-emit
const emit = defineEmits<{
  'submit': [values: any, resetForm: () => void]
  'cancel': [resetForm: () => void]
}>()

// State untuk tree data divisi - dimulai dengan data level atas
const divisionTreeData = ref<DivisionTreeItem[]>([
  { value: '1', label: 'Medical', code: 'MED', hasChildren: true },
  { value: '2', label: 'Nursing', code: 'NUR', hasChildren: true },
  { value: '3', label: 'Admin', code: 'ADM', hasChildren: false },
  { value: '4', label: 'Support', code: 'SUP', hasChildren: true },
  { value: '5', label: 'Education', code: 'EDU', hasChildren: false },
  { value: '6', label: 'Pharmacy', code: 'PHA', hasChildren: true },
  { value: '7', label: 'Radiology', code: 'RAD', hasChildren: false },
  { value: '8', label: 'Laboratory', code: 'LAB', hasChildren: true },
])

// Helper function untuk mencari dan menyisipkan data anak ke dalam tree
function findAndInsertChildren(nodes: DivisionTreeItem[], parentId: string, newChildren: DivisionTreeItem[]): boolean {
  for (const node of nodes) {
    if (node.value === parentId) {
      node.children = newChildren
      return true
    }
    if (node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
      return true
    }
  }
  return false
}

// Fungsi untuk fetch data anak divisi (lazy loading)
async function handleFetchDivisionChildren(parentId: string): Promise<void> {
  console.log(`Mengambil data sub-divisi untuk parent: ${parentId}`)

  // Simulasi delay API call
  await new Promise(resolve => setTimeout(resolve, 800))

  let childrenData: DivisionTreeItem[] = []

  // Sample data berdasarkan parent ID
  switch (parentId) {
    case '1': // Medical
      childrenData = [
        { value: '1-1', label: 'Cardiology', code: 'CAR', hasChildren: true },
        { value: '1-2', label: 'Neurology', code: 'NEU', hasChildren: false },
        { value: '1-3', label: 'Oncology', code: 'ONC', hasChildren: false },
      ]
      break
    case '2': // Nursing
      childrenData = [
        { value: '2-1', label: 'ICU Nursing', code: 'ICU-N', hasChildren: false },
        { value: '2-2', label: 'ER Nursing', code: 'ER-N', hasChildren: false },
        { value: '2-3', label: 'Ward Nursing', code: 'WARD-N', hasChildren: true },
      ]
      break
    case '4': // Support
      childrenData = [
        { value: '4-1', label: 'IT Support', code: 'IT-S', hasChildren: false },
        { value: '4-2', label: 'Maintenance', code: 'MNT-S', hasChildren: false },
      ]
      break
    case '6': // Pharmacy
      childrenData = [
        { value: '6-1', label: 'Inpatient Pharmacy', code: 'INP-PHA', hasChildren: false },
        { value: '6-2', label: 'Outpatient Pharmacy', code: 'OUT-PHA', hasChildren: false },
      ]
      break
    case '8': // Laboratory
      childrenData = [
        { value: '8-1', label: 'Clinical Lab', code: 'CLI-LAB', hasChildren: false },
        { value: '8-2', label: 'Pathology Lab', code: 'PAT-LAB', hasChildren: false },
      ]
      break
    case '1-1': // Cardiology sub-divisions
      childrenData = [
        { value: '1-1-1', label: 'Cardiac Surgery', code: 'CAR-SUR', hasChildren: false },
        { value: '1-1-2', label: 'Cardiac Cathlab', code: 'CAR-CAT', hasChildren: false },
      ]
      break
    case '2-3': // Ward Nursing sub-divisions
      childrenData = [
        { value: '2-3-1', label: 'Pediatric Ward', code: 'PED-W', hasChildren: false },
        { value: '2-3-2', label: 'Surgical Ward', code: 'SUR-W', hasChildren: false },
      ]
      break
  }

  // Insert data ke dalam tree state
  findAndInsertChildren(divisionTreeData.value, parentId, childrenData)
}

// Configuration untuk tree select
const divisionTreeConfig = computed(() => ({
  msg: {
    placeholder: '--- Pilih divisi induk',
    search: 'Cari divisi...',
    empty: 'Divisi tidak ditemukan',
  },
  data: divisionTreeData.value,
  onFetchChildren: handleFetchDivisionChildren,
}))

// Event handlers
function onSubmitForm(values: any, resetForm: () => void) {
  emit('submit', values, resetForm)
}

function onCancelForm(resetForm: () => void) {
  emit('cancel', resetForm)
}
</script>

<template>
  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
    <Icon name="i-lucide-sitemap" class="me-2" />
    <span class="font-semibold">Tambah</span> Divisi
  </div>

  <AppDivisionEntryForm
    :division="divisionConf"
    :division-tree="divisionTreeConfig"
    :schema="schemaConf"
    :initial-values="initialValues || { name: '', code: '', parentId: '' }"
    :errors="errors"
    @submit="onSubmitForm"
    @cancel="onCancelForm"
  />
</template>