bugfix send values to server from calculator (#380)

* bugfix send values to server from calculator

* bugfix send values to field

* bug fix in allowed values

* support disabled to calculator

* change method of comparing regular expression

* bugfix calculate value from new record

* some bugfix

* bugfix values

* changes for values

Co-authored-by: elsiosanchez <elsiosanches@gmail.com>
Co-authored-by: erp <erp@erp.erp>

src/components/ADempiere/Field/FieldNumber.vue

@@ -38,7 +38,7 @@ export default {
       value: value,
       showControls: true,
       operation: '',
-      expression: /[^\d\/.()%\*\+\-]/gim,
+      expression: /[\d\/.()%\*\+\-]/gim,
       valueToDisplay: '',
       isShowed: false
     }
@@ -90,6 +90,8 @@ export default {
       return Number(value)
     },
     calculateValue(event) {
+      const isAllowed = event.key.match(this.expression)
+      if (isAllowed) {
         const result = this.calculationValue(this.value, event)
         if (!this.isEmptyValue(result)) {
           this.valueToDisplay = result
@@ -98,23 +100,45 @@ export default {
           this.valueToDisplay = '...'
           this.isShowed = true
         }
+      } else if (!isAllowed && event.key === 'Backspace') {
+        if (String(this.value).slice(0, -1) > 0) {
+          event.preventDefault()
+          const newValue = String(this.value).slice(0, -1)
+          const result = this.calculationValue(newValue, event)
+          if (!this.isEmptyValue(result)) {
+            this.value = this.validateValue(result)
+            this.valueToDisplay = result
+            this.isShowed = true
+          } else {
+            this.valueToDisplay = '...'
+            this.isShowed = true
+          }
+        }
+      } else if (!isAllowed && event.key === 'Delete') {
+        if (String(this.value).slice(-1) > 0) {
+          event.preventDefault()
+          const newValue = String(this.value).slice(-1)
+          const result = this.calculationValue(newValue, event)
+          if (!this.isEmptyValue(result)) {
+            this.value = this.validateValue(result)
+            this.valueToDisplay = result
+            this.isShowed = true
+          } else {
+            this.valueToDisplay = '...'
+            this.isShowed = true
+          }
+        }
+      } else {
+        event.preventDefault()
+      }
     },
     changeValue() {
+      if (!this.isEmptyValue(this.valueToDisplay) && this.valueToDisplay !== '...') {
         const result = this.validateValue(this.valueToDisplay)
-      this.$store.dispatch('notifyFieldChange', {
+        this.preHandleChange(result)
-        isAdvancedQuery: this.metadata.isAdvancedQuery,
+      }
-        panelType: this.metadata.panelType,
-        parentUuid: this.metadata.parentUuid,
-        containerUuid: this.metadata.containerUuid,
-        columnName: this.metadata.columnName,
-        newValue: result,
-        field: this.metadata,
-        isChangedOldValue: true
-      })
-        .finally(() => {
       this.clearVariables()
       this.isShowed = false
-        })
     }
   }
 }

src/components/ADempiere/Field/index.vue

@@ -44,7 +44,7 @@
           :record-uuid="field.recordUuid"
         />
         <calculator
-          v-if="!isAdvancedQuery && isNumeric"
+          v-if="!isAdvancedQuery && isNumeric && !field.isReadOnlyFromLogic"
           :field-attributes="fieldAttributes"
           :field-value="field.value"
         />

src/components/ADempiere/Field/popover/calculator.vue

@@ -1,10 +1,11 @@
 <template>
   <el-dropdown trigger="click">
-    <el-button type="text">
+    <el-button type="text" :disabled="fieldAttributes.readonly" @click="focusCalc">
       <i class="el-icon-s-operation el-icon--right" />
     </el-button>
     <el-dropdown-menu slot="dropdown" class="dropdown-calc">
       <el-input
+        ref="calculatorInput"
         v-model="calcValue"
         v-shortkey="['enter']"
         class="calc-input"
