dev: hotfix refactor

+ merged pub/custom-ui and pub/base into my-ui - droped pub/custom-ui
2025-10-05 09:45:17 +07:00
parent 72627b8a37
commit 2da4e616ba
219 changed files with 474 additions and 474 deletions
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { TreeItem } from './type'
+import { Check, ChevronRight, Loader2 } from 'lucide-vue-next'
+import TreeView from './tree-view.vue'
+
+const props = defineProps<{
+  item: TreeItem
+  selectedValue?: string
+  onFetchChildren: (parentId: string) => Promise<void>
+  level?: number
+}>()
+
+const emit = defineEmits(['select'])
+
+const hasChildren = computed(() => props.item.children && props.item.children.length > 0)
+
+const isOpen = ref(false)
+const isLoading = ref(false)
+const isChevronRotated = ref(false)
+
+function handleSelect(value: string) {
+  emit('select', value)
+}
+
+function handleLabelClick() {
+  handleSelect(props.item.value)
+}
+
+watch(isOpen, async (newValue) => {
+  console.log(`[TreeNode] ${props.item.label} - isOpen changed to:`, newValue)
+
+  isChevronRotated.value = newValue
+
+  if (newValue && props.item.hasChildren && !props.item.children && !isLoading.value) {
+    console.log(`[TreeNode] Fetching children for: ${props.item.label}`)
+    isLoading.value = true
+    try {
+      await props.onFetchChildren(props.item.value)
+      console.log(`[TreeNode] Fetch completed for: ${props.item.label}`, props.item.children)
+      // Force reactivity update dengan nextTick
+      await nextTick()
+    } catch (error) {
+      console.error('Gagal memuat data anak:', error)
+      // Tutup kembali jika gagal fetch
+      isOpen.value = false
+    } finally {
+      isLoading.value = false
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="tree-node min-w-max">
+    <Collapsible v-model:open="isOpen" class="w-full">
+      <!-- Node Header -->
+      <div class="flex items-center justify-start w-full p-2 rounded-md hover:bg-accent gap-2">
+        <!-- Chevron Toggle Button -->
+        <CollapsibleTrigger as-child>
+          <Button
+            variant="ghost"
+            class="h-4 w-4 p-0 flex items-center justify-center"
+          >
+            <Loader2 v-if="isLoading" class="w-4 h-4 animate-spin text-muted-foreground" />
+            <ChevronRight
+              v-else
+              class="w-4 h-4 transition-transform duration-200 ease-in-out text-muted-foreground"
+              :class="{
+                'rotate-90': isChevronRotated,
+              }"
+            />
+          </Button>
+        </CollapsibleTrigger>
+
+        <!-- Node Label -->
+        <span
+          class="text-sm font-normal cursor-pointer hover:text-primary flex-1 flex items-center justify-between"
+          @click="handleLabelClick"
+        >
+          {{ item.label }}
+          <!-- Check Icon untuk selected state -->
+          <Check
+            v-if="selectedValue === item.value"
+            class="w-4 h-4 text-primary ml-2 flex-shrink-0"
+          />
+        </span>
+      </div>
+
+      <!-- Children Container -->
+      <CollapsibleContent class="pl-6">
+        <div v-if="!hasChildren" class="text-sm text-muted-foreground p-2">
+          {{ isLoading ? 'Memuat...' : 'Tidak ada data' }}
+        </div>
+        <TreeView
+          v-else
+          :data="item.children!"
+          :selected-value="selectedValue"
+          :on-fetch-children="onFetchChildren"
+          :level="(level || 0) + 1"
+          @select="handleSelect"
+        />
+      </CollapsibleContent>
+    </Collapsible>
+  </div>
+</template>
+
+<style scoped>
+.tree-node {
+  @apply w-full;
+}
+
+/* Animasi tambahan untuk smooth transition */
+.tree-node .collapsible-content {
+  transition: all 0.2s ease-in-out;
+}
+</style>