c5ec8ccd32
- Add level prop to track node hierarchy - Fix indentation calculation for leaves and nodes - Simplify alignment logic based on node level
117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<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>
|