Unify popovers with field info an zoom in (#191)

* unify popovers with field info an zoom in

* change method to send value from zoom in

* change popover title

src/components/ADempiere/DataTable/index.vue

@@ -381,7 +381,7 @@ export default {
       defaultMaxPagination: 100,
       option: supportedTypes,
       menuTable: '1',
-      activeName: '',
+      activeName: this.$route.query.action === 'advancedQuery' ? '1' : '',
       isOptional: false,
       isFixed: false,
       isLoadPanelFromServer: false,

src/components/ADempiere/Field/index.vue

@@ -16,29 +16,22 @@
   >
     <!-- POPOVER FOR FIELD CONTEXT INFO -->
     <el-popover
-      v-if="field.contextInfo && field.contextInfo.isActive"
+      v-if="(field.contextInfo && field.contextInfo.isActive) || field.reference.zoomWindowList.length"
       ref="contextOptions"
       placement="top"
-      :title="$t('components.contextFieldTitle')"
+      :title="isFieldOnly()"
-      width="400"
+      width="300"
       trigger="click"
     >
-      <p v-html="field.contextInfo.messageText.msgText" />
+      <p v-if="field.contextInfo && field.contextInfo.isActive" class="pre-formatted" v-html="field.contextInfo.messageText.msgText" />
-    </el-popover>
+      <template v-if="field.reference.zoomWindowList.length">
-    <!-- POPOVER FOR ZOOM IN FIELD -->
+        <div class="el-popover__title"> {{ $t('table.ProcessActivity.zoomIn') }}</div>
-    <el-popover
+        <template v-for="(zoomItem, index) in field.reference.zoomWindowList">
-      v-if="field.reference.zoomWindowList.length"
+          <el-button :key="index" type="text" @click="redirect({ window: zoomItem, columnName: field.columnName, value: field.value })">{{ zoomItem.name }}</el-button>
-      ref="zoomIn"
+        </template>
-      placement="bottom"
-      :title="$t('table.ProcessActivity.zoomIn')"
-      trigger="click"
-    >
-      <template v-for="(zoomItem, index) in field.reference.zoomWindowList">
-        <el-button :key="index" type="text" @click="redirect(zoomItem)">{{ zoomItem.name }}</el-button>
       </template>
     </el-popover>
     <el-form-item
-      v-popover:zoomIn
       v-popover:contextOptions
       :label="isFieldOnly()"
       :required="isMandatory()"
@@ -313,10 +306,10 @@ export default {
         this.$refs[columnName].activeFocus(columnName)
       }
     },
-    redirect(item) {
+    redirect({ window, columnName, value }) {
-      this.$store.dispatch('getWindowByUuid', { routes: this.permissionRoutes, windowUuid: item.uuid })
+      this.$store.dispatch('getWindowByUuid', { routes: this.permissionRoutes, windowUuid: window.uuid })
-      var windowRoute = this.$store.getters.getWindowRoute(item.uuid)
+      var windowRoute = this.$store.getters.getWindowRoute(window.uuid)
-      this.$router.push({ name: windowRoute.name, query: { action: 'create-new', tabParent: 0 }})
+      this.$router.push({ name: windowRoute.name, query: { action: 'advancedQuery', tabParent: 0, [columnName]: value }})
     }
   }
 }
@@ -352,4 +345,7 @@ export default {
   .el-form--label-top .el-form-item__label {
     padding-bottom: 0px !important;
   }
+  .pre-formatted {
+    white-space: pre;
+  }
 </style>

src/components/ADempiere/Panel/index.vue

@@ -424,13 +424,13 @@ export default {
             if (route.query.hasOwnProperty(fieldItem.columnName) && fieldItem.isAdvancedQuery) {
               fieldItem.isShowedFromUser = true
 
-              if (route.query.action === 'advancedQuery' === fieldItem.isAdvancedQuery) {
+              if (route.query.action === 'advancedQuery' && fieldItem.isAdvancedQuery) {
-                fieldItem.value = parsedValueComponent({
+                this.dataRecords[fieldItem.columnName] = parsedValueComponent({
                   fieldType: fieldItem.componentPath,
                   value: route.query[fieldItem.columnName]
                 })
                 if (fieldItem.isRange && route.query[fieldItem.columnName + '_To']) {
-                  fieldItem.valueTo = parsedValueComponent({
+                  this.dataRecords[fieldItem.columnName] = parsedValueComponent({
                     fieldType: fieldItem.componentPath,
                     value: route.query[fieldItem.columnName + '_To']
                   })
@@ -439,6 +439,16 @@ export default {
             }
           })
           parameters.isWindow = false
+          this.$store.dispatch('notifyPanelChange', {
+            parentUuid: this.parentUuid,
+            containerUuid: this.containerUuid,
+            isAdvancedQuery: route.query.action === 'advancedQuery',
+            newValues: this.dataRecords,
+            isSendToServer: false,
+            isSendCallout: false,
+            fieldList: this.fieldList,
+            panelType: this.panelType
+          })
         } else if (this.panelType === 'process' || this.panelType === 'browser') {
           if (!this.isEmptyValue(route.query)) {
             this.$store.dispatch('notifyPanelChange', {

src/store/modules/ADempiere/panel.js

@@ -365,6 +365,8 @@ const panel = {
         dispatch('notifyFieldChange', {
           isSendToServer: isSendToServer,
           isSendCallout: isSendCallout,
+          isAdvancedQuery: isAdvancedQuery,
+          panelType: panelType,
           parentUuid: parentUuid,
           containerUuid: containerUuid,
           columnName: actionField.columnName,
@@ -636,9 +638,9 @@ const panel = {
             type: 'info'
           })
         }
-      } else if (isSendToQuery) {
+      } else {
         if (panelType === 'table' || isAdvancedQuery) {
-          if (fieldIsDisplayed(field) && field.isShowedFromUser) {
+          if (field.isShowedFromUser) {
             // change action to advanced query on field value is changed in this panel
             if (router.currentRoute.query.action !== 'advancedQuery') {
               router.push({