Merge pull request 'Zone Locations' (!390) from hyervoni/salix-front-mindshore:feature/ZoneLocations into dev

Reviewed-on: #390
Reviewed-by: Javier Segarra <jsegarra@verdnatura.es>
Reviewed-by: Alex Moreno <alexm@verdnatura.es>

src/components/common/VnCard.vue

@@ -20,6 +20,8 @@ const props = defineProps({
     searchUrl: { type: String, default: undefined },
     searchbarLabel: { type: String, default: '' },
     searchbarInfo: { type: String, default: '' },
+    searchCustomRouteRedirect: { type: String, default: undefined },
+    searchRedirect: { type: Boolean, default: false },
 });
 
 const stateStore = useStateStore();
@@ -62,6 +64,8 @@ watchEffect(() => {
                     :url="props.searchUrl"
                     :label="props.searchbarLabel"
                     :info="props.searchbarInfo"
+                    :custom-route-redirect-name="searchCustomRouteRedirect"
+                    :redirect="searchRedirect"
                 />
             </slot>
         </Teleport>

src/components/ui/VnSearchbar.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { useQuasar } from 'quasar';
 import { useArrayData } from 'composables/useArrayData';
 import VnInput from 'src/components/common/VnInput.vue';
@@ -67,11 +67,19 @@ const props = defineProps({
     },
 });
 
-const arrayData = useArrayData(props.dataKey, { ...props });
-const { store } = arrayData;
+let arrayData = useArrayData(props.dataKey, { ...props });
+let store = arrayData.store;
 const searchText = ref('');
 const { navigate } = useRedirect();
 
+watch(
+    () => props.dataKey,
+    (val) => {
+        arrayData = useArrayData(val, { ...props });
+        store = arrayData.store;
+    }
+);
+
 onMounted(() => {
     const params = store.userParams;
     if (params && params.search) {

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/ZoneCard.vue

@@ -5,38 +5,29 @@ import { computed } from 'vue';
 
 import VnCard from 'components/common/VnCard.vue';
 import ZoneDescriptor from './ZoneDescriptor.vue';
-import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
-
-import { useStateStore } from 'stores/useStateStore';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 const route = useRoute();
 
 const routeName = computed(() => route.name);
+const customRouteRedirectName = computed(() => {
+    if (routeName.value === 'ZoneLocations') return null;
+    return routeName.value;
+});
 const searchBarDataKeys = {
     ZoneWarehouses: 'ZoneWarehouses',
     ZoneSummary: 'ZoneSummary',
+    ZoneLocations: 'ZoneLocations',
 };
 </script>
 <template>
-    <template v-if="stateStore.isHeaderMounted()">
-        <Teleport to="#searchbar">
-            <VnSearchbar
-                :data-key="searchBarDataKeys[routeName]"
-                :custom-route-redirect-name="routeName"
-                :label="t('list.searchZone')"
-                :info="t('list.searchInfo')"
-            />
-        </Teleport>
-    </template>
     <VnCard
         data-key="Zone"
-        base-url="Zones"
         :descriptor="ZoneDescriptor"
-        searchbar-data-key="ZoneList"
-        searchbar-url="Zones"
-        searchbar-label="Search zones"
-        searchbar-info="You can search by zone reference"
+        :search-data-key="searchBarDataKeys[routeName]"
+        :search-custom-route-redirect="customRouteRedirectName"
+        :search-redirect="!!customRouteRedirectName"
+        :searchbar-label="t('list.searchZone')"
+        :searchbar-info="t('list.searchInfo')"
     />
 </template>

src/pages/Zone/Card/ZoneLocations.vue

@@ -1 +1,80 @@
-<template>Zone Locations</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import ZoneLocationsTree from './ZoneLocationsTree.vue';
+
+import axios from 'axios';
+
+const { t } = useI18n();
+const route = useRoute();
+
+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);
+    }
+};
+</script>
+
+<template>
+    <QPage class="column items-center q-pa-md">
+        <QCard class="full-width q-pa-md" style="max-width: 800px">
+            <ZoneLocationsTree :root-label="t('zoneLocations.locations')">
+                <template #checkbox="{ node }">
+                    <QCheckbox
+                        v-if="node.id"
+                        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',
+                        ]"
+                    />
+                </template>
+            </ZoneLocationsTree>
+        </QCard>
+    </QPage>
+</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/Card/ZoneLocationsTree.vue

