verdnatura/salix-front
verdnatura
/
salix-front
2
2
Fork 1
Code Issues Pull Requests 99 Releases Wiki Activity

refs #6080 Changes in components
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Guillermo Bonet 2023-08-09 13:29:00 +02:00
parent d16c215936
commit 0b066062ea
3 changed files with 66 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/LeftMenu.vue
View File

@ -107,20 +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>
<template v-if="$props.source === 'main'">
<template v-if="this.$route.matched[1].name === 'Dashboard'">
<QItemLabel header>
{{ t('globals.modules') }}
</QItemLabel>
<QItem class="header">
<QItemSection avatar>
<QIcon name="view_module" />
</QItemSection>
<QItemSection> {{ t('globals.modules') }}</QItemSection>
</QItem>
<QSeparator />
</template>
<template v-for="item in items" :key="item.name">
<template v-if="item.name === this.$route.matched[1].name || this.$route.matched[1].name === 'Dashboard'">
<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>
@ -153,7 +205,6 @@ async function togglePinned(item, event) {
</template>
</template>
</template>
<QSeparator />
</template>
<template v-if="$props.source === 'card'">
<template v-for="item in items" :key="item.name">
@ -171,4 +222,7 @@ async function togglePinned(item, event) {
.pinned:hover .q-btn {
visibility: visible;
}
.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>