Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix-front into test

.vscode/settings.json

@@ -14,5 +14,8 @@
     ],
     "[javascript]": {
         "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }

jsconfig.json

@@ -13,5 +13,8 @@
             "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
         }
     },
-    "exclude": ["dist", ".quasar", "node_modules"]
+    "exclude": ["dist", ".quasar", "node_modules"],
+    "vueCompilerOptions": {
+        "experimentalDisableTemplateSupport": true
+    }
 }

src/components/LeftMenu.vue

@@ -7,21 +7,37 @@ import routes from 'src/router/routes';
 const { t } = useI18n();
 const { hasAny } = useRole();
 
-const mainRoute = routes.find(route => route.path === '/');
+const mainRoute = routes.find((route) => route.path === '/');
-const moduleRoutes = mainRoute && mainRoute.children || []
+const moduleRoutes = (mainRoute && mainRoute.children) || [];
 
 const modules = ref([]);
 for (const route of moduleRoutes) {
     const module = {
-        path: route.path,
+        stateName: route.name,
         name: route.name.toLowerCase(),
-        roles: []
+        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);
 }
 </script>
@@ -29,12 +45,14 @@ for (const route of moduleRoutes) {
 <template>
     <q-list padding>
         <template v-for="module in modules" :key="module.title">
+            <template v-if="!module.children">
                 <q-item
                     clickable
                     v-ripple
-                :to="{ path: module.path }"
-                v-if="!module.roles.length || hasAny(module.roles)"
                     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" />
@@ -42,5 +60,32 @@ for (const route of moduleRoutes) {
                     <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
                 </q-item>
             </template>
+
+            <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" />
+                            </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>
 </template>

src/components/Navbar.vue

@@ -1,28 +1,36 @@
-
-
 <script setup>
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import UserPanel from 'src/components/UserPanel.vue';
 
+const { t } = useI18n();
 const session = useSession();
 const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 
-defineEmits(['toggle-drawer']);
+function onToggleDrawer() {
-
+    state.drawer.value = !state.drawer.value;
+}
 </script>
 
 <template>
     <q-header class="bg-dark" color="white" elevated bordered>
         <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
+            <q-btn flat @click="onToggleDrawer()" round dense icon="menu">
+                <q-tooltip bottom anchor="bottom right">
+                    {{ t('globals.collapseMenu') }}
+                </q-tooltip>
+            </q-btn>
             <router-link to="/">
                 <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
                     <q-avatar square size="md">
                         <q-img src="~/assets/logo_icon.svg" alt="Logo" />
                     </q-avatar>
+                    <q-tooltip bottom>
+                        {{ t('globals.backToDashboard') }}
+                    </q-tooltip>
                 </q-btn>
             </router-link>
             <q-toolbar-title shrink class="text-weight-bold">Salix</q-toolbar-title>
@@ -41,16 +49,31 @@ defineEmits(['toggle-drawer']);
                         </q-list>
                     </q-menu>
                 </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') }}
+                    </q-tooltip>
+                    <q-menu class="q-pa-md" style="min-width: 250px">
+                        <strong>Notifications</strong>
+                        <q-separator />
+                        <div style="text-align: center; font-size: 2em">
+                            <q-spinner-puff color="orange" />
+                        </div>
+                    </q-menu>
+                </q-btn>
                 <q-btn dense flat no-wrap>
                     <q-avatar size="lg">
                         <q-img
                             :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                             spinner-color="white"
-                        />
+                        >
+                        </q-img>
                     </q-avatar>
-                    <q-tooltip>Account</q-tooltip>
                     <q-icon name="arrow_drop_down" size="s" />
+                    <q-tooltip bottom>
+                        {{ t('globals.userPanel') }}
+                    </q-tooltip>
                     <UserPanel />
                 </q-btn>
             </div>

src/components/UserPanel.vue

@@ -1,17 +1,15 @@
 <script setup>
 import { onMounted, computed } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { Dark } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import axios from 'axios';
 
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
-import { useRole } from 'src/composables/useRole';
 
-const quasar = useQuasar();
 const state = useState();
 const session = useSession();
-const role = useRole();
 const router = useRouter();
 const { t, locale } = useI18n();
 
@@ -28,53 +26,67 @@ const user = state.getUser();
 const token = session.getToken();
 
 onMounted(async () => {
-    try {
+    updatePreferences();
-        const stateRoles = state.getRoles().value
-        if (stateRoles.length === 0) {
-            await role.fetch();
-        }
-    } catch (error) {
-        quasar.notify({
-            message: t('errors.statusUnauthorized'),
-            type: 'negative',
 });
-        logout();
+
+function updatePreferences() {
+    if (user.value.darkMode) {
+        darkMode.value = user.value.darkMode;
     }
+    if (user.value.lang) {
+        locale.value = user.value.lang;
+    }
+}
+
+async function saveDarkMode(value) {
+    const query = `/api/UserConfigs/${user.value.id}`;
+    await axios.patch(query, {
+        darkMode: value,
     });
+    user.value.darkMode = value;
+}
+
+async function saveLanguage(value) {
+    const query = `/api/Accounts/${user.value.id}`;
+    await axios.patch(query, {
+        lang: value,
+    });
+    user.value.lang = value;
+}
 
 function logout() {
     session.destroy();
     router.push('/login');
 }
-
 </script>
 
 <template>
-    <q-menu>
+    <q-menu anchor="bottom left">
         <div class="row no-wrap q-pa-md">
-            <div class="column">
+            <div class="column panel">
                 <div class="text-h6 q-mb-md">{{ t('components.userPanel.settings') }}</div>
                 <q-toggle
+                    v-model="locale"
+                    @update:model-value="saveLanguage"
                     :label="t(`globals.lang['${locale}']`)"
                     icon="public"
                     color="orange"
                     false-value="es"
                     true-value="en"
-                    v-model="locale"
                 />
                 <q-toggle
                     v-model="darkMode"
+                    @update:model-value="saveDarkMode"
+                    :label="t(`globals.theme`)"
                     checked-icon="dark_mode"
                     color="orange"
                     unchecked-icon="light_mode"
                 />
-
-                <q-btn color="orange" outline size="sm" label="Settings" icon="settings" />
             </div>
 
             <q-separator vertical inset class="q-mx-lg" />
 
-            <div class="column items-center" style="min-width: 150px">
+            <div class="column items-center panel">
                 <q-avatar size="80px">
                     <q-img
                         :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
@@ -90,7 +102,7 @@ function logout() {
                 <q-btn
                     color="orange"
                     flat
-                    label="Log Out"
+                    :label="t('globals.logOut')"
                     size="sm"
                     icon="logout"
                     @click="logout()"
@@ -100,3 +112,9 @@ function logout() {
         </div>
     </q-menu>
 </template>
+
+<style lang="scss" scoped>
+.panel {
+    width: 150px;
+}
+</style>

src/components/__tests__/Leftmenu.spec.js

@@ -0,0 +1,98 @@
+import { jest, describe, expect, it, beforeAll } from '@jest/globals';
+import { createWrapper } from 'app/tests/jest/jestHelpers';
+import Leftmenu from '../LeftMenu.vue';
+
+const mockPush = jest.fn();
+
+jest.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: mockPush,
+        currentRoute: { value: 'myCurrentRoute' }
+    }),
+}));
+
+jest.mock('src/router/routes', () => ([
+    {
+        path: '/',
+        name: 'Main',
+        children: [
+            {
+                path: '/dashboard',
+                name: 'Dashboard',
+                meta: { title: 'dashboard', icon: 'dashboard' }
+            },
+            {
+                path: '/customer',
+                name: 'Customer',
+                meta: {
+                    title: 'customers',
+                    icon: 'vn:client'
+                },
+                children: [
+                    {
+                        path: '',
+                        name: 'CustomerMain',
+                        children: [
+                            {
+                                path: 'list',
+                                name: 'CustomerList',
+                                meta: {
+                                    title: 'list',
+                                    icon: 'view_list',
+                                }
+                            },
+                            {
+                                path: 'create',
+                                name: 'CustomerCreate',
+                                meta: {
+                                    title: 'createCustomer',
+                                    icon: 'vn:addperson',
+                                }
+                            },
+                        ]
+                    }
+                ]
+            }
+        ],
+    },
+]));
+
+describe('Leftmenu', () => {
+    let vm;
+    beforeAll(() => {
+        vm = createWrapper(Leftmenu).vm;
+    });
+
+    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 = vm.modules[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 = vm.modules[1];
+        expect(secondMenuItem.children).toEqual(expect.arrayContaining(expectedMenuItem));
+        expect(secondMenuItem.children.length).toEqual(2)
+    });
+});

src/components/__tests__/UserPanel.spec.js

@@ -1,47 +0,0 @@
-import { describe, expect, it, jest } from '@jest/globals';
-import { createWrapper, axios, flushPromises } from 'app/tests/jest/jestHelpers';
-import UserPanel from '../UserPanel.vue';
-
-const mockPush = jest.fn();
-
-jest.mock('vue-router', () => ({
-    useRouter: () => ({
-        push: mockPush,
-    }),
-}));
-
-describe('UserPanel', () => {
-    describe('onMounted', () => {
-        it.only('should define the user into state', async () => {
-            const userMock = {
-                user: {
-                    id: 1,
-                    name: 'myName',
-                    nickname: 'myNickName'
-                },
-                roles: []
-            }
-            jest.spyOn(axios, 'get').mockResolvedValue({ data: userMock });
-            const { vm } = createWrapper(UserPanel);
-
-            await flushPromises()
-
-            const expectedUser = expect.objectContaining(userMock.user)
-            expect(vm.state.getUser().value).toEqual(expectedUser);
-        });
-
-        it('should logout and notify the expected error', async () => {
-            jest.spyOn(axios, 'get').mockRejectedValue(new Error('error'));
-
-            const { vm } = createWrapper(UserPanel);
-
-            jest.spyOn(vm.quasar, 'notify');
-
-            await flushPromises()
-
-            expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
-                { 'type': 'negative' }
-            ));
-        });
-    });
-});

