Continued work on point buy UI

app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js

@@ -22,11 +22,17 @@ export default function computePointBuy(computation, node) {
     // Check min and max
     if (min !== null && row.value < min) {
       row.errors = row.errors || [];
-      row.errors.push('Value smaller than min value');
+      row.errors.push({
+        type: 'pointBuyError',
+        message: 'Value smaller than min value'
+      });
     }
     if (max !== null && row.value > max) {
       row.errors = row.errors || [];
-      row.errors.push('Value larger than max value');
+      row.errors.push({
+        type: 'pointBuyError',
+        message: 'Value larger than max value'
+      });
     }
     // Evaluate the cost function
     if (!costFunction) return;
@@ -35,7 +41,8 @@ export default function computePointBuy(computation, node) {
     costFunction.errors?.forEach(error => {
       if (error?.message) {
         row.errors = row.errors || [];
-        row.errors.push(error.message);
+        error.message = 'Cost calculation error.\n' + error.message;
+        row.errors.push(error);
       }
     });
     if (Number.isFinite(costFunction.value)) {
@@ -45,6 +52,9 @@ export default function computePointBuy(computation, node) {
   });
   if (prop.spent > prop.total?.value) {
     prop.errors = prop.errors || [];
-    prop.errors.push('Spent more than total points available')
+    prop.errors.push({
+      type: 'pointBuyError',
+      message: 'Spent more than total points available',
+    });
   }
 }

app/imports/api/properties/PointBuys.js

@@ -2,6 +2,7 @@ import SimpleSchema from 'simpl-schema';
 import STORAGE_LIMITS from '/imports/constants/STORAGE_LIMITS.js';
 import VARIABLE_NAME_REGEX from '/imports/constants/VARIABLE_NAME_REGEX.js';
 import createPropertySchema from '/imports/api/properties/subSchemas/createPropertySchema.js';
+import ErrorSchema from '/imports/api/properties/subSchemas/ErrorSchema.js';
 
 /*
  * PointBuys are reason-value attached to skills and abilities
@@ -125,7 +126,7 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     removeBeforeCompute: true,
   },
   'values.$.errors.$': {
-    type: String,
+    type: ErrorSchema,
   },
   total: {
     type: 'computedOnlyField',
@@ -142,7 +143,7 @@ const ComputedOnlyPointBuySchema = createPropertySchema({
     removeBeforeCompute: true,
   },
   'errors.$': {
-    type: String,
+    type: ErrorSchema,
   },
 });
 

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

@@ -128,6 +128,14 @@
                 </template>
               </text-field>
             </v-col>
+            <v-col
+              v-if="row.errors && row.errors.length"
+              cols="12"
+            >
+              <calculation-error-list
+                :errors="row.errors"
+              />
+            </v-col>
           </v-row>
         </v-col>
         <v-col
@@ -181,8 +189,12 @@
 import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
 import { PointBuySchema } from '/imports/api/properties/PointBuys.js';
+import CalculationErrorList from '/imports/ui/properties/forms/shared/CalculationErrorList.vue';
 
 export default {
+  components: {
+    CalculationErrorList,
+  },
   mixins: [propertyFormMixin, attributeListMixin],
   data() {
     return {

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

@@ -0,0 +1,13 @@
+<template lang="html">
+  <div class="point-buy-spend-form">
+    <div />
+  </div>
+</template>
+
+<script lang="js">
+  import propertyFormMixin from '/imports/ui/properties/forms/shared/propertyFormMixin.js';
+
+	export default {
+    mixins: [propertyFormMixin],
+	};
+</script>

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

@@ -73,5 +73,8 @@ export default {
 }
 </script>
 
-<style lang="css" scoped>
+<style lang="css">
+.error-list .v-alert__content{
+  overflow-x: auto;
+}
 </style>