From 53a9d8da0e85f495d79f1e9145080f45dcd225a7 Mon Sep 17 00:00:00 2001 From: shanmukhdutt Date: Tue, 9 Jan 2024 11:19:18 +0530 Subject: [PATCH 1/6] Fixed: Menu item is displaying as selected(#227) --- src/components/Menu.vue | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 31c96a72..f904e9f1 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -7,15 +7,15 @@ - + {{ $t("Create Rule") }} - + {{ $t("Rule Pipeline") }} - + {{ $t("Settings") }} @@ -103,7 +103,10 @@ await this.store.dispatch('user/setEcomStore', { 'productStoreId': event.detail.value }) emitter.emit("productStoreChanged") } - } + }, + isSelected(select:any){ + return this.$route.path===select + }, }, setup() { const store = useStore(); From d71a8c651bdaddfda7ffc5e2472e71e75a280ec7 Mon Sep 17 00:00:00 2001 From: shanmukhdutt Date: Tue, 9 Jan 2024 16:20:56 +0530 Subject: [PATCH 2/6] Improved menu item displaying as selected --- src/components/Menu.vue | 67 +++++++++++++++++++++++++++-------------- 1 file changed, 44 insertions(+), 23 deletions(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index f904e9f1..69792af1 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -7,18 +7,17 @@ - - - {{ $t("Create Rule") }} - - - - {{ $t("Rule Pipeline") }} - - - - {{ $t("Settings") }} - + + + + {{ p.title }} + + @@ -54,17 +53,16 @@ IonLabel, IonList, IonMenu, + IonMenuToggle, IonNote, IonSelect, IonSelectOption, IonTitle, IonToolbar, - menuController } from "@ionic/vue"; - import { defineComponent } from "vue"; + import { defineComponent, computed } from "vue"; import { mapGetters } from "vuex"; import { useStore } from "@/store"; - import { hasPermission } from "@/authorization"; import { useRouter } from "vue-router"; import { optionsOutline, settingsOutline, pulseOutline } from 'ionicons/icons'; import emitter from "@/event-bus"; @@ -80,6 +78,7 @@ IonLabel, IonList, IonMenu, + IonMenuToggle, IonNote, IonSelect, IonSelectOption, @@ -95,29 +94,51 @@ }) }, methods: { - async closeMenu() { - await menuController.close(); - }, async setEComStore(event: CustomEvent) { if(this.eComStore.productStoreId !== event.detail.value) { await this.store.dispatch('user/setEcomStore', { 'productStoreId': event.detail.value }) emitter.emit("productStoreChanged") } }, - isSelected(select:any){ - return this.$route.path===select - }, }, setup() { const store = useStore(); const router = useRouter(); + const appPages = [ + { + title: "Create Rule", + url: "/select-product", + childRoutes: ['/select-product'], + iosIcon: optionsOutline, + mdIcon: optionsOutline + }, + { + title: "Rule Pipeline", + url: "/threshold-updates", + childRoutes: ['/threshold-updates'], + iosIcon: pulseOutline, + mdicon: pulseOutline + }, + { + title: "Settings", + url: "/Settings", + iosIcon: settingsOutline, + mdIcon: settingsOutline + } + ]; + const selectedIndex = computed(() => { + const path = router.currentRoute.value.path + return appPages.findIndex((screen) => screen.url === path || screen.childRoutes?.includes(path) || screen.childRoutes?.some((route: any) => path.includes(route))) + }) + return { + appPages, router, pulseOutline, - hasPermission, optionsOutline, settingsOutline, - store + store, + selectedIndex }; }, }); From 65776b00d57f1d03501bb129557a56b26f5392df Mon Sep 17 00:00:00 2001 From: shanmukhdutt Date: Tue, 9 Jan 2024 18:12:26 +0530 Subject: [PATCH 3/6] Improved Indentation along with implemented permission check to pages --- src/components/Menu.vue | 41 ++++++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 69792af1..5eebb3bb 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -7,15 +7,15 @@ - + - - {{ p.title }} + button + router-direction="root" + :router-link="p.url" + class="hydrated" + :class="{ selected: selectedIndex === i}"> + + {{ p.title }} @@ -63,6 +63,7 @@ import { defineComponent, computed } from "vue"; import { mapGetters } from "vuex"; import { useStore } from "@/store"; + import { hasPermission } from "@/authorization"; import { useRouter } from "vue-router"; import { optionsOutline, settingsOutline, pulseOutline } from 'ionicons/icons'; import emitter from "@/event-bus"; @@ -100,6 +101,9 @@ emitter.emit("productStoreChanged") } }, + getValidMenuItems(appPages: any) { + return appPages.filter((appPage: any) => (!appPage.meta || !appPage.meta.permissionId) || hasPermission(appPage.meta.permissionId)); + } }, setup() { const store = useStore(); @@ -108,16 +112,21 @@ { title: "Create Rule", url: "/select-product", - childRoutes: ['/select-product'], iosIcon: optionsOutline, - mdIcon: optionsOutline + mdIcon: optionsOutline, + meta: { + permissionId: "APP_SELECT_PRODUCT_VIEW" + + } }, { title: "Rule Pipeline", url: "/threshold-updates", - childRoutes: ['/threshold-updates'], iosIcon: pulseOutline, - mdicon: pulseOutline + mdIcon: pulseOutline, + meta: { + permissionId: "APP_THRESHOLD_UPDATES_VIEW" + } }, { title: "Settings", @@ -126,13 +135,15 @@ mdIcon: settingsOutline } ]; + const selectedIndex = computed(() => { - const path = router.currentRoute.value.path - return appPages.findIndex((screen) => screen.url === path || screen.childRoutes?.includes(path) || screen.childRoutes?.some((route: any) => path.includes(route))) - }) + const path = router.currentRoute.value.path; + return appPages.findIndex((screen) => screen.url === path); + }); return { appPages, + hasPermission, router, pulseOutline, optionsOutline, From f6bd022eb08ced5d92bb7025e497cd197b82bd74 Mon Sep 17 00:00:00 2001 From: shanmukhdutt Date: Tue, 9 Jan 2024 18:14:21 +0530 Subject: [PATCH 4/6] indentation fixed --- src/components/Menu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 5eebb3bb..d2e9b288 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -138,7 +138,7 @@ const selectedIndex = computed(() => { const path = router.currentRoute.value.path; - return appPages.findIndex((screen) => screen.url === path); + return appPages.findIndex((screen) => screen.url === path); }); return { From 6fe81b1d70048203ee97463aff7cc05d23104374 Mon Sep 17 00:00:00 2001 From: shanmukhdutt Date: Mon, 15 Jan 2024 18:52:13 +0530 Subject: [PATCH 5/6] Fixed: suggested changes --- src/components/Menu.vue | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index d2e9b288..3c659ed5 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -7,15 +7,15 @@ - + - - {{ p.title }} + :class="{ selected: selectedIndex === index}"> + + {{ page.title }} @@ -138,7 +138,7 @@ const selectedIndex = computed(() => { const path = router.currentRoute.value.path; - return appPages.findIndex((screen) => screen.url === path); + return appPages.findIndex((screen) => screen.url === path); }); return { @@ -148,8 +148,8 @@ pulseOutline, optionsOutline, settingsOutline, + selectedIndex, store, - selectedIndex }; }, }); From 8a8eccd6086d3e697f3072e8fcfce7c14bda4f2a Mon Sep 17 00:00:00 2001 From: shanmukhdutt Date: Tue, 30 Jan 2024 09:12:25 +0530 Subject: [PATCH 6/6] Fixed suggested change --- src/components/Menu.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Menu.vue b/src/components/Menu.vue index 3c659ed5..7390808d 100644 --- a/src/components/Menu.vue +++ b/src/components/Menu.vue @@ -130,7 +130,7 @@ }, { title: "Settings", - url: "/Settings", + url: "/settings", iosIcon: settingsOutline, mdIcon: settingsOutline }