From 4abb5edbf391aa9be53f0494fa1b40f1a9c5604e Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 28 Jun 2019 14:48:02 +0200
Subject: [PATCH] Got library attribute form onto the screen :D

---
 app/imports/ui/StoryBook.vue                  |  4 ++--
 .../properties/PropertySelector.vue           |  2 +-
 .../attributes/AttributeCreationDialog.vue    |  4 ++--
 .../properties/attributes/AttributeDialog.vue |  4 ++--
 ...Edit.Story.vue => AttributeForm.Story.vue} |  4 ++--
 .../{AttributeEdit.vue => AttributeForm.vue}  |  0
 .../creature/properties/propertyFormIndex.js  |  5 +++++
 .../ui/library/LibraryNodeCreationDialog.vue  | 21 ++++++++++++-------
 app/imports/ui/library/LibraryNodeForm.vue    | 16 ++++++++++++++
 9 files changed, 44 insertions(+), 16 deletions(-)
 rename app/imports/ui/{components => creature}/properties/PropertySelector.vue (96%)
 rename app/imports/ui/creature/properties/attributes/{AttributeEdit.Story.vue => AttributeForm.Story.vue} (91%)
 rename app/imports/ui/creature/properties/attributes/{AttributeEdit.vue => AttributeForm.vue} (100%)
 create mode 100644 app/imports/ui/creature/properties/propertyFormIndex.js
 create mode 100644 app/imports/ui/library/LibraryNodeForm.vue

diff --git a/app/imports/ui/StoryBook.vue b/app/imports/ui/StoryBook.vue
index 3e5b1bf2..83f1bfe2 100644
--- a/app/imports/ui/StoryBook.vue
+++ b/app/imports/ui/StoryBook.vue
@@ -41,7 +41,7 @@
 	import Vue from "vue";
 	import AbilityListTile from '/imports/ui/creature/properties/attributes/AbilityListTile.Story.vue';
 	import AttributeCard from '/imports/ui/creature/properties/attributes/AttributeCard.Story.vue';
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.Story.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.Story.vue';
 	import ColorPicker from '/imports/ui/components/ColorPicker.Story.vue';
 	import ColumnLayout from "/imports/ui/components/ColumnLayout.Story.vue";
 	import DialogStack from '/imports/ui/dialogStack/DialogStack.Story.vue';
