From 325fe78791101bb79e9feacba0c075637d2b22c7 Mon Sep 17 00:00:00 2001
From: Nitwel <nitwel@arcor.de>
Date: Sat, 3 Oct 2020 00:56:40 +0200
Subject: [PATCH] Remove v-model on groups and make docs nav linear

---
 app/src/components/v-list/v-list-group.vue    | 17 +------
 app/src/components/v-list/v-list.vue          |  2 +-
 .../docs/components/navigation-item.vue       | 36 +-------------
 .../modules/docs/components/navigation.vue    | 49 ++++++++++++-------
 4 files changed, 35 insertions(+), 69 deletions(-)

diff --git a/app/src/components/v-list/v-list-group.vue b/app/src/components/v-list/v-list-group.vue
index 52fe1c17de..7569b4caa7 100644
--- a/app/src/components/v-list/v-list-group.vue
+++ b/app/src/components/v-list/v-list-group.vue
@@ -19,10 +19,6 @@ import { defineComponent, nextTick, toRefs, watch, PropType, ref } from '@vue/co
 import { useGroupableParent, useGroupable } from '@/composables/groupable';
 
 export default defineComponent({
-	model: {
-		prop: 'activeItems',
-		event: 'input'
-	},
 	props: {
 		multiple: {
 			type: Boolean,
@@ -32,10 +28,6 @@ export default defineComponent({
 			type: String,
 			default: null,
 		},
-		activeItems: {
-			type: Array as PropType<(number | string)[]>,
-			default: null
-		},
 		active: {
 			type: Boolean,
 			default: false,
@@ -62,7 +54,7 @@ export default defineComponent({
 		}
 	},
 	setup(props, { listeners, emit }) {
-		const {activeItems, multiple} = toRefs(props)
+		const {multiple} = toRefs(props)
 
 		const { active: groupActive, toggle, activate, deactivate } = useGroupable({
 			group: props.scope,
@@ -71,12 +63,7 @@ export default defineComponent({
 
 		if (props.disableGroupableParent !== true) {
 			useGroupableParent(
-				{
-					selection: activeItems,
-					onSelectionChange: (newSelection) => {
-						emit('input', newSelection)
-					}
-				},
+				{},
 				{
 					multiple
 				}
diff --git a/app/src/components/v-list/v-list.vue b/app/src/components/v-list/v-list.vue
index 5d05a33ee6..8aec96c005 100644
--- a/app/src/components/v-list/v-list.vue
+++ b/app/src/components/v-list/v-list.vue
@@ -54,7 +54,7 @@ export default defineComponent({
 				}
 			},
 			{
-				mandatory: ref(false),
+				mandatory: ref(true),
 				multiple
 			}
 		);
diff --git a/app/src/modules/docs/components/navigation-item.vue b/app/src/modules/docs/components/navigation-item.vue
index 31bf78d834..e9b99f6679 100644
--- a/app/src/modules/docs/components/navigation-item.vue
+++ b/app/src/modules/docs/components/navigation-item.vue
@@ -1,5 +1,5 @@
 <template>
-	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :value="itemValue">
+	<v-list-item v-if="section.children === undefined" :to="section.to" :dense="dense" :value="section.to">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
 			<v-list-item-title>{{ section.name }}</v-list-item-title>
@@ -14,7 +14,7 @@
 			dense
 		/>
 	</div>
-	<v-list-group v-else :multiple="false" v-model="rootSelection" :value="itemValue">
+	<v-list-group v-else :multiple="false" :value="section.to" disableGroupableParent>
 		<template #activator>
 			<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 			<v-list-item-content>
@@ -25,7 +25,6 @@
 			v-for="(child, index) in section.children"
 			:key="index"
 			:section="child"
-			v-model="childSelection"
 			dense
 		/>
 	</v-list-group>
@@ -45,38 +44,7 @@ export default defineComponent({
 		dense: {
 			type: Boolean,
 			default: false,
-		},
-		value: {
-			type: Array as PropType<string[]>,
-			default: () => []
 		}
-	},
-	setup(props, {emit}) {
-		const rootSelection = computed({
-			get() {
-				if(props.value.length === 0) return []
-				return [props.value[0]]
-			},
-			set(newVal: string[]) {
-				emit('input', newVal);
-			}
-		})
-
-		const childSelection = computed({
-			get() {
-				if(props.value.length < 2) return []
-				return props.value.slice(1)
-			},
-			set(newVal: string[]) {
-				emit('input', [props.value[0], ...newVal])
-			}
-		})
- 
-		const itemValue = computed(() => {
-			return props.section.to.split('/').pop()
-		})
-
-		return {rootSelection, childSelection, itemValue}
 	}
 });
 </script>
diff --git a/app/src/modules/docs/components/navigation.vue b/app/src/modules/docs/components/navigation.vue
index 5c484836ad..24ba0a3400 100644
--- a/app/src/modules/docs/components/navigation.vue
+++ b/app/src/modules/docs/components/navigation.vue
@@ -1,11 +1,12 @@
 <template>
-	<v-list nav :multiple="false" v-model="rootSelection">
-		<navigation-item v-for="item in sections" :key="item.to" :section="item" v-model="childSelection"></navigation-item>
+	<v-list nav :multiple="false" v-model="selection">
+		<navigation-item v-for="item in sections" :key="item.to" :section="item"></navigation-item>
 	</v-list>
 </template>
 
 <script lang="ts">
 import { computed, defineComponent, PropType, ref, watch } from '@vue/composition-api';
+import { spread } from 'lodash';
 import NavigationItem from './navigation-item.vue';
 import sections, {Section} from './sections';
 
@@ -18,34 +19,44 @@ export default defineComponent({
 		},
 	},
 	setup(props) {
-		const active = ref<string[]>(props.section.to.replace('/docs/','').split('/'))
+		const _selection = ref<string[]>(spreadPath(props.section.to))
 
 		watch(props.section, (newSection) => {
 			if(newSection !== null)
-				active.value = newSection.to.replace('/docs/','').split('/')
+				_selection.value = spreadPath(newSection.to)
 		})
 
-		const rootSelection = computed({
+		const selection = computed({
 			get() {
-				if(active.value.length === 0) return []
-				return [active.value[0]]
+				return _selection.value
 			},
-			set(newVal: string[]) {
-				active.value = newVal
+			set(newSelection: string[]) {
+				if(newSelection.length === 0) {
+					_selection.value =  []
+				} else {
+					if(_selection.value.includes(newSelection[0])) {
+						_selection.value = _selection.value.filter(s => s !== newSelection[0])
+					} else {
+						_selection.value = spreadPath(newSelection[0])
+					}
+					
+				}
 			}
 		})
 
-		const childSelection = computed({
-			get() {
-				if(active.value.length < 2) return []
-				return active.value.slice(1)
-			},
-			set(newVal: string[]) {
-				active.value = [active.value[0], ...newVal]
-			}
-		})
+		function spreadPath(path: string) {
+			const sections = path.substr(1).split('/')
+			if(sections.length === 0) return []
 
-		return { sections, active, childSelection, rootSelection };
+			const paths: string[] = ['/'+sections[0]]
+
+			for(let i = 1; i < sections.length; i++) {
+				paths.push(paths[i - 1] + '/' + sections[i])
+			}
+			return paths
+		}
+
+		return { sections, selection };
 	},
 });
 </script>