Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into fe-integrasi-device-material-65

app/components/app/divison/entry-form.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { TreeItem } from '~/components/pub/base/select-tree/type'
 import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
+import TreeSelect from '~/components/pub/base/select-tree/tree-select.vue'
 import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
 import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
 import Field from '~/components/pub/custom-ui/form/field.vue'
@@ -11,7 +13,6 @@ interface DivisionFormData {
   code: string
   parentId: string
 }
-
 const props = defineProps<{
   division: {
     msg: {
@@ -22,9 +23,17 @@ const props = defineProps<{
     items: {
       value: string
       label: string
-      code: string
     }[]
   }
+  divisionTree?: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    data: TreeItem[]
+    onFetchChildren: (parentId: string) => Promise<void>
+  }
   schema: any
   initialValues?: Partial<DivisionFormData>
   errors?: FormErrors
@@ -92,17 +101,27 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
             </Field>
           </FieldGroup>
 
-          <FieldGroup :column="2">
-            <Label label-for="parentId">Kelompok</Label>
+          <FieldGroup>
+            <Label label-for="parentId">Divisi Induk</Label>
             <Field id="parentId" :errors="errors">
               <FormField v-slot="{ componentField }" name="parentId">
                 <FormItem>
                   <FormControl>
+                    <!-- Gunakan TreeSelect jika divisionTree tersedia, fallback ke Combobox -->
+                    <TreeSelect
+                      v-if="props.divisionTree"
+                      id="parentId"
+                      :model-value="componentField.modelValue"
+                      :data="props.divisionTree.data"
+                      :on-fetch-children="props.divisionTree.onFetchChildren"
+                      @update:model-value="componentField.onChange"
+                    />
                     <Combobox
+                      v-else
                       id="parentId" v-bind="componentField" :items="props.division.items"
                       :placeholder="props.division.msg.placeholder" :search-placeholder="props.division.msg.search"
                       :empty-message="props.division.msg.empty"
-                      />
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>

app/components/app/divison/list-cfg.ts

@@ -12,31 +12,11 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [
-  { width: 100 },
-  { },
-  { },
-  { },
-  { width: 50 },
-]
+export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [
-    { label: 'Id' },
-    { label: 'Nama' },
-    { label: 'Kode' },
-    { label: 'Kelompok' },
-    { label: '' },
-  ],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]]
 
-export const keys = [
-  'id',
-  'firstName',
-  'cellphone',
-  'birth_place',
-  'action',
-]
+export const keys = ['code', 'name', 'ancestor', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -44,24 +24,13 @@ export const delKeyNames: KeyLabel[] = [
 ]
 
 export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
+  ancestor: (rec: unknown): unknown => {
     const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
+    if (recX.meta === null) {
+      return '-'
     }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+
+    return recX.meta.name
   },
 }
 

