From 760c89aff9a4f48bb24b4cb83da8ada0f36a25f5 Mon Sep 17 00:00:00 2001 From: joan Date: Tue, 15 Mar 2022 10:33:28 +0100 Subject: [PATCH 1/6] Route acls and added LeftMenu component --- src/components/LeftMenu.vue | 63 ++++++++++++++++++++++++++ src/components/QuasarButton.vue | 12 ----- src/components/QuasarDialog.vue | 65 --------------------------- src/components/QuasarDrawer.vue | 33 -------------- src/components/QuasarPageSticky.vue | 21 --------- src/components/QuasarTooltip.vue | 21 --------- src/components/UserPanel.vue | 33 +++++++++++++- src/composables/useRole.ts | 10 +++-- src/i18n/en/index.ts | 2 + src/layouts/Main.vue | 47 +------------------ src/pages/Customer/Card/BasicData.vue | 3 ++ src/pages/Customer/Card/Card.vue | 2 +- src/pages/Ticket/List.vue | 0 src/pages/Ticket/Ticket.vue | 3 ++ src/router/index.ts | 43 +++++++++++++++--- src/router/modules/customer.ts | 34 ++++++++++++++ src/router/modules/ticket.ts | 18 ++++++++ src/router/routes.ts | 31 ++++--------- src/types/route.ts | 4 ++ 19 files changed, 213 insertions(+), 232 deletions(-) create mode 100644 src/components/LeftMenu.vue delete mode 100644 src/components/QuasarButton.vue delete mode 100644 src/components/QuasarDialog.vue delete mode 100644 src/components/QuasarDrawer.vue delete mode 100644 src/components/QuasarPageSticky.vue delete mode 100644 src/components/QuasarTooltip.vue create mode 100644 src/pages/Customer/Card/BasicData.vue create mode 100644 src/pages/Ticket/List.vue create mode 100644 src/pages/Ticket/Ticket.vue create mode 100644 src/router/modules/customer.ts create mode 100644 src/router/modules/ticket.ts create mode 100644 src/types/route.ts diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue new file mode 100644 index 000000000..f67927e94 --- /dev/null +++ b/src/components/LeftMenu.vue @@ -0,0 +1,63 @@ + + + \ No newline at end of file diff --git a/src/components/QuasarButton.vue b/src/components/QuasarButton.vue deleted file mode 100644 index 8e2e33ce8..000000000 --- a/src/components/QuasarButton.vue +++ /dev/null @@ -1,12 +0,0 @@ - - - diff --git a/src/components/QuasarDialog.vue b/src/components/QuasarDialog.vue deleted file mode 100644 index 770dc3789..000000000 --- a/src/components/QuasarDialog.vue +++ /dev/null @@ -1,65 +0,0 @@ - - - diff --git a/src/components/QuasarDrawer.vue b/src/components/QuasarDrawer.vue deleted file mode 100644 index 5d85f72b4..000000000 --- a/src/components/QuasarDrawer.vue +++ /dev/null @@ -1,33 +0,0 @@ - - - diff --git a/src/components/QuasarPageSticky.vue b/src/components/QuasarPageSticky.vue deleted file mode 100644 index f281a973a..000000000 --- a/src/components/QuasarPageSticky.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/src/components/QuasarTooltip.vue b/src/components/QuasarTooltip.vue deleted file mode 100644 index c4905667c..000000000 --- a/src/components/QuasarTooltip.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue index ecd8f1608..10c33fa07 100644 --- a/src/components/UserPanel.vue +++ b/src/components/UserPanel.vue @@ -11,7 +11,12 @@ true-value="en" v-model="locale" /> - + @@ -31,7 +36,15 @@
@{{ user.username }}
- + @@ -65,6 +78,15 @@ const darkMode = computed({ const user = state.getUser(); const token = session.getToken(); +interface Role { + name: string +} + +interface RoleList { + roleId: number; + role: Role +} + onMounted(() => { axios .get('/api/accounts/acl') @@ -74,6 +96,13 @@ onMounted(() => { username: data.user.name, nickname: data.user.nickname, }); + + if (data.roles) { + const roleList: RoleList[] = data.roles; + const roles: string[] = roleList.map(item => item.role.name); + + state.setRoles(roles); + } }) .catch(() => { quasar.notify({ diff --git a/src/composables/useRole.ts b/src/composables/useRole.ts index e44827be1..1da8bc17a 100644 --- a/src/composables/useRole.ts +++ b/src/composables/useRole.ts @@ -1,11 +1,13 @@ -/* import store from '@/store'; +import { ComputedRef } from 'vue'; +import { useState } from './useState'; export function useRole() { function hasAny(roles: string[]): boolean { - const roleStore: string[] = store.state.roles; + const { getRoles } = useState(); + const roleStore: ComputedRef = getRoles(); for (const role of roles) { - if (roleStore.indexOf(role) !== -1) return true; + if (roleStore.value.indexOf(role) !== -1) return true; } return false; @@ -15,4 +17,4 @@ export function useRole() { hasAny, }; } - */ + diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts index 9df5cbf17..2b0439013 100644 --- a/src/i18n/en/index.ts +++ b/src/i18n/en/index.ts @@ -31,5 +31,7 @@ export default { dashboard: 'Dashboard', customers: 'Customers', list: 'List', + basicData: 'Basic Data', + tickets: 'Tickets', }, }; diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue index 744e2176d..3db1bd3b1 100644 --- a/src/layouts/Main.vue +++ b/src/layouts/Main.vue @@ -12,51 +12,7 @@ :breakpoint="500" > - - - - - - Dashboard - - - - - - Customers - - - - - - Tickets - - - - - - - Invoice Out - - - - - - - - Catalog - - - - - - - - - - Drafts - - + @@ -68,6 +24,7 @@