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

Pinned
gitea/salix-front/pipeline/head There was a failure building this commit Details

This commit is contained in:
Joan Sanchez 2022-11-24 14:54:38 +01:00
parent b6c240b279
commit 8e04a7559d
2 changed files with 95 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
src/components/LeftMenu.vue
View File

@ -2,7 +2,7 @@
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRole } from 'src/composables/useRole';
// import { useQuasar } from 'quasar';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import { useNavigation } from 'src/composables/useNavigation';
import routes from 'src/router/modules';
@ -10,6 +10,7 @@ import routes from 'src/router/modules';
const { t } = useI18n();
const role = useRole();
const route = useRoute();
const quasar = useQuasar();
const navigation = useNavigation();
const props = defineProps({
@ -76,6 +77,7 @@ if (props.source === 'main') {
const item = addMenuItem(module, moduleDef, items.value);
item.children = [];
item.module = module;
if (!item) continue;
addChildren(module, moduleDef, item.children);
@ -90,16 +92,14 @@ if (props.source === 'card') {
addChildren(currentModule, moduleDef, items.value);
}
// const quasar = useQuasar();
async function togglePinnedModule(module, event) {
await navigation.toggleFavorite(module, event);
// async function onToggleFavoriteModule(moduleName, event) {
// await navigation.toggleFavorite(moduleName, event);
//
// quasar.notify({
// message: t('globals.dataSaved'),
// type: 'positive',
// });
// }
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
}
function isOpen(name) {
const { matched } = route;
@ -113,10 +113,10 @@ function isOpen(name) {
<q-item-label v-if="$props.source === 'main'" header>
{{ t('globals.favoriteModules') }}
</q-item-label>
<template v-for="item in items" :key="item.name">
<!-- <template v-for="item in items" :key="item.name">
<template v-if="item.children">
<q-expansion-item
group="group"
group="itemGroup"
class="module"
active-class="text-primary"
:label="item.title"
@ -129,18 +129,18 @@ function isOpen(name) {
<q-icon :name="item.icon"></q-icon>
</q-item-section>
<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>-->
<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 active-class="text-primary" :to="{ name: section.name }" clickable v-ripple>
<q-item-section avatar v-if="section.icon">
<q-icon :name="section.icon" />
</q-item-section>
@ -153,7 +153,7 @@ function isOpen(name) {
</q-expansion-item>
</template>
<template v-if="!item.children">
<q-item clickable v-ripple active-class="text-primary" :to="{ name: item.name }">
<q-item active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
<q-item-section avatar v-if="item.icon">
<q-icon :name="item.icon" />
</q-item-section>
@ -163,7 +163,66 @@ function isOpen(name) {
<q-item-section>{{ t(item.title) }}</q-item-section>
</q-item>
</template>
</template>
</template> -->
<q-separator />
<q-expansion-item :label="t('moduleIndex.allModules')">
<q-list padding>
<template v-for="item in items" :key="item.name">
<template v-if="item.children">
<q-expansion-item
group="itemGroup"
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.title) }}</q-item-section>
<q-item-section side>
<q-btn
@click="togglePinnedModule(item.module, $event)"
icon="vn:pin"
size="xs"
flat
round
>
<q-tooltip>Pin this module to favorites</q-tooltip>
</q-btn>
</q-item-section>
</template>
<template v-for="section in item.children" :key="section.name">
<q-item active-class="text-primary" :to="{ name: section.name }" clickable v-ripple>
<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 active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
<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>
</q-list>
</q-expansion-item>
<q-separator />
<!-- <template v-for="module in navigation.favorites.value" :key="module.title">-->
<!-- <div class="module" v-if="!module.children">-->
<!-- <q-item-->

26
src/composables/useNavigation.js
View File

@ -1,6 +1,6 @@
// import routes from 'src/router/routes';
// import { ref } from 'vue';
// import axios from 'axios';
import axios from 'axios';
// const favorites = ref([]);
//const modules = ref([]);
@ -72,18 +72,16 @@ export function useNavigation() {
// return (favorites.value = filteredModules);
// }
//
// async function toggleFavorite(moduleName, event) {
// if (event.defaultPrevented) return;
// event.preventDefault();
// event.stopPropagation();
//
// const params = { moduleName: salixModules[moduleName] };
// const query = 'StarredModules/toggleStarredModule';
// await axios.post(query, params);
//
// updateFavorites(moduleName);
// }
//
async function togglePinned(moduleName, event) {
if (event.defaultPrevented) return;
event.preventDefault();
event.stopPropagation();
await axios.post('StarredModules/toggleStarredModule', { moduleName });
// updateFavorites(moduleName);
}
// function updateFavorites(name) {
// if (!favorites.value.find((module) => module.name == name)) {
// const newStarreModule = modules.value.find((module) => module.name == name);
@ -94,5 +92,5 @@ export function useNavigation() {
// }
// }
return { modules};
return { modules, togglePinned };
}