forked from verdnatura/salix-front
Merge branch '6080-leftMenuSalix' into dev
This commit is contained in:
commit
7d432b60a1
|
|
@ -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,52 +107,72 @@ 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="item.children">
|
||||
<LeftMenuItemGroup :item="item" group="pinnedModules" class="pinned">
|
||||
<template #side>
|
||||
<QBtn
|
||||
v-if="item.isPinned === true"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="remove_circle"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('components.leftMenu.removeFromPinned')
|
||||
}}</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
v-if="item.isPinned === false"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="push_pin"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>{{
|
||||
t('components.leftMenu.addToPinned')
|
||||
}}</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</LeftMenuItemGroup>
|
||||
</template>
|
||||
|
||||
<LeftMenuItem v-if="!item.children" :item="item" />
|
||||
</template>
|
||||
<QSeparator />
|
||||
<QExpansionItem :label="t('moduleIndex.allModules')">
|
||||
<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">
|
||||
<LeftMenuItem :item="item" group="modules">
|
||||
<template #side>
|
||||
<QBtn
|
||||
v-if="item.isPinned === true"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="remove_circle"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.leftMenu.removeFromPinned') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
<QBtn
|
||||
v-if="item.isPinned === false"
|
||||
@click="togglePinned(item, $event)"
|
||||
icon="push_pin"
|
||||
size="xs"
|
||||
flat
|
||||
round
|
||||
>
|
||||
<QTooltip>
|
||||
{{ t('components.leftMenu.addToPinned') }}
|
||||
</QTooltip>
|
||||
</QBtn>
|
||||
</template>
|
||||
</LeftMenuItem>
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 v-for="section in item.children" :key="section.name">
|
||||
<LeftMenuItem :item="section" />
|
||||
</template>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
Loading…
Reference in New Issue