Library nodes can now be edited :D

app/imports/api/library/LibraryNodes.js

@@ -45,21 +45,26 @@ const insertNode = new ValidatedMethod({
   },
 });
 
-const updateNode = new ValidatedMethod({
+const updateLibraryNode = new ValidatedMethod({
-  name: 'LibraryNodes.methods.update',
+  name: 'LibraryNodes.methods.set',
-  validate({_id, update}){
+  validate({_id, path, value, ack}){
-    let fields = getModifierFields(update);
+		if (!_id) return false;
-    return !fields.hasAny([
+		switch (path[0]){
-      'type',
+			case 'type':
-      'order',
+      case 'order':
-      'parent',
+      case 'parent':
-      'ancestors',
+      case 'ancestors':
-    ]);
+				return false;
+		}
   },
-  run({_id, update}) {
+  run({_id, path, value, ack}) {
     let node = LibraryNodes.findOne(_id);
     assertNodeEditPermission(node, this.userId);
-		return LibraryNodes.update(_id, update);
+		return LibraryNodes.update(_id, {
+			$set: {[path.join('.')]: value},
+		}, {
+			selector: {type: node.type},
+		}, error => ack && ack(error));
   },
 });
 
@@ -93,4 +98,4 @@ function libraryNodesToTree(ancestorId){
 }
 
 export default LibraryNodes;
-export { LibraryNodeSchema, insertNode, updateNode, libraryNodesToTree };
+export { LibraryNodeSchema, insertNode, updateLibraryNode, libraryNodesToTree };

app/imports/ui/StoryBook.vue

@@ -44,7 +44,7 @@
 	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';
-	import EffectEditExpansionList from '/imports/ui/properties/effects/EffectEditExpansionList.Story.vue';
+	import EffectEditExpansionList from '/imports/ui/properties/viewers/shared/effects/EffectEditExpansionList.Story.vue';
 	import FeatureCard from '/imports/ui/properties/features/FeatureCard.Story.vue';
 	import HealthBar from '/imports/ui/properties/attributes/HealthBar.Story.vue';
 	import HitDiceListTile from '/imports/ui/properties/attributes/HitDiceListTile.Story.vue';

app/imports/ui/dialogStack/DialogComponentIndex.js

@@ -5,6 +5,7 @@ import FeatureCreationDialog from '/imports/ui/properties/features/FeatureCreati
 import FeatureDialogContainer from '/imports/ui/properties/features/FeatureDialogContainer.vue';
 import LibraryCreationDialog from '/imports/ui/library/LibraryCreationDialog.vue';
 import LibraryNodeCreationDialog from '/imports/ui/library/LibraryNodeCreationDialog.vue';
+import LibraryNodeEditDialog from '/imports/ui/library/LibraryNodeEditDialog.vue';
 import SkillDialogContainer from '/imports/ui/properties/skills/SkillDialogContainer.vue';
 
 export default {
@@ -15,5 +16,6 @@ export default {
   FeatureDialogContainer,
   LibraryCreationDialog,
   LibraryNodeCreationDialog,
+  LibraryNodeEditDialog,
   SkillDialogContainer,
 };

app/imports/ui/library/LibraryNodeEditDialog.vue

@@ -1,14 +1,18 @@
 <template lang="html">
-	<dialog-base v-show="step == 1" class="step-1" key="left">
+	<dialog-base>
 		<template slot="toolbar">
-			<div>Add {{propertyName}}</div>
+			<property-icon :type="model.type" class="mr-2"/>
+			<div class="title">
+				{{getPropertyName(model.type)}}
+			</div>
+			<v-spacer/>
 			<v-btn icon flat @click="remove">
 				<v-icon>delete</v-icon>
 			</v-btn>
 		</template>
 		<component
-			v-if="type"
+			v-if="model"
-			:is="type"
+			:is="model.type"
 			class="library-node-form"
 			:model="model"
 			@change="change"
@@ -21,7 +25,6 @@
 		>
 			<v-btn
 				flat
-				:disabled="!valid"
 				@click="$store.dispatch('popDialogStack')"
 			>Done</v-btn>
 		</div>
@@ -29,41 +32,49 @@
 </template>
 
 <script>
-import librarySchemas from '/imports/api/library/librarySchemas.js';
+	import LibraryNodes, { updateLibraryNode } from '/imports/api/library/LibraryNodes.js';
-import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+	import librarySchemas from '/imports/api/library/librarySchemas.js';
-import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
+	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+	import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+	import PropertyIcon from '/imports/ui/components/properties/PropertyIcon.vue';
+	import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormIndex.js';
 
-let todo = () => console.log('not implemented');
+	let todo = ({ack}) => {
-let libraryNodeSet = libraryNodePull = libraryNodePush = libraryNodeRemove = todo;
+		console.warn('not implemented');
+		ack && ack();
+	};
+	let libraryNodePull = libraryNodePush = libraryNodeRemove = todo;
 
-export default {
+	export default {
-  components: {
+	  components: {
-		...propertyFormIndex,
+			...propertyFormIndex,
-    DialogBase,
+			PropertyIcon,
-  },
+	    DialogBase,
-	props: {
+	  },
-		_id: String,
+		props: {
-	},
+			_id: String,
-	meteor: {
-		model(){
-			return LibrarNodes.findOne(this._id);
 		},
-	},
+		meteor: {
-	methods: {
+			model(){
-		change({path, value, ack}){
+				return LibraryNodes.findOne(this._id);
-      libraryNodeSet({_id: this._id, path, value}, e => ack(e));
+			},
 		},
-    push({path, value, ack}){
+		methods: {
-			libraryNodePush({_id: this._id, path}, e => ack(e));
+			getPropertyName,
-    },
+			change({path, value, ack}){
-    pull({path, ack}){
+	      updateLibraryNode.call({_id: this._id, path, value, ack});
-			libraryNodePull({_id: this._id, path}, e => ack(e));
+			},
-    },
+	    push({path, value, ack}){
-		remove(){
+				libraryNodePush({_id: this._id, path}, e => ack(e));
-			libraryNodeRemove({_id: this._id});
+	    },
-		},
+	    pull({path, ack}){
-	}
+				libraryNodePull({_id: this._id, path}, e => ack(e));
-};
+	    },
+			remove(){
+				libraryNodeRemove({_id: this._id});
+			},
+		}
+	};
 </script>
 
 <style lang="css" scoped>

app/imports/ui/pages/Library.vue

@@ -7,7 +7,7 @@
 			{{library && library.name || 'Library'}}
 			<v-spacer/>
 		</template>
-		<v-card class="ma-4 layout row">
+		<v-card class="ma-4 layout row" data-id="library-card">
 			<div>
 				<v-toolbar dense flat>
 					<v-spacer/>
@@ -19,21 +19,21 @@
 					/>
 				</v-toolbar>
 				<library-contents-container
-				:library-id="$route.params.id"
+					:library-id="$route.params.id"
-				:organize="organize"
+					:organize="organize"
-				@selected="e => selected = e"
+					@selected="e => selected = e"
-				:selected-node-id="selected"
+					:selected-node-id="selected"
 				/>
 			</div>
 			<v-divider vertical/>
-			<div style="width: 100%;">
+			<div style="width: 100%; background-color: inherit;" data-id="selected-node-card">
 				<v-toolbar dense flat>
 					<property-icon :type="selectedNode && selectedNode.type" class="mr-2"/>
 					<div class="title">
 						{{getPropertyName(selectedNode && selectedNode.type)}}
 					</div>
 					<v-spacer/>
-					<v-btn flat icon>
+					<v-btn flat icon @click="editLibraryNode" v-if="selectedNode">
 						<v-icon>create</v-icon>
 					</v-btn>
 				</v-toolbar>
@@ -84,12 +84,19 @@
 						libraryNode.parent = {collection: "libraries", id: that.library._id};
 						libraryNode.ancestors = [ {collection: "libraries", id: that.library._id}];
 						setDocToLastOrder({collection: LibraryNodes, doc: libraryNode});
-						console.log(libraryNode);
 						let libraryNodeId = insertNode.call(libraryNode);
 						return libraryNodeId;
 					}
 				});
 			},
+			editLibraryNode(){
+				let that = this;
+				this.$store.commit('pushDialogStack', {
+					component: 'library-node-edit-dialog',
+					elementId: 'selected-node-card',
+					data: {_id: this.selected},
+				});
+			},
 			getPropertyName,
 		},
 		meteor: {

app/imports/ui/properties/attributes/AttributeDialog.vue

@@ -35,7 +35,7 @@
 
 <script>
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
-	import EffectChildList from '/imports/ui/properties/effects/EffectChildList.vue';
+	import EffectChildList from '/imports/ui/properties/viewers/shared/effects/EffectChildList.vue';
 	import AttributeForm from '/imports/ui/properties/forms/AttributeForm.vue';
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 

app/imports/ui/properties/skills/SkillDialog.vue

@@ -27,7 +27,7 @@
 </template>
 
 <script>
-	import EffectChildList from '/imports/ui/properties/effects/EffectChildList.vue';
+	import EffectChildList from '/imports/ui/properties/viewers/shared/effects/EffectChildList.vue';
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
 	import SkillEdit from '/imports/ui/properties/skills/SkillEdit.vue';
 	import SkillProficiencyList from '/imports/ui/properties/skills/SkillProficiencyList.vue';

app/imports/ui/properties/viewers/AttributeViewer.vue

@@ -11,24 +11,21 @@
 		<div v-if="model.mod !== undefined">
 			{{numberToSignedString(model.mod)}}
 		</div>
-		<div class="title">
+		<h1 class="display-1">
 			{{model.name}}
-		</div>
+		</h1>
-		<div>
+		<p class="my-2">
 			<code>{{model.variableName}}</code>
-		</div>
+		</p>
-		<div>
+		<p v-if="reset">
-			{{model.attributeType}}
-		</div>
-		<div>
-			Base value: {{model.baseValue}}
-		</div>
-		<div v-if="reset">
 			{{reset}}
-		</div>
+		</p>
-		<div v-if="model.resetMultiplier">
+		<effect-list-tile
-			Reset multiplier: {{model.resetMultiplier}}
+			class="mb-3"
-		</div>
+			operation="base"
+			:result="model.baseValue"
+			:name="model.attributeType"
+		/>
 		<p v-if="model.description">
 			{{model.description}}
 		</p>
@@ -37,8 +34,12 @@
 
 <script>
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+	import EffectListTile from '/imports/ui/properties/viewers/shared/effects/EffectListTile.vue';
 
 	export default {
+		components: {
+			EffectListTile,
+		},
 		props: {
 			model: Object,
 			required: true,
@@ -50,9 +51,13 @@
 			reset(){
 				let reset = this.model.reset
 				if (reset === 'shortRest'){
-					return 'Reset on a short rest';
+					return `Reset${
+						this.model.resetMultiplier && ' x' + this.model.resetMultiplier
+					} on a short rest`;
 				} else if (reset === 'longRest'){
-					return 'Reset on a long rest';
+					return `Reset${
+						this.model.resetMultiplier && ' x' + this.model.resetMultiplier
+					} on a long rest`;
 				}
 			}
 		}

app/imports/ui/properties/viewers/shared/effects/EffectChildList.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-	import EffectListTile from '/imports/ui/properties/effects/EffectListTile.vue';
+	import EffectListTile from '/imports/ui/properties/viewers/shared/effects/EffectListTile.vue';
 	import sortEffects from '/imports/ui/utility/sortEffects.js';
 
 	export default {

app/imports/ui/properties/viewers/shared/effects/EffectEditExpansionList.Story.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import EffectEditExpansionList from '/imports/ui/properties/effects/EffectEditExpansionList.vue';
+import EffectEditExpansionList from '/imports/ui/properties/viewers/shared/effects/EffectEditExpansionList.vue';
 export default {
 	data(){ return {
 		effects: [

app/imports/ui/properties/viewers/shared/effects/EffectEditExpansionList.vue

@@ -25,7 +25,7 @@
 
 <script>
 	import EffectForm from '/imports/ui/properties/forms/EffectForm.vue';
-	import EffectListTile from '/imports/ui/properties/effects/EffectListTile.vue';
+	import EffectListTile from '/imports/ui/properties/viewers/shared/effects/EffectListTile.vue';
 	export default {
 		props: {
 			effects: Array,