From 0feda7a39b2123c0d67de3d5cbeee277f0fc555c Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Tue, 24 Oct 2023 16:49:15 +0700
Subject: [PATCH] fix sidebar not expand when load

---
 src/components/Navigation/Aside/Aside.vue     |  23 +-
 .../Navigation/Aside/AsideMenuMultiple.vue    |   2 +-
 .../Pages/Gangguan/Daftar/Data_1.vue          | 203 ++++++++++++++++++
 src/components/Pages/Gangguan/Daftar/index.ts |   1 +
 src/router/index.ts                           |   3 +-
 src/stores/menu.ts                            |  27 ++-
 6 files changed, 244 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Pages/Gangguan/Daftar/Data_1.vue
 create mode 100644 src/components/Pages/Gangguan/Daftar/index.ts

diff --git a/src/components/Navigation/Aside/Aside.vue b/src/components/Navigation/Aside/Aside.vue
index 9b60d6d..c2dff9d 100644
--- a/src/components/Navigation/Aside/Aside.vue
+++ b/src/components/Navigation/Aside/Aside.vue
@@ -24,18 +24,19 @@ watch(route, (to, _) => {
     closeSideBar()
 })
 
-onMounted(() => {
-    menu.menuSelected = router.currentRoute.value.fullPath
-    if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
-        const result = splitRoutePath(menu.menuSelected)
+// onMounted(() => {
+//     menu.menuSelected = router.currentRoute.value.fullPath
 
-        for (const route of result) {
-            if (route !== '/home') {
-                menu.toggleSidebarMenu(route, true)
-            }
-        }
-    }
-})
+//     if (menu.menuSelected !== '/' && menu.menuSelected !== '/home' && menu.menuSelected.includes('/home')) {
+//         const result = splitRoutePath(menu.menuSelected)
+
+//         for (const route of result) {
+//             if (route !== '/home') {
+//                 menu.toggleSidebarMenu(route, true)
+//             }
+//         }
+//     }
+// })
 
 const isMenu = (name: string) => {
     return menu.menuSelected === name
diff --git a/src/components/Navigation/Aside/AsideMenuMultiple.vue b/src/components/Navigation/Aside/AsideMenuMultiple.vue
index b2ad9fa..f46a8b8 100644
--- a/src/components/Navigation/Aside/AsideMenuMultiple.vue
+++ b/src/components/Navigation/Aside/AsideMenuMultiple.vue
@@ -33,7 +33,7 @@ const isMenuSelected = computed(() => {
 
 <template>
     <div :class="[isChildren ? 'ml-2 mt-1 bg-primary-100 rounded-xl' : '']">
-        <Disclosure v-bind:default-open="isMenuSelected ? true : false" as="dev">
+        <Disclosure :defaultOpen="item.expanded" as="dev">
             <!-- Nested item with children -->
             <DisclosureButton @click="menu.toggleSidebarMenu(item.path, !item.expanded)"
                 :class="[(isMenuSelected || item.expanded || isChildren || item.expanded) ? 'bg-primary-100 font-bold' : 'font-semibold text-aside hover:bg-primary-100 hover:text-primary-500', isMenuSelected ? 'text-primary-500' : 'text-gray-600', isChildren ? 'pl-1 pr-2' : 'px-2', 'group w-full flex items-center py-2 text-left text-xs rounded-lg focus:outline-none focus:ring-0']">
diff --git a/src/components/Pages/Gangguan/Daftar/Data_1.vue b/src/components/Pages/Gangguan/Daftar/Data_1.vue
new file mode 100644
index 0000000..905c25a
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/Data_1.vue
@@ -0,0 +1,203 @@
+<template>
+    <div>
+        <DxDataGrid :data-source="employees" key-expr="ID" :show-column-lines="showColumnLines"
+            :show-row-lines="showRowLines" :show-borders="showBorders" :row-alternation-enabled="rowAlternationEnabled"
+            :hover-state-enabled="true" @selection-changed="onSelectionChanged">
+            <DxSelection mode="single" />
+            <DxColumn :width="80" data-field="Prefix" caption="Title" />
+            <DxColumn data-field="FirstName" />
+            <DxColumn data-field="LastName" />
+            <DxColumn data-field="City" />
+            <DxColumn data-field="State" />
+            <DxColumn :width="130" data-field="Position" />
+            <DxColumn :width="100" data-field="BirthDate" data-type="date" />
+            <DxColumn :width="100" data-field="HireDate" data-type="date" />
+        </DxDataGrid>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { DxCheckBox, DxDataGrid } from 'devextreme-vue';
+import { DxColumn, DxSelection } from 'devextreme-vue/data-grid';
+import { ref } from 'vue';
+
+const showColumnLines = ref(false);
+const showRowLines = ref(false);
+const showBorders = ref(false);
+const rowAlternationEnabled = ref(true);
+interface Employee {
+    ID: number;
+    FirstName: string;
+    LastName: string;
+    Prefix: string;
+    Position: string;
+    Picture: string;
+    BirthDate: string;
+    HireDate: string;
+    Notes: string;
+    Address: string;
+    State: string;
+    City: string;
+}
+
+const employees: Employee[] = [{
+    ID: 1,
+    FirstName: 'John',
+    LastName: 'Heart',
+    Prefix: 'Mr.',
+    Position: 'CEO',
+    Picture: 'images/employees/01.png',
+    BirthDate: '1964/03/16',
+    HireDate: '1995/01/15',
+    Notes: 'John has been in the Audio/Video industry since 1990. He has led DevAv as its CEO since 2003.\r\n\r\nWhen not working hard as the CEO, John loves to golf and bowl. He once bowled a perfect game of 300.',
+    Address: '351 S Hill St.',
+    State: 'California',
+    City: 'Los Angeles',
+}, {
+    ID: 2,
+    FirstName: 'Olivia',
+    LastName: 'Peyton',
+    Prefix: 'Mrs.',
+    Position: 'Sales Assistant',
+    Picture: 'images/employees/09.png',
+    BirthDate: '1981/06/03',
+    HireDate: '2012/05/14',
+    Notes: 'Olivia loves to sell. She has been selling DevAV products since 2012. \r\n\r\nOlivia was homecoming queen in high school. She is expecting her first child in 6 months. Good Luck Olivia.',
+    Address: '807 W Paseo Del Mar',
+    State: 'California',
+    City: 'Los Angeles',
+}, {
+    ID: 3,
+    FirstName: 'Robert',
+    LastName: 'Reagan',
+    Prefix: 'Mr.',
+    Position: 'CMO',
+    Picture: 'images/employees/03.png',
+    BirthDate: '1974/09/07',
+    HireDate: '2002/11/08',
+    Notes: 'Robert was recently voted the CMO of the year by CMO Magazine. He is a proud member of the DevAV Management Team.\r\n\r\nRobert is a championship BBQ chef, so when you get the chance ask him for his secret recipe.',
+    Address: '4 Westmoreland Pl.',
+    State: 'Arkansas',
+    City: 'Bentonville',
+}, {
+    ID: 4,
+    FirstName: 'Greta',
+    LastName: 'Sims',
+    Prefix: 'Ms.',
+    Position: 'HR Manager',
+    Picture: 'images/employees/04.png',
+    BirthDate: '1977/11/22',
+    HireDate: '1998/04/23',
+    Notes: "Greta has been DevAV's HR Manager since 2003. She joined DevAV from Sonee Corp.\r\n\r\nGreta is currently training for the NYC marathon. Her best marathon time is 4 hours. Go Greta.",
+    Address: '1700 S Grandview Dr.',
+    State: 'Georgia',
+    City: 'Atlanta',
+}, {
+    ID: 5,
+    FirstName: 'Brett',
+    LastName: 'Wade',
+    Prefix: 'Mr.',
+    Position: 'IT Manager',
+    Picture: 'images/employees/05.png',
+    BirthDate: '1968/12/01',
+    HireDate: '2009/03/06',
+    Notes: 'Brett came to DevAv from Microsoft and has led our IT department since 2012.\r\n\r\nWhen he is not working hard for DevAV, he coaches Little League (he was a high school pitcher).',
+    Address: '1120 Old Mill Rd.',
+    State: 'Idaho',
+    City: 'Boise',
+}, {
+    ID: 6,
+    FirstName: 'Sandra',
+    LastName: 'Johnson',
+    Prefix: 'Mrs.',
+    Position: 'Controller',
+    Picture: 'images/employees/06.png',
+    BirthDate: '1974/11/15',
+    HireDate: '2005/05/11',
+    Notes: "Sandra is a CPA and has been our controller since 2008. She loves to interact with staff so if you've not met her, be certain to say hi.\r\n\r\nSandra has 2 daughters both of whom are accomplished gymnasts.",
+    Address: '4600 N Virginia Rd.',
+    State: 'Utah',
+    City: 'Beaver',
+}, {
+    ID: 7,
+    FirstName: 'Kevin',
+    LastName: 'Carter',
+    Prefix: 'Mr.',
+    Position: 'Shipping Manager',
+    Picture: 'images/employees/07.png',
+    BirthDate: '1978/01/09',
+    HireDate: '2009/08/11',
+    Notes: 'Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months.\r\n\r\nWhen not in the office, he is usually on the basketball court playing pick-up games.',
+    Address: '424 N Main St.',
+    State: 'California',
+    City: 'San Diego',
+}, {
+    ID: 8,
+    FirstName: 'Cynthia',
+    LastName: 'Stanwick',
+    Prefix: 'Ms.',
+    Position: 'HR Assistant',
+    Picture: 'images/employees/08.png',
+    BirthDate: '1985/06/05',
+    HireDate: '2008/03/24',
+    Notes: 'Cindy joined us in 2008 and has been in the HR department for 2 years. \r\n\r\nShe was recently awarded employee of the month. Way to go Cindy!',
+    Address: '2211 Bonita Dr.',
+    State: 'Arkansas',
+    City: 'Little Rock',
+}, {
+    ID: 9,
+    FirstName: 'Kent',
+    LastName: 'Samuelson',
+    Prefix: 'Dr.',
+    Position: 'Ombudsman',
+    Picture: 'images/employees/02.png',
+    BirthDate: '1972/09/11',
+    HireDate: '2009/04/22',
+    Notes: 'As our ombudsman, Kent is on the front-lines solving customer problems and helping our partners address issues out in the field.    He is a classically trained musician and is a member of the Chamber Orchestra.',
+    Address: '12100 Mora Dr',
+    State: 'Missouri',
+    City: 'St. Louis',
+}, {
+    ID: 10,
+    FirstName: 'Taylor',
+    LastName: 'Riley',
+    Prefix: 'Mr.',
+    Position: 'Network Admin',
+    Picture: '',
+    BirthDate: '1982/08/14',
+    HireDate: '2012/04/14',
+    Notes: "If you are like the rest of us at DevAV, then you've probably reached out for help from Taylor. He does a great job as a member of our IT department.",
+    Address: '7776 Torreyson Dr',
+    State: 'California',
+    City: 'San Jose',
+}];
+
+const onSelectionChanged = ({ selectedRowsData }: any) => {
+    const data = selectedRowsData[0];
+    console.log(data);
+};
+
+</script>
+<style scoped>
+.options {
+    padding: 20px;
+    background-color: rgba(191, 191, 191, 0.15);
+    margin-top: 20px;
+}
+
+.caption {
+    font-size: 18px;
+    font-weight: 500;
+}
+
+.option {
+    width: 24%;
+    display: inline-block;
+    margin-top: 10px;
+}
+
+.options-container {
+    display: flex;
+    align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Pages/Gangguan/Daftar/index.ts b/src/components/Pages/Gangguan/Daftar/index.ts
new file mode 100644
index 0000000..c01eea3
--- /dev/null
+++ b/src/components/Pages/Gangguan/Daftar/index.ts
@@ -0,0 +1 @@
+export { default as Data1 } from './Data_1.vue'
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 495b57f..71a54bd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,7 @@ import NotFoundView from '@/views/NotFoundView.vue'
 import EmptyPage from '@/components/Pages/HomeEmpty.vue'
 import TestPage from '@/components/Pages/TestPage.vue'
 import qs from 'qs'
+import { Data1 } from '@/components/Pages/Gangguan/Daftar'
 
 export const routes: RouteRecordRaw[] = [
   {
@@ -30,7 +31,7 @@ export const routes: RouteRecordRaw[] = [
               {
                 path: '1',
                 name: 'Daftar Keluhan Dialihkan Ke Posko Lain',
-                component: TestPage,
+                component: Data1,
               },
               {
                 path: '2',
diff --git a/src/stores/menu.ts b/src/stores/menu.ts
index 1cff66a..75a4617 100644
--- a/src/stores/menu.ts
+++ b/src/stores/menu.ts
@@ -1,18 +1,22 @@
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import { defineStore } from 'pinia'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { convertRouteToMenu } from '@/utils/route'
 import { routes } from '@/router'
 import type { MenuItemModel } from '@/utils/interfaces'
+import { splitRoutePath } from '@/utils/texts'
 
 export const useMenuStore = defineStore('menu', () => {
     const route = useRoute()
     const navigation = ref<MenuItemModel[]>([])
     const sidebarOpen = ref(false)
     const sidebarShowed = ref(true)
+    const router = useRouter()
     const menuSelected = ref(route.fullPath)
     const toggleSidebar = () => (sidebarOpen.value = !sidebarOpen.value)
     const toggleSidebarMenu = (path: string, newExpanded: boolean): void => {
+        console.log('expanded', path);
+
         const toggleItemExpanded = (items: MenuItemModel[]): void => {
             for (const item of items) {
                 if (item.path === path) {
@@ -37,6 +41,25 @@ export const useMenuStore = defineStore('menu', () => {
     onMounted(() => {
         const menuData = convertRouteToMenu(routes.at(0)?.children || [])
         navigation.value = menuData
+        menuSelected.value = router.currentRoute.value.fullPath
+
+        if (menuSelected.value !== '/' && menuSelected.value !== '/home' && menuSelected.value.includes('/home')) {
+            const result = splitRoutePath(menuSelected.value)
+
+            for (const route of result) {
+                if (route !== '/home') {
+                    toggleSidebarMenu(route, true)
+                }
+            }
+        }
+    })
+
+    watch(router, () => {
+        if (router.currentRoute.value.fullPath === '/' || router.currentRoute.value.fullPath === '/home') {
+            for (const item of navigation.value) {
+                item.expanded = false
+            }
+        }
     })
 
     return {