feat(division): wip tree select component

feat(division): update division list components and add mock api - Replace patient API endpoint with division mock endpoint - Simplify table columns and headers for division list - Add mock API endpoint for division list with tree/flat format feat(select-tree): add collapsible tree select component with lazy loading Implement a tree select component with collapsible sections and lazy loading of child items. Includes: - Collapsible component wrappers for Vue - Command component wrappers for combobox functionality - Tree select item component with loading states - Example implementation in dev page todo: - scroll on overflow - long text truncate possibly with tooltip - more than > 5 depth of child - mutate the children lazy - integration backend for search based text and return keys feat(select-tree): add command-item component for tree selection adjust hover bg-accent (remove state on-highlighted at styling) to avoid conflict on global component refactor(select-tree): extract TreeItem interface to shared type file Move TreeItem interface to a dedicated type file for better code organization and reusability. Update components to import the interface and add styling improvements to the tree-select component. adjust text size for tree to sm refactor(select-tree): rename tree-select-item to leaf and improve component - Rename component to better reflect its purpose as a leaf node - Improve UI with better spacing and hover states - Simplify toggle logic using v-model - Add checkmark icon for selected items checkpoint wip
2025-09-09 13:37:52 +07:00
parent 266d5f740b
commit ba6485a3e7
13 changed files with 902 additions and 51 deletions
@@ -0,0 +1,163 @@
+export default defineEventHandler(async (event) => {
+  // Ambil query parameters
+  const payload = { ...getQuery(event) }
+  const isTreeFormat = payload.tree === 'true' || payload.tree === '1'
+
+  // Mock data division dengan struktur nested meta parent
+  const baseDivisions = [
+    {
+      id: 1,
+      name: 'Direktorat Medis',
+      code: 'DIR-MED',
+      parentId: null,
+    },
+    {
+      id: 2,
+      name: 'Bidang Medik',
+      code: 'BDG-MED',
+      parentId: 1,
+    },
+    {
+      id: 3,
+      name: 'Tim Kerja Ranap, ICU, Bedah',
+      code: 'TIM-RAN',
+      parentId: 2,
+    },
+    {
+      id: 4,
+      name: 'Direktorat Keperawatan',
+      code: 'DIR-KEP',
+      parentId: null,
+    },
+    {
+      id: 5,
+      name: 'Bidang Keperawatan',
+      code: 'BDG-KEP',
+      parentId: 4,
+    },
+    {
+      id: 6,
+      name: 'Tim Kerja Keperawatan Ranap, ICU, Bedah',
+      code: 'TIM-KEP',
+      parentId: 5,
+    },
+    {
+      id: 7,
+      name: 'Direktorat Penunjang',
+      code: 'DIR-PNJ',
+      parentId: null,
+    },
+    {
+      id: 8,
+      name: 'Bidang Penunjang Medik',
+      code: 'BDG-PNJ',
+      parentId: 7,
+    },
+    {
+      id: 9,
+      name: 'Tim Kerja Radiologi',
+      code: 'TIM-RAD',
+      parentId: 8,
+    },
+    {
+      id: 10,
+      name: 'Direktorat Produksi',
+      code: 'DIR-PRD',
+      parentId: null,
+    },
+    {
+      id: 11,
+      name: 'Bidang Teknologi',
+      code: 'BDG-TEK',
+      parentId: 10,
+    },
+    {
+      id: 12,
+      name: 'Tim Kerja Software Engineering',
+      code: 'TIM-SWE',
+      parentId: 11,
+    },
+    {
+      id: 13,
+      name: 'Direktorat Operasional',
+      code: 'DIR-OPS',
+      parentId: null,
+    },
+    {
+      id: 14,
+      name: 'Bidang HR & GA',
+      code: 'BDG-HRG',
+      parentId: 13,
+    },
+    {
+      id: 15,
+      name: 'Tim Kerja Rekrutmen',
+      code: 'TIM-REC',
+      parentId: 14,
+    },
+  ]
+
+  // Menambahkan meta parent pada setiap division
+  const divisions = baseDivisions
+    .map((division) => {
+      const parent = baseDivisions.find((d) => d.id === division.parentId)
+
+      const mapped = {
+        ...division,
+        meta: {
+          parentId: parent?.id || null,
+          name: parent?.name || null,
+          code: parent?.code || null,
+        },
+      }
+
+      if (mapped.meta.parentId === null) {
+        mapped.meta = null
+      }
+
+      return mapped
+    })
+    .sort((a, b) => {
+      if (a.parentId === null && b.parentId !== null) return -1
+      if (a.parentId !== null && b.parentId === null) return 1
+
+      return a.id - b.id
+    })
+
+  // Jika tree format diminta, konversi ke struktur hierarki
+  if (isTreeFormat) {
+    const buildTree = (parentId = null) => {
+      return baseDivisions
+        .filter(division => division.parentId === parentId)
+        .map(division => ({
+          id: division.id,
+          name: division.name,
+          code: division.code,
+          children: buildTree(division.id),
+        }))
+        .sort((a, b) => a.id - b.id)
+    }
+
+    const treeData = buildTree()
+
+    return {
+      success: true,
+      data: treeData,
+      message: 'Data division dalam format tree berhasil diambil',
+      meta: {
+        record_totalCount: baseDivisions.length,
+        format: 'tree',
+      },
+    }
+  }
+
+  return {
+    success: true,
+    data: divisions,
+    message: 'Data division berhasil diambil',
+    meta: {
+      record_totalCount: divisions.length,
+      format: 'flat',
+    },
+  }
+})