From f63da702571b24bf3bde4afdad49f0f5871abfb9 Mon Sep 17 00:00:00 2001
From: rijkvanzanten <rijkvanzanten@me.com>
Date: Mon, 14 Sep 2020 18:05:45 -0400
Subject: [PATCH] Fix module / collections list

---
 app/src/components/v-detail/v-detail.vue      | 23 +++++++----
 .../collections/components/navigation.vue     |  6 +--
 .../collections/composables/use-navigation.ts |  5 ++-
 app/src/modules/settings/index.ts             |  1 +
 app/src/modules/types.ts                      |  1 +
 app/src/types/users.ts                        |  4 +-
 .../layout-drawer-detail.vue                  |  2 +-
 .../components/module-bar/module-bar.vue      | 41 +++++++++++--------
 8 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/app/src/components/v-detail/v-detail.vue b/app/src/components/v-detail/v-detail.vue
index 5e96ed25d7..3ced9238e8 100644
--- a/app/src/components/v-detail/v-detail.vue
+++ b/app/src/components/v-detail/v-detail.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="v-detail" :class="{ _active }">
+	<div class="v-detail" :class="{ disabled }">
 		<v-divider @click.native="_active = !_active">
+			<v-icon v-if="!disabled" :name="_active ? 'unfold_less' : 'unfold_more'" small />
 			<slot name="title">{{ label }}</slot>
-			<v-icon :name="_active ? 'unfold_less' : 'unfold_more'" small />
 		</v-divider>
 		<transition-expand>
 			<div v-if="_active">
