Khafid Prayoga
ba6485a3e7
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
46 lines
1.2 KiB
Vue
46 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import type { TreeItem } from './type'
|
|
import Leaf from './leaf.vue'
|
|
import TreeNode from './tree-node.vue'
|
|
|
|
const props = defineProps<{
|
|
data: TreeItem[]
|
|
selectedValue?: string
|
|
onFetchChildren: (parentId: string) => Promise<void>
|
|
}>()
|
|
|
|
const emit = defineEmits(['select'])
|
|
|
|
function handleSelect(value: string) {
|
|
emit('select', value)
|
|
}
|
|
|
|
// Computed untuk mendeteksi apakah ada node dengan children dalam level ini
|
|
const hasAnyChildrenInLevel = computed(() => {
|
|
return props.data.some(item => item.hasChildren)
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="tree-view min-w-max">
|
|
<template v-for="item in data" :key="item.value">
|
|
<!-- Jika item memiliki children, gunakan TreeNode -->
|
|
<TreeNode
|
|
v-if="item.hasChildren"
|
|
:item="item"
|
|
:selected-value="selectedValue"
|
|
:on-fetch-children="onFetchChildren"
|
|
@select="handleSelect"
|
|
/>
|
|
<!-- Jika item tidak memiliki children, gunakan Leaf -->
|
|
<Leaf
|
|
v-else
|
|
:item="item"
|
|
:selected-value="selectedValue"
|
|
:should-align="hasAnyChildrenInLevel"
|
|
@select="handleSelect"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|