From 4ccf999fc7d805023304a5f502e8fe7a7eebe4c0 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Thu, 1 Aug 2019 12:03:15 +0200
Subject: [PATCH] Trees can now do selection

---
 app/imports/ui/components/tree/TreeNode.vue   | 47 +++++++++++++++----
 .../ui/components/tree/TreeNodeList.vue       | 10 ++--
 .../ui/library/LibraryContentsContainer.vue   |  5 +-
 app/imports/ui/pages/Library.vue              | 15 +++++-
 4 files changed, 63 insertions(+), 14 deletions(-)

diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index 0906d37c..c5b8189d 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -1,18 +1,41 @@
 <template lang="html">
-	<div :class="!hasChildren ? 'empty' : null" :data-id="node._id">
-		<div class="layout row align-center">
+	<div
+		class="tree-node"
+		:class="!hasChildren ? 'empty' : null"
+		:data-id="node._id"
+	>
+		<div
+			class="layout row align-center justify-start tree-node-title"
+			style="cursor: pointer;"
+			:class="selected && 'primary--text'"
+			@click.stop="$emit('selected', node._id)"
+		>
 			<v-btn
 				small icon
 				:class="showExpanded ? 'rotate-90' : null"
-				@click="expanded = !expanded"
+				@click.stop="expanded = !expanded"
 				:disabled="!hasChildren && !organize"
 			>
 				<v-icon v-if="hasChildren || organize">chevron_right</v-icon>
 			</v-btn>
-			<v-icon class="handle mr-2" v-if="organize" :disabled="expanded">drag_handle</v-icon>
-			<div class="layout row center" style="align-items: center">
-				<v-icon v-if="node.type" class="mr-2">{{icon(node.type)}}</v-icon>
-				{{node && node.name}}
+			<div
+				class="layout row align-center justify-start"
+				style="flex-grow: 0;"
+			>
+				<v-icon
+					class="handle mr-2"
+					v-if="organize"
+					:class="selected && 'primary--text'"
+					:disabled="expanded"
+				>drag_handle</v-icon>
+				<v-icon
+					v-if="node.type"
+					class="mr-2"
+					:class="selected && 'primary--text'"
+				>{{icon(node.type)}}</v-icon>
+				<div class="text-no-wrap text-truncate">
+					{{node && node.name}}
+				</div>
 			</div>
 		</div>
 		<v-expand-transition>
@@ -22,8 +45,10 @@
 					:children="computedChildren"
 					:group="group"
 					:organize="organize"
+					:selected-node-id="selectedNodeId"
 					@reordered="e => $emit('reordered', e)"
 					@reorganized="e => $emit('reorganized', e)"
+					@selected="e => $emit('selected', e)"
 				/>
 			</div>
 		</v-expand-transition>
@@ -52,6 +77,8 @@
 			organize: Boolean,
 			children: Array,
 			getChildren: Function,
+			selectedNodeId: String,
+			selected: Boolean,
 		},
 		computed: {
 			hasChildren(){
@@ -73,7 +100,6 @@
 		},
 		methods: {
 			icon(type){
-				console.log({icon: PROPERTY_ICONS[type],PROPERTY_ICONS})
 				return PROPERTY_ICONS[type];
 			},
 		}
@@ -102,7 +128,10 @@
 	  opacity: 0.5;
 	  background: #c8ebfb;
 	}
-	.v-icon--disabled {
+	.v-icon.v-icon--disabled {
 		opacity: 0;
 	}
+	.theme--light .tree-node-title:hover {
+		background: rgba(0,0,0,.04);
+	}
 </style>
diff --git a/app/imports/ui/components/tree/TreeNodeList.vue b/app/imports/ui/components/tree/TreeNodeList.vue
index 3fdc12cf..587183e6 100644
--- a/app/imports/ui/components/tree/TreeNodeList.vue
+++ b/app/imports/ui/components/tree/TreeNodeList.vue
@@ -1,7 +1,7 @@
 <template lang="html">
 	<draggable
 		:value="children"
-		class="drag-area layout column"
+		class="drag-area"
 		@change="change"
 		:group="group"
 		:animation="200"
@@ -10,14 +10,17 @@
 		handle=".handle"
 	>
 		<tree-node
+			class="item"
 			v-for="child in children"
 			:node="child.node"
 			:children="child.children"
 			:group="group"
-			:key="child.node && (child.node._id || child.node.name)"
+			:key="child.node._id"
+			:selected-node-id="selectedNodeId"
+			:selected="selectedNodeId === child.node._id"
 			:organize="organize"
 			:lazy="lazy"
-			class="item"
+			@selected="e => $emit('selected', e)"
 			@reordered="e => $emit('reordered', e)"
 			@reorganized="e => $emit('reorganized', e)"
 			@dragstart.native="e => e.dataTransfer.setData('cow', child.node && child.node.name)"
@@ -45,6 +48,7 @@
 				type: Array,
 				required: true,
 			},
+			selectedNodeId: String,
 		},
 		computed: {
 			hasChildren(){
diff --git a/app/imports/ui/library/LibraryContentsContainer.vue b/app/imports/ui/library/LibraryContentsContainer.vue
index 423afc9b..29bc6a5f 100644
--- a/app/imports/ui/library/LibraryContentsContainer.vue
+++ b/app/imports/ui/library/LibraryContentsContainer.vue
@@ -1,10 +1,12 @@
 <template lang="html">
-	<v-card-text>
+	<v-card-text style="width: initial; max-width: 50%; min-width: 320px;">
 		<tree-node-list
 			v-if="libraryChildren"
 			:children="libraryChildren"
 			:group="library && library._id"
 			:organize="organize"
+			:selected-node-id="selectedNodeId"
+			@selected="e => $emit('selected', e)"
 			@reordered="reordered"
 			@reorganized="reorganized"
 		/>
@@ -24,6 +26,7 @@
 		props: {
 			libraryId: String,
 			organize: Boolean,
+			selectedNodeId: String,
 		},
 		meteor: {
 			$subscribe: {
diff --git a/app/imports/ui/pages/Library.vue b/app/imports/ui/pages/Library.vue
index 3c3bd0ed..437d5073 100644
--- a/app/imports/ui/pages/Library.vue
+++ b/app/imports/ui/pages/Library.vue
@@ -13,11 +13,19 @@
 				</v-btn>
 			</v-btn-toggle>
 		</template>
-		<v-card class="ma-4">
+		<v-card class="ma-4 layout row">
 			<library-contents-container
 				:library-id="$route.params.id"
 				:organize="organize"
+				@selected="e => selected = e"
+				:selected-node-id="selected"
 			/>
+			<v-divider vertical/>
+			<v-card-text
+			style="flex-grow: 1;"
+			>
+				<pre>{{selectedNode}}</pre>
+			</v-card-text>
 		</v-card>
 		<v-btn fixed fab bottom right
 			color="primary"
@@ -43,6 +51,7 @@
 		},
 		data(){ return {
 			organize: false,
+			selected: undefined,
 		};},
 		methods: {
 			insertLibraryNode(){
@@ -70,6 +79,10 @@
 			},
 			library(){
 				return Libraries.findOne(this.$route.params.id);
+			},
+			selectedNode(){
+				let node = LibraryNodes.findOne(this.selected);
+				return JSON.stringify(node, null, 2);
 			}
 		}
 	};