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

Pinned

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

26
src/composables/useNavigation.js
View File

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