src/composables/__tests__/useRole.spec.js

@@ -0,0 +1,76 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { axios, flushPromises } from 'app/tests/jest/jestHelpers';
+import { useRole } from '../useRole';
+const role = useRole();
+
+describe('useRole', () => {
+
+    describe('fetch', () => {
+        it('should call setUser and setRoles of the state with the expected data', async () => {
+            const rolesData = [
+                {
+                    role: {
+                        name: 'salesPerson'
+                    }
+                },
+                {
+                    role: {
+                        name: 'admin'
+                    }
+                }
+            ];
+            const fetchedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                userConfig: {
+                    darkMode: false,
+                }
+            }
+            const expectedUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                darkMode: false,
+            }
+            const expectedRoles = ['salesPerson', 'admin']
+            jest.spyOn(axios, 'get').mockResolvedValue({
+                data: { roles: rolesData, user: fetchedUser }
+            });
+
+            jest.spyOn(role.state, 'setUser');
+            jest.spyOn(role.state, 'setRoles');
+
+            role.fetch();
+
+            await flushPromises();
+
+            expect(role.state.setUser).toHaveBeenCalledWith(expectedUser);
+            expect(role.state.setRoles).toHaveBeenCalledWith(expectedRoles);
+
+            role.state.setRoles([])
+        });
+    });
+    describe('hasAny', () => {
+        it('should return true if a role matched', async () => {
+            role.state.setRoles(['admin'])
+            const hasRole = role.hasAny(['admin']);
+
+            await flushPromises();
+
+            expect(hasRole).toBe(true);
+
+            role.state.setRoles([])
+        });
+
+        it('should return false if no roles matched', async () => {
+            const hasRole = role.hasAny(['admin']);
+
+            await flushPromises();
+
+            expect(hasRole).toBe(false);
+        });
+    });
+});

