Zone Locations

src/pages/Worker/WorkerDepartment.vue

@@ -1,10 +1,10 @@
 <script setup>
-import VnTree from 'components/ui/VnTree.vue';
+import WorkerDepartmentTree from './WorkerDepartmentTree.vue';
 </script>
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <VnTree />
+        <WorkerDepartmentTree />
     </QPage>
 </template>
 

src/pages/Worker/WorkerDepartmentTree.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useQuasar } from 'quasar';
 import DepartmentDescriptorProxy from 'src/pages/Department/Card/DepartmentDescriptorProxy.vue';
-import CreateDepartmentChild from '../CreateDepartmentChild.vue';
+import CreateDepartmentChild from './CreateDepartmentChild.vue';
 import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useRouter } from 'vue-router';

src/pages/Zone/Card/ZoneLocations.vue

@@ -1 +1,9 @@
-<template>Zone Locations</template>
+<script setup>
+import ZoneLocationsTree from './ZoneLocationsTree.vue';
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <ZoneLocationsTree />
+    </QPage>
+</template>

src/pages/Zone/Card/ZoneLocationsTree.vue

@@ -0,0 +1,169 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useState } from 'src/composables/useState';
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+const state = useState();
+
+const treeRef = ref();
+
+const expanded = ref([]);
+
+const nodes = ref([
+    { id: null, name: t('zoneLocations.locations'), sons: true, children: [{}] },
+]);
+
+const fetchedChildrensSet = ref(new Set());
+
+const onNodeExpanded = (nodeKeysArray) => {
+    if (!fetchedChildrensSet.value.has(nodeKeysArray.at(-1))) {
+        fetchedChildrensSet.value.add(nodeKeysArray.at(-1));
+        fetchNodeLeaves(nodeKeysArray.at(-1));
+    }
+
+    state.set('Tree', nodeKeysArray);
+};
+
+const formatNodeSelected = (node) => {
+    if (node.selected === 1) node.selected = true;
+    else if (node.selected === 0) node.selected = false;
+};
+
+const fetchNodeLeaves = async (nodeKey) => {
+    try {
+        const node = treeRef.value?.getNodeByKey(nodeKey);
+
+        if (!node || node.sons === 0) return;
+
+        const params = { parentId: node.id };
+        const response = await axios.get(`Zones/${route.params.id}/getLeaves`, {
+            params,
+        });
+        if (response.data) {
+            node.children = 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;
+            });
+        }
+
+        state.set('Tree', node);
+    } catch (err) {
+        console.error('Error fetching department leaves', err);
+        throw new Error();
+    }
+};
+
+const onSelected = async (val, node) => {
+    try {
+        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);
+    }
+};
+
+onMounted(async (n) => {
+    const tree = [...state.get('Tree'), 1];
+    const lastStateTree = state.get('TreeState');
+    if (tree) {
+        for (let n of tree) {
+            await fetchNodeLeaves(n);
+        }
+        expanded.value = tree;
+
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
+    setTimeout(() => {
+        if (lastStateTree) {
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+});
+</script>
+
+<template>
+    <QCard class="full-width" style="max-width: 800px">
+        <QTree
+            ref="treeRef"
+            :nodes="nodes"
+            node-key="id"
+            label-key="name"
+            v-model:expanded="expanded"
+            @update:expanded="onNodeExpanded($event)"
+            :default-expand-all="true"
+        >
+            <template #default-header="{ node }">
+                <div
+                    :id="node.id"
+                    class="qtr row justify-between full-width q-pr-md cursor-pointer"
+                >
+                    <span v-if="!node.id">{{ node.name }}</span>
+                    <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>
+    </QCard>
+</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>

src/pages/Zone/locale/en.yml

@@ -5,6 +5,7 @@ zone:
         zoneCreate: Create zone
         deliveryList: Delivery days
         upcomingList: Upcoming deliveries
+        locations: Locations
 list:
     clone: Clone
     id: Id
@@ -40,3 +41,5 @@ summary:
 filterPanel:
     name: Name
     agencyModeFk: Agency
+zoneLocations:
+    locations: Locations

src/pages/Zone/locale/es.yml

@@ -5,6 +5,7 @@ zone:
         zoneCreate: Nueva zona
         deliveryList: Días de entrega
         upcomingList: Próximos repartos
+        locations: Localizaciones
 list:
     clone: Clonar
     id: Id
@@ -40,3 +41,5 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
+zoneLocations:
+    locations: Localizaciones

src/router/modules/zone.js

@@ -79,7 +79,7 @@ export default {
                     path: 'location',
                     meta: {
                         title: 'locations',
-                        icon: 'vn:greuge',
+                        icon: 'my_location',
                     },
                     component: () => import('src/pages/Zone/Card/ZoneLocations.vue'),
                 },