Added attribute insertion UI and API

app/imports/ui/components/AttributeCreationDialog.vue

@@ -0,0 +1,86 @@
+<template lang="html">
+	<dialog-base>
+		<div slot="toolbar">
+			New Attribute
+		</div>
+		<attribute-edit
+			:attribute="attribute"
+			:errors="errors"
+			@change="change"
+			:debounce-time="0"
+		/>
+		<div slot="actions">
+			<v-spacer/>
+			<v-btn
+				flat
+				:disabled="!valid"
+				@click="$store.dispatch('popDialogStack', attribute)"
+			>
+				Insert Attribute
+			</v-btn>
+		</div>
+	</dialog-base>
+</template>
+
+<script>
+	import AttributeEdit from '/imports/ui/components/AttributeEdit.vue';
+	import Attributes from '/imports/api/creature/properties/Attributes.js';
+	import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
+	import { Tracker } from 'meteor/tracker';
+
+	export default {
+		components: {
+			AttributeEdit,
+			DialogBase,
+		},
+		data(){ return {
+			attribute: {
+				name: 'New Attribute',
+				variableName: 'newAttribute',
+				type: 'stat',
+				baseValue: null,
+				adjustment: null,
+				decimal: null,
+				reset: null,
+				color: '#9E9E9E',
+			},
+			valid: true,
+		}},
+		methods: {
+			change(update, ack){
+				for (key in update){
+					this.attribute[key] = update[key];
+					if (key === 'name' && update[key]){
+						const name = update[key];
+						this.attribute.variableName = name.toLowerCase().replace(
+							/\W+(\w?)/g, (match, p1) => p1.toUpperCase()
+						);
+					}
+				}
+				if (ack) ack();
+			},
+		},
+		created(){
+			this.validationContext = Attributes.simpleSchema().newContext();
+		},
+		computed: {
+			errors(){
+				this.valid = true;
+				let cleanAtt = this.validationContext.clean(this.attribute)
+				this.validationContext.validate(cleanAtt, {keys: [
+					'name', 'variableName', 'type', 'baseValue', 'adjustment', 'decimal',
+					'reset', 'color'
+				]});
+				let errors = {};
+				this.validationContext.validationErrors().forEach(error => {
+					if (this.valid) this.valid = false;
+					errors[error.name] = Attributes.simpleSchema().messageForError(error);
+				});
+				return errors;
+			},
+		},
+	};
+</script>
+
+<style lang="css" scoped>
+</style>

app/imports/ui/components/AttributeDialogContainer.vue

@@ -38,9 +38,14 @@
 		},
 		methods: {
 			clickedEffect(e){
-				console.log(e);
+				console.log({TODO: e});
 			},
 			change(update, ack){
+				if(update.name){
+					update.variableName = update.name.toLowerCase().replace(
+						/\W+(\w?)/g, (match, p1) => p1.toUpperCase()
+					);
+				}
 				updateAttribute.call({_id: this._id, update}, error => {
 					ack(error);
 				});

app/imports/ui/components/AttributeEdit.vue

@@ -4,12 +4,16 @@
 			label="Name"
 			:value="attribute.name"
 			@change="(name, ack) => $emit('change', {name}, ack)"
+			:error-messages="errors.name"
+			:debounce-time="debounceTime"
 		/>
 		<text-field
 			label="Variable name"
 			:value="attribute.variableName"
 			@change="(variableName, ack) => $emit('change', {variableName}, ack)"
 			hint="Use this name in formulae to reference this attribute"
+			:error-messages="errors.variableName"
+			:debounce-time="debounceTime"
 		/>
 		<text-field
 			label="Base Value"
@@ -17,23 +21,30 @@
 			:value="attribute.baseValue"
 			@change="(baseValue, ack) => $emit('change', {baseValue: +baseValue}, ack)"
 			hint="This is the value of the attribute before effects are applied"
+			:error-messages="errors.baseValue"
+			:debounce-time="debounceTime"
 		/>
 		<text-field
 			label="Damage"
 			type="number"
 			:value="-attribute.adjustment"
 			@change="(damage, ack) => $emit('change', {adjustment: -damage || null}, ack)"
+			:error-messages="errors.adjustment"
+			:debounce-time="debounceTime"
 		/>
 		<smart-select
 			label="Type"
 			:items="attributeTypes"
 			:value="attribute.type"
+			:error-messages="errors.type"
 			:menu-props="{auto: true, lazy: true}"
 			@change="(type, ack) => $emit('change', {type}, ack)"
+			:debounce-time="debounceTime"
 		/>
 		<v-switch
 			label="Allow decimal values"
 			:value="attribute.decimal"
+			:error-messages="errors.decimal"
 			@change="e => $emit('change', {decimal: !!e})"
 		/>
 		<smart-select
@@ -42,15 +53,19 @@
 			clearable
 			:items="resetOptions"
 			:value="attribute.reset"
+			:error-messages="errors.reset"
 			:menu-props="{auto: true, lazy: true}"
 			@change="(reset, ack) => $emit('change', {reset}, ack)"
+			:debounce-time="debounceTime"
 		/>
 		<text-field
 			label="Reset Multiplier"
 			type="number"
 			:value="attribute.resetMultiplier"
+			:error-messages="errors.resetMultiplier"
 			@change="(resetMultiplier, ack) => $emit('change', {resetMultiplier: +resetMultiplier}, ack)"
 			hint="Some attributes, like hit dice, only reset by half their total on a long rest"
+			:debounce-time="debounceTime"
 		/>
   </div>
 </template>
@@ -60,8 +75,13 @@
 		props: {
 			attribute: {
 				type: Object,
-				default: {},
+				default: () => ({}),
 			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
+			debounceTime: Number,
 		},
 		data(){ return{
 			attributeTypes: [