src/composables/__tests__/useSession.spec.js

@@ -0,0 +1,133 @@
+import { describe, expect, it, jest } from '@jest/globals';
+import { useSession } from '../useSession';
+import { useState } from '../useState';
+import { axios } from 'app/tests/jest/jestHelpers';
+
+const session = useSession();
+const state = useState();
+
+describe('session', () => {
+    describe('getToken / setToken', () => {
+        it('should return an empty string if no token is found in local or session storage', async () => {
+            const expectedToken = ''
+
+            const token = session.getToken();
+
+            expect(token).toEqual(expectedToken);
+        });
+
+        it('should return the token stored in local or session storage', async () => {
+            const expectedToken = 'myToken'
+            const data = {
+                token: expectedToken,
+                keepLogin: false
+            }
+            session.setToken(data);
+
+            const token = session.getToken();
+
+            expect(token).toEqual(expectedToken);
+        });
+    });
+
+    describe('destroy', () => {
+        it('should remove the token from the local storage and set a blank user', async () => {
+            const previousUser = {
+                id: 999,
+                name: `T'Challa`,
+                nickname: 'Black Panther',
+                lang: 'en',
+                darkMode: false,
+            }
+            const expectedUser = {
+                id: 0,
+                name: '',
+                nickname: '',
+                lang: '',
+                darkMode: null,
+            }
+            let user = state.getUser();
+
+            localStorage.setItem('token', 'tokenToBeGone');
+            state.setUser(previousUser)
+
+            expect(localStorage.getItem('token')).toEqual('tokenToBeGone');
+            expect(user.value).toEqual(previousUser);
+
+
+            session.destroy();
+
+            user = state.getUser();
+            expect(localStorage.getItem('token')).toBeNull();
+            expect(user.value).toEqual(expectedUser);
+        });
+    });
+
+    describe('login', () => {
+        const expectedUser = {
+            id: 999,
+            name: `T'Challa`,
+            nickname: 'Black Panther',
+            lang: 'en',
+            userConfig: {
+                darkMode: false,
+            }
+        }
+        const rolesData = [
+            {
+                role: {
+                    name: 'salesPerson'
+                }
+            },
+            {
+                role: {
+                    name: 'admin'
+                }
+            }
+        ];
+
+        it('should fetch the user roles and then set token in the sessionStorage', async () => {
+            const expectedRoles = ['salesPerson', 'admin']
+            jest.spyOn(axios, 'get').mockResolvedValue({
+                data: { roles: rolesData, user: expectedUser }
+            });
+
+            const expectedToken = 'mySessionToken'
+            const keepLogin = false
+
+            await session.login(expectedToken, keepLogin);
+
+            const roles = state.getRoles();
+            const localToken = localStorage.getItem('token');
+            const sessionToken = sessionStorage.getItem('token');
+
+            expect(roles.value).toEqual(expectedRoles);
+            expect(localToken).toBeNull();
+            expect(sessionToken).toEqual(expectedToken);
+
+            session.destroy() // this clears token and user for any other test
+        });
+
+        it('should fetch the user roles and then set token in the localStorage', async () => {
+            const expectedRoles = ['salesPerson', 'admin']
+            jest.spyOn(axios, 'get').mockResolvedValue({
+                data: { roles: rolesData, user: expectedUser }
+            });
+
+            const expectedToken = 'myLocalToken'
+            const keepLogin = true
+
+            await session.login(expectedToken, keepLogin);
+
+            const roles = state.getRoles();
+            const localToken = localStorage.getItem('token');
+            const sessionToken = sessionStorage.getItem('token');
+
+            expect(roles.value).toEqual(expectedRoles);
+            expect(localToken).toEqual(expectedToken);
+            expect(sessionToken).toBeNull();
+
+            session.destroy() // this clears token and user for any other test
+        });
+    });
+});

