feat(division): fixing logic treeview

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

@@ -49,8 +49,9 @@ const [division] = defineField('division_id')
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.parent_id !== undefined) parent.value = props.values.parent_id
-  if (props.values.division_id !== undefined) division.value = props.values.division_id
+  if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
+  if (props.values.division_id !== undefined) division.value = String(props.values.division_id)
+  console.log(props.values)
 }
 
 const resetForm = () => {

app/components/content/division/list.vue

@@ -129,7 +129,6 @@ watch(
     })
     if (result.success) {
       const currentData = result.body.data || []
-      console.log(currentData)
       divisionsTrees.value = convertDivisionToTreeItems(currentData || [])
     }
   },

app/components/pub/base/select-tree/leaf.vue

@@ -24,7 +24,7 @@ function handleSelect(value: string) {
       :class="{ 'pl-8': shouldAlign }"
       @select="() => handleSelect(item.value)"
     >
-      <span class="text-sm font-normal">{{ item.label }}</span>
+      <span class="text-sm font-normal text-gray-400">{{ item.label }}</span>
       <Check
         v-if="selectedValue === item.value"
         class="w-4 h-4 text-primary ml-2 flex-shrink-0"
@@ -35,6 +35,6 @@ function handleSelect(value: string) {
 
 <style scoped>
 .leaf-node {
-  @apply w-full;
+  width: 100%;
 }
 </style>

app/components/pub/base/select-tree/tree-select.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
 
 const modelValue = defineModel<string>()
 const open = ref(false)
+const searchValue = ref('')
 
 function handleSelect(newVal: string) {
   modelValue.value = newVal
@@ -30,6 +31,27 @@ function findLabel(value: string, items: TreeItem[]): string | undefined {
 const selectedLabel = computed(() => {
   return modelValue.value ? findLabel(modelValue.value, props.data) : '--- select item'
 })
+
+const filteredData = computed(() => {
+  if (!searchValue.value) return props.data
+  // recursive filter
+  function filterTree(items: TreeItem[]): TreeItem[] {
+    return items
+      .map(item => {
+        const match = item.label.toLowerCase().includes(searchValue.value.toLowerCase())
+        let children: TreeItem[] | undefined = undefined
+        if (item.children) {
+          children = filterTree(item.children)
+        }
+        if (match || (children && children.length > 0)) {
+          return { ...item, children }
+        }
+        return null
+      })
+      .filter(Boolean) as TreeItem[]
+  }
+  return filterTree(props.data)
+})
 </script>
 
 <template>
@@ -50,12 +72,12 @@ const selectedLabel = computed(() => {
     </PopoverTrigger>
     <PopoverContent class="min-w-full max-w-[350px] p-0">
       <Command>
-        <CommandInput placeholder="Cari item..." />
+        <CommandInput placeholder="Cari item..." v-model="searchValue" />
         <CommandEmpty>Item tidak ditemukan.</CommandEmpty>
         <CommandList class="max-h-[300px] overflow-x-auto overflow-y-auto">
           <CommandGroup>
             <TreeView
-              :data="data"
+              :data="filteredData"
               :selected-value="modelValue"
               :on-fetch-children="onFetchChildren"
               :level="0"