Improved effect form and view

app/imports/ui/creature/character/characterSheetTabs/StatsTab.vue

@@ -15,7 +15,7 @@
 							<ability-list-tile
 								v-bind="ability"
 								:key="ability._id"
-								:data-id="ability._id"
+								:data-id="`ability-list-tile-${ability._id}`"
 								@click="clickAttribute({_id: ability._id})"
 							/>
 						</template>
@@ -123,17 +123,7 @@
 					</v-list>
 				</v-card>
 			</div>
-
 		</column-layout>
-
-		<v-btn fixed fab bottom right
-			color="primary"
-			@click="insertAttribute"
-			data-id="insert-attribute-fab"
-		>
-			<v-icon>add</v-icon>
-		</v-btn>
-
 	</div>
 </template>
 
@@ -156,6 +146,7 @@
 			'ancestor.id': charId,
 			type: 'attribute',
 			attributeType: type,
+			removed: {$ne: true},
 		}, {
 			sort: {order: 1}
 		});
@@ -166,7 +157,8 @@
 			'ancestor.id': charId,
 			type: 'attribute',
 			attributeType: type,
-			value: {$ne: 0}
+			value: {$ne: 0},
+			removed: {$ne: true},
 		}, {
 			sort: {order: 1}
 		});
@@ -260,14 +252,14 @@
 		methods: {
 			clickAttribute({_id}){
 				this.$store.commit('pushDialogStack', {
-					component: 'attribute-dialog-container',
-					elementId: _id,
+					component: 'creature-property-dialog',
+					elementId: `ability-list-tile-${_id}`,
 					data: {_id},
 				});
 			},
 			clickSkill({_id}){
 				this.$store.commit('pushDialogStack', {
-					component: 'skill-dialog-container',
+					component: 'creature-property-dialog',
 					elementId: _id,
 					data: {_id},
 				});

app/imports/ui/properties/forms/EffectForm.vue

@@ -1,44 +1,58 @@
 <template lang="html">
-	<div class="layout row wrap justify-start effect-form">
-		<smart-select
-			label="Operation"
-			append-icon="arrow_drop_down"
-			class="mx-2"
-			:menu-props="{transition: 'slide-y-transition', lazy: true}"
-			:items="operations"
-			:value="model.operation"
-			@change="(value, ack) => $emit('change', {path: ['operation'], value, ack})"
-		>
-			<v-icon
-				class="icon"
-				slot="prepend"
-				:class="iconClass"
-			>{{displayedIcon}}</v-icon>
-			<template slot="item" slot-scope="item">
+	<div class="effect-form">
+		<text-field
+			label="Name"
+			:value="model.name"
+			@change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
+			:error-messages="errors.name"
+			:debounce-time="debounceTime"
+		/>
+		<div class="layout row wrap justify-start">
+			<smart-select
+				label="Operation"
+				append-icon="arrow_drop_down"
+				class="mx-2"
+				:error-messages="errors.operation"
+				:menu-props="{transition: 'slide-y-transition', lazy: true}"
+				:items="operations"
+				:value="model.operation"
+				@change="(value, ack) => $emit('change', {path: ['operation'], value, ack})"
+			>
 				<v-icon
-					class="icon mr-2"
-				>{{getEffectIcon(item.item.value, 1)}}</v-icon>
-				{{item.item.text}}
-			</template>
-		</smart-select>
+					class="icon"
+					slot="prepend"
+					:class="iconClass"
+				>{{displayedIcon}}</v-icon>
+				<template slot="item" slot-scope="item">
+					<v-icon
+						class="icon mr-2"
+					>{{getEffectIcon(item.item.value, 1)}}</v-icon>
+					{{item.item.text}}
+				</template>
+			</smart-select>
 
-		<text-field
-			label="Value"
-			class="mr-2"
-			:persistent-hint="needsValue"
-			:value="needsValue ? (model.calculation) : ' '"
-			:disabled="!needsValue"
-			:hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
-			@change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
-		/>
+			<text-field
+				label="Value"
+				class="mr-2"
+				:persistent-hint="needsValue"
+				:value="needsValue ? (model.calculation) : ' '"
+				:disabled="!needsValue"
+				:error-messages="errors.calculation"
+				:hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
+				:debounce-time="debounceTime"
+				@change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
+			/>
 
-		<text-field
-			label="Stat"
-			class="mr-2"
-			:value="model.stats[0]"
-			:items="stats"
-			@change="(value, ack) => $emit('change', {path: ['stats'], value: [value], ack})"
-		/>
+			<text-field
+				label="Stat"
+				class="mr-2"
+				:value="model.stats[0]"
+				:items="stats"
+				:error-messages="errors.stats"
+				:debounce-time="debounceTime"
+				@change="(value, ack) => $emit('change', {path: ['stats'], value: [value], ack})"
+			/>
+		</div>
 	</div>
 </template>
 
@@ -52,9 +66,14 @@
 				type: Object,
 				default: () => ({}),
 			},
+			errors: {
+				type: Object,
+				default: () => ({}),
+			},
 			stats: {
 				type: Array,
 			},
+			debounceTime: Number,
 		},
 		data(){ return {
 			displayedIcon: 'add',

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

@@ -1,13 +1,13 @@
 <template lang="html">
 	<div class="effect-viewer">
 		<property-name :value="model.name" v-if="model.name"/>
-		<div class="layout row center wrap">
-			<div class="headline mr-2 my-0" v-if="model.stat">
-				{{model.stat}}
+		<div class="layout row align-center wrap">
+			<div class="headline">
+				<code style="display: block;" class="my-1" v-for="stat in model.stats">{{stat}}</code>
 			</div>
 			<v-tooltip bottom>
 				<template v-slot:activator="{ on }">
-					<v-icon v-on="on" class="mr-2" style="cursor: default;">{{effectIcon}}</v-icon>
+					<v-icon v-on="on" class="mx-2" style="cursor: default;">{{effectIcon}}</v-icon>
 				</template>
 				<span>{{operation}}</span>
 			</v-tooltip>