feat: add filter node by text

src/components/shared/TreeView.vue

@@ -39,6 +39,7 @@ type Props = {
 
 const props = defineProps<Props>();
 const nodes = defineModel<Node[]>('nodes', { required: true });
+const filterText = defineModel<string>('filterText', { required: false });
 
 const emits = defineEmits<{
   (e: 'checked'): void;
@@ -91,6 +92,25 @@ function toggleExpand(node: Node, ancestor?: []) {
   node.opened = !node.opened;
   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>
 
 <template>
@@ -101,7 +121,11 @@ function toggleExpand(node: Node, ancestor?: []) {
       '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">
+      <div
+        class="tree-item"
+        v-if="filterText ? filterNode(filterText, node, ancestorNode) : true"
+      >
         <slot
           v-if="$slots['item']"
           name="item"
@@ -232,6 +256,7 @@ function toggleExpand(node: Node, ancestor?: []) {
               :hideCheckBox
               :selectable
               :selectedNode
+              :filterText
               :deleteable="deleteableDeep"
               class="item__children"
               v-if="node.children"
@@ -284,6 +309,7 @@ function toggleExpand(node: Node, ancestor?: []) {
         </transition>
         <q-separator v-if="!level && i !== nodes.length - 1" class="q-mt-sm" />
       </div>
+    </template>
   </div>
 </template>
 

src/pages/05_quotation/ProductServiceForm.vue

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