Iterated on features UI

app/imports/ui/character/FeaturesTab.vue

@@ -3,8 +3,10 @@
 		<column-layout>
 			<div v-for="feature in features" :key="feature._id">
 				<feature-card
-				v-bind="feature"
-				:data-id="feature._id"
+					v-bind="feature"
+					:data-id="feature._id"
+					@update="updateFeature"
+					@click="featureClicked(feature)"
 				/>
 			</div>
 		</column-layout>
@@ -21,7 +23,7 @@
 
 <script>
 	import Creatures from '/imports/api/creature/Creatures.js';
-	import Features from '/imports/api/creature/properties/Features.js';
+	import Features, { updateFeature } from '/imports/api/creature/properties/Features.js';
 	import { insertFeature } from '/imports/api/creature/properties/Features.js';
 	import ColumnLayout from '/imports/ui/components/ColumnLayout.vue';
 	import FeatureCard from '/imports/ui/components/features/FeatureCard.vue';
@@ -45,7 +47,6 @@
 				}, {
 					sort: {order: 1},
 				}).map(f => {
-					f.uses = evaluateComputation(f.uses, vars);
 					f.description = evaluateString(f.description, vars);
 					return f;
 				});
@@ -64,8 +65,24 @@
 						return featureId
 					}
 				});
-			}
-		}
+			},
+			updateFeature({_id, update}, ack){
+				updateFeature.call({_id, update}, error => {
+					if (ack){
+						ack(error);
+					} else if(error) {
+						throw error;
+					}
+				});
+			},
+			featureClicked(feature){
+				this.$store.commit('pushDialogStack', {
+					component: 'feature-dialog-container',
+					elementId: feature._id,
+					data: {_id: feature._id},
+				});
+			},
+		},
 	};
 </script>
 

app/imports/ui/components/ToolbarCard.vue

@@ -1,15 +1,15 @@
 <template lang="html">
-  <v-card>
+  <v-card :hover="hasClickListener" @click="$emit('click')">
   	<v-toolbar
 			flat
 			style="transform: none;"
-			@click="$emit('click')"
 			:color="color"
 			:dark="isDark"
 		>
   		<slot name="toolbar"/>
   	</v-toolbar>
-		<div>
+		<div
+		>
 			<slot/>
 		</div>
   </v-card>
@@ -29,7 +29,10 @@
 		computed: {
 			isDark(){
 				return isDarkColor(this.color);
-			}
+			},
+			hasClickListener(){
+	    	return this.$listeners && !!this.$listeners.click
+			},
 		}
 	};
 </script>

app/imports/ui/components/features/FeatureCard.vue

@@ -1,17 +1,18 @@
 <template lang="html">
-  <toolbar-card :color="color" @click="$emit('click')">
-  	<span slot="toolbar">
-			{{name}}
-		</span>
-		<v-spacer slot="toolbar"/>
-		<v-checkbox
-			hide-details
-			class="shrink"
-			v-if="!alwaysEnabled"
-			:value="enabled"
-			@change="enabled => $emit('change', {enabled})"
-			slot="toolbar"
-		/>
+  <toolbar-card :color="color" @click="$emit('click')" :id="_id">
+		<template slot="toolbar">
+			<span>
+				{{name}}
+			</span>
+			<v-spacer/>
+			<v-checkbox
+				hide-details
+				class="shrink"
+				v-if="!alwaysEnabled"
+				:value="enabled"
+				@click.stop="$emit('update', {_id, update: {enabled: !enabled}})"
+			/>
+		</template>
 		<v-card-text>
 			{{description}}
 		</v-card-text>
@@ -23,6 +24,7 @@
 
 	export default {
 		props: {
+			_id: String,
 			charId: String,
 			name: String,
 			description: String,
@@ -33,6 +35,7 @@
 		components: {
 			ToolbarCard,
 		},
+
 	};
 </script>
 

app/imports/ui/components/features/FeatureCreationDialog.vue

@@ -3,7 +3,7 @@
 		documentType="Feature"
 		:doc="feature"
 		:schema="schema"
-		@updateErrors="newErrors => errors = newErrors"
+		:errors.sync="errors"
 	>
 		<feature-form
 			:feature="feature"
@@ -40,12 +40,7 @@
 				for (key in update){
 					this.feature[key] = update[key];
 				}
-				try {
-					FeatureSchema.validate({$set: update}, {clean: true, modifier: true});
-					ack()
-				} catch (e){
-					ack(e.message);
-				}
+				ack();
 			},
 		},
 	};

