From 32db7ae505c66807ff3100c4529576cd3f24b314 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Wed, 11 Nov 2020 11:41:54 -0500
Subject: [PATCH] Persist collections nav group state

Fixes #929
---
 app/src/components/v-detail/v-detail.vue      |  5 +++--
 .../collections/components/navigation.vue     | 21 +++++++++++++++----
 .../collections/composables/use-navigation.ts |  8 +++++--
 3 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/app/src/components/v-detail/v-detail.vue b/app/src/components/v-detail/v-detail.vue
index 3ced9238e8..120b028297 100644
--- a/app/src/components/v-detail/v-detail.vue
+++ b/app/src/components/v-detail/v-detail.vue
@@ -14,7 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, computed, ref } from '@vue/composition-api';
-import { i18n } from '@/lang';
+import { i18n } from '../../lang';
 
 export default defineComponent({
 	model: {
@@ -38,7 +38,7 @@ export default defineComponent({
 		disabled: {
 			type: Boolean,
 			default: false,
-		}
+		},
 	},
 
 	setup(props, { emit }) {
@@ -69,6 +69,7 @@ export default defineComponent({
 
 .v-detail:not(.disabled) .v-divider:hover {
 	--v-divider-label-color: var(--foreground-normal);
+
 	cursor: pointer;
 }
 
diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index 6226ffc40b..e5d69a0770 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -16,11 +16,12 @@
 				</template>
 				<template v-else>
 					<v-detail
-						:active="group.accordion === 'always_open' || undefined"
+						:active="group.accordion === 'always_open' || isActive(group.name)"
 						:disabled="group.accordion === 'always_open'"
 						:start-open="group.accordion === 'start_open'"
 						:label="group.name || null"
 						:key="group.name"
+						@toggle="toggleActive(group.name)"
 					>
 						<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
 							<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
@@ -56,7 +57,7 @@
 <script lang="ts">
 import { defineComponent, computed } from '@vue/composition-api';
 import useNavigation from '../composables/use-navigation';
-import { usePresetsStore, useUserStore } from '@/stores/';
+import { usePresetsStore, useUserStore } from '../../../stores/';
 import { orderBy } from 'lodash';
 import NavigationBookmark from './navigation-bookmark.vue';
 
@@ -70,7 +71,7 @@ export default defineComponent({
 	},
 	setup() {
 		const presetsStore = usePresetsStore();
-		const { customNavItems, navItems } = useNavigation();
+		const { customNavItems, navItems, activeGroups } = useNavigation();
 		const userStore = useUserStore();
 		const isAdmin = computed(() => userStore.state.currentUser?.role.admin_access === true);
 
@@ -96,7 +97,19 @@ export default defineComponent({
 			);
 		});
 
-		return { navItems, bookmarks, customNavItems, isAdmin };
+		return { navItems, bookmarks, customNavItems, isAdmin, activeGroups, isActive, toggleActive };
+
+		function isActive(name: string) {
+			return activeGroups.value.includes(name);
+		}
+
+		function toggleActive(name: string) {
+			if (activeGroups.value.includes(name)) {
+				activeGroups.value = activeGroups.value.filter((current: string) => current !== name);
+			} else {
+				activeGroups.value.push(name);
+			}
+		}
 	},
 });
 </script>
diff --git a/app/src/modules/collections/composables/use-navigation.ts b/app/src/modules/collections/composables/use-navigation.ts
index d0f14f048f..3724464c6b 100644
--- a/app/src/modules/collections/composables/use-navigation.ts
+++ b/app/src/modules/collections/composables/use-navigation.ts
@@ -1,4 +1,4 @@
-import { computed } from '@vue/composition-api';
+import { computed, Ref, ref } from '@vue/composition-api';
 
 import { useCollectionsStore, useUserStore } from '@/stores/';
 import { Collection } from '@/types';
@@ -18,7 +18,11 @@ export type NavItemGroup = {
 	items: NavItem[];
 };
 
+let activeGroups: Ref<string[]>;
+
 export default function useNavigation() {
+	if (!activeGroups) activeGroups = ref([]);
+
 	const collectionsStore = useCollectionsStore();
 
 	const userStore = useUserStore();
@@ -72,5 +76,5 @@ export default function useNavigation() {
 			});
 	});
 
-	return { customNavItems, navItems };
+	return { customNavItems, navItems, activeGroups };
 }