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

Merge branch '6080-leftMenuSalix' into dev

This commit is contained in:
Guillermo Bonet 2023-08-09 13:36:08 +02:00
parent 20c15020a0 0b066062ea
commit 7d432b60a1
5 changed files with 72 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/LeftMenu.vue
View File

@ -55,10 +55,6 @@ function addChildren(module, route, parent) {
} }
} }
const pinnedItems = computed(() => {
return items.value.filter((item) => item.isPinned);
});
const items = ref([]); const items = ref([]);
function getRoutes() { function getRoutes() {
if (props.source === 'main') { if (props.source === 'main') {
@ -111,18 +107,26 @@ async function togglePinned(item, event) {
message: t('globals.dataSaved'), message: t('globals.dataSaved'),
type: 'positive', type: 'positive',
}); });
} };
function firstLower(str) {
return str[0].toLowerCase() + str.slice(1);
};
</script> </script>
<template> <template>
<QList padding class="column-max-width"> <QList padding class="column-max-width">
<template v-if="$props.source === 'main'"> <template v-if="$props.source === 'main'">
<QItemLabel header> <template v-if="this.$route.matched[1].name === 'Dashboard'">
{{ t('globals.pinnedModules') }} <QItem class="header">
</QItemLabel> <QItemSection avatar>
<template v-for="item in pinnedItems" :key="item.name"> <QIcon name="view_module" />
</QItemSection>
<QItemSection> {{ t('globals.modules') }}</QItemSection>
</QItem>
<QSeparator />
<template v-for="item in items" :key="item.name">
<template v-if="item.children"> <template v-if="item.children">
<LeftMenuItemGroup :item="item" group="pinnedModules" class="pinned"> <LeftMenuItem :item="item" group="modules">
<template #side> <template #side>
<QBtn <QBtn
v-if="item.isPinned === true" v-if="item.isPinned === true"
@ -132,9 +136,9 @@ async function togglePinned(item, event) {
flat flat
round round
> >
<QTooltip>{{ <QTooltip>
t('components.leftMenu.removeFromPinned') {{ t('components.leftMenu.removeFromPinned') }}
}}</QTooltip> </QTooltip>
</QBtn> </QBtn>
<QBtn <QBtn
v-if="item.isPinned === false" v-if="item.isPinned === false"
@ -144,19 +148,31 @@ async function togglePinned(item, event) {
flat flat
round round
> >
<QTooltip>{{ <QTooltip>
t('components.leftMenu.addToPinned') {{ t('components.leftMenu.addToPinned') }}
}}</QTooltip> </QTooltip>
</QBtn> </QBtn>
</template> </template>
</LeftMenuItemGroup> </LeftMenuItem>
</template>
</template>
</template> </template>
<LeftMenuItem v-if="!item.children" :item="item" />
</template>
<QSeparator />
<QExpansionItem :label="t('moduleIndex.allModules')">
<template v-for="item in items" :key="item.name"> <template v-for="item in items" :key="item.name">
<template v-if="item.name === this.$route.matched[1].name">
<QItem class="header">
<QItemSection avatar v-if="item.icon">
<QIcon :name="item.icon" />
</QItemSection>
<QItemSection avatar v-if="!item.icon">
<QIcon name="disabled_by_default" />
</QItemSection>
<QItemSection>{{ t(item.title) }}</QItemSection>
<QItemSection side>
<slot name="side" :item="item" />
</QItemSection>
</QItem>
<QSeparator />
<template v-if="item.children"> <template v-if="item.children">
<LeftMenuItemGroup :item="item" group="modules"> <LeftMenuItemGroup :item="item" group="modules">
<template #side> <template #side>
@ -188,8 +204,7 @@ async function togglePinned(item, event) {
</LeftMenuItemGroup> </LeftMenuItemGroup>
</template> </template>
</template> </template>
</QExpansionItem> </template>
<QSeparator />
</template> </template>
<template v-if="$props.source === 'card'"> <template v-if="$props.source === 'card'">
<template v-for="item in items" :key="item.name"> <template v-for="item in items" :key="item.name">
@ -210,4 +225,7 @@ async function togglePinned(item, event) {
.column-max-width { .column-max-width {
max-width: 256px; max-width: 256px;
} }
.header {
color: #999999;
}
</style> </style>

3
src/components/LeftMenuItem.vue
View File

@ -22,5 +22,8 @@ const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
<QIcon name="disabled_by_default" /> <QIcon name="disabled_by_default" />
</QItemSection> </QItemSection>
<QItemSection>{{ t(item.title) }}</QItemSection> <QItemSection>{{ t(item.title) }}</QItemSection>
<QItemSection side>
<slot name="side" :item="item" />
</QItemSection>
</QItem> </QItem>
</template> </template>

29
src/components/LeftMenuItemGroup.vue
View File

@ -1,12 +1,7 @@
<script setup> <script setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import LeftMenuItem from './LeftMenuItem.vue'; import LeftMenuItem from './LeftMenuItem.vue';
const route = useRoute();
const { t } = useI18n();
const props = defineProps({ const props = defineProps({
item: { item: {
type: Object, type: Object,
@ -19,33 +14,9 @@ const props = defineProps({
}); });
const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys const item = computed(() => props.item); // eslint-disable-line vue/no-dupe-keys
const isOpened = computed(() => {
const { matched } = route;
const { name } = item.value;
return matched.some((item) => item.name === name);
});
</script> </script>
<template> <template>
<QExpansionItem
:group="props.group"
active-class="text-primary"
:label="item.title"
:to="{ name: item.name }"
expand-separator
:default-opened="isOpened"
>
<template #header>
<QItemSection avatar>
<QIcon :name="item.icon"></QIcon>
</QItemSection>
<QItemSection>{{ t(item.title) }}</QItemSection>
<QItemSection side>
<slot name="side" :item="item" />
</QItemSection>
</template>
<template v-for="section in item.children" :key="section.name"> <template v-for="section in item.children" :key="section.name">
<LeftMenuItem :item="section" /> <LeftMenuItem :item="section" />
</template> </template>
</QExpansionItem>
</template> </template>

4
src/i18n/en/index.js
View File

@ -9,6 +9,7 @@ export default {
backToDashboard: 'Return to dashboard', backToDashboard: 'Return to dashboard',
notifications: 'Notifications', notifications: 'Notifications',
userPanel: 'User panel', userPanel: 'User panel',
modules: 'Modules',
pinnedModules: 'Pinned modules', pinnedModules: 'Pinned modules',
darkMode: 'Dark mode', darkMode: 'Dark mode',
logOut: 'Log out', logOut: 'Log out',
@ -32,9 +33,6 @@ export default {
pleaseWait: 'Please wait...', pleaseWait: 'Please wait...',
noPinnedModules: 'You have dont have any pinned modules', noPinnedModules: 'You have dont have any pinned modules',
}, },
moduleIndex: {
allModules: 'All modules',
},
errors: { errors: {
statusUnauthorized: 'Access denied', statusUnauthorized: 'Access denied',
statusInternalServerError: 'An internal server error has ocurred', statusInternalServerError: 'An internal server error has ocurred',

4
src/i18n/es/index.js
View File

@ -9,6 +9,7 @@ export default {
backToDashboard: 'Volver al tablón', backToDashboard: 'Volver al tablón',
notifications: 'Notificaciones', notifications: 'Notificaciones',
userPanel: 'Panel de usuario', userPanel: 'Panel de usuario',
modules: 'Módulos',
pinnedModules: 'Módulos fijados', pinnedModules: 'Módulos fijados',
darkMode: 'Modo oscuro', darkMode: 'Modo oscuro',
logOut: 'Cerrar sesión', logOut: 'Cerrar sesión',
@ -32,9 +33,6 @@ export default {
pleaseWait: 'Por favor, espera...', pleaseWait: 'Por favor, espera...',
noPinnedModules: 'No has fijado ningún módulo', noPinnedModules: 'No has fijado ningún módulo',
}, },
moduleIndex: {
allModules: 'Todos los módulos',
},
errors: { errors: {
statusUnauthorized: 'Acceso denegado', statusUnauthorized: 'Acceso denegado',
statusInternalServerError: 'Ha ocurrido un error interno del servidor', statusInternalServerError: 'Ha ocurrido un error interno del servidor',