favorite modules component and navigationb composable

src/components/FavoriteModules.vue

@@ -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>

src/components/LeftMenu.vue

@@ -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 quasar = useQuasar();
-const moduleRoutes = (mainRoute && mainRoute.children) || [];
 
-const modules = ref([]);
+async function onToggleFavoriteModule(moduleName, event) {
-for (const route of moduleRoutes) {
+    await navigation.toggleFavorite(moduleName, event);
-    const module = {
-        stateName: route.name,
-        name: route.name.toLowerCase(),
-        roles: [],
-    };
 
-    if (route.meta) {
+    quasar.notify({
-        Object.assign(module, route.meta);
+        message: t('globals.dataSaved'),
-    }
+        type: 'positive',
-
+    });
-    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);
 }
 </script>
 
 <template>
-    <q-list padding>
+    <q-expansion-item
-        <template v-for="module in modules" :key="module.title">
+        :default-opened="true"
-            <template v-if="!module.children">
+        :label="t('globals.favoriteModules')"
-                <q-item
+        v-if="navigation.favorites.value.length"
-                    clickable
+    >
-                    v-ripple
+        <q-list padding>
-                    active-class="text-orange"
+            <template v-for="module in navigation.favorites.value" :key="module.title">
-                    :key="module.title"
+                <div class="module" v-if="!module.children">
-                    :to="{ name: module.stateName }"
+                    <q-item
-                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
+                        class="module"
-                >
+                        clickable
-                    <q-item-section avatar :if="module.icon">
+                        v-ripple
-                        <q-icon :name="module.icon" />
+                        active-class="text-orange"
-                    </q-item-section>
+                        :key="module.title"
-                    <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
+                        :to="{ name: module.stateName }"
-                </q-item>
+                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
-            </template>
+                    >
+                        <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">
+                <template v-if="module.children">
-                <q-expansion-item
+                    <q-expansion-item
-                    expand-separator
+                        class="module"
-                    active-class="text-orange"
+                        active-class="text-orange"
-                    :icon="module.icon"
+                        :label="t(`${module.name}.pageTitles.${module.title}`)"
-                    :label="t(`${module.name}.pageTitles.${module.title}`)"
+                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
-                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
+                        :to="{ name: module.stateName }"
-                    :to="{ name: module.stateName }"
+                    >
-                >
+                        <template #header>
-                    <template v-for="section in module.children" :key="section.title">
+                            <q-item-section avatar>
-                        <q-item
+                                <q-icon :name="module.icon"></q-icon>
-                            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-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
-                        </q-item>
+                            <q-item-section side>
-                    </template>
+                                <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
-                </q-expansion-item>
+                                    <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>

src/components/Navbar.vue

@@ -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-btn v-if="$q.screen.gt.xs" dense flat size="md" icon="add">
-                    <q-icon name="arrow_drop_down" size="s" />
                     <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> -->
-                <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications">
+                <!-- <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">

src/components/__tests__/Leftmenu.spec.js

@@ -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)
     });

src/composables/__tests__/useModule.spec.js

@@ -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)
+    });
+});

src/composables/useNavigation.js

@@ -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 };
+}

src/i18n/en/index.js

@@ -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',

src/i18n/es/index.js

@@ -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',

src/pages/Customer/CustomerMain.vue

@@ -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">

src/pages/Dashboard/Dashboard.vue

@@ -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 modules = useNavigation();
-const slide = ref('style');
-const slideText = 'Description text';
 </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="col-12 col-md" v-if="modules.favorites.value.length">
-                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.favoriteModules') }}</div>
-                    <q-carousel
+                    <q-card class="row flex-container">
-                        v-model="slide"
+                        <div
-                        transition-prev="scale"
+                            v-for="module of modules.favorites.value"
-                        transition-next="scale"
+                            :key="module.title"
-                        swipeable
+                            class="row no-wrap q-pa-xs flex-item"
-                        animated
+                        >
-                        control-color="white"
+                            <q-btn
-                        navigation
+                                align="evenly"
-                        padding
+                                padding="16px"
-                        arrows
+                                flat
-                        height="300px"
+                                stack
-                        class="bg-orange-3 text-white shadow-1 rounded-borders"
+                                size="lg"
-                    >
+                                :icon="module.icon"
-                        <q-carousel-slide name="style" class="column no-wrap flex-center">
+                                color="orange-6"
-                            <q-icon name="style" size="56px" />
+                                class="col-4 button"
-                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                                :to="{ name: module.stateName }"
-                        </q-carousel-slide>
+                            >
-                        <q-carousel-slide name="tv" class="column no-wrap flex-center">
+                                <div class="text-center text-orange-6 button-text">
-                            <q-icon name="live_tv" size="56px" />
+                                    {{ t(`${module.name}.pageTitles.${module.title}`) }}
-                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                                </div>
-                        </q-carousel-slide>
+                            </q-btn>
-                        <q-carousel-slide name="layers" class="column no-wrap flex-center">
+                        </div>
-                            <q-icon name="layers" size="56px" />
+                    </q-card>
-                            <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>
             </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>

src/pages/Ticket/TicketMain.vue

@@ -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">

src/router/modules/customer.js

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

src/router/modules/ticket.js

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