@@ -119,15 +120,15 @@ export default {
       }, {
         row1: {
           type: 'value',
-          value: 7
+          value: '7'
         },
         row2: {
           type: 'value',
-          value: 8
+          value: '8'
         },
         row3: {
           type: 'value',
-          value: 9
+          value: '9'
         },
         row4: {
           type: 'operator',
@@ -140,15 +141,15 @@ export default {
       }, {
         row1: {
           type: 'value',
-          value: 4
+          value: '4'
         },
         row2: {
           type: 'value',
-          value: 5
+          value: '5'
         },
         row3: {
           type: 'value',
-          value: 7
+          value: '7'
         },
         row4: {
           type: 'operator',
@@ -161,15 +162,15 @@ export default {
       }, {
         row1: {
           type: 'value',
-          value: 1
+          value: '1'
         },
         row2: {
           type: 'value',
-          value: 2
+          value: '2'
         },
         row3: {
           type: 'value',
-          value: 3
+          value: '3'
         },
         row4: {
           type: 'result',
@@ -182,7 +183,7 @@ export default {
       }, {
         row1: {
           type: 'value',
-          value: 0
+          value: '0'
         },
         row2: {
           type: 'operator',
@@ -212,13 +213,20 @@ export default {
     sendValue(row, column) {
       const isAcceptedType = ['result', 'clear'].includes(row[column.property].type)
       if (!isAcceptedType && !this.isDisabled(row, column)) {
-        this.calcValue += row[column.property].value
+        this.isEmptyValue(this.calcValue) ? this.calcValue = row[column.property].value : this.calcValue += row[column.property].value
+        const result = this.calculationValue(this.calcValue, event)
+        if (!this.isEmptyValue(result)) {
+          this.valueToDisplay = result
+        } else {
+          this.valueToDisplay = '...'
+        }
       }
       if (row[column.property].type === 'clear') {
         if (row[column.property].value === 'C') {
           this.calcValue = this.calcValue.slice(0, -1)
         } else if (row[column.property].value === 'AC') {
           this.calcValue = ''
+          this.valueToDisplay = ''
         }
       }
       if (row[column.property].value === '=') {
@@ -226,19 +234,32 @@ export default {
       }
     },
     changeValue() {
-      const result = Number(this.valueToDisplay)
+      const newValue = Number(this.valueToDisplay)
-      this.$store.dispatch('notifyFieldChange', {
+      let isSendCallout = true
-        isAdvancedQuery: this.fieldAttributes.isAdvancedQuery,
+      const isSendToServer = true
-        panelType: this.fieldAttributes.panelType,
+      const isChangedOldValue = false
+      if (this.fieldAttributes.isAdvancedQuery) {
+        isSendCallout = false
+      }
+
+      const sendParameters = {
         parentUuid: this.fieldAttributes.parentUuid,
         containerUuid: this.fieldAttributes.containerUuid,
-        columnName: this.fieldAttributes.columnName,
-        newValue: result,
         field: this.fieldAttributes,
-        isChangedOldValue: true
+        panelType: this.fieldAttributes.panelType,
+        columnName: this.fieldAttributes.columnName,
+        newValue,
+        isAdvancedQuery: this.fieldAttributes.isAdvancedQuery,
+        isSendToServer,
+        isSendCallout,
+        isChangedOldValue
+      }
+      this.$store.dispatch('notifyFieldChange', {
+        ...sendParameters
       })
         .finally(() => {
           this.clearVariables()
+          this.$children[0].visible = false
         })
     },
     spanMethod({ row, column, rowIndex, columnIndex }) {
@@ -264,7 +285,7 @@ export default {
           }
         }
       } else if (rowIndex === 4) {
-        if (row[column.property].value === 0) {
+        if (row[column.property].value === '0') {
           return {
             rowspan: 1,
             colspan: 2
@@ -292,6 +313,9 @@ export default {
       } else {
         this.valueToDisplay = '...'
       }
+    },
+    focusCalc() {
+      this.$refs.calculatorInput.focus()
     }
   }
 }

src/utils/ADempiere/valueUtils.js

@@ -388,10 +388,12 @@ export function tagStatus(tag) {
 
 let partialValue = ''
 export function calculationValue(value, event) {
-  const VALIDATE_EXPRESSION = /[^\d\/.()%\*\+\-]/gim
+  const isZero = Number(value) === 0
-  if (!this.isEmptyValue(event) && !VALIDATE_EXPRESSION.test(event.key)) {
+  const VALIDATE_EXPRESSION = /[\d\/.()%\*\+\-]/gim
+  const isValidKey = VALIDATE_EXPRESSION.test(event.key)
+  if (event.type === 'keydown' && isValidKey) {
     partialValue += event.key
-    const operation = String(value) + partialValue
+    const operation = isEmptyValue(value) || isZero ? partialValue : String(value) + partialValue
     if (!isEmptyValue(operation)) {
       try {
         // eslint-disable-next-line no-eval
@@ -400,9 +402,23 @@ export function calculationValue(value, event) {
         return null
       }
     }
+  } else if (event.type === 'click') {
+    if (!isEmptyValue(value)) {
+      try {
+        // eslint-disable-next-line no-eval
+        return eval(value) + ''
+      } catch (error) {
+        return null
+      }
+    }
   } else {
-    if (value.key === 'Backspace') {
+    if ((event.key === 'Backspace' || event.key === 'Delete') && !isEmptyValue(value)) {
-      partialValue = partialValue.slice(0, -1)
+      try {
+        // eslint-disable-next-line no-eval
+        return eval(value) + ''
+      } catch (error) {
+        return null
+      }
     } else {
       return null
     }