@@ -62,7 +62,7 @@
 		components: {
 			AbilityListTile,
 			AttributeCard,
-			AttributeEdit,
+			AttributeForm,
 			ColorPicker,
 			ColumnLayout,
 			DialogStack,
diff --git a/app/imports/ui/components/properties/PropertySelector.vue b/app/imports/ui/creature/properties/PropertySelector.vue
similarity index 96%
rename from app/imports/ui/components/properties/PropertySelector.vue
rename to app/imports/ui/creature/properties/PropertySelector.vue
index 4087d06a..73997098 100644
--- a/app/imports/ui/components/properties/PropertySelector.vue
+++ b/app/imports/ui/creature/properties/PropertySelector.vue
@@ -3,7 +3,7 @@
 		<v-container fluid grid-list-lg fill-height>
 			<v-layout row wrap>
 				<v-flex v-for="property in properties" :key="property.name" xs4>
-					<v-card hover @click="$emit('select', property.type)">
+					<v-card hover @click="$emit('select', property)">
 						<div class="layout row align-center justify-center" style="min-height: 70px;">
 							<v-icon x-large>{{ property.icon }}</v-icon>
 						</div>
diff --git a/app/imports/ui/creature/properties/attributes/AttributeCreationDialog.vue b/app/imports/ui/creature/properties/attributes/AttributeCreationDialog.vue
index 07ba3aad..17c03aea 100644
--- a/app/imports/ui/creature/properties/attributes/AttributeCreationDialog.vue
+++ b/app/imports/ui/creature/properties/attributes/AttributeCreationDialog.vue
@@ -22,13 +22,13 @@
 </template>
 
 <script>
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
 	import Attributes from '/imports/api/creature/properties/Attributes.js';
 	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
 
 	export default {
 		components: {
-			AttributeEdit,
+			AttributeForm,
 			DialogBase,
 		},
 		data(){ return {
diff --git a/app/imports/ui/creature/properties/attributes/AttributeDialog.vue b/app/imports/ui/creature/properties/attributes/AttributeDialog.vue
index 6abe686f..df145c92 100644
--- a/app/imports/ui/creature/properties/attributes/AttributeDialog.vue
+++ b/app/imports/ui/creature/properties/attributes/AttributeDialog.vue
@@ -36,7 +36,7 @@
 <script>
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
 	import EffectChildList from '/imports/ui/creature/properties/effects/EffectChildList.vue';
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 
 	export default {
@@ -79,7 +79,7 @@
 		components: {
 			DialogBase,
 			EffectChildList,
-			AttributeEdit,
+			AttributeForm,
 		},
 	};
 </script>
diff --git a/app/imports/ui/creature/properties/attributes/AttributeEdit.Story.vue b/app/imports/ui/creature/properties/attributes/AttributeForm.Story.vue
similarity index 91%
rename from app/imports/ui/creature/properties/attributes/AttributeEdit.Story.vue
rename to app/imports/ui/creature/properties/attributes/AttributeForm.Story.vue
index b2359963..1961c10c 100644
--- a/app/imports/ui/creature/properties/attributes/AttributeEdit.Story.vue
+++ b/app/imports/ui/creature/properties/attributes/AttributeForm.Story.vue
@@ -13,11 +13,11 @@
 </template>
 
 <script>
-	import AttributeEdit from '/imports/ui/creature/properties/attributes/AttributeEdit.vue';
+	import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
 	import debounceUpdate from '/imports/ui/utility/debounceUpdate.js';
 	export default {
 		components: {
-			AttributeEdit,
+			AttributeForm,
 		},
 		data(){ return {
 			attributes: [
diff --git a/app/imports/ui/creature/properties/attributes/AttributeEdit.vue b/app/imports/ui/creature/properties/attributes/AttributeForm.vue
similarity index 100%
rename from app/imports/ui/creature/properties/attributes/AttributeEdit.vue
rename to app/imports/ui/creature/properties/attributes/AttributeForm.vue
diff --git a/app/imports/ui/creature/properties/propertyFormIndex.js b/app/imports/ui/creature/properties/propertyFormIndex.js
new file mode 100644
index 00000000..16dbab1a
--- /dev/null
+++ b/app/imports/ui/creature/properties/propertyFormIndex.js
@@ -0,0 +1,5 @@
+import AttributeForm from '/imports/ui/creature/properties/attributes/AttributeForm.vue';
+
+export default {
+  attribute: AttributeForm,
+};
diff --git a/app/imports/ui/library/LibraryNodeCreationDialog.vue b/app/imports/ui/library/LibraryNodeCreationDialog.vue
index b7d807a0..bb8854cd 100644
--- a/app/imports/ui/library/LibraryNodeCreationDialog.vue
+++ b/app/imports/ui/library/LibraryNodeCreationDialog.vue
@@ -1,37 +1,44 @@
 <template lang="html">
-  <dialog-base :override-back-button="step === 2 && back">
+  <dialog-base :override-back-button="step === 2 ? back : undefined">
+		<div slot="toolbar">{{ step === 2 ? `Add ${property.name}` : 'Add Library Content'}}</div>
 		<v-window v-model="step" slot="unwrapped-content" style="height: 100%;">
 			<v-window-item :value="1">
-				<property-selector @select="setType"/>
+				<property-selector @select="setProperty"/>
 			</v-window-item>
 			<v-window-item :value="2">
 				<v-card-text>
-					{{ type }}
+					<library-node-form :type="property && property.type"/>
 				</v-card-text>
 			</v-window-item>
 		</v-window>
+
+		<div slot="actions" v-if="step === 2" class="layout row justify-end">
+			<v-btn flat>Insert</v-btn>
+		</div>
   </dialog-base>
 </template>
 
 <script>
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
-import PropertySelector from '/imports/ui/components/properties/PropertySelector.vue';
+import PropertySelector from '/imports/ui/creature/properties/PropertySelector.vue';
+import LibraryNodeForm from '/imports/ui/library/LibraryNodeForm.vue';
 
 export default {
   data() { return {
-    type: undefined,
+    property: undefined,
 		step: 1,
   };},
   components: {
     DialogBase,
 		PropertySelector,
+		LibraryNodeForm,
   },
 	methods: {
 		back(){
 			this.step = 1;
 		},
-		setType(type){
-			this.type = type;
+		setProperty(property){
+			this.property = property;
 			this.step = 2;
 		}
 	},
diff --git a/app/imports/ui/library/LibraryNodeForm.vue b/app/imports/ui/library/LibraryNodeForm.vue
new file mode 100644
index 00000000..def2308b
--- /dev/null
+++ b/app/imports/ui/library/LibraryNodeForm.vue
@@ -0,0 +1,16 @@
+<template lang="html">
+  <component v-if="type" :is="type" class="library-node-form"/>
+</template>
+
+<script>
+import propertyFormIndex from '/imports/ui/creature/properties/propertyFormIndex.js';
+export default {
+	props: {
+		type: String,
+	},
+	components: propertyFormIndex,
+}
+</script>
+
+<style lang="css" scoped>
+</style>