From d38dd0e5cac476802ae26179222a7f5e47bf3db6 Mon Sep 17 00:00:00 2001
From: Edwin Betancourt <EdwinBetanc0urt@outlook.com>
Date: Mon, 11 Oct 2021 00:25:05 -0400
Subject: [PATCH] fix: Request fields preference value.

---
 .../Field/FieldOptions/LabelField.vue         |  31 +++-
 .../{preference => PreferenceValue}/index.vue | 154 +++++++++---------
 .../preferenceValueFieldsList.js}             |   0
 .../Field/FieldOptions/fieldOptionsList.js    |   6 +-
 .../ADempiere/Field/FieldOptions/index.vue    |  26 ++-
 5 files changed, 117 insertions(+), 100 deletions(-)
 rename src/components/ADempiere/Field/FieldOptions/{preference => PreferenceValue}/index.vue (61%)
 rename src/components/ADempiere/Field/FieldOptions/{preference/preferenceFields.js => PreferenceValue/preferenceValueFieldsList.js} (100%)

diff --git a/src/components/ADempiere/Field/FieldOptions/LabelField.vue b/src/components/ADempiere/Field/FieldOptions/LabelField.vue
index 5100be8b11..0ee2dab226 100644
--- a/src/components/ADempiere/Field/FieldOptions/LabelField.vue
+++ b/src/components/ADempiere/Field/FieldOptions/LabelField.vue
@@ -3,13 +3,19 @@
     <span>
       {{ label }}
     </span>
+
     <span v-if="isMandatory" :style="'color: #f34b4b'">*</span>
+
     <i class="el-icon-info" :style="iconStyle" />
   </div>
 </template>
 
 <script>
