ref: Separate context info field in component. (#281)

src/components/ADempiere/Field/fieldContextInfo.vue

@@ -0,0 +1,111 @@
+<template>
+  <span>
+    <el-popover
+      v-if="(contextInfo && contextInfo.isActive) || reference.zoomWindowList.length"
+      ref="contextInfoField"
+      placement="top"
+      width="300"
+      trigger="click"
+    >
+      <p
+        class="pre-formatted"
+        v-html="contextInfo.messageText.msgText"
+      />
+      <div>
+        <span class="custom-tittle-popover">
+          {{ name }}
+        </span>
+        <template v-if="!isEmptyValue(help)">
+          : {{ help }}
+        </template>
+      </div>
+      <template v-for="(zoomItem, index) in reference.zoomWindowList">
+        <el-button
+          :key="index"
+          type="text"
+          @click="redirect({ window: zoomItem })"
+        >
+          {{ $t('table.ProcessActivity.zoomIn') }}
+          {{ zoomItem.name }}
+        </el-button>
+      </template>
+    </el-popover>
+    <span v-popover:contextInfoField>
+      {{ name }}
+    </span>
+  </span>
+</template>
+
+<script>
+import { showMessage } from '@/utils/ADempiere/notification'
+
+export default {
+  name: 'FieldContextInfo',
+  props: {
+    contextInfo: {
+      type: Object,
+      required: true
+    },
+    reference: {
+      type: Object,
+      required: true
+    },
+    columnName: {
+      type: String,
+      required: true
+    },
+    name: {
+      type: String,
+      default: undefined
+    },
+    help: {
+      type: String,
+      default: undefined
+    },
+    fieldValue: {
+      type: [Number, String, Boolean, Array, Object, Date],
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      value: this.fieldValue
+    }
+  },
+  computed: {
+    permissionRoutes() {
+      return this.$store.getters.permission_routes
+    }
+  },
+  watch: {
+    fieldValue(value) {
+      this.value = value
+    }
+  },
+  methods: {
+    showMessage,
+    redirect({ window }) {
+      this.$store.dispatch('getWindowByUuid', {
+        routes: this.permissionRoutes,
+        windowUuid: window.uuid
+      })
+      const windowRoute = this.$store.getters.getWindowRoute(window.uuid)
+      if (windowRoute) {
+        this.$router.push({
+          name: windowRoute.name,
+          query: {
+            action: 'advancedQuery',
+            tabParent: 0,
+            [this.columnName]: this.value
+          }
+        })
+      } else {
+        this.showMessage({
+          type: 'error',
+          message: this.$t('notifications.noRoleAccess')
+        })
+      }
+    }
+  }
+}
+</script>

src/components/ADempiere/Field/index.vue

@@ -1,4 +1,3 @@
-
 <template>
   <!--
     this v-show is to indicate that if the field is not shown,
@@ -15,43 +14,22 @@
     :xl="sizeFieldResponsive.xl"
     :class="classField"
   >
-    <!-- POPOVER FOR FIELD CONTEXT INFO -->
-    <el-popover
-      v-if="(field.contextInfo && field.contextInfo.isActive) || field.reference.zoomWindowList.length"
-      ref="contextOptions"
-      placement="top"
-      width="300"
-      trigger="click"
-    >
-      <p
-        class="pre-formatted"
-        v-html="field.contextInfo.messageText.msgText"
-      />
-      <div>
-        <span class="custom-tittle-popover">
-          {{ field.name }}
-        </span>
-        <template v-if="!isEmptyValue(field.help)">
-          : {{ field.help }}
-        </template>
-      </div>
-      <template v-for="(zoomItem, index) in field.reference.zoomWindowList">
-        <el-button
-          :key="index"
-          type="text"
-          @click="redirect({ window: zoomItem, columnName: field.columnName, value: field.value })"
-        >
-          {{ $t('table.ProcessActivity.zoomIn') }}
-        </el-button>
-      </template>
-    </el-popover>
     <el-form-item
       :required="isMandatory()"
     >
       <template slot="label">
-        <span v-popover:contextOptions>
+        <field-context-info
+          v-if="(field.contextInfo && field.contextInfo.isActive) || field.reference.zoomWindowList.length"
+          :name="field.name"
+          :field-value="field.value"
+          :help="field.help"
+          :context-info="field.contextInfo"
+          :reference="field.reference"
+          :column-name="field.columnName"
+        />
+        <template v-else>
           {{ isFieldOnly() }}
-        </span>
+        </template>
         <field-translated
           v-if="field.isTranslated && !isAdvancedQuery"
           :name="field.name"
@@ -99,6 +77,7 @@
 </template>
 
 <script>
+import FieldContextInfo from '@/components/ADempiere/Field/fieldContextInfo'
 import FieldTranslated from '@/components/ADempiere/Field/fieldTranslated'
 import { FIELD_ONLY } from '@/components/ADempiere/Field/references'
 import { DEFAULT_SIZE } from '@/components/ADempiere/Field/fieldSize'
@@ -113,6 +92,7 @@ import { recursiveTreeSearch } from '@/utils/ADempiere/valueUtils'
 export default {
   name: 'Field',
   components: {
+    FieldContextInfo,
     FieldTranslated
   },
   props: {
@@ -251,9 +231,6 @@ export default {
         return true
       }
       return false
-    },
-    permissionRoutes() {
-      return this.$store.getters.permission_routes
     }
   },
   watch: {
@@ -266,7 +243,6 @@ export default {
     this.field = this.metadataField
   },
   methods: {
-    showMessage,
     isDisplayed() {
       if (this.isAdvancedQuery) {
         return this.field.isShowedFromUser
@@ -316,7 +292,7 @@ export default {
       return this.field.isMandatory || this.field.isMandatoryFromLogic
     },
     isFieldOnly() {
-      if (this.inTable || this.field.isFieldOnly || this.verifyIsFieldOnly(this.field.displayType)) {
+      if (this.inTable || this.field.isFieldOnly || this.verifyIsFieldOnly()) {
         return undefined
       }
       return this.field.name
@@ -324,12 +300,11 @@ export default {
     /**
      * TODO: Evaluate the current field with the only fields contained in the
      * constant FIELD_ONLY
-     * @param  {integer} id [identifier of the type of isDisplayed]
      * @return {boolean}
      */
-    verifyIsFieldOnly(type) {
+    verifyIsFieldOnly() {
       const field = FIELD_ONLY.find(itemField => {
-        if (type === itemField.id) {
+        if (this.field.displayType === itemField.id) {
           return true
         }
       })