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

feat: add filter node by text

Browse source
This commit is contained in:
Methapon Metanipat 2024-10-16 13:19:31 +07:00
parent f01e3d4ca9
commit 35c8a0ffb3
2 changed files with 197 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,6 +39,7 @@ type Props = {
const props = defineProps<Props>(); const props = defineProps<Props>();
const nodes = defineModel<Node[]>('nodes', { required: true }); const nodes = defineModel<Node[]>('nodes', { required: true });
const filterText = defineModel<string>('filterText', { required: false });
const emits = defineEmits<{ const emits = defineEmits<{
(e: 'checked'): void; (e: 'checked'): void;
@ -91,6 +92,25 @@ function toggleExpand(node: Node, ancestor?: []) {
node.opened = !node.opened; node.opened = !node.opened;
emits('open', node, ancestor); emits('open', node, ancestor);
} }
function filterNode(text: string, node: Node, ancestor?: Node[]) {
if (!text) return;
const getTitle = (n: Node): string => n[props.keyTitle || 'title'];
const getSubtitle = (n: Node): string => n[props.keySubtitle || 'subtitle'];
const recursiveFilter = (n: Node): boolean => {
if (!n.children) {
return getTitle(n).includes(text) || getSubtitle(n).includes(text);
}
return n.children.some((v) => recursiveFilter(v));
};
return (
ancestor?.some(
(v) => getTitle(v).includes(text) || getSubtitle(v).includes(text),
) || recursiveFilter(node)
);
}
</script> </script>
<template> <template>
@ -101,189 +121,195 @@ function toggleExpand(node: Node, ancestor?: []) {
'last-children': level && level === maxLevel, 'last-children': level && level === maxLevel,
}" }"
> >
<div v-for="(node, i) in nodes" class="tree-item" :key="i"> <template v-for="(node, i) in nodes" :key="i">
<slot <div
v-if="$slots['item']" class="tree-item"
name="item" v-if="filterText ? filterNode(filterText, node, ancestorNode) : true"
:data="{ node, toggleExpand, toggleCheck }" >
/> <slot
v-if="$slots['item']"
name="item"
:data="{ node, toggleExpand, toggleCheck }"
/>
<div class="row items-center" v-else> <div class="row items-center" v-else>
<div v-if="!level && movable" style="width: var(--size-16)"> <div v-if="!level && movable" style="width: var(--size-16)">
<q-btn <q-btn
id="btn-up" id="btn-up"
for="btn-up" for="btn-up"
icon="mdi-arrow-up" icon="mdi-arrow-up"
size="sm" size="sm"
dense dense
flat flat
round round
:disable="i === 0" :disable="i === 0"
style="color: hsl(var(--text-mute-2))" style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveUp', node)" @click.stop="$emit('moveUp', node)"
/> />
<q-btn <q-btn
id="btn-down" id="btn-down"
for="btn-down" for="btn-down"
icon="mdi-arrow-down" icon="mdi-arrow-down"
size="sm" size="sm"
dense dense
flat flat
round round
class="q-mx-sm" class="q-mx-sm"
:disable="i === nodes.length - 1" :disable="i === nodes.length - 1"
style="color: hsl(var(--text-mute-2))" style="color: hsl(var(--text-mute-2))"
@click.stop="$emit('moveDown', node)" @click.stop="$emit('moveDown', node)"
/> />
</div> </div>
<div <div
class="item__content row items-center no-wrap col" class="item__content row items-center no-wrap col"
:class="{ active: selectedNode?.includes(node) }" :class="{ active: selectedNode?.includes(node) }"
@click=" @click="
() => (selectable ? $emit('select', node) : toggleExpand(node)) () => (selectable ? $emit('select', node) : toggleExpand(node))
" "
> >
<div style="width: var(--size-6); margin-right: var(--size-1)"> <div style="width: var(--size-6); margin-right: var(--size-1)">
<div <div
v-if="level !== maxLevel" v-if="level !== maxLevel"
class="q-mr-md" class="q-mr-md"
:style="`color: ${ :style="`color: ${
!node.displayDropIcon &&
(!node.children || node.children.length === 0)
? 'transparent'
: $q.dark.isActive
? 'var(--gray-7)'
: 'var(--gray-4)'
}`"
>
<q-icon
name="mdi-chevron-down-circle"
size="sm"
:style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
@click.stop="
!node.displayDropIcon && !node.displayDropIcon &&
(!node.children || node.children.length === 0) (!node.children || node.children.length === 0)
? $emit('select', node) ? 'transparent'
: toggleExpand(node) : $q.dark.isActive
" ? 'var(--gray-7)'
/> : 'var(--gray-4)'
}`"
>
<q-icon
name="mdi-chevron-down-circle"
size="sm"
:style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
@click.stop="
!node.displayDropIcon &&
(!node.children || node.children.length === 0)
? $emit('select', node)
: toggleExpand(node)
"
/>
</div>
</div> </div>
</div>
<label <label
v-if="!hideCheckBox" v-if="!hideCheckBox"
class="flex items-center item__checkbox" class="flex items-center item__checkbox"
@click.stop @click.stop
>
<input
type="checkbox"
v-model="node.checked"
:indeterminate="
node.children?.some((v) => !v.checked) &&
!node.children?.every((v) => !v.checked)
"
:style="`accent-color: var(--blue-7)`"
@click="toggleCheck(node)"
/>
</label>
<div
class="item__icon flex items-center justify-center"
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
>
<div
class="flex items-center justify-center"
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
> >
<Icon <input
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)" type="checkbox"
:icon="node.icon || dec.icon" v-model="node.checked"
class="full-width full-height" :indeterminate="
node.children?.some((v) => !v.checked) &&
!node.children?.every((v) => !v.checked)
"
:style="`accent-color: var(--blue-7)`"
@click="toggleCheck(node)"
/> />
</label>
<div
class="item__icon flex items-center justify-center"
:style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
>
<div
class="flex items-center justify-center"
:style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
>
<Icon
v-if="(node.icon && dec && dec.icon) || (dec && dec.icon)"
:icon="node.icon || dec.icon"
class="full-width full-height"
/>
</div>
</div> </div>
</div>
<div class="column"> <div class="column">
<span class="item__title"> <span class="item__title">
{{ node[keyTitle || 'title'] || 'No Title' }} {{ node[keyTitle || 'title'] || 'No Title' }}
</span> </span>
<span class="item__subtitle"> <span class="item__subtitle">
{{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }} {{ node[keySubtitle || 'subtitle'] || 'No Subtitle' }}
</span> </span>
</div> </div>
<DeleteButton <DeleteButton
v-if="deleteable" v-if="deleteable"
class="q-ml-auto" class="q-ml-auto"
icon-only icon-only
@click.stop="$emit('delete', node)" @click.stop="$emit('delete', node)"
/> />
</div>
</div> </div>
</div>
<transition name="slide"> <transition name="slide">
<div <div
v-if="node.opened && node.children && node.children.length > 0" v-if="node.opened && node.children && node.children.length > 0"
:class="{ 'q-pl-xl': movable }" :class="{ 'q-pl-xl': movable }"
class="tree-children" class="tree-children"
> >
<TreeView <TreeView
:iconSize :iconSize
:hideCheckBox :hideCheckBox
:selectable :selectable
:selectedNode :selectedNode
:deleteable="deleteableDeep" :filterText
class="item__children" :deleteable="deleteableDeep"
v-if="node.children" class="item__children"
v-model:nodes="node.children" v-if="node.children"
@open=" v-model:nodes="node.children"
(n) => { @open="
$emit( (n) => {
'open', $emit(
n, 'open',
!props.ancestorNode || props.ancestorNode.length === 0 n,
? [node] !props.ancestorNode || props.ancestorNode.length === 0
: [...props.ancestorNode, node], ? [node]
); : [...props.ancestorNode, node],
} );
"
@checked="
() => {
node.checked = true;
$emit('checked');
}
"
@unchecked="
() => {
if (node.children?.every((v) => v.checked === false)) {
node.checked = false;
} }
$emit('checked'); "
} @checked="
" () => {
@select=" node.checked = true;
(v) => $emit('checked');
$emit( }
'select', "
v, @unchecked="
!props.ancestorNode || props.ancestorNode.length === 0 () => {
? [node] if (node.children?.every((v) => v.checked === false)) {
: [...props.ancestorNode, node], node.checked = false;
) }
" $emit('checked');
:level="(level || 0) + 1" }
:ancestorNode=" "
!props.ancestorNode || props.ancestorNode.length === 0 @select="
? [node] (v) =>
: [...props.ancestorNode, node] $emit(
" 'select',
:expandable v,
:decoration !props.ancestorNode || props.ancestorNode.length === 0
/> ? [node]
</div> : [...props.ancestorNode, node],
</transition> )
<q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" /> "
</div> :level="(level || 0) + 1"
:ancestorNode="
!props.ancestorNode || props.ancestorNode.length === 0
? [node]
: [...props.ancestorNode, node]
"
:expandable
:decoration
/>
</div>
</transition>
<q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
</div>
</template>
</div> </div>
</template> </template>

1
src/pages/05_quotation/ProductServiceForm.vue
View file

@ -540,6 +540,7 @@ watch(
movable movable
deleteable deleteable
selectable selectable
:filter-text="inputSearch"
:selected-node="selectedNode" :selected-node="selectedNode"
@move-up="(node) => toggleMove(node, 'up')" @move-up="(node) => toggleMove(node, 'up')"
@move-down="(node) => toggleMove(node, 'down')" @move-down="(node) => toggleMove(node, 'down')"