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

favorite modules component and navigationb composable

This commit is contained in:
Carlos Jimenez Ruiz 2022-06-08 14:53:10 +02:00
parent af28371ec9
commit 7473dceeea
13 changed files with 422 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/FavoriteModules.vue Normal file
View File

@ -0,0 +1,56 @@
<script setup>
import { onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useNavigation } from 'src/composables/useNavigation';
const { t } = useI18n();
const modules = useNavigation();
onMounted(() => {
modules.fetchFavorites();
});
</script>
<template>
<q-menu
anchor="bottom left"
class="row q-pa-md q-col-gutter-lg"
max-width="350px"
max-height="400px"
style="justify-content: center"
v-if="modules.favorites.value.length"
>
<div v-for="module of modules.favorites.value" :key="module.title" class="row no-wrap q-pa-xs flex-item">
<q-btn
align="evenly"
padding="16px"
flat
stack
size="lg"
:icon="module.icon"
color="orange-6"
class="col-4 button"
:to="{ name: module.stateName }"
>
<div class="text-center text-orange-6 button-text">
{{ t(`${module.name}.pageTitles.${module.title}`) }}
</div>
</q-btn>
</div>
</q-menu>
</template>
<style lang="scss" scoped>
.flex-item {
width: 100px;
}
.button {
width: 100%;
line-height: normal;
align-items: center;
}
.button-text {
font-size: 10px;
margin-top: 5px;
}
</style>

223
src/components/LeftMenu.vue
View File