@@ -31,10 +31,18 @@ export default defineComponent({
 			type: String,
 			default: i18n.t('toggle'),
 		},
+		startOpen: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		}
 	},
 
 	setup(props, { emit }) {
-		const localActive = ref(false);
+		const localActive = ref(props.startOpen);
 		const _active = computed({
 			get() {
 				if (props.active !== undefined) {
@@ -57,13 +65,14 @@ export default defineComponent({
 .v-divider {
 	margin-bottom: 12px;
 	cursor: pointer;
+}
 
-	&:hover {
-		--v-divider-label-color: var(--foreground-normal);
-	}
+.v-detail:not(.disabled) .v-divider:hover {
+	--v-divider-label-color: var(--foreground-normal);
+	cursor: pointer;
 }
 
 .v-icon {
-	margin-left: 4px;
+	margin-right: 4px;
 }
 </style>
diff --git a/app/src/modules/collections/components/navigation.vue b/app/src/modules/collections/components/navigation.vue
index 341b05d7dd..1429058e4f 100644
--- a/app/src/modules/collections/components/navigation.vue
+++ b/app/src/modules/collections/components/navigation.vue
@@ -1,14 +1,12 @@
 <template>
 	<v-list nav>
 		<template v-if="customNavItems && customNavItems.length > 0">
-			<div :key="group.name" v-for="(group, index) in customNavItems">
-				<div class="group-name">{{ group.name }}</div>
+			<v-detail :active="group.accordion === 'always_open' || undefined" :disabled="group.accordion === 'always_open'" :start-open="group.accordion === 'start_open'" :label="group.name" :key="group.name" v-for="(group, index) in customNavItems">
 				<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>
 					<v-list-item-content>{{ navItem.name }}</v-list-item-content>
 				</v-list-item>
-				<v-divider v-if="index !== customNavItems.length - 1" />
-			</div>
+			</v-detail>
 		</template>
 
 		<v-list-item v-else :exact="exact" v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
diff --git a/app/src/modules/collections/composables/use-navigation.ts b/app/src/modules/collections/composables/use-navigation.ts
index 9ed444b24b..9437f6b688 100644
--- a/app/src/modules/collections/composables/use-navigation.ts
+++ b/app/src/modules/collections/composables/use-navigation.ts
@@ -23,11 +23,12 @@ export default function useNavigation() {
 
 	const customNavItems = computed<NavItemGroup[] | null>(() => {
 		if (!userStore.state.currentUser) return null;
-		if (!userStore.state.currentUser.role.collection_listing) return null;
+		if (!userStore.state.currentUser.role.collection_list) return null;
 
-		return userStore.state.currentUser?.role.collection_listing.map((groupRaw) => {
+		return userStore.state.currentUser?.role.collection_list.map((groupRaw) => {
 			const group: NavItemGroup = {
 				name: groupRaw.group_name,
+				accordion: groupRaw.accordion,
 				items: groupRaw.collections
 					.map(({ collection }) => {
 						const collectionInfo = collectionsStore.getCollection(collection);
diff --git a/app/src/modules/settings/index.ts b/app/src/modules/settings/index.ts
index 12c6774a16..b20638295e 100644
--- a/app/src/modules/settings/index.ts
+++ b/app/src/modules/settings/index.ts
@@ -148,4 +148,5 @@ export default defineModule(({ i18n }) => ({
 		return user.role.admin === true;
 	},
 	order: Infinity,
+	persistent: true,
 }));
diff --git a/app/src/modules/types.ts b/app/src/modules/types.ts
index 1e9b895ead..401925b142 100644
--- a/app/src/modules/types.ts
+++ b/app/src/modules/types.ts
@@ -13,6 +13,7 @@ export type ModuleConfig = {
 	color?: string;
 	preRegisterCheck?: (user: User, permissions: Permission[]) => boolean;
 	order?: number;
+	persistent?: boolean;
 };
 
 export type ModuleContext = { i18n: VueI18n };
diff --git a/app/src/types/users.ts b/app/src/types/users.ts
index 57f133a054..0e8d581fe4 100644
--- a/app/src/types/users.ts
+++ b/app/src/types/users.ts
@@ -2,7 +2,7 @@ export type Role = {
 	id: string;
 	name: string;
 	description: string;
-	collection_listing:
+	collection_list:
 		| null
 		| {
 				group_name: string;
@@ -10,7 +10,7 @@ export type Role = {
 					collection: string;
 				}[];
 		  }[];
-	module_listing:
+	module_list:
 		| null
 		| {
 				link: string;
diff --git a/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue b/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
index 6b1358740e..4d42a7af3a 100644
--- a/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
+++ b/app/src/views/private/components/layout-drawer-detail/layout-drawer-detail.vue
@@ -42,7 +42,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .layout-options {
 	.layout-option {
 		margin-top: 24px;
diff --git a/app/src/views/private/components/module-bar/module-bar.vue b/app/src/views/private/components/module-bar/module-bar.vue
index 9b37ca7621..f9bdfde94e 100644
--- a/app/src/views/private/components/module-bar/module-bar.vue
+++ b/app/src/views/private/components/module-bar/module-bar.vue
@@ -45,25 +45,9 @@ export default defineComponent({
 		const modules = getModules();
 
 		const _modules = computed(() => {
-			const customModuleListing = userStore.state.currentUser?.role.module_listing;
+			const customModuleListing = userStore.state.currentUser?.role.module_list;
 
-			if (customModuleListing && Array.isArray(customModuleListing) && customModuleListing.length > 0) {
-				return customModuleListing.map((custom) => {
-					if (custom.link.startsWith('http') || custom.link.startsWith('//')) {
-						return {
-							...custom,
-							href: custom.link,
-						};
-					} else {
-						return {
-							...custom,
-							to: custom.link,
-						};
-					}
-				});
-			}
-
-			return orderBy(
+			const registeredModules = orderBy(
 				modules.value
 					.map((module) => ({
 						...module,
@@ -81,6 +65,27 @@ export default defineComponent({
 				['order'],
 				['asc']
 			);
+
+			if (customModuleListing && Array.isArray(customModuleListing) && customModuleListing.length > 0) {
+				return [
+					...customModuleListing.map((custom) => {
+						if (custom.link?.startsWith('http') || custom.link?.startsWith('//')) {
+							return {
+								...custom,
+								href: custom.link,
+							};
+						} else {
+							return {
+								...custom,
+								to: custom.link,
+							};
+						}
+					}),
+					...registeredModules.filter((module) => module.persistent === true)
+				]
+			}
+
+			return registeredModules;
 		});
 
 		return { _modules };