Merge branch 'version-2' of https://github.com/ThaumRystra/DiceCloud1 into version-2

app/imports/ui/components/AttributeEdit.Story.vue

@@ -4,7 +4,7 @@
 			v-for="(attribute, index) in attributes"
 			:key="attribute._id"
 			:attribute="attribute"
-			@change="e => {writeChange(e, index); log(e)}"
+			@change="e => change(index, e)"
 		/>
 		<div class="ma-4" v-for="(attribute, index) in attributes">
 			{{attribute}}
@@ -38,16 +38,10 @@
 				},
 			],
 		}},
-		created () {
-			// Doing this here instead of in methods ensures every instance has its
-			// own debounced function
-		  this.writeChange = debounceUpdate((e, index) => {
-				// Do work storing the change, this is where we'd write to the database
+		methods: {
+			change(index, e){
 				for (let i in e){
-					if (typeof e[i] === 'string'){
-						e[i] = e[i].trim();
-					}
-					this.attributes[index][i] = e[i];
+					this.attributes[index][i] = e[i].trim();
 				}
 			});
 		},

app/imports/ui/components/AttributeEdit.vue

@@ -1,24 +1,24 @@
 <template lang="html">
   <div>
-  	<v-text-field
+  	<text-field
 			label="Name"
 			:value="attribute.name"
 			@input="name => $emit('change', {name})"
 		/>
-		<v-text-field
+		<text-field
 			label="Variable name"
 			:value="attribute.variableName"
 			@input="variableName => $emit('change', {variableName})"
 			hint="Use this name in formulae to reference this attribute"
 		/>
-		<v-text-field
+		<text-field
 			label="Base Value"
 			type="number"
 			:value="attribute.baseValue"
 			@input="baseValue => $emit('change', {baseValue})"
 			hint="This is the value of the attribute before effects are applied"
 		/>
-		<v-text-field
+		<text-field
 			label="Damage"
 			type="number"
 			:value="-attribute.adjustment"
@@ -47,7 +47,7 @@
 			:menu-props="{auto: true, lazy: true}"
 			@input="reset => $emit('change', {reset})"
 		/>
-		<v-text-field
+		<text-field
 			label="Reset Multiplier"
 			type="number"
 			:value="attribute.resetMultiplier"

app/imports/ui/components/global/TextField.vue

@@ -0,0 +1,75 @@
+<template lang="html">
+  <v-text-field
+		:error="error"
+		:value="safeValue"
+		@input="input"
+		@focus="focused = true"
+		@blur="focused = false"
+	/>
+</template>
+
+<script>
+	/*
+	 * Component to handle text fields that update the database.
+	 * Won't bash the text field while it's focused, even if the database trims
+	 * or otherwise sanitizes the input.
+	 * Emits input events on every input and emits debounced change
+	 * events based on the debounceTime set in its props.
+	 * Losing focus will set the value to the database's current stored value.
+	 *
+	 * Because attributes that aren't properties are passed to the root element,
+	 * this is a drop-in replacement for v-text-field
+	 *
+	 * TODO extract this functionality as a mixin, and share to textarea
+	 */
+	import { _ } from 'underscore';
+	export default {
+		data(){ return {
+			safeValue: this.value,
+			focused: false,
+			error: false,
+			errorMessages: null,
+		}},
+		props: {
+			value: [String, Number],
+			debounceTime: {
+				type: Number,
+				default: 250,
+			},
+			validator: Function,
+		},
+		watch: {
+			focused(isFocused){
+				if (!isFocused){
+					this.safeValue = this.value;
+				}
+			},
+			value(newValue){
+				if (!this.focused){
+					this.safeValue = this.value;
+				}
+			},
+		},
+		methods: {
+			input(val){
+				this.$emit('input', val);
+				this.update(val);
+				if (this.validator){
+					try {
+						this.validator(val);
+						this.error = false;
+						this.errorMessages = null;
+					} catch(e){
+						this.error = true;
+						this.errorMessages = e.message;
+					}
+				}
+			},
+		},
+		created(){
+			this.update = _.debounce(val => {
+				this.$emit('change', val);
+			}, this.debounceTime);
+		},
+	};
+</script>