@@ -0,0 +1,172 @@
+<script setup>
+import { onMounted, ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { useState } from 'src/composables/useState';
+import axios from 'axios';
+import { useArrayData } from 'composables/useArrayData';
+import { onUnmounted } from 'vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const state = useState();
+
+const treeRef = ref();
+const expanded = ref([]);
+
+const arrayData = useArrayData('ZoneLocations', {
+    url: `Zones/${route.params.id}/getLeaves`,
+});
+const { store } = arrayData;
+const storeData = computed(() => store.data);
+
+const nodes = ref([
+    { id: null, name: t('zoneLocations.locations'), sons: true, childs: [{}] },
+]);
+
+const previousExpandedNodes = ref(new Set());
+
+const onNodeExpanded = async (nodeKeysArray) => {
+    let nodeKeysSet = new Set(nodeKeysArray);
+    const lastNodeKey = nodeKeysArray.at(-1);
+
+    if (!nodeKeysSet.has(null)) return;
+
+    const wasExpanded = !previousExpandedNodes.value.has(lastNodeKey);
+    if (wasExpanded) await fetchNodeLeaves(lastNodeKey);
+    else {
+        const difference = new Set(
+            [...previousExpandedNodes.value].filter((x) => !nodeKeysSet.has(x))
+        );
+        const collapsedNode = Array.from(difference).pop();
+        const node = treeRef.value?.getNodeByKey(collapsedNode);
+        const allNodeIds = getNodeIds(node);
+        expanded.value = expanded.value.filter((id) => !allNodeIds.includes(id));
+    }
+    previousExpandedNodes.value = nodeKeysSet;
+};
+
+const formatNodeSelected = (node) => {
+    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) => {
+    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.childs = response.data.map((n) => {
+                formatNodeSelected(n);
+                return n;
+            });
+        }
+
+        state.set('Tree', node);
+    } catch (err) {
+        console.error('Error fetching department leaves', err);
+        throw new Error();
+    }
+};
+
+function getNodeIds(node) {
+    let ids = [];
+    if (node.id) ids.push(node.id);
+
+    if (node.childs)
+        node.childs.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].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, ...fetchedNodeKeys];
+    }
+    previousExpandedNodes.value = new Set(expanded.value);
+});
+
+onMounted(async () => {
+    if (store.userParams?.search) {
+        await arrayData.fetch({ append: false });
+        return;
+    }
+    const stateTree = state.get('Tree');
+    const tree = stateTree ? [...state.get('Tree')] : [null];
+    const lastStateTree = state.get('TreeState');
+    if (tree) {
+        for (let n of tree) {
+            await fetchNodeLeaves(n);
+        }
+
+        if (lastStateTree) {
+            tree.push(lastStateTree);
+            await fetchNodeLeaves(lastStateTree);
+        }
+    }
+
+    setTimeout(() => {
+        if (lastStateTree) {
+            document.getElementById(lastStateTree).scrollIntoView();
+        }
+    }, 1000);
+
+    previousExpandedNodes.value = new Set(expanded.value);
+});
+
+onUnmounted(() => {
+    state.set('Tree', undefined);
+});
+</script>
+
+<template>
+    <QTree
+        ref="treeRef"
+        :nodes="nodes"
+        node-key="id"
+        label-key="name"
+        children-key="childs"
+        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>
+                <slot name="checkbox" :node="node" />
+            </div>
+        </template>
+    </QTree>
+</template>

src/pages/Zone/locale/en.yml

@@ -42,6 +42,8 @@ summary:
 filterPanel:
     name: Name
     agencyModeFk: Agency
+zoneLocations:
+    locations: Locations
 deliveryPanel:
     pickup: Pick up
     delivery: Delivery

src/pages/Zone/locale/es.yml

@@ -42,6 +42,8 @@ summary:
 filterPanel:
     name: Nombre
     agencyModeFk: Agencia
+zoneLocations:
+    locations: Localizaciones
 deliveryPanel:
     pickup: Recogida
     delivery: Entrega

src/router/modules/zone.js

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