improved calculation fields

app/imports/api/engine/computation/buildComputation/parseCalculationFields.js

@@ -2,7 +2,7 @@ import INLINE_CALCULATION_REGEX from '/imports/constants/INLINE_CALCULTION_REGEX
 import { prettifyParseError, parse } from '/imports/parser/parser.js';
 import ErrorNode from '/imports/parser/parseTree/ErrorNode.js';
 import applyFnToKey from '/imports/api/engine/computation/utility/applyFnToKey.js';
-import { get } from 'lodash';
+import { get, unset } from 'lodash';
 
 export default function parseCalculationFields(prop, schemas){
   discoverInlineCalculationFields(prop, schemas);
@@ -50,6 +50,11 @@ function parseAllCalculationFields(prop, schemas){
       applyFnToKey(prop, calcKey, (prop, key) => {
         const calcObj = get(prop, key);
         if (!calcObj) return;
+        // If the calculation isn't set, delete the whole object
+        if (!calcObj.calculation){
+          unset(prop, key);
+          return;
+        }
         // Store a reference to all the calculations
         prop._computationDetails.calculations.push(calcObj);
         // Store the level to compute down to later
@@ -67,7 +72,10 @@ function parseCalculation(calcObj){
   try {
     calcObj._parsedCalculation = parse(calculation);
   } catch (e) {
-    let error = prettifyParseError(e);
+    let error = {
+      type: 'evaluation',
+      message: prettifyParseError(e),
+    };
     calcObj.errors ?
       calcObj.errors.push(error) :
       calcObj.errors = [error];

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

@@ -2,6 +2,7 @@
   <v-text-field
     ref="input"
     v-bind="$attrs"
+    class="dc-text-field"
     :loading="loading"
     :error-messages="errors"
     :value="safeValue"
@@ -11,7 +12,11 @@
     @focus="focused = true"
     @blur="focused = false"
     @keyup="e => $emit('keyup', e)"
-  />
+  >
+    <template #append>
+      <slot name="value" />
+    </template>
+  </v-text-field>
 </template>
 
 <script lang="js">
@@ -24,3 +29,10 @@
     },
   };
 </script>
+
+<style lang="css">
+.dc-text-field .v-input__append-inner{
+  font-size: 12px;
+  margin-top: 36px;
+}
+</style>

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

@@ -2,9 +2,17 @@
   <div class="computed-field">
     <text-field
       :value="model.calculation"
+      :rows="1"
       v-bind="$attrs"
       @change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
-    />
+    >
+      <template
+        v-if="model.value !== undefined || model.value !== null"
+        #value
+      >
+        {{ model.value }}
+      </template>
+    </text-field>
     <calculation-error-list :errors="model.errors" />
   </div>
 </template>
@@ -19,7 +27,7 @@ export default {
   props: {
     model: {
       type: Object,
-      default: () => {},
+      default: () => ({}),
     },
   },
 }