src/composables/useRole.js

@@ -1,14 +1,21 @@
 import { useState } from './useState';
 import axios from 'axios';
 
+export function useRole() {
     const state = useState();
 
-export function useRole() {
     async function fetch() {
         const { data } = await axios.get('/api/accounts/acl');
         const roles = data.roles.map(userRoles => userRoles.role.name);
 
-        state.setUser(data.user);
+        const userData = {
+            id: data.user.id,
+            name: data.user.name,
+            nickname: data.user.nickname,
+            lang: data.user.lang || 'es',
+            darkMode: data.user.userConfig.darkMode,
+        }
+        state.setUser(userData);
         state.setRoles(roles);
     }
 
@@ -25,6 +32,6 @@ export function useRole() {
     return {
         fetch,
         hasAny,
+        state
     };
 }
-

src/composables/useSession.js

@@ -18,15 +18,20 @@ export function useSession() {
     }
 
     function destroy() {
-        localStorage.removeItem('token');
+        if (localStorage.getItem('token'))
-        sessionStorage.getItem('token');
+            localStorage.removeItem('token')
+
+        if (sessionStorage.getItem('token'))
+            sessionStorage.removeItem('token');
 
         const { setUser } = useState();
 
         setUser({
             id: 0,
-            username: '',
+            name: '',
             nickname: '',
+            lang: '',
+            darkMode: null,
         });
     }
 

src/composables/useState.js

@@ -4,10 +4,14 @@ const user = ref({
     id: 0,
     name: '',
     nickname: '',
+    lang: '',
+    darkMode: null,
 });
 
 const roles = ref([]);
 
+const drawer = ref(true);
+
 export function useState() {
     function getUser() {
         return computed(() => {
@@ -15,6 +19,8 @@ export function useState() {
                 id: user.value.id,
                 name: user.value.name,
                 nickname: user.value.nickname,
+                lang: user.value.lang,
+                darkMode: user.value.darkMode,
             };
         });
     }
@@ -24,6 +30,8 @@ export function useState() {
             id: data.id,
             name: data.name,
             nickname: data.nickname,
+            lang: data.lang,
+            darkMode: data.darkMode,
         };
     }
 
@@ -42,5 +50,6 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        drawer
     };
 }

src/i18n/en/index.js

@@ -4,6 +4,12 @@ export default {
             es: 'Spanish',
             en: 'English',
         },
