Added edit tab to base dialogs, added edit screen to attribute dialog

app/imports/ui/components/AttributeDialog.vue

@@ -3,27 +3,32 @@
     <div slot="toolbar">
       {{name}}
     </div>
-    <v-layout align-center column v-if="type === 'ability'">
-			<div class="display-3 mod">
-				{{numberToSignedString(mod)}}
+		<div>
+			<v-layout align-center column v-if="type === 'ability'">
+				<div class="display-3 mod">
+					{{numberToSignedString(mod)}}
+				</div>
+				<div class="display-1 ability-value">
+					{{value}}
+				</div>
+			</v-layout>
+			<div class="display-3 attribute-value" v-else-if="type === 'healthBar'">
+				{{value+adjustment}} / {{value}}
 			</div>
-			<div class="display-1 ability-value">
+			<div class="display-3 attribute-value" v-else-if="type === 'modifier'">
+				{{numberToSignedString(value)}}
+			</div>
+			<div class="display-3 attribute-value" v-else>
 				{{value}}
 			</div>
-		</v-layout>
-		<div class="display-3 attribute-value" v-else-if="type === 'healthBar'">
-			{{value+adjustment}} / {{value}}
+			<attribute-effect-list v-if="attribueBaseEffect" :effects="[attribueBaseEffect]"/>
+			<div v-if="effects && effects.length">
+				<h6 class="title">Effects</h6>
+				<attribute-effect-list :effects="effects" @click="clickedEffect"/>
+			</div>
 		</div>
-		<div class="display-3 attribute-value" v-else-if="type === 'modifier'">
-			{{numberToSignedString(value)}}
-		</div>
-		<div class="display-3 attribute-value" v-else>
-			{{value}}
-		</div>
-		<attribute-effect-list v-if="attribueBaseEffect" :effects="[attribueBaseEffect]"/>
-		<div v-if="effects && effects.length">
-			<h6 class="title">Effects</h6>
-			<attribute-effect-list :effects="effects" @click="clickedEffect"/>
+		<div slot="edit">
+			<attribute-edit :attribute="$props" @change="(update, ack) => $emit('change', update, ack)"/>
 		</div>
   </dialog-base>
 </template>
@@ -32,15 +37,24 @@
 	import store from "/imports/ui/vuexStore.js";
 	import DialogBase from "/imports/ui/dialogStack/DialogBase.vue";
 	import AttributeEffectList from '/imports/ui/components/AttributeEffectList.vue';
+	import AttributeEdit from '/imports/ui/components/AttributeEdit.vue';
 	import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
 
 	export default {
 		props: {
+			charId: String,
 			name: String,
+			variableName: String,
+			order: Number,
 			type: String,
+			baseValue: Number,
 			value: Number,
 			mod: Number,
-			baseValue: Number,
+			adjustment: Number,
+			decimal: Boolean,
+			reset: String,
+			resetMultiplier: Number,
+			color: String,
 			adjustment: {type: Number, default: 0},
 			effects: {type: Array, default: () => []},
 		},
@@ -66,6 +80,7 @@
 		components: {
 			DialogBase,
 			AttributeEffectList,
+			AttributeEdit,
 		},
 	};
 </script>

app/imports/ui/components/AttributeDialogContainer.vue

@@ -2,13 +2,14 @@
   <attribute-dialog
 		v-bind="attribute"
 		:effects="effects"
-		v-on="{clickedEffect}"
+		v-on="{clickedEffect, change}"
 	/>
 </template>
 
 <script>
 	import AttributeDialog from '/imports/ui/components/AttributeDialog.vue';
 	import Attributes from '/imports/api/creature/properties/Attributes.js';
+	import { updateAttribute, adjustAttribute } from '/imports/api/creature/properties/Attributes.js';
 	export default {
 		components: {
 			AttributeDialog,
@@ -36,7 +37,12 @@
 		methods: {
 			clickedEffect(e){
 				console.log(e);
-			}
+			},
+			change(update, ack){
+				updateAttribute.call({_id: this._id, update}, error => {
+					ack(error);
+				});
+			},
 		}
 	};
 </script>

app/imports/ui/components/AttributeEdit.vue

@@ -15,7 +15,7 @@
 			label="Base Value"
 			type="number"
 			:value="attribute.baseValue"
-			@change="(baseValue, ack) => $emit('change', {baseValue}, ack)"
+			@change="(baseValue, ack) => $emit('change', {baseValue: +baseValue}, ack)"
 			hint="This is the value of the attribute before effects are applied"
 		/>
 		<text-field
@@ -34,7 +34,7 @@
 		<v-switch
 			label="Allow decimal values"
 			:value="attribute.decimal"
-			@change="e => $emit('change', {decimal: e})"
+			@change="e => $emit('change', {decimal: !!e})"
 		/>
 		<smart-select
 			label="Reset"
@@ -49,7 +49,7 @@
 			label="Reset Multiplier"
 			type="number"
 			:value="attribute.resetMultiplier"
-			@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier}, ack)"
+			@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier: +resetMultiplier}, ack)"
 			hint="Some attributes, like hit dice, only reset by half their total on a long rest"
 		/>
   </div>