From 8e4c6252cdc246deffc51d139f5ce0764c6baffd Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 27 Jan 2020 13:49:50 +0200
Subject: [PATCH] Added a universal dialog for creature properties

---
 .../character/characterSheetTabs/TreeTab.vue  |   5 +-
 .../CreaturePropertyDialog.vue                | 121 +++++++++++++++++-
 2 files changed, 123 insertions(+), 3 deletions(-)

diff --git a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
index 9287f42b..10996968 100644
--- a/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
+++ b/app/imports/ui/creature/character/characterSheetTabs/TreeTab.vue
@@ -141,7 +141,10 @@
 				this.$store.commit('pushDialogStack', {
 					component: 'creature-property-dialog',
 					elementId: 'selected-node-card',
-					data: {_id: this.selected},
+					data: {
+						_id: this.selected,
+						startInEditTab: true,
+					},
 				});
 			},
 			getPropertyName,
diff --git a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
index 00fbce02..14c490a0 100644
--- a/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/CreaturePropertyDialog.vue
@@ -1,10 +1,127 @@
 <template lang="html">
-
+	<dialog-base>
+ 	 <template slot="toolbar">
+ 		 <property-icon :type="model.type" class="mr-2"/>
+ 		 <div class="title">
+ 			 {{getPropertyName(model.type)}}
+ 		 </div>
+ 		 <v-spacer/>
+		 <v-menu v-if="editing" bottom left transition="slide-y-transition">
+      <template v-slot:activator="{ on }">
+				<v-btn icon v-on="on">
+					<v-icon>more_vert</v-icon>
+				</v-btn>
+			</template>
+			<v-list>
+				<v-list-tile @click="remove">
+					<v-list-tile-title>
+						Delete <v-icon>delete</v-icon>
+					</v-list-tile-title>
+				</v-list-tile>
+			</v-list>
+		 </v-menu>
+		 <v-btn icon @click="editing = !editing">
+			 <v-slide-y-transition leave-absolute mode="out-in">
+				 <v-icon v-if="editing" key="doneIcon">done</v-icon>
+				 <v-icon v-else key="createIcon">create</v-icon>
+			 </v-slide-y-transition>
+		 </v-btn>
+ 	 </template>
+	 <template v-if="model">
+	 	 <component
+	 		 v-if="editing"
+	 		 class="creature-property-form"
+	 		 :is="model.type + 'Form'"
+	 		 :model="model"
+	 		 @change="change"
+	 		 @push="push"
+	 		 @pull="pull"
+	 	 />
+		 <component
+	 		 v-else-if="!editing && $options.components[model.type + 'Viewer']"
+	 		 class="creature-property-viewer"
+	 		 :is="model.type + 'Viewer'"
+	 		 :model="model"
+	 	 />
+		 <p v-else>This property can't be viewed yet.</p>
+	 </template>
+ 	 <div
+ 		 slot="actions"
+ 		 class="layout row justify-end"
+ 	 >
+ 		 <v-btn
+ 			 flat
+ 			 @click="$store.dispatch('popDialogStack')"
+ 		 >Done</v-btn>
+ 	 </div>
+  </dialog-base>
 </template>
 
 <script>
-export default {
+import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
+import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import PropertyIcon from '/imports/ui/properties/PropertyIcon.vue';
+import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
+import propertyViewerIndex from '/imports/ui/properties/viewers/shared/propertyViewerIndex.js';
+
+let formIndex = {};
+for (let key in propertyFormIndex){
+	formIndex[key + 'Form'] = propertyFormIndex[key];
 }
+
+let viewerIndex = {};
+for (let key in propertyViewerIndex){
+	formIndex[key + 'Viewer'] = propertyViewerIndex[key];
+}
+
+export default {
+	components: {
+		...formIndex,
+		...viewerIndex,
+		PropertyIcon,
+		DialogBase,
+	},
+	props: {
+		_id: String,
+		startInEditTab: Boolean,
+	},
+	data(){ return {
+		editing: !!this.startInEditTab,
+	}},
+	meteor: {
+		model(){
+			return CreatureProperties.findOne(this._id);
+		},
+	},
+	methods: {
+		getPropertyName,
+		change({path, value, ack}){
+			updateLibraryNode.call({_id: this._id, path, value}, (error, result) =>{
+				console.log({error, result});
+				ack && ack(error);
+			});
+		},
+		push({path, value, ack}){
+			pushToLibraryNode.call({_id: this._id, path, value}, (error, result) =>{
+				console.log({error, result});
+				ack && ack(error);
+			});
+		},
+		pull({path, ack}){
+			let itemId = get(this.model, path)._id;
+			path.pop();
+			pullFromLibraryNode.call({_id: this._id, path, itemId}, (error, result) =>{
+				console.log({error, result});
+				ack && ack(error);
+			});
+		},
+		remove(){
+			softRemoveLibraryNode.call({_id: this._id});
+			this.$store.dispatch('popDialogStack');
+		},
+	}
+};
 </script>
 
 <style lang="css" scoped>