add ability to persist the state of the open/close menus

dcasia · Oct 26, 2019 · 09452bc · 09452bc
1 parent 7fd333d
commit 09452bc
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,11 @@ return [
      */
     'translate_title' => false,
 
+    /**
+     * If true the state of the collapsible menu will be persisted upon refresh
+     */
+    'remember_menu_state' => false,
+
     /**
      * Main navigation, each item on this array creates a new entry on the sidebar with an icon
      */

diff --git a/config/collapsible-resource-manager.php b/config/collapsible-resource-manager.php
@@ -11,6 +11,11 @@
      */
     'translate_title' => false,
 
+    /**
+     * If true the state of the collapsible menu will be persisted upon refresh
+     */
+    'remember_menu_state' => false,
+
     /**
      * Main navigation, each item on this array creates a new entry on the sidebar with an icon
      */

diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/components/CollapsibleResourceManager.vue b/resources/js/components/CollapsibleResourceManager.vue
@@ -15,7 +15,11 @@
 
         </h3>
 
-        <ResourceList class="resources-only" v-if="data.resources" :resources="data.resources" :recursive="data.recursive"/>
+        <ResourceList class="resources-only"
+                      v-if="data.resources"
+                      :resources="data.resources"
+                      :recursive="data.recursive"
+                      :remember-menu-state="rememberMenuState"/>
 
         <template v-for="(group, index) of data.groups" v-if="group.resources.length">
 
@@ -45,7 +49,10 @@
 
             <CollapseTransition :duration="150">
 
-                <ResourceList v-if="activeMenu[index]" :resources="group.resources" :recursive="data.recursive"/>
+                <ResourceList v-if="activeMenu[index]"
+                              :resources="group.resources"
+                              :recursive="data.recursive"
+                              :remember-menu-state="rememberMenuState"/>
 
             </CollapseTransition>
 
@@ -64,14 +71,45 @@
         name: 'CollapsibleResourceManager',
         components: { CollapseTransition, ResourceList },
         props: {
-            data: { type: Object, required: true }
+            data: { type: Object, required: true },
+            rememberMenuState: { type: Boolean, default: false }
         },
         data() {
             return {
                 activeMenu: this.data.groups.map(group => !!group.expanded)
             }
         },
+        created() {
+
+            if (this.rememberMenuState) {
+
+                const state = localStorage.getItem(this.cacheKey)
+
+                if (state) {
+
+                    const activeMenu = JSON.parse(state)
+
+                    if (Array.isArray(activeMenu)) {
+
+                        this.activeMenu = activeMenu
+
+                    }
+
+                }
+
+                this.$watch(() => this.activeMenu, (state) => {
+
+                    localStorage.setItem(this.cacheKey, JSON.stringify(state))
+
+                })
+
+            }
+
+        },
         computed: {
+            cacheKey() {
+                return `menu-state.${this.data.key}`
+            },
             isEmpty() {
                 return this.data.resources.length + this.data.groups.filter(group => group.resources.length).length === 0
             }
@@ -96,6 +134,10 @@
         padding-top: 0;
     }
 
+    .recursive h4:first-child {
+        margin-top: 0;
+    }
+
     .recursive h4 {
         margin-left: 0 !important;
     }

diff --git a/resources/js/components/ResourceList.vue b/resources/js/components/ResourceList.vue
@@ -4,7 +4,10 @@
 
         <li class="leading-tight pt-4 text-sm" v-for="resource of resources" :class="{ 'ml-8': !recursive }">
 
-            <collapsible-resource-manager v-if="resource.recursive" :data="resource" :recursive="true"/>
+            <collapsible-resource-manager v-if="resource.recursive"
+                                          :data="resource"
+                                          :recursive="true"
+                                          :remember-menu-state="rememberMenuState"/>
 
             <template v-else>
 
@@ -52,7 +55,8 @@
         name: 'ResourceList',
         props: {
             resources: { type: Array, required: true },
-            recursive: { type: Boolean, default: false }
+            recursive: { type: Boolean, default: false },
+            rememberMenuState: { type: Boolean, required: true },
         }
     }
 

diff --git a/resources/views/navigation.blade.php b/resources/views/navigation.blade.php
@@ -1,5 +1,7 @@
 @foreach($navigation as $group)
 
-    <collapsible-resource-manager :data='@json($group)'></collapsible-resource-manager>
+    <collapsible-resource-manager :data='@json($group)'
+                                  :remember-menu-state="@json($rememberMenuState)">
+    </collapsible-resource-manager>
 
 @endforeach
diff --git a/src/CollapsibleResourceManager.php b/src/CollapsibleResourceManager.php
@@ -47,20 +47,24 @@ public function boot()
     public function renderNavigation()
     {
         return view('collapsible-resource-manager::navigation', [
+            'rememberMenuState' => config('collapsible-resource-manager.remember_menu_state'),
             'navigation' => $this->serializeGroups(config('collapsible-resource-manager.navigation')),
         ]);
     }
 
     /**
      * @param array $navigation
      *
+     * @param null $parentKey
+     *
      * @return array
      */
-    private function serializeGroups(array $navigation): array
+    private function serializeGroups(array $navigation, $parentKey = null): array
     {
 
-        foreach ($navigation as &$item) {
+        foreach ($navigation as $key => &$item) {
 
+            $item[ 'key' ] = "_{$parentKey}_{$key}_";
             $item[ 'title' ] = isset($item[ 'title' ]) ? $this->translateKey($item[ 'title' ]) : null;
             $item[ 'resources' ] = $this->resolveResources($item[ 'resources' ] ?? []);
             $item[ 'groups' ] = $this->parseGroups($item[ 'groups' ] ?? []);
@@ -90,7 +94,7 @@ private function resolveResources(array $resources): Collection
 
             if (is_array($resource)) {
 
-                return array_merge($this->serializeGroups([ $resource ])[ 0 ], [ 'recursive' => true ]);
+                return array_merge($this->serializeGroups([ $resource ], $key)[ 0 ], [ 'recursive' => true ]);
 
             }
 
@@ -114,7 +118,7 @@ private function resolveResources(array $resources): Collection
 
             }
 
-        })->filter();
+        })->filter()->values();
     }
 
     private function parseGroups(array $groups): Collection
@@ -129,4 +133,5 @@ private function parseGroups(array $groups): Collection
         });
 
     }
+
 }