+        collapseMenu: 'Collapse left menu',
+        backToDashboard: 'Return to dashboard',
+        notifications: 'Notifications',
+        userPanel: 'User panel',
+        theme: 'Theme',
+        logOut: 'Log out',
     },
     errors: {
         statusUnauthorized: 'Access denied',
@@ -27,12 +33,16 @@ export default {
         pageTitles: {
             customers: 'Customers',
             list: 'List',
+            createCustomer: 'Create customer',
             basicData: 'Basic Data'
         }
     },
     ticket: {
         pageTitles: {
-            tickets: 'Tickets'
+            tickets: 'Tickets',
+            list: 'List',
+            createTicket: 'Create ticket',
+            basicData: 'Basic Data'
         }
     },
     components: {

src/i18n/es/index.js

@@ -4,6 +4,12 @@ export default {
             es: 'Español',
             en: 'Inglés',
         },
+        collapseMenu: 'Contraer menú lateral',
+        backToDashboard: 'Volver al tablón',
+        notifications: 'Notificaciones',
+        userPanel: 'Panel de usuario',
+        theme: 'Tema',
+        logOut: 'Cerrar sesión',
     },
     errors: {
         statusUnauthorized: 'Acceso denegado',
@@ -27,12 +33,16 @@ export default {
         pageTitles: {
             customers: 'Clientes',
             list: 'Listado',
+            createCustomer: 'Crear cliente',
             basicData: 'Datos básicos'
         }
     },
     ticket: {
         pageTitles: {
-            tickets: 'Tickets'
+            tickets: 'Tickets',
+            list: 'Listado',
+            createTicket: 'Crear ticket',
+            basicData: 'Datos básicos'
         }
     },
     components: {

src/layouts/MainLayout.vue

@@ -1,35 +1,11 @@
 <script setup>
-import { ref } from 'vue';
 import Navbar from 'src/components/Navbar.vue';
-import LeftMenu from 'src/components/LeftMenu.vue';
-const drawer = ref(false);
-const miniState = ref(true);
-
-function onToggleDrawer() {
-    drawer.value = !drawer.value;
-}
 </script>
 
 <template>
     <q-layout view="hHh lpR fFf">
-        <Navbar @toggle-drawer="onToggleDrawer()" />
+        <Navbar />
-        <q-drawer
-            v-model="drawer"
-            show-if-above
-            :mini="miniState"
-            @mouseover="miniState = false"
-            @mouseout="miniState = true"
-            mini-to-overlay
-            :width="200"
-            :breakpoint="500"
-        >
-            <q-scroll-area class="fit text-grey-8">
-                <LeftMenu />
-            </q-scroll-area>
-        </q-drawer>
-        <q-page-container>
         <router-view></router-view>
-        </q-page-container>
     </q-layout>
 </template>
 

src/pages/Customer/Card/CustomerCard.vue

@@ -1,15 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
+
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
 <template>
-    <div class="row fit fixed">
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
-        <div class="col-2">
+        <q-scroll-area class="fit text-grey-8">
-            <q-card square>
             <router-link :to="{ path: '/customer/list' }">
                 <q-icon name="arrow_back" size="md" color="primary" />
-                </router-link>Descriptor
+            </router-link>
-            </q-card>
+            <div>Customer ID: {{ entityId }}</div>
-        </div>
+        </q-scroll-area>
-
+    </q-drawer>
-        <div class="col">
+    <q-page-container>
         <router-view></router-view>
-        </div>
+    </q-page-container>
-    </div>
 </template>

src/pages/Customer/CustomerLayout.vue

@@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>

src/pages/Customer/CustomerList.vue

@@ -67,13 +67,7 @@ function navigate(id) {
                     </q-btn>
                     <q-separator vertical />
                     <q-card-actions vertical class="justify-between">
-                        <q-btn
+                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
-                            flat
-                            round
-                            color="orange"
-                            icon="arrow_circle_right"
-                            @click="navigate(customer.id)"
-                        />
                         <q-btn flat round color="accent" icon="preview" />
                         <q-btn flat round color="accent" icon="vn:ticket" />
                         <q-card-actions>
@@ -103,33 +97,6 @@ function navigate(id) {
                         </q-card-section>
                     </div>
                 </q-slide-transition>
-                <!-- <q-card-section horizontal>
-                    <q-card-section vertical class="col">
-                        <div class="text-h6">{{ customer.name }}</div>
-                        <div class="text-subtitle2">@{{ customer.username }}</div>
-
-                        <q-card-section vertical>text</q-card-section>
-                    </q-card-section>
-
-                    <q-separator vertical />
-
-                    <q-card-actions vertical class="justify-around">
-                        <q-btn flat round color="red" icon="favorite" />
-                        <q-btn flat round color="accent" icon="bookmark" />
-                        <q-btn color="grey-7" round flat icon="more_vert">
-                            <q-menu cover auto-close>
-                                <q-list>
-                                    <q-item clickable>
-                                        <q-item-section>Action 1</q-item-section>
-                                    </q-item>
-                                    <q-item clickable>
-                                        <q-item-section>Action 2</q-item-section>
-                                    </q-item>
-                                </q-list>
-                            </q-menu>
-                        </q-btn>
-                    </q-card-actions>
-                </q-card-section>-->
             </q-card>
         </div>
     </q-page>

src/pages/Customer/CustomerMain.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
+</script>
+
+<template>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>

src/pages/Dashboard/Dashboard.vue

@@ -1,20 +1,33 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
 
 const slide = ref('style');
 const slideText = 'Description text';
-
-
 </script>
 
 <template>
-    <q-page class="q-pa-md">
+    <q-drawer
-        <q-banner
+        v-model="state.drawer.value"
-            v-if="$q.screen.gt.xs"
+        show-if-above
-            inline-actions
+        :mini="miniState"
-            rounded
+        @mouseover="miniState = false"
-            class="bg-orange text-white q-mb-lg"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
     >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </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">
                 Employee notification message
                 <template #action>
                     <q-btn flat label="Dismiss" />
@@ -82,6 +95,7 @@ const slideText = 'Description text';
                 </div>
             </div>
         </q-page>
+    </q-page-container>
 </template>
 
 <style lang="scss" scoped></style>

src/pages/Login/Login.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
-import { Dark, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
@@ -10,21 +10,12 @@ import { useSession } from 'src/composables/useSession';
 const quasar = useQuasar();
 const session = useSession();
 const router = useRouter();
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
 const username = ref('');
 const password = ref('');
 const keepLogin = ref(true);
 
-const darkMode = computed({
-    get() {
-        return Dark.isActive;
-    },
-    set(value) {
-        Dark.set(value);
-    },
-});
-
 async function onSubmit() {
     try {
         const { data } = await axios.post('/api/accounts/login', {
@@ -66,36 +57,11 @@ async function onSubmit() {
 
 <template>
     <q-layout>
-        <q-header class="transparent">
-            <q-toolbar>
-                <q-space></q-space>
-                <q-toggle
-                    :label="t(`globals.lang['${locale}']`)"
-                    icon="public"
-                    color="orange"
-                    false-value="es"
-                    true-value="en"
-                    v-model="locale"
-                />
-                <q-toggle
-                    v-model="darkMode"
-                    checked-icon="dark_mode"
-                    color="orange"
-                    unchecked-icon="light_mode"
-                />
-            </q-toolbar>
-        </q-header>
         <q-page-container>
             <q-page>
                 <div id="login">
                     <q-card class="login q-pa-xl">
-                        <q-img
+                        <q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
-                            src="~/assets/logo.svg"
-                            alt="Logo"
-                            fit="contain"
-                            :ratio="16 / 9"
-                            class="q-mb-md"
-                        />
                         <q-form @submit="onSubmit" class="q-gutter-md">
                             <q-input
                                 filled
@@ -103,9 +69,7 @@ async function onSubmit() {
                                 v-model="username"
                                 :label="t('login.username')"
                                 lazy-rules
-                                :rules="[
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
                             />
                             <q-input
                                 filled
@@ -114,15 +78,9 @@ async function onSubmit() {
                                 v-model="password"
                                 :label="t('login.password')"
                                 lazy-rules
-                                :rules="[
+                                :rules="[(val) => (val && val.length > 0) || 'Please type something']"
-                                    (val) => (val && val.length > 0) || 'Please type something',
-                                ]"
-                            />
-                            <q-toggle
-                                v-model="keepLogin"
-                                :label="t('login.keepLogin')"
-                                color="orange"
                             />
+                            <q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
 
                             <div>
                                 <q-btn :label="t('login.submit')" type="submit" color="orange" />

src/pages/Login/__tests__/Login.spec.js

@@ -18,8 +18,17 @@ describe('Login', () => {
     });
 
     it('should successfully set the token into session', async () => {
+        const expectedUser = {
+            id: 999,
+            name: `T'Challa`,
+            nickname: 'Black Panther',
+            lang: 'en',
+            userConfig: {
+                darkMode: false,
+            }
+        }
         jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
-        jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: { id: 1 } } });
+        jest.spyOn(axios, 'get').mockResolvedValue({ data: { roles: [], user: expectedUser } });
         jest.spyOn(vm.quasar, 'notify')
 
         expect(vm.session.getToken()).toEqual('');

src/pages/Ticket/Card/TicketBasicData.vue

@@ -0,0 +1,3 @@
+<template>
+    <q-card>Basic Data</q-card>
+</template>

src/pages/Ticket/Card/TicketCard.vue

@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
+
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>
+            <div>Customer ID: {{ entityId }}</div>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>

src/pages/Ticket/TicketLayout.vue

@@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>

src/pages/Ticket/TicketList.vue

@@ -0,0 +1,110 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const customers = [
+    {
+        id: 1101,
+        name: 'Bruce Wayne',
+        username: 'batman',
+        email: 'batman@gotham',
+        phone: '555-555-5555',
+        expanded: ref(false),
+    },
+    {
+        id: 1102,
+        name: 'James Gordon',
+        username: 'jamesgordon',
+        email: 'jamesgordon@gotham',
+        phone: '555-555-1111',
+        expanded: ref(false),
+    },
+];
+
+function navigate(id) {
+    router.push({ path: `/customer/${id}` });
+}
+</script>
+
+<template>
+    <q-page class="q-pa-md">
+        <div class="column items-center q-gutter-y-md">
+            <q-card v-for="customer in customers" :key="customer.id" class="card">
+                <!-- v-ripple :to="{ path: '/dashboard' }" -->
+                <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
+                    <q-item-section class="q-pa-md">
+                        <div class="text-h6">{{ customer.name }}</div>
+                        <q-item-label caption>@{{ customer.username }}</q-item-label>
+                        <div class="q-mt-md">
+                            <q-list>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>Email</q-item-label>
+                                        <q-item-label>{{ customer.email }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                                <q-item class="q-pa-none">
+                                    <q-item-section>
+                                        <q-item-label caption>Phone</q-item-label>
+                                        <q-item-label>{{ customer.phone }}</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </div>
+                    </q-item-section>
+                    <q-btn color="grey-7" round flat icon="more_vert">
+                        <q-menu cover auto-close>
+                            <q-list>
+                                <q-item clickable>
+                                    <q-item-section>Action 1</q-item-section>
+                                </q-item>
+                                <q-item clickable>
+                                    <q-item-section>Action 2</q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-menu>
+                    </q-btn>
+                    <q-separator vertical />
+                    <q-card-actions vertical class="justify-between">
+                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
+                        <q-btn flat round color="accent" icon="preview" />
+                        <q-btn flat round color="accent" icon="vn:ticket" />
+                        <q-card-actions>
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
+                                :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
+                        </q-card-actions>
+                    </q-card-actions>
+                </q-item>
+                <q-slide-transition>
+                    <div v-show="customer.expanded.value">
+                        <q-separator />
+                        <q-card-section class="text-subitle2">
+                            <q-list>
+                                <q-item clickable>
+                                    <q-item-section>
+                                        <q-item-label>Address</q-item-label>
+                                        <q-item-label caption>Avenue 11</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-card-section>
+                    </div>
+                </q-slide-transition>
+            </q-card>
+        </div>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    width: 100%;
+    max-width: 60em;
+}
+</style>

src/pages/Ticket/TicketMain.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
+</script>
+
+<template>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>

src/router/index.js

@@ -1,11 +1,16 @@
 import { route } from 'quasar/wrappers';
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
+import { Notify } from 'quasar';
 import routes from './routes';
 import { i18n } from 'src/boot/i18n';
+import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import { useRole } from 'src/composables/useRole';
+
+const state = useState();
 const session = useSession();
 const role = useRole();
+const { t } = i18n.global;
 
 /*
  * If not building with SSR mode, you can
@@ -33,12 +38,29 @@ export default route(function (/* { store, ssrContext } */) {
         history: createHistory(process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE),
     });
 
-    Router.beforeEach((to, from, next) => {
+    Router.beforeEach(async (to, from, next) => {
         const { isLoggedIn } = session;
 
         if (!isLoggedIn() && to.name !== 'Login') {
-            next({ name: 'Login', query: { redirect: to.fullPath } });
+            return next({ name: 'Login', query: { redirect: to.fullPath } });
-        } else {
+        }
+
+        if (isLoggedIn()) {
+            try {
+                const stateRoles = state.getRoles().value;
+                if (stateRoles.length === 0) {
+                    await role.fetch();
+                }
+            } catch (error) {
+                Notify.create({
+                    message: t('errors.statusUnauthorized'),
+                    type: 'negative',
+                });
+
+                session.destroy();
+                return next({ path: '/login' });
+            }
+
             const matches = to.matched;
             const hasRequiredRoles = matches.every(route => {
                 const meta = route.meta;
@@ -47,16 +69,15 @@ export default route(function (/* { store, ssrContext } */) {
                 return true;
             });
 
-            if (hasRequiredRoles) {
+            if (!hasRequiredRoles) {
+                return next({ path: '/' });
+            }
+        }
+
         next();
-            } else {
-                next({ path: '/' });
-            }
-        }
     });
 
     Router.afterEach((to) => {
-        const { t } = i18n.global;
         let title = t(`login.title`);
 
         const matches = to.matched;

src/router/modules/customer.js

@@ -1,19 +1,27 @@
+import { RouterView } from 'vue-router';
+
 export default {
     path: '/customer',
     name: 'Customer',
     meta: {
         title: 'customers',
-        icon: 'vn:client',
+        icon: 'vn:client'
-        roles: ['salesPerson'],
     },
-    component: () => import('src/pages/Customer/CustomerLayout.vue'),
+    component: RouterView,
+    redirect: { name: 'CustomerMain' },
+    children: [
+        {
+            path: '',
+            name: 'CustomerMain',
+            component: () => import('src/pages/Customer/CustomerMain.vue'),
             redirect: { name: 'CustomerList' },
             children: [
                 {
                     path: 'list',
                     name: 'CustomerList',
                     meta: {
-                title: 'list'
+                        title: 'list',
+                        icon: 'view_list',
                     },
                     component: () => import('src/pages/Customer/CustomerList.vue'),
                 },
@@ -21,10 +29,13 @@ export default {
                     path: 'create',
                     name: 'CustomerCreate',
                     meta: {
-                title: 'create'
+                        title: 'createCustomer',
+                        icon: 'vn:addperson',
                     },
                     component: () => import('src/pages/Customer/CustomerCreate.vue'),
                 },
+            ]
+        },
         {
             path: ':id',
             component: () => import('src/pages/Customer/Card/CustomerCard.vue'),
@@ -40,5 +51,5 @@ export default {
                 }
             ]
         },
-    ],
+    ]
 };

src/router/modules/ticket.js

@@ -1,18 +1,57 @@
+import { RouterView } from 'vue-router';
+
 export default {
     path: '/ticket',
     name: 'Ticket',
     meta: {
         title: 'tickets',
-        icon: 'vn:ticket',
+        icon: 'vn:ticket'
     },
-    component: () => import('src/pages/Ticket/TicketLayout.vue'),
+    component: RouterView,
-    redirect: { path: '/ticket/list' },
+    redirect: { name: 'TicketMain' },
+    children: [
+        {
+            path: '',
+            name: 'TicketMain',
+            component: () => import('src/pages/Ticket/TicketMain.vue'),
+            redirect: { name: 'TicketList' },
             children: [
                 {
                     path: 'list',
                     name: 'TicketList',
-            meta: { title: 'list' },
+                    meta: {
+                        title: 'list',
+                        icon: 'view_list',
+                    },
                     component: () => import('src/pages/Ticket/TicketList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'TicketCreate',
+                    meta: {
+                        title: 'createTicket',
+                        icon: 'vn:ticketAdd',
+                        roles: ['salesPerson'],
+                    },
+                    component: () => import('src/pages/Ticket/TicketList.vue'),
+                },
+
+            ]
+        },
+        {
+            path: ':id',
+            component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
+            redirect: { name: 'TicketBasicData' },
+            children: [
+                {
+                    path: 'basic-data',
+                    name: 'TicketBasicData',
+                    meta: {
+                        title: 'basicData'
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
                 }
-    ],
+            ]
+        },
+    ]
 };

src/router/routes.js

@@ -20,16 +20,16 @@ const routes = [
                 meta: { title: 'dashboard', icon: 'dashboard' },
                 component: () => import('../pages/Dashboard/Dashboard.vue'),
             },
-            /*             {
-                            path: '/:pathMatch(.*)*',
-                            name: 'NotFound',
-                            component: () => import('../pages/NotFound.vue'),
-                        }, */
             // Module routes
             customer,
             ticket,
         ],
     },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () => import('../pages/NotFound.vue'),
+    }
 ];
 
 export default routes;

src/types/route.ts

@@ -1,4 +0,0 @@
-export interface Route {
-    path: string;
-    component: any;
-}