@ -1,91 +1,166 @@
<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRole } from 'src/composables/useRole';
import routes from 'src/router/routes';
import { useQuasar } from 'quasar';
import { useNavigation } from 'src/composables/useNavigation';
const { t } = useI18n();
const { hasAny } = useRole();
const navigation = useNavigation();
const mainRoute = routes.find((route) => route.path === '/');
const moduleRoutes = (mainRoute && mainRoute.children) || [];
const quasar = useQuasar();
const modules = ref([]);
for (const route of moduleRoutes) {
const module = {
stateName: route.name,
name: route.name.toLowerCase(),
roles: [],
};
async function onToggleFavoriteModule(moduleName, event) {
await navigation.toggleFavorite(moduleName, event);
if (route.meta) {
Object.assign(module, route.meta);
}
if (route.children && route.children.length) {
const [moduleMain] = route.children;
const routes = moduleMain.children;
module.children = routes.map((route) => {
const submodule = {
stateName: route.name,
name: route.name,
};
Object.assign(submodule, route.meta);
return submodule;
});
}
modules.value.push(module);
quasar.notify({
message: t('globals.dataSaved'),
type: 'positive',
});
}
</script>
<template>
<q-list padding>
<template v-for="module in modules" :key="module.title">
<template v-if="!module.children">
<q-item
clickable
v-ripple
active-class="text-orange"
:key="module.title"
:to="{ name: module.stateName }"
v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
>
<q-item-section avatar :if="module.icon">
<q-icon :name="module.icon" />
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
</q-item>
</template>
<q-expansion-item
:default-opened="true"
:label="t('globals.favoriteModules')"
v-if="navigation.favorites.value.length"
>
<q-list padding>
<template v-for="module in navigation.favorites.value" :key="module.title">
<div class="module" v-if="!module.children">
<q-item
class="module"
clickable
v-ripple
active-class="text-orange"
:key="module.title"
:to="{ name: module.stateName }"
v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
>
<q-item-section avatar :if="module.icon">
<q-icon :name="module.icon" />
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
<q-item-section side>
<div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
<q-icon style="padding-right: 40px" name="push_pin"></q-icon>
</div>
</q-item-section>
</q-item>
</div>
<template v-if="module.children">
<q-expansion-item
expand-separator
active-class="text-orange"
:icon="module.icon"
:label="t(`${module.name}.pageTitles.${module.title}`)"
v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
:to="{ name: module.stateName }"
>
<template v-for="section in module.children" :key="section.title">
<q-item
clickable
v-ripple
active-class="text-orange"
:to="{ name: section.stateName }"
v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
>
<q-item-section avatar :if="section.icon">
<q-icon :name="section.icon" />
<template v-if="module.children">
<q-expansion-item
class="module"
active-class="text-orange"
:label="t(`${module.name}.pageTitles.${module.title}`)"
v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
:to="{ name: module.stateName }"
>
<template #header>
<q-item-section avatar>
<q-icon :name="module.icon"></q-icon>
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
</q-item>
</template>
</q-expansion-item>
<q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
<q-item-section side>
<div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
<q-icon name="push_pin"></q-icon>
</div>
</q-item-section>
</template>
<template v-for="section in module.children" :key="section.title">
<q-item
clickable
v-ripple
active-class="text-orange"
:to="{ name: section.stateName }"
v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
>
<q-item-section avatar :if="section.icon">
<q-icon :name="section.icon" />
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
</q-item>
</template>
</q-expansion-item>
</template>
</template>
</template>
</q-list>
</q-list>
</q-expansion-item>
<q-separator />
<q-expansion-item :label="t('moduleIndex.allModules')">
<q-list padding>
<template v-for="module in navigation.modules.value" :key="module.title">
<div class="module" v-if="!module.children">
<q-item
class="module"
clickable
v-ripple
active-class="text-orange"
:key="module.title"
:to="{ name: module.stateName }"
v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
>
<q-item-section avatar :if="module.icon">
<q-icon :name="module.icon" />
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
<q-item-section side>
<div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
<q-icon style="padding-right: 40px" name="push_pin" class="push_pin"></q-icon>
</div>
</q-item-section>
</q-item>
</div>
<template v-if="module.children">
<q-expansion-item
class="module"
active-class="text-orange"
:label="t(`${module.name}.pageTitles.${module.title}`)"
v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
:to="{ name: module.stateName }"
>
<template #header>
<q-item-section avatar>
<q-icon :name="module.icon"></q-icon>
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
<q-item-section side>
<div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
<q-icon name="push_pin" class="push_pin"></q-icon>
</div>
</q-item-section>
</template>
<template v-for="section in module.children" :key="section.title">
<q-item
clickable
v-ripple
active-class="text-orange"
:to="{ name: section.stateName }"
v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
>
<q-item-section avatar :if="section.icon">
<q-icon :name="section.icon" />
</q-item-section>
<q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
</q-item>
</template>
</q-expansion-item>
</template>
</template>
</q-list>
</q-expansion-item>
</template>
<style>
.module .push_pin {
visibility: hidden;
}
.module:hover .push_pin {
visibility: visible;
}
</style>

17
src/components/Navbar.vue
View File

@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
import { useState } from 'src/composables/useState';
import { useSession } from 'src/composables/useSession';
import UserPanel from 'src/components/UserPanel.vue';
import FavoriteModules from './FavoriteModules.vue';
const { t } = useI18n();
const session = useSession();
@ -36,8 +37,7 @@ function onToggleDrawer() {
<q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
<q-space></q-space>
<div class="q-pl-sm q-gutter-sm row items-center no-wrap">
<q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
<q-icon name="arrow_drop_down" size="s" />
<!-- <q-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
<q-menu>
<q-list style="min-width: 150px">
<q-item :to="{ path: '/customer/create' }" clickable>
@ -48,8 +48,8 @@ function onToggleDrawer() {
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
</q-btn> -->
<!-- <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
<q-badge color="red" text-color="white" floating> 2 </q-badge>
<q-tooltip bottom>
{{ t('globals.notifications') }}
@ -61,6 +61,15 @@ function onToggleDrawer() {
<q-spinner-puff color="orange" />
</div>
</q-menu>
</q-btn> -->
<q-btn dense flat no-wrap id="favoriteModules">
<q-avatar size="lg">
<q-icon name="apps" size="s" />
</q-avatar>
<q-tooltip bottom>
{{ t('globals.favoriteModules') }}
</q-tooltip>
<FavoriteModules />
</q-btn>
<q-btn dense flat no-wrap id="user">
<q-avatar size="lg">

6
src/components/__tests__/Leftmenu.spec.js
View File

@ -63,7 +63,7 @@ describe('Leftmenu', () => {
vm = createWrapper(Leftmenu).vm;
});
it('should return a proper formated object without the children property', async () => {
it('should return the proper formated object without the children property', async () => {
const expectedMenuItem = {
stateName: 'Dashboard',
name: 'dashboard',
@ -72,7 +72,7 @@ describe('Leftmenu', () => {
title: 'dashboard'
}
const firstMenuItem = vm.modules[0];
const firstMenuItem = vm.navigation.modules.value[0];
expect(firstMenuItem.children).toBeUndefined();
expect(firstMenuItem).toEqual(expect.objectContaining(expectedMenuItem));
});
@ -91,7 +91,7 @@ describe('Leftmenu', () => {
stateName: 'CustomerCreate'
}];
const secondMenuItem = vm.modules[1];
const secondMenuItem = vm.navigation.modules.value[1];
expect(secondMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
expect(secondMenuItem.children.length).toEqual(2)
});

42
src/composables/__tests__/useModule.spec.js Normal file
View File

@ -0,0 +1,42 @@
import { describe, expect, it } from '@jest/globals';
import { useNavigation } from '../useNavigation';
const navigation = useNavigation();
describe('useNavigation', () => {
it('should return the routes for all modules', async () => {
expect(navigation.modules.value.length).toEqual(3);
});
it('should return a proper formated object without the children property', async () => {
const expectedMenuItem = {
stateName: 'Dashboard',
name: 'dashboard',
roles: [],
icon: 'dashboard',
title: 'dashboard'
}
const firstMenuItem = navigation.modules.value[0]
expect(firstMenuItem.children).toBeUndefined();
expect(firstMenuItem).toEqual(expect.objectContaining(expectedMenuItem));
});
it('should return a proper formated object with two child items', async () => {
const expectedMenuItem = [{
name: 'CustomerList',
title: 'list',
icon: 'view_list',
stateName: 'CustomerList'
},
{
name: 'CustomerCreate',
title: 'createCustomer',
icon: 'vn:addperson',
stateName: 'CustomerCreate'
}];
const secondMenuItem = navigation.modules.value[1]
expect(secondMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
expect(secondMenuItem.children.length).toEqual(2)
});
});

92
src/composables/useNavigation.js Normal file
View File

@ -0,0 +1,92 @@
import routes from 'src/router/routes';
import { ref } from 'vue';
import axios from 'axios';
const favorites = ref([]);
const modules = ref([]);
const mainRoute = routes.find((route) => route.path === '/');
const moduleRoutes = (mainRoute && mainRoute.children) || [];
for (const route of moduleRoutes) {
const module = {
stateName: route.name,
name: route.name.toLowerCase(),
roles: [],
};
if (route.meta) {
Object.assign(module, route.meta);
}
if (route.children && route.children.length) {
const [moduleMain] = route.children;
const routes = moduleMain.children;
module.children = routes.map((route) => {
const submodule = {
stateName: route.name,
name: route.name,
};
Object.assign(submodule, route.meta);
return submodule;
});
}
modules.value.push(module);
}
export function useNavigation() {
const salixModules = {
customer: 'Clients',
claim: 'Claims',
entry: 'Entries',
invoiceIn: 'Invoices In',
invoiceOut: 'Invoices Out',
item: 'Items',
monitor: 'Monitors',
order: 'Orders',
route: 'Routes',
supplier: 'Suppliers',
ticket: 'Tickets',
travel: 'Travels',
user: 'Users',
worker: 'Workers',
zone: 'Zones',
};
async function fetchFavorites() {
const response = await axios.get('api/starredModules/getStarredModules');
const filteredModules = modules.value.filter((module) => {
return response.data.find((element) => element.moduleFk == salixModules[module.name]);
});
return (favorites.value = filteredModules);
}
async function toggleFavorite(moduleName, event) {
if (event.defaultPrevented) return;
event.preventDefault();
event.stopPropagation();
const params = { moduleName: salixModules[moduleName] };
const query = 'api/starredModules/toggleStarredModule';
await axios.post(query, params);
updateFavorites(moduleName);
}
function updateFavorites(name) {
if (!favorites.value.find((module) => module.name == name)) {
const newStarreModule = modules.value.find((module) => module.name == name);
favorites.value.push(newStarreModule);
} else {
const moduleToRemove = favorites.value.find((module) => module.name == name);
favorites.value.splice(favorites.value.indexOf(moduleToRemove), 1);
}
}
return { modules, favorites, toggleFavorite, fetchFavorites, updateFavorites };
}

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

@ -8,8 +8,13 @@ export default {
backToDashboard: 'Return to dashboard',
notifications: 'Notifications',
userPanel: 'User panel',
favoriteModules: 'Favorite modules',
theme: 'Theme',
logOut: 'Log out',
dataSaved: 'Data saved',
},
moduleIndex: {
allModules: 'All modules'
},
errors: {
statusUnauthorized: 'Access denied',

5
src/i18n/es/index.js
View File

@ -8,8 +8,13 @@ export default {
backToDashboard: 'Volver al tablón',
notifications: 'Notificaciones',
userPanel: 'Panel de usuario',
favoriteModules: 'Módulos favoritos',
theme: 'Tema',
logOut: 'Cerrar sesión',
dataSaved: 'Datos guardados',
},
moduleIndex: {
allModules: 'Todos los módulos'
},
errors: {
statusUnauthorized: 'Acceso denegado',

2
src/pages/Customer/CustomerMain.vue
View File

@ -15,7 +15,7 @@ const miniState = ref(true);
@mouseover="miniState = false"
@mouseout="miniState = true"
mini-to-overlay
:width="200"
:width="256"
:breakpoint="500"
>
<q-scroll-area class="fit text-grey-8">

117
src/pages/Dashboard/Dashboard.vue
View File

@ -1,13 +1,14 @@
<script setup>
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { useState } from 'src/composables/useState';
import LeftMenu from 'src/components/LeftMenu.vue';
import { useNavigation } from 'src/composables/useNavigation';
const { t } = useI18n();
const state = useState();
const miniState = ref(true);
const slide = ref('style');
const slideText = 'Description text';
const modules = useNavigation();
</script>
<template>
@ -18,7 +19,7 @@ const slideText = 'Description text';
@mouseover="miniState = false"
@mouseout="miniState = true"
mini-to-overlay
:width="200"
:width="256"
:breakpoint="500"
>
<q-scroll-area class="fit text-grey-8">
@ -27,75 +28,63 @@ const slideText = 'Description text';
</q-drawer>
<q-page-container>
<q-page class="q-pa-md">
<q-banner v-if="$q.screen.gt.xs" inline-actions rounded class="bg-orange text-white q-mb-lg">
<!-- <q-banner v-if="$q.screen.gt.xs" inline-actions rounded class="bg-orange text-white q-mb-lg">
Employee notification message
<template #action>
<q-btn flat label="Dismiss" />
</template>
</q-banner>
</q-banner> -->
<div class="row items-start wrap q-col-gutter-md q-mb-lg">
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-carousel
v-model="slide"
transition-prev="scale"
transition-next="scale"
swipeable
animated
control-color="white"
navigation
padding
arrows
height="300px"
class="bg-orange-3 text-white shadow-1 rounded-borders"
>
<q-carousel-slide name="style" class="column no-wrap flex-center">
<q-icon name="style" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
<q-carousel-slide name="tv" class="column no-wrap flex-center">
<q-icon name="live_tv" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
<q-carousel-slide name="layers" class="column no-wrap flex-center">
<q-icon name="layers" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
<q-carousel-slide name="map" class="column no-wrap flex-center">
<q-icon name="terrain" size="56px" />
<div class="q-mt-md text-center">{{ slideText }}</div>
</q-carousel-slide>
</q-carousel>
</div>
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
</div>
<div class="row items-start q-col-gutter-md q-mb-lg">
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
<div class="col-12 col-md">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
</div>
</div>
<div class="row items-start q-col-gutter-md q-mb-lg">
<div class="col">
<div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
<q-card class="q-pa-md">Dashboard page..</q-card>
<div class="col-12 col-md" v-if="modules.favorites.value.length">
<div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.favoriteModules') }}</div>
<q-card class="row flex-container">
<div
v-for="module of modules.favorites.value"
:key="module.title"
class="row no-wrap q-pa-xs flex-item"
>
<q-btn
align="evenly"
padding="16px"
flat
stack
size="lg"
:icon="module.icon"
color="orange-6"
class="col-4 button"
:to="{ name: module.stateName }"
>
<div class="text-center text-orange-6 button-text">
{{ t(`${module.name}.pageTitles.${module.title}`) }}
</div>
</q-btn>
</div>
</q-card>
</div>
</div>
</q-page>
</q-page-container>
</template>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
max-height: 300px;
overflow: auto;
}
.flex-item {
width: 100px;
}
.button {
width: 100%;
line-height: normal;
align-items: center;
}
.button-text {
font-size: 10px;
margin-top: 5px;
}
</style>

2
src/pages/Ticket/TicketMain.vue
View File

@ -15,7 +15,7 @@ const miniState = ref(true);
@mouseover="miniState = false"
@mouseout="miniState = true"
mini-to-overlay
:width="200"
:width="256"
:breakpoint="500"
>
<q-scroll-area class="fit text-grey-8">

1
src/router/modules/customer.js
View File

@ -4,6 +4,7 @@ export default {
path: '/customer',
name: 'Customer',
meta: {
roles: ['developer'],
title: 'customers',
icon: 'vn:client'
},

1
src/router/modules/ticket.js
View File

@ -4,6 +4,7 @@ export default {
path: '/ticket',
name: 'Ticket',
meta: {
roles: ['developer'],
title: 'tickets',
icon: 'vn:ticket'
},