feature/open-option-field-show-router (#819)

* add record access to the route

* Open Field Option Panel

* close clear type Action the router

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

src/components/ADempiere/Field/contextMenuField/calculator/index.vue

@@ -217,6 +217,16 @@ export default {
           this.clearVariables()
           this.$children[0].visible = false
           this.$store.commit('changeShowRigthPanel', false)
+          if (!this.isEmptyValue(this.$route.query.fieldColumnName)) {
+            this.$router.push({
+              name: this.$route.name,
+              query: {
+                ...this.$route.query,
+                typeAction: '',
+                fieldColumnName: ''
+              }
+            }, () => {})
+          }
         })
     },
     spanMethod({ row, column }) {

src/components/ADempiere/Field/contextMenuField/contextInfo/index.vue

@@ -109,6 +109,16 @@ export default {
         })
       }
       this.$store.commit('changeShowRigthPanel', false)
+      if (!this.isEmptyValue(this.$route.query.fieldColumnName)) {
+        this.$router.push({
+          name: this.$route.name,
+          query: {
+            ...this.$route.query,
+            typeAction: '',
+            fieldColumnName: ''
+          }
+        }, () => {})
+      }
     }
   }
 }

src/components/ADempiere/Field/contextMenuField/preference/index.vue

@@ -211,6 +211,16 @@ export default {
     close() {
       this.$children[0].visible = false
       this.$store.commit('changeShowRigthPanel', false)
+      if (!this.isEmptyValue(this.$route.query.fieldColumnName)) {
+        this.$router.push({
+          name: this.$route.name,
+          query: {
+            ...this.$route.query,
+            typeAction: '',
+            fieldColumnName: ''
+          }
+        }, () => {})
+      }
     },
     remove() {
       const isForCurrentUser = this.metadataList.find(field => field.columnName === 'AD_User_ID').value

src/components/ADempiere/Field/index.vue

@@ -64,7 +64,6 @@
                     placement="top"
                     trigger="click"
                     style="padding: 0px;"
-                    :hide="visibleForDesktop"
                   >
                     <component
                       :is="optionFieldFComponentRender"
@@ -178,6 +177,21 @@
             </el-submenu>
           </el-menu>
         </template>
+        <el-popover
+          v-if="openOptionField && !isEmptyValue(optionColumnName) && (optionColumnName === field.columnName) && showPopoverPath"
+          v-model="openOptionField"
+          placement="top-start"
+          width="400"
+          trigger="click"
+        >
+          <component
+            :is="optionFieldFComponentRender"
+            :field-attributes="fieldAttributes"
+            :source-field="fieldAttributes"
+            :field-value="valueField"
+          />
+          <el-button slot="reference" type="text" :disabled="true" @click="openOptionField = !openOptionField" />
+        </el-popover>
         <component
           :is="componentRender"
           :ref="field.columnName"
@@ -242,7 +256,9 @@ export default {
     return {
       field: {},
       visibleForDesktop: false,
-      triggerMenu: 'click'
+      triggerMenu: 'click',
+      showPopoverPath: false,
+      optionColumnName: this.$route.query.fieldColumnName
     }
   },
   computed: {
@@ -266,7 +282,9 @@ export default {
     },
     optionFieldFComponentRender() {
       let component
-      switch (this.contextMenuField.name) {
+      const option = this.optionField.find(option => this.$route.query.typeAction === option.name)
+      const nameComponent = this.isEmptyValue(option) ? this.contextMenuField.name : this.$route.query.typeAction
+      switch (nameComponent) {
         case this.$t('field.info'):
           component = () => import('@/components/ADempiere/Field/contextMenuField/contextInfo')
           break
@@ -579,6 +597,28 @@ export default {
         containerUuid: this.fieldAttributes.containerUuid,
         columnName: this.fieldAttributes.columnName
       })
+    },
+    openOptionField: {
+      get() {
+        const option = this.optionField.find(option => this.$route.query.typeAction === option.name)
+        if (!this.isEmptyValue(this.$route.query) && option) {
+          return true
+        }
+        return false
+      },
+      set(value) {
+        if (!value) {
+          this.showPopoverPath = false
+          this.$router.push({
+            name: this.$route.name,
+            query: {
+              ...this.$route.query,
+              typeAction: '',
+              fieldColumnName: ''
+            }
+          }, () => {})
+        }
+      }
     }
   },
   watch: {
@@ -587,9 +627,17 @@ export default {
     },
     metadataField(value) {
       this.field = value
+    },
+    openOptionField(value) {
+      if (!value) {
+        this.showPopoverPath = false
+      }
     }
   },
   created() {
+    this.timeOut = setTimeout(() => {
+      this.showPopoverPath = true
+    }, 2000)
     // assined field with prop
     this.field = this.metadataField
     if (this.field.isCustomField && !this.field.componentPath) {
@@ -628,6 +676,14 @@ export default {
         this.$store.commit('changeShowRigthPanel', true)
       } else {
         this.visibleForDesktop = true
+        this.$router.push({
+          name: this.$route.name,
+          query: {
+            ...this.$route.query,
+            typeAction: key,
+            fieldColumnName: this.field.columnName
+          }
+        }, () => {})
       }
       this.$store.commit('changeShowPopoverField', true)
       this.$store.dispatch('setOptionField', option)
@@ -766,6 +822,9 @@ export default {
 </style>
 
 <style lang="scss">
+  .el-popover {
+    position: fixed;
+  }
   .custom-tittle-popover {
     font-size: 14px;
     font-weight: bold;

src/views/ADempiere/Window/windowLogicComponent.js

@@ -243,7 +243,7 @@ export default {
       return this.$store.getters.getWindow(this.windowUuid)
     },
     isShowedTabsChildren() {
-      if (this.windowMetadata && this.windowMetadata.isShowedTabsChildren) {
+      if (this.windowMetadata && this.windowMetadata.isShowedTabsChildren && this.isEmptyValue(this.$route.query.typeAction)) {
         return this.windowMetadata.isShowedTabsChildren
       }
       return false