-export default {
+import { defineComponent, computed } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'LabelField',
+
   props: {
     isMandatory: {
       type: Boolean,
@@ -24,25 +30,32 @@ export default {
       default: false
     }
   },
-  computed: {
-    labelStyle() {
+
+  setup(props) {
+    const labelStyle = computed(() => {
       let displayStyle
-      this.isMobile ? displayStyle = 'display: flex;width: auto;' : 'display: block;'
+      props.isMobile ? displayStyle = 'display: flex; width: auto;' : 'display: block;'
       return displayStyle + ' margin-left: 3px;'
-    },
-    iconStyle() {
-      if (this.isMobile) {
+    })
+
+    const iconStyle = computed(() => {
+      if (props.isMobile) {
         return 'margin-left: 5px; margin-top: 7px;'
       }
       return 'margin-left: -5px; padding-bottom: 6px;'
+    })
+
+    return {
+      iconStyle,
+      labelStyle
     }
   }
-}
+})
 </script>
+
 <style scoped>
 .el-icon-info {
     font-size: 11px;
     color: #008fd3;
 }
 </style>
-
diff --git a/src/components/ADempiere/Field/FieldOptions/preference/index.vue b/src/components/ADempiere/Field/FieldOptions/PreferenceValue/index.vue
similarity index 61%
rename from src/components/ADempiere/Field/FieldOptions/preference/index.vue
rename to src/components/ADempiere/Field/FieldOptions/PreferenceValue/index.vue
index 4655307746..0fb4fc5689 100644
--- a/src/components/ADempiere/Field/FieldOptions/preference/index.vue
+++ b/src/components/ADempiere/Field/FieldOptions/PreferenceValue/index.vue
@@ -15,6 +15,7 @@
  You should have received a copy of the GNU General Public License
  along with this program.  If not, see <https:www.gnu.org/licenses/>.
 -->
+
 <template>
   <el-card
     v-if="!isEmptyValue(metadataList)"
@@ -31,11 +32,10 @@
       </span>
     </div>
     <div class="text item">
-      {{
-        getDescriptionOfPreference
-      }}
+      {{ getDescriptionOfPreference }}
     </div>
     <br>
+
     <div class="text item">
       <el-form
         :inline="true"
@@ -66,6 +66,7 @@
       </el-form>
     </div>
     <br>
+
     <el-row>
       <el-col :span="24">
         <samp style="float: left; padding-right: 10px;">
@@ -76,6 +77,7 @@
             @click="remove()"
           />
         </samp>
+
         <samp style="float: right; padding-right: 10px;">
           <el-button
             type="danger"
@@ -83,6 +85,7 @@
             icon="el-icon-close"
             @click="close()"
           />
+
           <el-button
             type="primary"
             class="custom-button-address-location"
@@ -93,6 +96,7 @@
       </el-col>
     </el-row>
   </el-card>
+
   <div
     v-else
     v-loading="isEmptyValue(metadataList)"
@@ -104,16 +108,15 @@
 
 <script>
 import formMixin from '@/components/ADempiere/Form/formMixin'
-import preferenceFields from './preferenceFields.js'
-import { createFieldFromDictionary } from '@/utils/ADempiere/lookupFactory'
+import preferenceFields from './preferenceValueFieldsList.js'
 import { CLIENT, ORGANIZATION } from '@/utils/ADempiere/constants/systemColumns'
 import { setPreference, deletePreference } from '@/api/ADempiere/field/preference.js'
-import { showMessage } from '@/utils/ADempiere/notification.js'
-import language from '@/lang'
 
 export default {
-  name: 'Preference',
-  mixins: [formMixin],
+  name: 'PreferenceValue',
+  mixins: [
+    formMixin
+  ],
   props: {
     fieldAttributes: {
       type: [Object],
@@ -146,41 +149,61 @@ export default {
         }
       })
     },
+
+    clientField() {
+      return this.metadataList.find(field => {
+        return field.columnName === CLIENT
+      })
+    },
+    organizationField() {
+      return this.metadataList.find(field => {
+        return field.columnName === ORGANIZATION
+      })
+    },
+    userField() {
+      return this.metadataList.find(field => {
+        return field.columnName === 'AD_User_ID'
+      })
+    },
+    containerField() {
+      return this.metadataList.find(field => {
+        return field.columnName === 'AD_Window_ID'
+      })
+    },
+
     getDescriptionOfPreference() {
       if (this.isEmptyValue(this.metadataList)) {
         return ''
       }
-      const forCurrentClient = this.metadataList.find(field => field.columnName === CLIENT)
-      if (!forCurrentClient) {
+      if (!this.clientField) {
         return ''
       }
-      const forCurrentUser = this.metadataList.find(field => field.columnName === 'AD_User_ID')
-      const forCurrentOrganization = this.metadataList.find(field => field.columnName === ORGANIZATION)
-      const forCurrentContainer = this.metadataList.find(field => field.columnName === 'AD_Window_ID')
-      //  Create Message
-      var expl = language.t('components.preference.for')//  components.preference.for
-      if (forCurrentOrganization && forCurrentClient) {
-        if (forCurrentClient.value && forCurrentOrganization.value) {
-          expl = expl.concat(language.t('components.preference.clientAndOrganization'))//  components.preference.clientAndOrganization
-        } else if (forCurrentClient.value && !forCurrentOrganization.value) {
-          expl = expl.concat(language.t('components.preference.allOrganizationOfClient'))//  components.preference.allOrganizationOfClient
-        } else if (!forCurrentClient.value && forCurrentOrganization.value) {
-          forCurrentOrganization.value = false
-          expl = expl.concat(language.t('components.preference.entireSystem'))//  components.preference.entireSystem
+
+      // Create Message
+      let expl = this.$t('components.preference.for')
+      if (this.clientField && this.organizationField) {
+        if (this.clientField.value && this.organizationField.value) {
+          expl = expl.concat(this.$t('components.preference.clientAndOrganization'))
+        } else if (this.clientField.value && !this.organizationField.value) {
+          expl = expl.concat(this.$t('components.preference.allOrganizationOfClient'))
+        } else if (!this.clientField.value && this.organizationField.value) {
+          expl = expl.concat(this.$t('components.preference.entireSystem'))
         } else {
-          expl = expl.concat(language.t('components.preference.entireSystem'))//  components.preference.entireSystem
+          expl = expl.concat(this.$t('components.preference.entireSystem'))
         }
       }
-      if (forCurrentUser && forCurrentContainer) {
-        if (forCurrentUser.value) {
-          expl = expl.concat(language.t('components.preference.thisUser'))//  components.preference.thisUser
+
+      if (this.userField && this.containerField) {
+        if (this.userField.value) {
+          expl = expl.concat(this.$t('components.preference.thisUser'))
         } else {
-          expl = expl.concat(language.t('components.preference.allUsers'))//  components.preference.allUsers
+          expl = expl.concat(this.$t('components.preference.allUsers'))
         }
-        if (forCurrentContainer.value) {
-          expl = expl.concat(language.t('components.preference.thisWindow'))//  components.preference.thisWindow
+
+        if (this.containerField.value) {
+          expl = expl.concat(this.$t('components.preference.thisWindow'))
         } else {
-          expl = expl.concat(language.t('components.preference.allWindows'))//  components.preference.allWindows
+          expl = expl.concat(this.$t('components.preference.allWindows'))
         }
       }
       return expl
@@ -207,7 +230,6 @@ export default {
     }
   },
   methods: {
-    createFieldFromDictionary,
     close() {
       if (!this.isEmptyValue(this.$route.query.fieldColumnName)) {
         this.$router.push({
@@ -224,36 +246,29 @@ export default {
       }
     },
     remove() {
-      const isForCurrentUser = this.metadataList.find(field => field.columnName === 'AD_User_ID').value
-      const isForCurrentClient = this.metadataList.find(field => field.columnName === CLIENT).value
-      const isForCurrentOrganization = this.metadataList.find(field => field.columnName === ORGANIZATION).value
-      const isForCurrentContainer = this.metadataList.find(field => field.columnName === 'AD_Window_ID').value
       deletePreference({
         parentUuid: this.fieldAttributes.parentUuid,
         attribute: this.fieldAttributes.columnName,
-        isForCurrentUser,
-        isForCurrentClient,
-        isForCurrentOrganization,
-        isForCurrentContainer
+        isForCurrentClient: this.clientField.value,
+        isForCurrentOrganization: this.organizationField.value,
+        isForCurrentUser: this.userField.value,
+        isForCurrentContainer: this.containerField.value
       })
-        .then(preference => {
-          showMessage({
-            message: language.t('components.preference.preferenceRemoved')
+        .then(() => {
+          this.$message({
+            message: this.$t('components.preference.preferenceRemoved')
           })
           this.close()
         })
         .catch(error => {
-          showMessage({
+          this.$message({
             message: error.message,
             type: 'error'
           })
           console.warn(`setPreference error: ${error.message}.`)
         })
     },
-    notSubmitForm(event) {
-      event.preventDefault()
-      return false
-    },
+
     setFieldsList() {
       const fieldsList = []
       // Product Code
@@ -272,31 +287,27 @@ export default {
             console.warn(`LookupFactory: Get Field From Server (State) - Error ${error.code}: ${error.message}.`)
           })
       })
+
       this.metadataList = fieldsList
     },
-    sendValue(list) {
-      const isForCurrentUser = this.metadataList.find(field => field.columnName === 'AD_User_ID').value
-      const isForCurrentClient = this.metadataList.find(field => field.columnName === CLIENT).value
-      const isForCurrentOrganization = this.metadataList.find(field => field.columnName === ORGANIZATION).value
-      const isForCurrentContainer = this.metadataList.find(field => field.columnName === 'AD_Window_ID').value
-      //
+    sendValue() {
       setPreference({
         parentUuid: this.fieldAttributes.parentUuid,
         attribute: this.fieldAttributes.columnName,
         value: this.fieldValue,
-        isForCurrentUser,
-        isForCurrentClient,
-        isForCurrentOrganization,
-        isForCurrentContainer
+        isForCurrentClient: this.clientField.value,
+        isForCurrentOrganization: this.organizationField.value,
+        isForCurrentUser: this.userField.value,
+        isForCurrentContainer: this.containerField.value
       })
-        .then(preference => {
-          showMessage({
-            message: language.t('components.preference.preferenceIsOk')
+        .then(() => {
+          this.$message({
+            message: this.$t('components.preference.preferenceIsOk')
           })
           this.close()
         })
         .catch(error => {
-          showMessage({
+          this.$message({
             message: error.message,
             type: 'error'
           })
@@ -307,20 +318,3 @@ export default {
   }
 }
 </script>
-
-<style>
- .title {
-    color: #000000;
-    text-size-adjust: 20px;
-    font-size: 120%;
-    /* font-weight: 605!important;
-    left: 50%; */
-  }
-  .value {
-    color: #606266;
-    text-size-adjust: 20px;
-    font-size: 120%;
-    /* font-weight: 605!important;
-    left: 50%; */
-  }
-</style>
diff --git a/src/components/ADempiere/Field/FieldOptions/preference/preferenceFields.js b/src/components/ADempiere/Field/FieldOptions/PreferenceValue/preferenceValueFieldsList.js
similarity index 100%
rename from src/components/ADempiere/Field/FieldOptions/preference/preferenceFields.js
rename to src/components/ADempiere/Field/FieldOptions/PreferenceValue/preferenceValueFieldsList.js
diff --git a/src/components/ADempiere/Field/FieldOptions/fieldOptionsList.js b/src/components/ADempiere/Field/FieldOptions/fieldOptionsList.js
index 4c6b91f722..88850a97c1 100644
--- a/src/components/ADempiere/Field/FieldOptions/fieldOptionsList.js
+++ b/src/components/ADempiere/Field/FieldOptions/fieldOptionsList.js
@@ -68,12 +68,12 @@ export const calculatorOptionItem = {
   componentRender: () => import('@/components/ADempiere/Field/FieldOptions/calculator')
 }
 
-export const preferenceOptionItem = {
+export const preferenceValueOptionItem = {
   name: language.t('field.preference'),
   enabled: true,
   svg: false,
   icon: 'el-icon-notebook-2',
-  componentRender: () => import('@/components/ADempiere/Field/FieldOptions/preference')
+  componentRender: () => import('@/components/ADempiere/Field/FieldOptions/PreferenceValue')
 }
 
 export const logsOptionItem = {
@@ -97,7 +97,7 @@ export const documentStatusOptionItem = {
 
 export const optionsListStandad = [
   infoOptionItem,
-  preferenceOptionItem,
+  preferenceValueOptionItem,
   logsOptionItem
 ]
 
diff --git a/src/components/ADempiere/Field/FieldOptions/index.vue b/src/components/ADempiere/Field/FieldOptions/index.vue
index 97f509f264..0ab026bd1d 100644
--- a/src/components/ADempiere/Field/FieldOptions/index.vue
+++ b/src/components/ADempiere/Field/FieldOptions/index.vue
@@ -74,7 +74,9 @@
           >
             <component
               :is="option.componentRender"
-              v-if="visibleForDesktop && showPanelFieldOption"
+              v-if="visibleForDesktop
+                && showPanelFieldOption
+                && option.name === currentFieldOption.name"
               :field-attributes="fieldAttributes"
               :field-value="valueField"
             />
@@ -127,6 +129,11 @@ export default defineComponent({
       return root.$store.state.app.device === 'mobile'
     })
 
+    // current option field selected
+    const currentFieldOption = computed(() => {
+      return root.$store.getters.getFieldContextMenu
+    })
+
     const valueField = computed(() => {
       const { parentUuid, containerUuid, columnName } = props.metadata
       return root.$store.getters.getValueOfField({
@@ -360,21 +367,24 @@ export default defineComponent({
 
     const fieldAttributes = ref(props.metadata)
     return {
+      // computed
+      currentFieldOption,
       isMobile,
       labelStyle,
       fieldAttributes,
+      isDocuemntStatus,
       optionsList,
-      closePopover,
       openOptionField,
-      handleCommand,
-      handleOpen,
-      handleClose,
-      handleSelect,
-      isDocuemntStatus,
       visibleForDesktop,
       valueField,
       triggerMenu,
-      showPanelFieldOption
+      showPanelFieldOption,
+      // methods
+      closePopover,
+      handleClose,
+      handleCommand,
+      handleOpen,
+      handleSelect
     }
   }
 })