From ffb94e4ab998f2807e6b46f4b6c9472588531b5f Mon Sep 17 00:00:00 2001
From: Elsio Sanchez <45974454+elsiosanchez@users.noreply.github.com>
Date: Fri, 9 Apr 2021 16:14:07 -0400
Subject: [PATCH] Feture/support menu field (#737)

* Context menu support for fields in desktop mode

* minimal changes

* change style
---
 src/components/ADempiere/Field/index.vue | 91 ++++++++++++++++++++++--
 1 file changed, 85 insertions(+), 6 deletions(-)

diff --git a/src/components/ADempiere/Field/index.vue b/src/components/ADempiere/Field/index.vue
index 66e20294..6d1d3504 100644
--- a/src/components/ADempiere/Field/index.vue
+++ b/src/components/ADempiere/Field/index.vue
@@ -21,10 +21,10 @@
           <el-dropdown
             size="mini"
             :hide-on-click="true"
-            trigger="click"
+            trigger="hover"
             @command="handleCommand"
           >
-            <span class="el-dropdown-link">
+            <span style="border: aqua;">
               <span key="is-field-name">
                 {{ field.name }}
               </span>
@@ -42,7 +42,39 @@
                   :command="option"
                   :divided="true"
                 >
-                  <div class="contents">
+                  <el-popover
+                    v-if="!isMobile"
+                    placement="top"
+                    width="400"
+                    trigger="click"
+                    style="padding: 0px;"
+                  >
+                    <component
+                      :is="optionFieldFComponentRender"
+                      v-if="visibleForDesktop"
+                      :field-attributes="contextMenuField.fieldAttributes"
+                      :source-field="contextMenuField.fieldAttributes"
+                      :field-value="contextMenuField.valueField"
+                    />
+                    <el-button slot="reference" type="text" style="color: #606266;">
+                      <div class="contents">
+                        <div v-if="option.name !== $t('language')" style="margin-right: 5%;padding-top: 3%;">
+                          <i :class="option.icon" style="font-weight: bolder;" />
+                        </div>
+                        <div v-else style="margin-right: 5%">
+                          <svg-icon :icon-class="option.icon" style="margin-right: 5px;" />
+                        </div>
+                        <div>
+                          <span class="contents">
+                            <b class="label">
+                              {{ option.name }}
+                            </b>
+                          </span>
+                        </div>
+                      </div>
+                    </el-button>
+                  </el-popover>
+                  <div v-if="isMobile" class="contents">
                     <div v-if="option.name !== $t('language')" style="margin-right: 5%;padding-top: 3%;">
                       <i :class="option.icon" style="font-weight: bolder;" />
                     </div>
@@ -125,7 +157,7 @@ export default {
   data() {
     return {
       field: {},
-      visible: this.$store.state.contextMenu.isShowPopoverField
+      visibleForDesktop: false
     }
   },
   computed: {
@@ -133,6 +165,30 @@ export default {
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
+    contextMenuField() {
+      return this.$store.getters.getFieldContextMenu
+    },
+    panelContextMenu() {
+      return this.$store.state.contextMenu.isShowRightPanel
+    },
+    optionFieldFComponentRender() {
+      let component
+      switch (this.contextMenuField.name) {
+        case this.$t('field.info'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/contextInfo')
+          break
+        case this.$t('language'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/translated/index')
+          break
+        case this.$t('field.calculator'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/calculator')
+          break
+        case this.$t('field.preference'):
+          component = () => import('@/components/ADempiere/Field/contextMenuField/preference/index')
+          break
+      }
+      return component
+    },
     componentRender() {
       if (this.isEmptyValue(this.field.componentPath || !this.field.isSupported)) {
         return () => import('@/components/ADempiere/Field/FieldText')
@@ -470,6 +526,8 @@ export default {
       }
       if (this.isMobile) {
         this.$store.commit('changeShowRigthPanel', true)
+      } else {
+        this.visibleForDesktop = true
       }
       this.$store.commit('changeShowPopoverField', true)
       this.$store.dispatch('setOptionField', command)
@@ -503,6 +561,27 @@ export default {
   }
 }
 </script>
+<style>
+.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
+  background: white;
+}
+.el-dropdown-menu--mini .el-dropdown-menu__item {
+  line-height: 14px;
+  padding: 0px 15px;
+  padding-top: 0%;
+  padding-right: 15px;
+  padding-bottom: 0%;
+  padding-left: 15px;
+  font-size: 10px;
+  background: white;
+}
+.el-dropdown-menu--mini .el-dropdown-menu__item.el-dropdown-menu__item--divided {
+  margin-top: 0%;
+}
+.el-popper {
+  padding: 0px;
+}
+</style>
 <style scoped>
   .svg-icon {
     width: 1em;
@@ -519,8 +598,8 @@ export default {
     top: 0;
     left: 0;
     z-index: 10;
-    padding: 10px 0;
-    margin: 5px 0;
+    padding: 0px;
+    margin: 0px;
     background-color: #FFFFFF;
     border: 1px solid #e6ebf5;
     border-radius: 4px;