Fetch settings tabs and keep them in local storage

src/router/index.js

@@ -11,14 +11,9 @@ const settingsDisabled = disabledFeatures.includes('settings')
 const settings = {
   path: '/settings',
   component: Layout,
-  children: [
-    {
-      path: 'index',
-      component: () => import('@/views/settings/index'),
-      name: 'Settings',
-      meta: { title: 'settings', icon: 'settings', noCache: true }
-    }
-  ]
+  name: 'Settings',
+  hasSubmenu: true,
+  meta: { title: 'settings', icon: 'settings', noCache: true }
 }
 
 const statusesDisabled = disabledFeatures.includes('statuses')
@@ -145,7 +140,8 @@ export const constantRouterMap = [
   {
     path: '',
     component: Layout,
-    redirect: '/users/index'
+    redirect: '/users/index',
+    hidden: true
   }
 ]
 

src/store/getters.js

@@ -17,6 +17,7 @@ const getters = {
   errorLogs: state => state.errorLog.logs,
   users: state => state.users.fetchedUsers,
   authHost: state => state.user.authHost,
-  settings: state => state.settings
+  settings: state => state.settings,
+  tabs: state => state.settings.tabs
 }
 export default getters

src/views/layout/components/Sidebar/index.vue

@@ -7,6 +7,7 @@
       :text-color="variables.menuText"
       :active-text-color="variables.menuActiveText"
       mode="vertical"
+      @open="handleOpen"
     >
       <sidebar-item v-for="route in permission_routers" :key="route.path" :item="route" :base-path="route.path"/>
     </el-menu>
@@ -17,13 +18,15 @@
 import { mapGetters } from 'vuex'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
+// import router from '@/router'
 
 export default {
   components: { SidebarItem },
   computed: {
     ...mapGetters([
       'permission_routers',
-      'sidebar'
+      'sidebar',
+      'tabs'
     ]),
     variables() {
       return variables
@@ -34,6 +37,26 @@ export default {
   },
   mounted() {
     this.$store.dispatch('FetchOpenReportsCount')
+  },
+  methods: {
+    async handleOpen($event) {
+      if ($event === '/settings') {
+        let items = localStorage.getItem('settingsTabs')
+        if (!items) {
+          await this.$store.dispatch('FetchSettings')
+          items = this.tabs
+          localStorage.setItem('settingsTabs', JSON.stringify(items))
+        }
+        JSON.parse(items).forEach(item => {
+          // router.addRoute('Settings', [{
+          //   path: item.value,
+          //   component: {
+          //     template: '<span>Ioio</span>'
+          //   }
+          // }])
+        })
+      }
+    }
   }
 }
 </script>