From 59fc5ab8511871c9a4dd036b9e1569f3ee677b3d Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 22 Aug 2022 15:07:40 +0200
Subject: [PATCH] Continued work on point buy UI

---
 .../computeByType/computePointBuy.js           | 18 ++++++++++++++----
 app/imports/api/properties/PointBuys.js        |  5 +++--
 .../ui/properties/forms/PointBuyForm.vue       | 12 ++++++++++++
 .../ui/properties/forms/PointBuySpendForm.vue  | 13 +++++++++++++
 .../forms/shared/CalculationErrorList.vue      |  5 ++++-
 5 files changed, 46 insertions(+), 7 deletions(-)
 create mode 100644 app/imports/ui/properties/forms/PointBuySpendForm.vue

diff --git a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js b/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
index a1d4cbbd..a24794f3 100644
--- a/app/imports/api/engine/computation/computeComputation/computeByType/computePointBuy.js
+++ b/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',
+    });
   }
 }
diff --git a/app/imports/api/properties/PointBuys.js b/app/imports/api/properties/PointBuys.js
index 24950add..d5fe983c 100644
--- a/app/imports/api/properties/PointBuys.js
+++ b/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,
   },
 });
 
diff --git a/app/imports/ui/properties/forms/PointBuyForm.vue b/app/imports/ui/properties/forms/PointBuyForm.vue
index d7709a7d..3919f7e0 100644
--- a/app/imports/ui/properties/forms/PointBuyForm.vue
+++ b/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 {
diff --git a/app/imports/ui/properties/forms/PointBuySpendForm.vue b/app/imports/ui/properties/forms/PointBuySpendForm.vue
new file mode 100644
index 00000000..8f525450
--- /dev/null
+++ b/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>
diff --git a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue b/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
index 93b2df2d..a3f7d152 100644
--- a/app/imports/ui/properties/forms/shared/CalculationErrorList.vue
+++ b/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>