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

4722 - Menu refactor & added pinia

This commit is contained in:
Joan Sanchez 2022-11-24 07:21:45 +01:00
parent 26d7640bc1
commit b6c240b279
12 changed files with 240 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quasar.config.js
View File

@ -23,7 +23,7 @@ module.exports = configure(function (ctx) {
// app boot file (/src/boot)
// --> boot files are part of "main.js"
// https://v2.quasar.dev/quasar-cli-webpack/boot-files
boot: ['i18n', 'axios'],
boot: ['i18n', 'axios', 'pinia'],
// https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
css: ['app.scss'],

8
src/boot/pinia.js Normal file
View File

@ -0,0 +1,8 @@
import { boot } from 'quasar/wrappers';
import { createPinia } from 'pinia';
export default boot(({ app }) => {
const pinia = createPinia();
app.use(pinia);
});

75
src/components/FavoriteModules.vue
View File

@ -1,43 +1,44 @@
<!--<script setup>-->
<!--import { onMounted } from 'vue';-->
<!--import { useI18n } from 'vue-i18n';-->
<!--import { useNavigation } from 'src/composables/useNavigation';-->
<script setup>
import { onMounted } from 'vue';
// import { useI18n } from 'vue-i18n';
import { useNavigation } from 'src/stores/useNavigation';
<!--const { t } = useI18n();-->
<!--const navigation = useNavigation();-->
// const { t } = useI18n();
const navigation = useNavigation();
<!--onMounted(() => {-->
<!-- navigation.fetchFavorites();-->
<!--});-->
<!--</script>-->
onMounted(() => {
navigation.fetchPinned();
});
</script>
<!--<template>-->
<!-- <q-menu-->
<!-- anchor="bottom left"-->
<!-- class="row q-pa-md q-col-gutter-lg"-->
<!-- max-width="350px"-->
<!-- max-height="400px"-->
<!-- v-if="navigation.favorites.value.length"-->
<!-- >-->
<!-- <div v-for="module of navigation.favorites.value" :key="module.title" class="row no-wrap q-pa-xs flex-item">-->
<!-- <q-btn-->
<!-- align="evenly"-->
<!-- padding="16px"-->
<!-- flat-->
<!-- stack-->
<!-- size="lg"-->
<!-- :icon="module.icon"-->
<!-- color="primary"-->
<!-- class="col-4 button"-->
<!-- :to="{ name: module.stateName }"-->
<!-- >-->
<!-- <div class="text-center text-primary button-text">-->
<!-- {{ t(`${module.name}.pageTitles.${module.title}`) }}-->
<!-- </div>-->
<!-- </q-btn>-->
<!-- </div>-->
<!-- </q-menu>-->
<!--</template>-->
<template>
{{ navigation.pinned }}
<!-- <q-menu-->
<!-- anchor="bottom left"-->
<!-- class="row q-pa-md q-col-gutter-lg"-->
<!-- max-width="350px"-->
<!-- max-height="400px"-->
<!-- v-if="navigation.favorites.value.length"-->
<!-- >-->
<!-- <div v-for="module of navigation.favorites.value" :key="module.title" class="row no-wrap q-pa-xs flex-item">-->
<!-- <q-btn-->
<!-- align="evenly"-->
<!-- padding="16px"-->
<!-- flat-->
<!-- stack-->
<!-- size="lg"-->
<!-- :icon="module.icon"-->
<!-- color="primary"-->
<!-- class="col-4 button"-->
<!-- :to="{ name: module.stateName }"-->
<!-- >-->
<!-- <div class="text-center text-primary button-text">-->
<!-- {{ t(`${module.name}.pageTitles.${module.title}`) }}-->
<!-- </div>-->
<!-- </q-btn>-->
<!-- </div>-->
<!-- </q-menu>-->
</template>
<!--<style lang="scss" scoped>-->
<!--.flex-item {-->

211
src/components/LeftMenu.vue
View File

@ -1,53 +1,95 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
// import { useRole } from 'src/composables/useRole';
import { useRole } from 'src/composables/useRole';
// import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import { useNavigation } from 'src/composables/useNavigation';
import routes from 'src/router/modules';
const { t } = useI18n();
// const { hasAny } = useRole();
const role = useRole();
const route = useRoute();
const navigation = useNavigation();
const $props = defineProps({
const props = defineProps({
source: {
type: String,
default: 'main',
},
});
const items = ref([]);
for (const module of navigation.modules) {
const moduleDef = routes.find((route) => route.name.toLowerCase() === module);
const moduleMeta = moduleDef.meta;
function toLowerCamel(value) {
return value.charAt(0).toLowerCase() + value.slice(1);
}
const item = {
name: moduleDef.name,
title: moduleMeta.title,
icon: moduleMeta.icon,
module: module,
children: [],
};
if (moduleDef.menus) {
const mainMenus = moduleDef.menus[$props.source];
for (const menu of mainMenus) {
const mainMenuItems = moduleDef.children[0].children;
const mainMenuItemDef = mainMenuItems.find((route) => route.name === menu.name);
const mainMenuItemMeta = mainMenuItemDef.meta;
item.children.push({
name: mainMenuItemDef.name,
title: mainMenuItemMeta.title,
icon: mainMenuItemMeta.icon,
});
function findMatches(search, item) {
const matches = [];
function findRoute(search, item) {
for (const child of item.children) {
if (search.indexOf(child.name) > -1) {
matches.push(child);
} else if (child.children) {
findRoute(search, child);
}
}
}
items.value.push(item);
findRoute(search, item);
return matches;
}
function addChildren(module, route, parent) {
if (route.menus) {
const mainMenus = route.menus[props.source];
const matches = findMatches(mainMenus, route);
for (const child of matches) {
addMenuItem(module, child, parent);
}
}
}
function addMenuItem(module, route, parent) {
const { meta } = route;
if (meta && meta.roles && role.hasAny(meta.roles) === false) return;
const item = {
name: route.name,
};
if (meta) {
item.title = `${module}.pageTitles.${meta.title}`;
item.icon = meta.icon;
}
parent.push(item);
return item;
}
const items = ref([]);
if (props.source === 'main') {
for (const module of navigation.modules) {
const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
const item = addMenuItem(module, moduleDef, items.value);
item.children = [];
if (!item) continue;
addChildren(module, moduleDef, item.children);
}
}
if (props.source === 'card') {
const currentRoute = route.matched[1];
const currentModule = toLowerCamel(currentRoute.name);
const moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
addChildren(currentModule, moduleDef, items.value);
}
// const quasar = useQuasar();
// async function onToggleFavoriteModule(moduleName, event) {
@ -58,44 +100,69 @@ for (const module of navigation.modules) {
// type: 'positive',
// });
// }
function isOpen(name) {
const { matched } = route;
return matched.some((item) => item.name === name);
}
</script>
<template>
<q-list padding>
<q-item-label header>{{ t('globals.favoriteModules') }}</q-item-label>
<q-item-label v-if="$props.source === 'main'" header>
{{ t('globals.favoriteModules') }}
</q-item-label>
<template v-for="item in items" :key="item.name">
<q-expansion-item
group="somegroup"
class="module"
active-class="text-primary"
:label="item.title"
:to="{ name: item.name }"
expand-separator
>
<template #header>
<q-item-section avatar>
<q-icon :name="item.icon"></q-icon>
</q-item-section>
<q-item-section>{{ t(`${item.module}.pageTitles.${item.title}`) }}</q-item-section>
<!-- <q-item-section side>-->
<!-- <div-->
<!-- @click="onToggleFavoriteModule(module.name, $event)"-->
<!-- class="row items-center"-->
<!-- v-if="module.name != 'dashboard'"-->
<!-- >-->
<!-- <q-icon name="vn:pin"></q-icon>-->
<!-- </div>-->
<!-- </q-item-section>-->
</template>
<template v-for="section in item.children" :key="section.name">
<q-item clickable v-ripple active-class="text-primary" :to="{ name: section.name }">
<q-item-section avatar :if="section.icon">
<q-icon :name="section.icon" />
<template v-if="item.children">
<q-expansion-item
group="group"
class="module"
active-class="text-primary"
:label="item.title"
:to="{ name: item.name }"
expand-separator
:default-opened="isOpen(item.name)"
>
<template #header>
<q-item-section avatar>
<q-icon :name="item.icon"></q-icon>
</q-item-section>
<q-item-section>{{ t(`${item.module}.pageTitles.${section.title}`) }}</q-item-section>
</q-item>
</template>
</q-expansion-item>
<q-item-section>{{ t(item.title) }}</q-item-section>
<!-- <q-item-section side>-->
<!-- <div-->
<!-- @click="onToggleFavoriteModule(module.name, $event)"-->
<!-- class="row items-center"-->
<!-- v-if="module.name != 'dashboard'"-->
<!-- >-->
<!-- <q-icon name="vn:pin"></q-icon>-->
<!-- </div>-->
<!-- </q-item-section>-->
</template>
<template v-for="section in item.children" :key="section.name">
<q-item clickable v-ripple active-class="text-primary" :to="{ name: section.name }">
<q-item-section avatar v-if="section.icon">
<q-icon :name="section.icon" />
</q-item-section>
<q-item-section avatar v-if="!item.icon">
<q-icon name="disabled_by_default" />
</q-item-section>
<q-item-section>{{ t(section.title) }}</q-item-section>
</q-item>
</template>
</q-expansion-item>
</template>
<template v-if="!item.children">
<q-item clickable v-ripple active-class="text-primary" :to="{ name: item.name }">
<q-item-section avatar v-if="item.icon">
<q-icon :name="item.icon" />
</q-item-section>
<q-item-section avatar v-if="!item.icon">
<q-icon name="disabled_by_default" />
</q-item-section>
<q-item-section>{{ t(item.title) }}</q-item-section>
</q-item>
</template>
</template>
<!-- <template v-for="module in navigation.favorites.value" :key="module.title">-->
<!-- <div class="module" v-if="!module.children">-->
@ -157,8 +224,6 @@ for (const module of navigation.modules) {
<!-- </template>-->
</q-list>
<q-separator />
<!-- <q-expansion-item :label="t('moduleIndex.allModules')">-->
<!-- <q-list padding>-->
<!-- <template v-for="module in navigation.modules.value" :key="module.title">-->
@ -232,13 +297,13 @@ for (const module of navigation.modules) {
<!-- </q-expansion-item>-->
</template>
<style>
.module .icon-pin,
.module .icon-pin_off {
visibility: hidden;
}
.module:hover .icon-pin,
.module:hover .icon-pin_off {
visibility: visible;
}
</style>
<!--<style>-->
<!--.module .icon-pin,-->
<!--.module .icon-pin_off {-->
<!-- visibility: hidden;-->
<!--}-->
<!--.module:hover .icon-pin,-->
<!--.module:hover .icon-pin_off {-->
<!-- visibility: visible;-->
<!--}-->
<!--</style>-->

8
src/composables/useRole.js
View File

@ -6,7 +6,7 @@ export function useRole() {
async function fetch() {
const { data } = await axios.get('Accounts/acl');
const roles = data.roles.map(userRoles => userRoles.role.name);
const roles = data.roles.map((userRoles) => userRoles.role.name);
const userData = {
id: data.user.id,
@ -14,7 +14,7 @@ export function useRole() {
nickname: data.user.nickname,
lang: data.user.lang || 'es',
darkMode: data.user.userConfig.darkMode,
}
};
state.setUser(userData);
state.setRoles(roles);
}
@ -32,6 +32,6 @@ export function useRole() {
return {
fetch,
hasAny,
state
state,
};
}
}

18
src/pages/Claim/Card/ClaimCard.vue
View File

@ -1,9 +1,8 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useState } from 'composables/useState';
import ClaimDescriptor from './ClaimDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
const { t } = useI18n();
const state = useState();
</script>
<template>
@ -11,20 +10,7 @@ const state = useState();
<q-scroll-area class="fit">
<claim-descriptor />
<q-separator />
<q-list>
<q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="vn:settings" />
</q-item-section>
<q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
</q-item>
<q-item :to="{ name: 'ClaimRma' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="vn:barcode" />
</q-item-section>
<q-item-section>{{ t('claim.pageTitles.rma') }}</q-item-section>
</q-item>
</q-list>
<left-menu source="card" />
</q-scroll-area>
</q-drawer>
<q-page-container>

26
src/pages/Customer/Card/CustomerCard.vue
View File

@ -1,11 +1,9 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import CustomerDescriptor from './CustomerDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
const state = useState();
const { t } = useI18n();
</script>
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
@ -13,30 +11,6 @@ const { t } = useI18n();
<customer-descriptor />
<q-separator />
<left-menu source="card" />
<q-list>
<q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="vn:settings" />
</q-item-section>
<q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
</q-item>
<!-- <q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="notes" />
</q-item-section>
<q-item-section>Notes</q-item-section>
</q-item>
<q-expansion-item icon="more" label="More options" expand-icon-toggle expand-separator>
<q-list>
<q-item clickable v-ripple>
<q-item-section avatar>
<q-icon name="person" />
</q-item-section>
<q-item-section>Option</q-item-section>
</q-item>
</q-list>
</q-expansion-item> -->
</q-list>
</q-scroll-area>
</q-drawer>
<q-page-container>

12
src/pages/Ticket/Card/TicketCard.vue
View File

@ -1,24 +1,16 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import TicketDescriptor from './TicketDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';
const state = useState();
const { t } = useI18n();
</script>
<template>
<q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
<q-scroll-area class="fit">
<ticket-descriptor />
<q-separator />
<q-list>
<q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
<q-item-section avatar>
<q-icon name="vn:package" />
</q-item-section>
<q-item-section>{{ t('ticket.pageTitles.boxing') }}</q-item-section>
</q-item>
</q-list>
<left-menu source="card" />
</q-scroll-area>
</q-drawer>
<q-page-container>

10
src/router/modules/claim.js
View File

@ -10,11 +10,8 @@ export default {
component: RouterView,
redirect: { name: 'ClaimMain' },
menus: {
main: [
{ name: 'ClaimList', icon: 'view_list' },
{ name: 'ClaimRmaList', icon: 'vn:barcode' },
],
card: [{ name: 'CustomerBasicData', icon: 'vn:settings' }],
main: ['ClaimList', 'ClaimRmaList'],
card: ['ClaimBasicData', 'ClaimRma'],
},
children: [
{
@ -55,6 +52,7 @@ export default {
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Claim/Card/ClaimSummary.vue'),
},
@ -63,6 +61,7 @@ export default {
path: 'basic-data',
meta: {
title: 'basicData',
icon: 'vn:settings',
roles: ['salesPerson'],
},
component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
@ -72,6 +71,7 @@ export default {
path: 'rma',
meta: {
title: 'rma',
icon: 'vn:barcode',
roles: ['claimManager'],
},
component: () => import('src/pages/Claim/Card/ClaimRma.vue'),

9
src/router/modules/customer.js
View File

@ -10,11 +10,8 @@ export default {
component: RouterView,
redirect: { name: 'CustomerMain' },
menus: {
main: [
{ name: 'CustomerList', icon: 'view_list' },
{ name: 'CustomerCreate', icon: 'vn:addperson' },
],
card: [{ name: 'CustomerBasicData', icon: 'vn:settings' }],
main: ['CustomerList', 'CustomerCreate'],
card: ['CustomerBasicData'],
},
children: [
{
@ -55,6 +52,7 @@ export default {
path: 'summary',
meta: {
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Customer/Card/CustomerSummary.vue'),
},
@ -63,6 +61,7 @@ export default {
name: 'CustomerBasicData',
meta: {
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
},

24
src/router/modules/ticket.js
View File

@ -5,10 +5,14 @@ export default {
path: '/ticket',
meta: {
title: 'tickets',
icon: 'vn:ticket'
icon: 'vn:ticket',
},
component: RouterView,
redirect: { name: 'TicketMain' },
menus: {
main: ['TicketList'],
card: ['TicketBoxing'],
},
children: [
{
name: 'TicketMain',
@ -35,8 +39,7 @@ export default {
},
component: () => import('src/pages/Ticket/TicketList.vue'),
},
]
],
},
{
name: 'TicketCard',
@ -48,7 +51,8 @@ export default {
name: 'TicketSummary',
path: 'summary',
meta: {
title: 'summary'
title: 'summary',
icon: 'launch',
},
component: () => import('src/pages/Ticket/Card/TicketSummary.vue'),
},
@ -56,7 +60,8 @@ export default {
name: 'TicketBasicData',
path: 'basic-data',
meta: {
title: 'basicData'
title: 'basicData',
icon: 'vn:settings',
},
component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
},
@ -64,11 +69,12 @@ export default {
path: 'boxing',
name: 'TicketBoxing',
meta: {
title: 'boxing'
title: 'boxing',
icon: 'vn:package',
},
component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
}
]
},
],
},
]
],
};

23
src/stores/useNavigation.js Normal file
View File

@ -0,0 +1,23 @@
import { ref } from 'vue';
import axios from 'axios';
import { defineStore } from 'pinia';
export const useNavigation = defineStore('navigation', () => {
const modules = ['customer', 'claim', 'ticket'];
const pinned = ref([]);
async function fetchPinned() {
const response = await axios.get('StarredModules/getStarredModules');
// const filteredModules = modules.value.filter((module) => {
// return response.data.find((element) => element.moduleFk == salixModules[module.name]);
// });
return (pinned.value = response.data);
}
return {
modules,
pinned,
fetchPinned,
};
});