wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

perf: aprroach to simplify

This commit is contained in:
Javier Segarra 2024-09-03 23:44:13 +02:00
parent 00beeaf51b
commit 414a72e6a8
5 changed files with 116 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/LeftMenu.vue
View File

@ -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

15
src/composables/useState.js
View File

@ -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,

26
src/pages/InvoiceIn/Card/InvoiceInCard.vue
View File

@ -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

57
src/router/index.js
View File

@ -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}`);

26
src/router/modules/invoiceIn.js
View File

@ -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',