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

29
src/components/LeftMenuItemGroup.vue
View File

@ -1,12 +1,7 @@
<script setup>
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import LeftMenuItem from './LeftMenuItem.vue';
const route = useRoute();
const { t } = useI18n();
const props = defineProps({
item: {
type: Object,
@ -19,33 +14,9 @@ const props = defineProps({
});
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>
<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">
<LeftMenuItem :item="section" />
</template>
</QExpansionItem>
</template>

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

@ -9,6 +9,7 @@ export default {
backToDashboard: 'Return to dashboard',
notifications: 'Notifications',
userPanel: 'User panel',
modules: 'Modules',
pinnedModules: 'Pinned modules',
darkMode: 'Dark mode',
logOut: 'Log out',
@ -32,9 +33,6 @@ export default {
pleaseWait: 'Please wait...',
noPinnedModules: 'You have dont have any pinned modules',
},
moduleIndex: {
allModules: 'All modules',
},
errors: {
statusUnauthorized: 'Access denied',
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',
notifications: 'Notificaciones',
userPanel: 'Panel de usuario',
modules: 'Módulos',
pinnedModules: 'Módulos fijados',
darkMode: 'Modo oscuro',
logOut: 'Cerrar sesión',
@ -32,9 +33,6 @@ export default {
pleaseWait: 'Por favor, espera...',
noPinnedModules: 'No has fijado ningún módulo',
},
moduleIndex: {
allModules: 'Todos los módulos',
},
errors: {
statusUnauthorized: 'Acceso denegado',
statusInternalServerError: 'Ha ocurrido un error interno del servidor',