From 9ac6b510e45cd526af9a6ca9d5070874f5799ae7 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 9 Mar 2020 14:29:11 +0200
Subject: [PATCH] Added tree of sub-properties to property dialog

---
 app/.meteor/versions                          |  2 --
 app/imports/ui/components/tree/TreeNode.vue   |  6 ++---
 .../character/characterSheetTabs/TreeTab.vue  |  8 +++---
 .../CreaturePropertiesTree.vue}               | 25 ++++++-------------
 .../CreaturePropertyDialog.vue                | 18 +++++++++++++
 app/server/main.js                            |  1 -
 6 files changed, 32 insertions(+), 28 deletions(-)
 rename app/imports/ui/creature/{CreatureTreeContainer.vue => creatureProperties/CreaturePropertiesTree.vue} (75%)

diff --git a/app/.meteor/versions b/app/.meteor/versions
index ae508d2a..e43013c0 100644
--- a/app/.meteor/versions
+++ b/app/.meteor/versions
@@ -108,8 +108,6 @@ shell-server@0.4.0
 socket-stream-client@0.2.3
 spacebars@1.0.15
 spacebars-compiler@1.1.3
-splendido:accounts-emails-field@1.2.0
-splendido:accounts-meld@1.3.1
 srp@1.0.12
 standard-minifier-js@2.6.0
 static-html@1.2.2
diff --git a/app/imports/ui/components/tree/TreeNode.vue b/app/imports/ui/components/tree/TreeNode.vue
index 630cfa98..51590149 100644
--- a/app/imports/ui/components/tree/TreeNode.vue
+++ b/app/imports/ui/components/tree/TreeNode.vue
@@ -1,8 +1,8 @@
 <template lang="html">
-	<div
+	<v-sheet
 		class="tree-node"
 		:class="!hasChildren ? 'empty' : null"
-		:data-id="node._id"
+		:data-id="`tree-node-${node._id}`"
 	>
 		<div
 			class="layout row align-center justify-start tree-node-title"
@@ -55,7 +55,7 @@
 				/>
 			</div>
 		</v-expand-transition>
-	</div>
+	</v-sheet>
 </template>
 
 <script>
diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index 475f7db4..78d99ac5 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -11,8 +11,8 @@
 						style="flex-grow: 0; height: 32px;"
 					/>
 				</v-toolbar>
-				<creature-tree-container
-					:creature-id="creatureId"
+				<creature-properties-tree
+					:root="{collection: 'creatures', id: creatureId}"
 					:organize="organize"
 					@selected="e => selected = e"
 					:selected-node-id="selected"
@@ -79,7 +79,7 @@
 </template>
 
 <script>
-	import CreatureTreeContainer from '/imports/ui/creature/CreatureTreeContainer.vue';
+import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
 	import CreatureProperties, {
 		insertProperty,
 		insertPropertyFromLibraryNode
@@ -91,7 +91,7 @@
 
 	export default {
 		components: {
-			CreatureTreeContainer,
+			CreaturePropertiesTree,
 			PropertyViewer,
 			PropertyIcon,
 		},
diff --git a/app/imports/ui/creature/CreatureTreeContainer.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
similarity index 75%
rename from app/imports/ui/creature/CreatureTreeContainer.vue
rename to app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
index 0d5e9130..aa9225e2 100644
--- a/app/imports/ui/creature/CreatureTreeContainer.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue
@@ -1,9 +1,9 @@
 <template lang="html">
 	<v-card-text style="width: initial; max-width: 100%; min-width: 320px;">
 		<tree-node-list
-			v-if="creatureChildren"
-			:children="creatureChildren"
-			:group="creature && creature._id"
+			v-if="root"
+			:children="children"
+			:group="root.id"
 			:organize="organize"
 			:selected-node-id="selectedNodeId"
 			@selected="e => $emit('selected', e)"
@@ -14,7 +14,6 @@
 </template>
 
 <script>
-	import Creatures from '/imports/api/creature/Creatures.js';
 	import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
 	import { nodesToTree } from '/imports/api/parenting/parenting.js'
 	import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';
@@ -25,20 +24,13 @@
 			TreeNodeList,
 		},
 		props: {
-			creatureId: String,
+			root: Object,
 			organize: Boolean,
 			selectedNodeId: String,
 		},
 		meteor: {
-			$subscribe: {
-				'creature': [this.creatureId],
-			},
-			creature(){
-				return Creatures.findOne(this.creatureId);
-			},
-			creatureChildren(){
-				if (!this.creature) return;
-				return nodesToTree({collection: CreatureProperties, ancestorId: this.creatureId});
+			children(){
+				return nodesToTree({collection: CreatureProperties, ancestorId: this.root.id});
 			},
 		},
 		methods: {
@@ -59,10 +51,7 @@
 						collection: 'creatureProperties',
 					};
 				} else {
-					parentRef = {
-						id: this.creatureId,
-						collection: 'creatures',
-					};
+					parentRef = this.root;
 				}
 				organizeDoc.call({
 					docRef: {
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index cd31564d..3318bcaa 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -44,6 +44,14 @@
 	 		 :model="model"
 	 	 />
 		 <p v-else>This property can't be viewed yet.</p>
+		 <template v-if="!editing">
+		   <v-divider/>
+			 <creature-properties-tree
+				 v-if="!editing"
+				 :root="{collection: 'creatureProperties', id: model._id}"
+				 @selected="selectSubProperty"
+			 />
+		 </template>
 	 </template>
  	 <div
  		 slot="actions"
@@ -70,6 +78,8 @@ import { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import PropertyIcon from '/imports/ui/properties/shared/PropertyIcon.vue';
 import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
+import CreaturePropertiesTree from '/imports/ui/creature/creatureProperties/CreaturePropertiesTree.vue';
+import { get } from 'lodash';
 
 let formIndex = {};
 for (let key in propertyFormIndex){
@@ -87,6 +97,7 @@ export default {
 		...viewerIndex,
 		PropertyIcon,
 		DialogBase,
+		CreaturePropertiesTree,
 	},
 	props: {
 		_id: String,
@@ -123,6 +134,13 @@ export default {
 			softRemoveProperty.call({_id: this._id});
 			this.$store.dispatch('popDialogStack');
 		},
+		selectSubProperty(_id){
+			this.$store.commit('pushDialogStack', {
+				component: 'creature-property-dialog',
+				elementId: `tree-node-${_id}`,
+				data: {_id},
+			});
+		}
 	}
 };
 </script>
diff --git a/app/server/main.js b/app/server/main.js
index d5714fe9..0b532ad5 100644
--- a/app/server/main.js
+++ b/app/server/main.js
@@ -1,6 +1,5 @@
 import "/imports/server/publications/index.js";
 import "/imports/api/creature/creatureComputation.js";
 import "/imports/api/parenting/deleteRemovedDocuments.js";
-import "/imports/server/config/accountsMeldConfig.js";
 import "/imports/server/config/simpleSchemaDebug.js";
 import "/imports/api/parenting/organizeMethods.js";