Added calculation errors to attributes and toggles

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

@@ -11,6 +11,7 @@
         @change="change('baseValueCalculation', ...arguments)"
       />
     </div>
+    <calculation-error-list :errors="model.baseValueErrors" />
     <div class="layout row wrap">
       <text-field
         label="Name"
@@ -100,10 +101,12 @@
 <script>
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
 		components: {
 			FormSection,
+      CalculationErrorList,
 		},
     mixins: [propertyFormMixin],
 		data(){

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

@@ -56,26 +56,7 @@
       :hint="!isFinite(model.calculation) && model.result ? model.result + '' : '' "
       @change="change('calculation', ...arguments)"
     />
-    <div
-      v-if="model.errors && model.errors.length"
-      two-line
-    >
-      <v-slide-x-transition
-        group
-        leave-absolute
-      >
-        <v-alert
-          v-for="error in model.errors"
-          :key="error.message"
-          :value="true"
-          :icon="errorIcon(error.type)"
-          :color="errorColor(error.type)"
-          outline
-        >
-          {{ error.message }}
-        </v-alert>
-      </v-slide-x-transition>
-    </div>
+    <calculation-error-list :errors="model.errors" />
   </div>
 </template>
 
@@ -83,9 +64,13 @@
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
   import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	const ICON_SPIN_DURATION = 300;
 	export default {
+    components: {
+      CalculationErrorList,
+    },
     mixins: [propertyFormMixin, attributeListMixin],
 		data(){ return {
 			displayedIcon: 'add',
@@ -145,24 +130,6 @@
 			},
 		},
 		methods: {
-      errorIcon(type){
-        if (type === 'subsitution'){
-          return 'info';
-        } else if (type === 'evaluation'){
-          return 'warning';
-        } else {
-          return 'error'
-        }
-      },
-      errorColor(type){
-        if (type === 'subsitution'){
-          return 'info';
-        } else if (type === 'evaluation'){
-          return 'warning';
-        } else {
-          return 'error'
-        }
-      },
 			getEffectIcon,
 		}
 	};

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

@@ -37,13 +37,18 @@
         @change="change('condition', ...arguments)"
       />
     </v-fade-transition>
+    <calculation-error-list :errors="model.errors" />
   </div>
 </template>
 
 <script>
   import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+  import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 	export default {
+    components: {
+      CalculationErrorList,
+    },
     mixins: [propertyFormMixin],
     computed: {
       radioSelection(){

app/imports/ui/properties/forms/shared/CalculationErrorList.vue

@@ -0,0 +1,56 @@
+<template lang="html">
+  <div
+    v-if="errors && errors.length"
+    class="error-list"
+  >
+    <v-slide-x-transition
+      group
+      hide-on-leave
+    >
+      <v-alert
+        v-for="error in errors"
+        :key="error.message"
+        :value="true"
+        :icon="errorIcon(error.type)"
+        :color="errorColor(error.type)"
+        outline
+      >
+        {{ error.message }}
+      </v-alert>
+    </v-slide-x-transition>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    errors: {
+      type: Array,
+      default: undefined,
+    },
+  },
+  methods: {
+    errorIcon(type){
+      if (type === 'subsitution'){
+        return 'info';
+      } else if (type === 'evaluation'){
+        return 'warning';
+      } else {
+        return 'error'
+      }
+    },
+    errorColor(type){
+      if (type === 'subsitution'){
+        return 'info';
+      } else if (type === 'evaluation'){
+        return 'warning';
+      } else {
+        return 'error'
+      }
+    },
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>