adapt tree

src/pages/Zone/Card/ZoneEventExclusionForm.vue

@@ -163,7 +163,11 @@ onMounted(() => {
                     :toggle-indeterminate="false"
                     :root-label="t('eventsExclusionForm.rootTreeLabel')"
                     v-model:tickedNodes="tickedNodes"
-                />
+                >
+                    <template #content="{ node }">
+                        <span>{{ node.name }}</span>
+                    </template>
+                </ZoneLocationsTree>
             </div>
         </template>
         <template #custom-buttons>

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -8,14 +8,6 @@ import axios from 'axios';
 import { useArrayData } from 'composables/useArrayData';
 
 const props = defineProps({
-    toggleIndeterminate: {
-        type: Boolean,
-        default: false,
-    },
-    isZoneLocationsView: {
-        type: Boolean,
-        default: false,
-    },
     rootLabel: {
         type: String,
         default: 'Locations',
@@ -56,13 +48,16 @@ const _tickedNodes = computed({
     get: () => props.tickedNodes,
     set: (value) => emit('update:tickedNodes', value),
 });
+
 const previousExpandedNodes = ref(new Set());
 
 const onNodeExpanded = async (nodeKeysArray) => {
-    const nodeKeysSet = new Set(nodeKeysArray);
+    let nodeKeysSet = new Set(nodeKeysArray);
     const lastNodeKey = nodeKeysArray.at(-1);
-    const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
 
+    if (!nodeKeysSet.has(null)) return;
+
+    const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
     if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
     else {
         const difference = new Set(
@@ -73,17 +68,22 @@ const onNodeExpanded = async (nodeKeysArray) => {
         const allNodeIds = getNodeIds(node);
         expanded.value = expanded.value.filter((id) => !allNodeIds.includes(id));
     }
-
     previousExpandedNodes.value = nodeKeysSet;
 };
 
 const formatNodeSelected = (node) => {
-    if (!props.isZoneLocationsView) {
-        node.selected = false;
-        return;
-    }
     if (node.selected === 1) node.selected = true;
     else if (node.selected === 0) node.selected = false;
+
+    if (node.childs && node.childs.length > 0) {
+        expanded.value.push(node.id);
+
+        node.childs.forEach((childNode) => {
+            formatNodeSelected(childNode);
+        });
+    }
+
+    if (node.sons > 0 && !node.childs) node.childs = [{}];
 };
 
 const fetchNodeLeaves = async (nodeKey) => {
@@ -96,16 +96,8 @@ const fetchNodeLeaves = async (nodeKey) => {
             params,
         });
         if (response.data) {
-            node.children = response.data.map((n) => {
+            node.childs = response.data.map((n) => {
-                const hasChildrens = n.sons > 0;
-                n.children = hasChildrens ? [{}] : null;
                 formatNodeSelected(n);
-
-                if (n.child && n.child.length > 0) {
-                    n.child.forEach((childNode) => {
-                        formatNodeSelected(childNode);
-                    });
-                }
                 return n;
             });
         }
@@ -117,39 +109,34 @@ const fetchNodeLeaves = async (nodeKey) => {
     }
 };
 
-const onSelected = async (val, node) => {
-    try {
-        if (!props.isZoneLocationsView) return;
-        if (val === null) val = undefined;
-        const params = { geoId: node.id, isIncluded: val };
-        await axios.post(`Zones/${route.params.id}/toggleIsIncluded`, params);
-    } catch (err) {
-        console.error('Error updating included', err);
-    }
-};
-
 function getNodeIds(node) {
     let ids = [];
     if (node.id) ids.push(node.id);
 
-    const children = node.childs || node.children;
+    if (node.childs)
-    if (children) {
+        node.childs.forEach((child) => {
-        children.forEach((child) => {
             ids = ids.concat(getNodeIds(child));
         });
-    }
     return ids;
 }
 
 watch(storeData, async (val) => {
     // Se triggerea cuando se actualiza el store.data, el cual es el resultado del fetch de la searchbar
-    nodes.value[0].children = [...val];
+    nodes.value[0].childs = [...val];
     const fetchedNodeKeys = val.flatMap(getNodeIds);
     state.set('Tree', [...fetchedNodeKeys]);
+
+    if (store.userParams?.search === '') {
+        val.forEach((n) => {
+            formatNodeSelected(n);
+        });
+    } else {
         for (let n of state.get('Tree')) {
             await fetchNodeLeaves(n);
         }
-    expanded.value = [null, 1, ...fetchedNodeKeys];
+        expanded.value = [null];
+    }
+    previousExpandedNodes.value = new Set(expanded.value);
 });
 
 onMounted(async () => {
@@ -158,13 +145,12 @@ onMounted(async () => {
         return;
     }
     const stateTree = state.get('Tree');
-    const tree = stateTree ? [...state.get('Tree'), 1] : [null, 1];
+    const tree = stateTree ? [...state.get('Tree')] : [null];
     const lastStateTree = state.get('TreeState');
     if (tree) {
         for (let n of tree) {
             await fetchNodeLeaves(n);
         }
-        expanded.value = tree;
 
         if (lastStateTree) {
             tree.push(lastStateTree);
@@ -177,6 +163,9 @@ onMounted(async () => {
             document.getElementById(lastStateTree).scrollIntoView();
         }
     }, 1000);
+
+    expanded.value = [null];
+    previousExpandedNodes.value = new Set(expanded.value);
 });
 
 onUnmounted(() => {
@@ -190,10 +179,11 @@ onUnmounted(() => {
         :nodes="nodes"
         node-key="id"
         label-key="name"
-        v-model:expanded="expanded"
+        children-key="childs"
         tick-strategy="strict"
-        v-model:ticked="_tickedNodes"
+        v-model:expanded="expanded"
         @update:expanded="onNodeExpanded($event)"
+        v-model:ticked="_tickedNodes"
         :default-expand-all="true"
     >
         <template #default-header="{ node }">
@@ -201,56 +191,8 @@ onUnmounted(() => {
                 :id="node.id"
                 class="qtr row justify-between full-width q-pr-md cursor-pointer"
             >
-                <span v-if="!isZoneLocationsView">{{ node.name }}</span>
+                <slot name="content" :node="node" />
-                <QCheckbox
-                    v-else
-                    v-model="node.selected"
-                    :label="node.name"
-                    @update:model-value="($event) => onSelected($event, node)"
-                    toggle-indeterminate
-                    color="transparent"
-                    :class="[
-                        'checkbox',
-                        node.selected
-                            ? '--checked'
-                            : node.selected == false
-                            ? '--unchecked'
-                            : '--indeterminate',
-                    ]"
-                />
             </div>
         </template>
     </QTree>
 </template>
-
-<style lang="scss">
-.checkbox {
-    &.--checked {
-        .q-checkbox__bg {
-            border: 1px solid $info !important;
-        }
-        .q-checkbox__svg {
-            color: white !important;
-            background-color: $info !important;
-        }
-    }
-
-    &.--unchecked {
-        .q-checkbox__bg {
-            border: 1px solid $negative !important;
-        }
-        .q-checkbox__svg {
-            background-color: $negative !important;
-        }
-    }
-
-    &.--indeterminate {
-        .q-checkbox__bg {
-            border: 1px solid $white !important;
-        }
-        .q-checkbox__svg {
-            color: transparent !important;
-        }
-    }
-}
-</style>