Add functionality for event handler from any field, it define the follow global events: (#472)

- Action Performed: used for all **change** event
- Focus Gained: used for focus gained on field
- Focus Lost: used for focus lost on field
- Key Pressed: like to keydown
- Key Released: like keyup

For field events:
- notifyActionPerformed: when a value is changed
- notifyKeyPressed: when a key is press
- notifyKeyReleased: when a key is released
- notifyFocusGained: when a focus is gained in component
- notifyFocusLost: when a focus is lost from component
For Actions:
- notifyRunAction: used when a action is applied
Getters:
- getFieldEventList: get field event list from container UUID
- getActionEventList: get action event list from container UUID

src/components/ADempiere/Field/FieldDate.vue

@@ -15,6 +15,10 @@
     :disabled="isDisabled"
     :picker-options="pickerOptions"
     @change="preHandleChange"
+    @blur="focusLost"
+    @focus="focusGained"
+    @keydown.native="keyPressed"
+    @keyup.native="keyReleased"
   />
 </template>
 

src/components/ADempiere/Field/FieldMixin.js

@@ -22,19 +22,6 @@ export const fieldMixin = {
     }
   },
   computed: {
-    /*
-    getterValue() {
-      const field = this.$store.getters.getFieldFromColumnName({
-        containerUuid: this.metadata.containerUuid,
-        columnName: this.metadata.columnName,
-        isAdvancedQuery: this.metadata.isAdvancedQuery
-      })
-      if (field) {
-        return field.value
-      }
-      return undefined
-    },
-    */
     isDisabled() {
       return Boolean(this.metadata.readonly || this.metadata.disabled)
     }
@@ -61,6 +48,36 @@ export const fieldMixin = {
     preHandleChange(value) {
       this.handleChange(value)
     },
+    focusGained(value) {
+      this.$store.dispatch('notifyFocusGained', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName,
+        value: this.value
+      })
+    },
+    focusLost(value) {
+      this.$store.dispatch('notifyFocusLost', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName,
+        value: this.value
+      })
+    },
+    keyPressed(value) {
+      this.$store.dispatch('notifyKeyPressed', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName,
+        value: value.key,
+        keyCode: value.keyCode
+      })
+    },
+    keyReleased(value) {
+      this.$store.dispatch('notifyKeyReleased', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName,
+        value: value.key,
+        keyCode: value.keyCode
+      })
+    },
     /**
      * @param {mixed} value, main value in component
      * @param {mixed} valueTo, used in end value in range
@@ -97,7 +114,12 @@ export const fieldMixin = {
         isSendCallout,
         isChangedOldValue
       }
-
+      // Global Action performed
+      this.$store.dispatch('notifyActionPerformed', {
+        containerUuid: this.metadata.containerUuid,
+        columnName: this.metadata.columnName,
+        value: newValue
+      })
       if (this.metadata.inTable) {
         this.$store.dispatch('notifyCellTableChange', {
           ...sendParameters,

src/components/ADempiere/Field/FieldNumber.vue

@@ -12,9 +12,10 @@
       controls-position="right"
       :class="'display-type-amount ' + metadata.cssClassName"
       @change="preHandleChange"
-      @blur="changeValue"
-      @keydown.native="calculateValue"
-      @keyup.enter.native="changeValue"
+      @blur="focusLost"
+      @focus="focusGained"
+      @keydown.native="keyPressed"
+      @keyup.native="keyReleased"
     />
   </el-tooltip>
 </template>

src/components/ADempiere/Field/FieldText.vue

@@ -13,6 +13,10 @@
     :show-password="Boolean(metadata.isEncrypted)"
     :autofocus="metadata.inTable"
     @change="preHandleChange"
+    @blur="focusLost"
+    @focus="focusGained"
+    @keydown.native="keyPressed"
+    @keyup.native="keyReleased"
   />
 </template>
 

src/components/ADempiere/Field/FieldTime.vue

@@ -13,6 +13,10 @@
     :readonly="Boolean(metadata.readonly)"
     :disabled="isDisabled"
     @change="preHandleChange"
+    @blur="focusLost"
+    @focus="focusGained"
+    @keydown.native="keyPressed"
+    @keyup.native="keyReleased"
   />
 </template>
 

src/components/ADempiere/Field/FieldYesNo.vue

@@ -9,6 +9,8 @@
     :false-value="false"
     :disabled="isDisabled"
     @change="preHandleChange"
+    @blur="focusLost"
+    @focus="focusGained"
   />
 </template>
 

src/store/modules/ADempiere/event.js

@@ -0,0 +1,103 @@
+// This store is used for catch all fieldEvents related to fieldEvents, note that the unique search based
+// on columnName and containerUuid. All fieldEvents for fieldEvents (when apply for dispatch fieldEvents) are logged here
+// and the used can implenment a suscription for get values from field.
+// Please use it for add custom behavios for fieldEvents on forms and other components customized from user
+
+// Note that it need a structure with mandatory values:
+// {
+//   containerUuid: Container UUID used as container of fields to listen,
+//   columnName: Column Name or unique value, it is a index with container,
+//   value: new value for event,
+//   keyCode: optional for key events
+// }
+//  Generic Action
+export const ACTION_PERFORMED = 1
+export const FOCUS_GAINED = 2
+export const FOCUS_LOST = 3
+// Input actions
+export const KEY_PRESSED = 4
+export const KEY_RELEASED = 5
+const event = {
+  state: {
+    fieldEvents: [],
+    actionEvents: []
+  },
+  mutations: {
+    addChange(state, change) {
+      state.fieldEvents.push(change)
+    },
+    addAction(state, action) {
+      state.actionEvents.push(action)
+    },
+    resetStateLookup(state) {
+      state = {
+        fieldEvents: [],
+        actionEvents: []
+      }
+    }
+  },
+  actions: {
+    notifyActionPerformed({ commit }, event) {
+      commit('addChange', {
+        containerUuid: event.containerUuid,
+        columnName: event.columnName,
+        value: event.value,
+        eventType: ACTION_PERFORMED
+      })
+    },
+    notifyKeyPressed({ commit }, event) {
+      commit('addChange', {
+        containerUuid: event.containerUuid,
+        columnName: event.columnName,
+        value: event.value,
+        keyCode: event.keyCode,
+        eventType: KEY_PRESSED
+      })
+    },
+    notifyKeyReleased({ commit }, event) {
+      commit('addChange', {
+        containerUuid: event.containerUuid,
+        columnName: event.columnName,
+        value: event.value,
+        keyCode: event.keyCode,
+        eventType: KEY_RELEASED
+      })
+    },
+    notifyFocusGained({ commit }, event) {
+      commit('addChange', {
+        containerUuid: event.containerUuid,
+        columnName: event.columnName,
+        value: event.value,
+        eventType: FOCUS_GAINED
+      })
+    },
+    notifyFocusLost({ commit }, event) {
+      commit('addChange', {
+        containerUuid: event.containerUuid,
+        columnName: event.columnName,
+        value: event.value,
+        eventType: FOCUS_LOST
+      })
+    },
+    notifyRunAction({ commit }, action) {
+      commit('addAction', {
+        containerUuid: action.containerUuid,
+        action: action.action,
+        paremeters: action.parameters
+      })
+    }
+  },
+  getters: {
+    getFieldEventList: (state) => (containerUuid) => {
+      return state.fieldEvents.find(event => {
+        return event.containerUuid === containerUuid
+      })
+    },
+    getActionEventList: (state) => (containerUuid) => {
+      return state.actionEvents.find(action => {
+        return action.containerUuid === containerUuid
+      })
+    }
+  }
+}
+export default event

src/store/modules/ADempiere/panel.js

@@ -552,10 +552,18 @@ const panel = {
      * @param {array}   withOutColumnNames
      */
     notifyFieldChange({ commit, dispatch, getters }, {
-      parentUuid, containerUuid, panelType = 'window', isAdvancedQuery = false,
-      columnName, newValue, valueTo, displayColumn,
-      isSendToServer = true, isSendCallout = true,
-      isChangedOldValue = false, withOutColumnNames = [],
+      parentUuid,
+      containerUuid,
+      panelType = 'window',
+      isAdvancedQuery = false,
+      columnName,
+      newValue,
+      valueTo,
+      displayColumn,
+      isSendToServer = true,
+      isSendCallout = true,
+      isChangedOldValue = false,
+      withOutColumnNames = [],
       isChangeMultipleFields = false
     }) {
       return new Promise(async resolve => {