app/imports/ui/components/features/FeatureDialog.vue

@@ -1,45 +1,30 @@
 <template lang="html">
-	<dialog-base>
-    <div slot="toolbar" :color="color">
-      {{name}}
-    </div>
+	<property-dialog :doc="feature" collection="features" @remove="$emit('remove')">
 		<div>
-			{{description}}
+			{{feature.description}}
+			<!--
 			<child-lists
-				:effects="effects"
-				:proficiencies="proficiencies"
-				:actions="actions"
-				:attacks="attacks"
+				:parent="feature"
 			/>
+			-->
 		</div>
-		<div slot="edit">
-			<feature-edit
-				:feature="$props"
-				@change="(update, ack) => $emit('change', update, ack)"
-			/>
-		</div>
-  </dialog-base>
+		<feature-foremovet="form" :feature="feature" @update="(update, ack) => $emit('update', update, ack)"/>
+	</property-dialog>
 </template>
 
 <script>
-export default {
-	props: {
-		charId: String,
-		name: String,
-		description: String,
-		uses: String,
-		used: Number,
-		reset: String,
-		enabled: Boolean,
-		alwaysEnabled: Boolean,
-		order: Number,
-		color: String,
-		effects: Array,
-		proficiencies: Array,
-		actions: Array,
-		attacks: Array,
+	import PropertyDialog from '/imports/ui/components/properties/PropertyDialog.vue';
+	import FeatureForm from '/imports/ui/components/features/FeatureForm.vue';
+
+	export default {
+		components: {
+			PropertyDialog,
+			FeatureForm,
+		},
+		props: {
+			feature: Object,
+		},
 	}
-}
 </script>
 
 <style lang="css" scoped>

app/imports/ui/components/features/FeatureDialogContainer.vue

@@ -1,20 +1,18 @@
 <template lang="html">
   <feature-dialog
-		v-bind="feature"
-		:effects="effects"
-		v-on="{clickedEffect, change}"
+		:feature="feature"
+		@update="update"
+		@remove="remove"
 	/>
 </template>
 
 <script>
+	import Features, {updateFeature} from '/imports/api/creature/properties/Features.js';
 	import FeatureDialog from '/imports/ui/components/features/FeatureDialog.vue';
-	import Features from '/imports/api/creature/properties/Features.js';
-	import { updateFeature } from '/imports/api/creature/properties/Features.js';
-	import Effects from '/imports/api/creature/properties/Effects.js';
 
 	export default {
 		components: {
-			AttributeDialog,
+			FeatureDialog,
 		},
 		props: {
 			_id: String,
@@ -23,25 +21,17 @@
 			feature(){
 				return Features.findOne(this._id);
 			},
-			effects(){
-				if (!this.feature) return;
-				return Effects.find({
-					'parent.id': this.feature._id,
-				}, {
-					sort: {order: 1},
-				}).fetch();
-			},
 		},
 		methods: {
-			clickedEffect(e){
-				console.log({TODO: e});
-			},
-			change(update, ack){
-				updateFeature.call({_id: this._id, update}, error => ack(error));
+			update(update, ack){
+				updateFeature.call({
+					_id: this._id,
+					update,
+				}, error => ack(error));
 			},
+			remove(){
+				softRemoveProperty({_id: this._id, collection: 'features'});
+			}
 		},
 	};
 </script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/properties/PropertyDialog.vue

@@ -0,0 +1,28 @@
+<template lang="html">
+	<dialog-base @delete="$emit('delete')">
+    <slot name="toolbar" slot="toolbar" :color="doc.color">
+			<div>
+				{{doc.name}}
+			</div>
+    </slot>
+		<!-- Breadcrumbs go here -->
+		<slot/>
+		<slot name="form" slot="edit"/>
+  </dialog-base>
+</template>
+
+<script>
+	import propertyUpdateMethods from '/imports/api/creature/properties/propertyUpdateMethods.js';
+	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+	export default {
+		components: {
+			DialogBase,
+		},
+		props: {
+			doc: Object,
+		},
+	}
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/properties/PropertyDialogContainer.vue

@@ -1,42 +0,0 @@
-<template lang="html">
-	<dialog-base>
-    <slot name="toolbar" slot="toolbar" :color="color">
-			<div>
-				{{doc.name}}
-			</div>
-    </slot>
-		<slot/>
-		<slot name="form" slot="edit" @update="update"/>
-  </dialog-base>
-</template>
-
-<script>
-import getCollectionByName from '/imports/api/parenting/getCollectionByName.js';
-import fetchDocByRef from '/imports/api/parenting/fetchDocByRef.js';
-import propertyUpdateMethods from '/imports/api/creature/properties/propertyUpdateMethods.js';
-export default {
-	props: {
-		collection: String,
-		id: String,
-	},
-	meteor: {
-		doc(){
-			return fetchDocByRef({
-				id: this.id,
-				collection: this.collection,
-			});
-		},
-	},
-	methods: {
-		update(update, ack){
-			propertyUpdateMethods[this.collection].call({
-				_id: this.id,
-				update,
-			}, error => ack(error));
-		}
-	}
-}
-</script>
-
-<style lang="css" scoped>
-</style>

app/imports/ui/components/properties/PropertyInsertDialog.vue

@@ -52,7 +52,7 @@ export default {
 					if (this.valid) this.valid = false;
 					errors[error.name] = this.schema.messageForError(error);
 				});
-				this.$emit('updateErrors', errors);
+				this.$emit('update:errors', errors);
 			},
 			deep: true,
 		},

