chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix(04): tree view

Browse source
This commit is contained in:
puriphatt 2024-09-26 11:51:59 +07:00
parent 3c64285ce4
commit 927841eda5
4 changed files with 120 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/04_product-service/FormServiceWork.vue
View file

@ -7,7 +7,7 @@ import WorkManagementComponent from './WorkManagementComponent.vue';
import AddButton from '../button/AddButton.vue';
import { ServiceCreate, WorkItems } from 'stores/product-service/types';
import TreeView from '../shared/TreeView.vue';
import { ref } from 'vue';
import { ref, watch } from 'vue';
const { t } = useI18n();
@ -37,16 +37,33 @@ defineEmits<{
const nodes = ref([
{
title: props.service?.name,
subtitle: props.service?.code,
subtitle: props.service?.code || ' ',
selected: false,
children: workItems.value.map((v) => ({
title: v.name,
subtitle: ' ',
children: v.product.map((x) => ({
title: x.name,
subtitle: x.code,
})),
})),
opened: true,
children: (function () {
const noNameObjects = workItems.value
.filter((v) => !v.name)
.flatMap((v) =>
v.product.map((x) => ({
title: x.name,
subtitle: x.code || ' ',
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
})),
);
const withNameObjects = workItems.value
.filter((v) => v.name)
.flatMap((v) => ({
title: v.name,
subtitle: ' ',
children: v.product.map((x) => ({
title: x.name,
subtitle: x.code || ' ',
})),
}));
return noNameObjects.concat(withNameObjects);
})(),
},
]);
@ -72,6 +89,45 @@ function confirmDelete(items: unknown[], index: number) {
cancel: () => {},
});
}
watch(
() => workItems,
() => {
nodes.value = [
{
title: props.service?.name,
subtitle: props.service?.code || ' ',
selected: false,
opened: true,
children: (function () {
const noNameObjects = workItems.value
.filter((v) => !v.name)
.flatMap((v) =>
v.product.map((x) => ({
title: x.name,
subtitle: x.code || ' ',
icon: 'mdi-shopping-outline',
bg: 'hsla(var(--teal-10-hsl)/0.1)',
fg: 'var(--teal-10)',
})),
);
const withNameObjects = workItems.value
.filter((v) => v.name)
.flatMap((v) => ({
title: v.name,
subtitle: ' ',
children: v.product.map((x) => ({
title: x.name,
subtitle: x.code || ' ',
})),
}));
return noNameObjects.concat(withNameObjects);
})(),
},
];
},
{ deep: true },
);
</script>
<template>

11
src/components/shared/TreeView.vue
View file

@ -6,6 +6,9 @@ type Node = {
[key: string]: any;
opened?: boolean;
selected?: boolean;
bg?: string;
fg?: string;
icon?: string;
children?: Node[];
};
@ -86,7 +89,7 @@ function toggleExpand(node: Node) {
<div
v-if="level !== maxLevel"
class="q-mr-md"
style="color: var(--stone-4)"
:style="`color: ${node.children?.length === 0 || !node.children ? 'transparent' : 'var(--stone-4)'}`"
>
<q-icon
name="mdi-chevron-down-circle"
@ -109,14 +112,14 @@ function toggleExpand(node: Node) {
<div
class="item__icon flex items-center justify-center"
:style="`background: ${dec?.bg}; color: ${dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
>
<div
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
>
<Icon
v-if="dec && dec.icon"
:icon="dec.icon"
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
:icon="node.icon || dec.icon"
class="full-width full-height"
/>
</div>