app/components/app/divison/tree.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import TreeSelect from '~/components/pub/base/select-tree/tree-select.vue'
+
+/**
+ * DEMO COMPONENT - Tree Select dengan Lazy Loading
+ *
+ * Komponen ini adalah contoh penggunaan TreeSelect dengan data teknologi.
+ * Untuk penggunaan dalam aplikasi nyata, lihat komponen content/division/entry.vue
+ * yang menggunakan tree select untuk data divisi rumah sakit.
+ */
+
+// Tipe data untuk konsistensi
+interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+// State untuk data pohon demo - data teknologi sebagai contoh
+const treeData = ref<TreeItem[]>([
+  { value: 'frontend', label: 'Frontend Development', hasChildren: true },
+  { value: 'backend', label: 'Backend Development', hasChildren: true },
+  { value: 'mobile', label: 'Mobile Development', hasChildren: true },
+  { value: 'devops', label: 'DevOps & Infrastructure', hasChildren: false },
+])
+
+// State untuk menampung nilai yang dipilih
+const selectedValue = ref<string>()
+
+// --- DEMO LOGIC: SIMULASI API DAN MANIPULASI DATA ---
+
+// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]): boolean {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    if (node && node.value === parentId) {
+      // Gunakan Vue.set equivalent untuk memastikan reactivity
+      node.children = [...newChildren]
+      console.log(`[findAndInsertChildren] Updated children for ${parentId}:`, node.children)
+      return true
+    }
+    if (node && node.children && findAndInsertChildren(node.children, parentId, newChildren)) {
+      return true
+    }
+  }
+  return false
+}
+
+// Fungsi demo untuk simulasi fetch data dari API
+async function handleFetchChildren(parentId: string): Promise<void> {
+  console.log(`[DEMO] Mengambil data anak untuk parent: ${parentId}`)
+
+  // Simulasi delay API call
+  await new Promise(resolve => setTimeout(resolve, 600))
+
+  let childrenData: TreeItem[] = []
+
+  // Sample data berdasarkan parent ID
+  switch (parentId) {
+    case 'frontend':
+      childrenData = [
+        { value: 'vue', label: 'Vue.js', hasChildren: true },
+        { value: 'react', label: 'React.js', hasChildren: true },
+        { value: 'angular', label: 'Angular', hasChildren: false },
+        { value: 'svelte', label: 'Svelte', hasChildren: false },
+      ]
+      break
+    case 'backend':
+      childrenData = [
+        { value: 'nodejs', label: 'Node.js', hasChildren: true },
+        { value: 'python', label: 'Python', hasChildren: true },
+        { value: 'golang', label: 'Go', hasChildren: false },
+        { value: 'rust', label: 'Rust', hasChildren: false },
+      ]
+      break
+    case 'mobile':
+      childrenData = [
+        { value: 'flutter', label: 'Flutter', hasChildren: false },
+        { value: 'react-native', label: 'React Native', hasChildren: false },
+        { value: 'ionic', label: 'Ionic', hasChildren: false },
+      ]
+      break
+    case 'vue':
+      childrenData = [
+        { value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
+        { value: 'quasar', label: 'Quasar', hasChildren: false },
+      ]
+      break
+    case 'react':
+      childrenData = [
+        { value: 'nextjs', label: 'Next.js', hasChildren: false },
+        { value: 'gatsby', label: 'Gatsby', hasChildren: false },
+      ]
+      break
+    case 'nodejs':
+      childrenData = [
+        { value: 'express', label: 'Express.js', hasChildren: false },
+        { value: 'nestjs', label: 'NestJS', hasChildren: false },
+        { value: 'fastify', label: 'Fastify', hasChildren: false },
+      ]
+      break
+    case 'python':
+      childrenData = [
+        { value: 'django', label: 'Django', hasChildren: false },
+        { value: 'fastapi', label: 'FastAPI', hasChildren: false },
+        { value: 'flask', label: 'Flask', hasChildren: false },
+      ]
+      break
+  }
+
+  // Insert data ke dalam tree state
+  const success = findAndInsertChildren(treeData.value, parentId, childrenData)
+  console.log(`[DEMO] Insert children result:`, success)
+
+  // Force trigger reactivity
+  triggerRef(treeData)
+  console.log(`[DEMO] Current tree data:`, JSON.stringify(treeData.value, null, 2))
+}
+</script>
+
+<template>
+  <div class="p-10 max-w-2xl mx-auto">
+    <div class="mb-6">
+      <h1 class="mb-2 text-3xl font-bold text-slate-800">Demo: Tree Select dengan Lazy Loading</h1>
+      <p class="text-slate-600">
+        Contoh penggunaan komponen TreeSelect dengan data teknologi.
+        Pilih item untuk melihat sub-kategori yang dimuat secara lazy.
+      </p>
+    </div>
+
+    <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
+      <h3 class="font-semibold text-blue-800 mb-2">💡 Catatan untuk Developer:</h3>
+      <p class="text-sm text-blue-700">
+        Untuk implementasi nyata dengan data divisi rumah sakit,
+        lihat komponen <code class="px-1 bg-blue-100 rounded">content/division/entry.vue</code>
+      </p>
+    </div>
+
+    <div class="space-y-4">
+      <div>
+        <label class="block text-sm font-medium text-slate-700 mb-2">
+          Pilih Teknologi:
+        </label>
+        <TreeSelect
+          v-model="selectedValue"
+          :data="treeData"
+          :on-fetch-children="handleFetchChildren"
+        />
+      </div>
+
+      <div class="p-4 bg-slate-50 rounded-lg">
+        <p class="text-sm text-slate-600 mb-1">Value yang terpilih:</p>
+        <span class="px-3 py-1 font-mono text-sm bg-white border rounded-md">
+          {{ selectedValue || 'Belum ada yang dipilih' }}
+        </span>
+      </div>
+    </div>
+
+    <div class="mt-8 text-xs text-slate-500">
+      <p>🔄 Data dimuat secara lazy saat node parent dibuka</p>
+      <p>⏱️ Simulasi delay 600ms untuk menampilkan loading state</p>
+    </div>
+  </div>
+</template>