From 414a72e6a87f63c498daab5e7ea09de853f8e6b0 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Tue, 3 Sep 2024 23:44:13 +0200
Subject: [PATCH] perf: aprroach to simplify

---
 src/components/LeftMenu.vue                | 25 ++++++++--
 src/composables/useState.js                | 15 ++++++
 src/pages/InvoiceIn/Card/InvoiceInCard.vue | 26 +++++-----
 src/router/index.js                        | 57 +++++++++++++++++++++-
 src/router/modules/invoiceIn.js            | 26 +++++-----
 5 files changed, 116 insertions(+), 33 deletions(-)

diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 03fe11a85..79dbf9087 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -1,6 +1,6 @@
 <script setup>
 import axios from 'axios';
-import { onMounted, watch, ref, reactive } from 'vue';
+import { onMounted, watch, ref, reactive, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { QSeparator, useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
@@ -9,6 +9,8 @@ import { toLowerCamel } from 'src/filters';
 import routes from 'src/router/modules';
 import LeftMenuItem from './LeftMenuItem.vue';
 import LeftMenuItemGroup from './LeftMenuItemGroup.vue';
+import { useState } from 'src/composables/useState';
+const state = useState();
 
 const { t } = useI18n();
 const route = useRoute();
@@ -27,15 +29,22 @@ const expansionItemElements = reactive({});
 onMounted(async () => {
     await navigation.fetchPinned();
     getRoutes();
+    handleHiddenSections();
 });
+function handleHiddenSections() {
+    state.getHiddenSections().value.forEach((hidde) => {
+        const item = items.value.find((item) => item.name === hidde);
+        if (item) item.hidden = true;
+    });
+}
 
 watch(
-    () => route.matched,
+    () => route.params.id,
     () => {
         items.value = [];
         getRoutes();
-    },
-    { deep: true }
+        handleHiddenSections();
+    }
 );
 
 function findMatches(search, item) {
@@ -220,7 +229,13 @@ const handleItemExpansion = (itemName) => {
         </template>
         <template v-if="$props.source === 'card'">
             <template v-for="item in items" :key="item.name">
-                <LeftMenuItem v-if="!item.children" :item="item" />
+                <LeftMenuItem
+                    :class="{
+                        hidden: item.hidden || false,
+                    }"
+                    v-if="!item.children"
+                    :item="item"
+                />
                 <QList v-else>
                     <QExpansionItem
                         v-ripple
diff --git a/src/composables/useState.js b/src/composables/useState.js
index c2ac1740c..0fb6f187b 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -19,6 +19,7 @@ const acls = ref([]);
 const tokenConfig = ref({});
 const drawer = ref(true);
 const headerMounted = ref(false);
+const hiddenSections = ref([]);
 
 export function useState() {
     function getUser() {
@@ -51,6 +52,17 @@ export function useState() {
     function setAcls(data) {
         acls.value = data;
     }
+    function getHiddenSections() {
+        return computed(() => hiddenSections.value);
+    }
+
+    function setHiddenSections(data) {
+        hiddenSections.value.push(data);
+    }
+    function popHiddenSections(data) {
+        const index = hiddenSections.value.findIndex((item) => item === data);
+        if (index > -1) hiddenSections.value = hiddenSections.value.splice(0, index);
+    }
     function getTokenConfig() {
         return computed(() => {
             return tokenConfig.value;
@@ -78,6 +90,9 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        getHiddenSections,
+        popHiddenSections,
+        setHiddenSections,
         getAcls,
         setAcls,
         getTokenConfig,
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index be92b6a8b..b6765d8cb 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -4,7 +4,7 @@ import InvoiceInDescriptor from './InvoiceInDescriptor.vue';
 import InvoiceInFilter from '../InvoiceInFilter.vue';
 import InvoiceInSearchbar from '../InvoiceInSearchbar.vue';
 import axios from 'axios';
-import { onBeforeRouteUpdate } from 'vue-router';
+// import { onBeforeRouteUpdate } from 'vue-router';
 
 const filter = {
     include: [
@@ -23,19 +23,19 @@ const filter = {
     ],
 };
 
-onBeforeRouteUpdate(async (to) => {
-    const card = to.matched.find((route) => route.name === 'InvoiceInCard');
-    const corrective = card.children.find(
-        (route) => route.name === 'InvoiceInCorrective'
-    );
+// onBeforeRouteUpdate(async (to) => {
+//     const card = to.matched.find((route) => route.name === 'InvoiceInCard');
+//     const corrective = card.children.find(
+//         (route) => route.name === 'InvoiceInCorrective'
+//     );
 
-    const isRectificative = !!(
-        await axios.get('InvoiceInCorrections', {
-            params: { filter: { where: { correctingFk: to.params.id } } },
-        })
-    ).data.length;
-    corrective.meta.hidden = !isRectificative;
-});
+//     const isRectificative = !!(
+//         await axios.get('InvoiceInCorrections', {
+//             params: { filter: { where: { correctingFk: to.params.id } } },
+//         })
+//     ).data.length;
+//     corrective.meta.hidden = !isRectificative;
+// });
 </script>
 <template>
     <VnCard
diff --git a/src/router/index.js b/src/router/index.js
index 686da2dde..2c236b0c7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -13,7 +13,20 @@ import { useRole } from 'src/composables/useRole';
 import { useUserConfig } from 'src/composables/useUserConfig';
 import { useTokenConfig } from 'src/composables/useTokenConfig';
 import { useAcl } from 'src/composables/useAcl';
-
+import axios from 'axios';
+//FIXME: Está es una implementación dinámica
+const HIDDEN_SECTIONS = {
+    InvoiceInCard: {
+        InvoiceInCorrective: async (to) => {
+            const isRectificative = !!(
+                await axios.get('InvoiceInCorrections', {
+                    params: { filter: { where: { correctingFk: to.params.id } } },
+                })
+            ).data.length;
+            return !isRectificative;
+        },
+    },
+};
 const state = useState();
 const session = useSession();
 const { t, te } = i18n.global;
@@ -66,6 +79,35 @@ export default route(function (/* { store, ssrContext } */) {
                 return true;
             });
 
+            for await (const [mainKey, mainValue] of Object.entries(HIDDEN_SECTIONS)) {
+                console.log(mainKey, mainValue);
+                if (to.matched.find((route) => route.name === mainKey)) {
+                    for await (const [childKey, childValue] of Object.entries(
+                        HIDDEN_SECTIONS[mainKey]
+                    )) {
+                        const res = await childValue(to);
+                        if (res) {
+                            state.setHiddenSections(childKey);
+                        } else {
+                            state.popHiddenSections(childKey);
+                        }
+                    }
+                }
+            }
+            //FIXME: es una implementacion ad-hoc. Si vale, considerar la opción dinámica
+            // if (to.matched.find((route) => route.name === 'InvoiceInCard')) {
+            //     const isRectificative = !!(
+            //         await axios.get('InvoiceInCorrections', {
+            //             params: { filter: { where: { correctingFk: to.params.id } } },
+            //         })
+            //     ).data.length;
+            //     if (!isRectificative) {
+            //         state.setHiddenSections('InvoiceInCorrective');
+            //     } else state.popHiddenSections('InvoiceInCorrective');
+            //     // console.log(to.matched[1].meta.hidden);
+            //     // to.matched[1].meta.hidden = !isRectificative;
+            //     // console.log(to.matched[1].meta.hidden);
+            // }
             if (!hasRequiredRoles) {
                 return next({ path: '/' });
             }
@@ -74,12 +116,23 @@ export default route(function (/* { store, ssrContext } */) {
         next();
     });
 
-    Router.afterEach((to) => {
+    Router.afterEach(async (to) => {
         let title = t(`login.title`);
 
         const matches = to.matched;
+
         if (matches && matches.length > 1) {
             const module = matches[1];
+            // if (to.matched.find((route) => route.name === 'InvoiceInCard')) {
+            //     const isRectificative = !!(
+            //         await axios.get('InvoiceInCorrections', {
+            //             params: { filter: { where: { correctingFk: to.params.id } } },
+            //         })
+            //     ).data.length;
+            //     module.meta.hidden = !isRectificative;
+            //     // stateStore.leftDrawer = isRectificative;
+            // }
+            // console.error(module.meta);
             const moduleTitle = module.meta && module.meta.title;
             if (moduleTitle) {
                 title = t(`globals.pageTitles.${moduleTitle}`);
diff --git a/src/router/modules/invoiceIn.js b/src/router/modules/invoiceIn.js
index d2091f230..090e6a982 100644
--- a/src/router/modules/invoiceIn.js
+++ b/src/router/modules/invoiceIn.js
@@ -64,22 +64,22 @@ export default {
             path: ':id',
             component: () => import('src/pages/InvoiceIn/Card/InvoiceInCard.vue'),
             redirect: { name: 'InvoiceInSummary' },
-            beforeEnter: async (to, from, next) => {
-                const isRectificative = !!(
-                    await axios.get('InvoiceInCorrections', {
-                        params: { filter: { where: { correctingFk: to.params.id } } },
-                    })
-                ).data.length;
+            // beforeEnter: async (to, from, next) => {
+            //     const isRectificative = !!(
+            //         await axios.get('InvoiceInCorrections', {
+            //             params: { filter: { where: { correctingFk: to.params.id } } },
+            //         })
+            //     ).data.length;
 
-                const card = to.matched.find((route) => route.name === 'InvoiceInCard');
-                const corrective = card.children.find(
-                    (route) => route.name === 'InvoiceInCorrective'
-                );
+            //     const card = to.matched.find((route) => route.name === 'InvoiceInCard');
+            //     const corrective = card.children.find(
+            //         (route) => route.name === 'InvoiceInCorrective'
+            //     );
 
-                corrective.meta.hidden = !isRectificative;
+            //     corrective.meta.hidden = !isRectificative;
 
-                next();
-            },
+            //     next();
+            // },
             children: [
                 {
                     name: 'InvoiceInSummary',