app/imports/ui/dialogStack/DialogBase.vue

@@ -7,7 +7,7 @@
       <slot name="toolbar"></slot>
 			<template v-if="$slots.edit">
 				<v-spacer/>
-				<v-btn icon flat @click="() => $emit('delete')" v-if="isEditing">
+				<v-btn icon flat @click="$emit('remove')" v-if="isEditing">
 					<v-icon>delete</v-icon>
 				</v-btn>
 				<v-btn icon flat @click="isEditing = !isEditing">

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -2,6 +2,7 @@ import AttributeDialog from '/imports/ui/components/attributes/AttributeDialog.v
 import AttributeDialogContainer from '/imports/ui/components/attributes/AttributeDialogContainer.vue';
 import AttributeCreationDialog from '/imports/ui/components/attributes/AttributeCreationDialog.vue';
 import FeatureCreationDialog from '/imports/ui/components/features/FeatureCreationDialog.vue';
+import FeatureDialogContainer from '/imports/ui/components/features/FeatureDialogContainer.vue';
 import SkillDialogContainer from '/imports/ui/components/skills/SkillDialogContainer.vue';
 
 export default {
@@ -9,5 +10,6 @@ export default {
   AttributeDialogContainer,
   AttributeCreationDialog,
   FeatureCreationDialog,
+  FeatureDialogContainer,
   SkillDialogContainer,
 };

app/imports/ui/dialogStack/dialogStackStore.js

@@ -20,6 +20,19 @@ const dialogStackStore = {
       });
       updateHistory();
     },
+    replaceDialog(stat, {component, data, elementId, callback}){
+      const _id = Random.id();
+      if (!state.dialogs.length){
+        throw new Meteor.Error("can't replace dialog if no dialogs are open");
+      }
+      state.dialogs.$set(0, {
+        _id,
+        component,
+        data,
+        elementId,
+        callback,
+      });
+    },
     popDialogStackMutation (state, result){
       const dialog = state.dialogs.pop();
       state.currentResult = null;

app/package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "rpg-docs",
+  "name": "dicecloud",
   "version": "0.10.0",
   "lockfileVersion": 1,
   "requires": true,