Dev cleaning (#106)

app/pages/_dev/user/entry.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'blank',
+  public: true,
+})
+</script>
+
+<template>
+  <div>test tambah user</div>
+</template>

app/pages/_dev/user/list.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+
+definePageMeta({
+  layout: 'blank',
+})
+
+// Tipe data untuk konsistensi
+interface TreeItem {
+  value: string
+  label: string
+  hasChildren: boolean
+  children?: TreeItem[]
+}
+
+// State untuk data pohon. Awalnya hanya berisi data level atas.
+const treeData = ref<TreeItem[]>([
+  { value: 'frontend', label: 'Frontend', hasChildren: true },
+  { value: 'backend', label: 'Backend', hasChildren: true },
+  { value: 'devops', label: 'DevOps', hasChildren: false },
+])
+
+// State untuk menampung nilai yang dipilih
+const selectedValue = ref<string>()
+
+// --- INI BAGIAN PENTING: LOGIKA API DAN MANIPULASI DATA ---
+
+// Helper: Fungsi rekursif untuk mencari dan menyisipkan data anak ke dalam state
+function findAndInsertChildren(nodes: TreeItem[], parentId: string, newChildren: TreeItem[]) {
+  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 yang akan dipanggil oleh komponen TreeSelectItem untuk mengambil data
+async function handleFetchChildren(parentId: string) {
+  console.log(`Mengambil data anak untuk parent: ${parentId}`)
+
+  // Simulasi panggilan API ke backend Anda
+  await new Promise(resolve => setTimeout(resolve, 500)) // Delay 0.5 detik
+
+  let childrenData: TreeItem[] = []
+  if (parentId === 'frontend') {
+    childrenData = [
+      { value: 'vue', label: 'Vue.js', hasChildren: true },
+      { value: 'react', label: 'React.js', hasChildren: false },
+    ]
+  } else if (parentId === 'backend') {
+    childrenData = [
+      { value: 'nodejs', label: 'Node.js', hasChildren: false },
+      { value: 'golang', label: 'Go', hasChildren: false },
+    ]
+  } else if (parentId === 'vue') { // Contoh untuk level yang lebih dalam
+    childrenData = [
+      { value: 'nuxt', label: 'Nuxt.js', hasChildren: false },
+    ]
+  }
+  // Akhir simulasi
+
+  // Masukkan data anak yang baru didapat ke dalam state treeData
+  findAndInsertChildren(treeData.value, parentId, childrenData)
+}
+</script>
+
+<template>
+  <div class="p-10">
+    <h1 class="mb-4 text-2xl font-bold">Tree Select (Lazy Loading)</h1>
+    <TreeSelect v-model="selectedValue" :data="treeData" :on-fetch-children="handleFetchChildren" />
+    <p class="mt-4">
+      Value yang terpilih:
+      <span class="p-1 font-mono text-sm rounded-md bg-slate-100">{{ selectedValue || 'Belum ada' }}</span>
+    </p>
+  </div>
+</template>