feat: Add show/hide optional fields. (#1290)

src/components/ADempiere/FilterFields/fieldsDisplayOptions.vue

@@ -0,0 +1,122 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Edwin Betancourt [email protected] www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ 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-dropdown trigger="click" class="fields-display-options" @command="handleCommand">
+    <span class="el-dropdown-link">
+      <svg-icon icon-class="list" />
+    </span>
+
+    <el-dropdown-menu slot="dropdown" style="max-width: 300px;">
+      <el-dropdown-item
+        :disabled="!isHiddenFields"
+        command="hiddenOptionals"
+      >
+        <svg-icon icon-class="eye" />
+        {{ $t('fieldDisplayOptions.hideOptionalFields') }}
+      </el-dropdown-item>
+
+      <el-dropdown-item
+        :disabled="!isShowFields"
+        command="showOptionals"
+      >
+        <svg-icon icon-class="eye-open" />
+        {{ $t('fieldDisplayOptions.showOptionalFields') }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import { computed, defineComponent } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'FieldsDisplayOption',
+
+  props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    availableFields: {
+      type: Array,
+      required: true
+    },
+    showedFields: {
+      type: Array,
+      required: true
+    },
+    filterManager: {
+      type: Function,
+      default: ({ filterList }) => {}
+    }
+  },
+
+  setup(props) {
+    // enabled showed optionals and mandatory fields
+    const isShowFields = computed(() => {
+      return props.availableFields.length > 0 &&
+        props.availableFields.length > props.showedFields.length
+    })
+
+    // enabled hidden optionals fields (only mandatory))
+    const isHiddenFields = computed(() => {
+      return props.showedFields.length > 0 &&
+        props.availableFields.length > 0
+    })
+
+    const fieldsList = computed(() => {
+      return props.availableFields.map(field => {
+        return field.columnName
+      })
+    })
+
+    const handleCommand = (command) => {
+      let fieldsShowed = []
+      if (command === 'showOptionals') {
+        fieldsShowed = fieldsList.value
+      }
+
+      props.filterManager({
+        parentUuid: props.parentUuid,
+        containerUuid: props.containerUuid,
+        fieldsShowed,
+        fieldsList: props.availableFields
+      })
+    }
+
+    return {
+      // computeds
+      isShowFields,
+      isHiddenFields,
+      // methods
+      handleCommand
+    }
+  }
+})
+</script>
+
+<style scoped lang="scss">
+  .fields-display-options {
+    padding-left: 5px;
+  }
+</style>

src/components/ADempiere/FilterFields/index.vue

@@ -40,17 +40,35 @@
           :value="item.columnName"
         />
       </el-select>
+
+      <fields-display-option
+        :parent-uuid="parentUuid"
+        :container-uuid="containerUuid"
+        :available-fields="fieldsListAvailable"
+        :showed-fields="fieldsListShowed"
+        :filter-manager="filterManager"
+      />
     </el-form-item>
   </el-form>
 </template>
 
 <script>
 import { defineComponent, computed } from '@vue/composition-api'
 
+import FieldsDisplayOption from './fieldsDisplayOptions.vue'
+
 export default defineComponent({
   name: 'FilterFields',
 
+  components: {
+    FieldsDisplayOption
+  },
+
   props: {
+    parentUuid: {
+      type: String,
+      default: undefined
+    },
     containerUuid: {
       type: String,
       required: true
@@ -59,6 +77,14 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    fieldsList: {
+      type: Array,
+      default: () => []
+    },
+    filterManager: {
+      type: Function,
+      default: ({ filterList }) => {}
+    },
     panelType: {
       type: String,
       default: 'window'
@@ -73,8 +99,6 @@ export default defineComponent({
   },
 
   setup(props, { root }) {
-    const isAdvancedQuery = props.panelType === 'table'
-
     const size = props.inTable
       ? 'mini'
       : 'small'
@@ -92,18 +116,22 @@ export default defineComponent({
     })
 
     const fieldsListAvailable = computed(() => {
+      /*
       if (!props.inTable && props.panelType === 'window' && !root.isEmptyValue(props.groupField)) {
         // compare group fields to window
         return root.$store.getters.getFieldsListNotMandatory({
-          containerUuid: props.containerUuid
+          containerUuid: props.containerUuid,
+          fieldsList: props.fieldsList
         })
           .filter(fieldItem => {
             return fieldItem.groupAssigned === props.groupField
           })
       }
+      */
       // get fields not mandatory
       return root.$store.getters.getFieldsListNotMandatory({
         containerUuid: props.containerUuid,
+        fieldsList: props.fieldsList,
         isTable: props.inTable
       })
     })
@@ -137,12 +165,11 @@ export default defineComponent({
      * @param {array} selectedValues
      */
     const changeShowedPanel = (selectedValues) => {
-      root.$store.dispatch('changeFieldShowedFromUser', {
+      props.filterManager({
+        parentUuid: props.parentUuid,
         containerUuid: props.containerUuid,
-        fieldsUser: selectedValues,
-        show: true,
-        groupField: props.groupField,
-        isAdvancedQuery
+        fieldsShowed: selectedValues,
+        fieldsList: fieldsListAvailable.value
       })
     }
 

src/components/ADempiere/PanelDefinition/StandardPanel.vue

@@ -25,8 +25,10 @@
       <div class="cards-not-group">
         <div class="card">
           <filter-fields
+            :parent-uuid="parentUuid"
             :container-uuid="containerUuid"
-            :panel-type="panelType"
+            :fields-list="fieldsList"
+            :filter-manager="containerManager.changeFieldShowedFromUser"
           />
           <el-card
             :shadow="shadowGroup"
@@ -52,7 +54,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
 
 import FieldDefinition from '@/components/ADempiere/Field'
 import FilterFields from '@/components/ADempiere/FilterFields'
@@ -85,7 +87,6 @@ export default defineComponent({
   },
 
   setup(props, { root }) {
-    const panelType = ref(props.panelMetadata.panelType)
     let fieldsList = []
 
     const generatePanel = () => {
@@ -106,7 +107,6 @@ export default defineComponent({
 
     return {
       fieldsList,
-      panelType,
       shadowGroup
     }
   }

src/components/ADempiere/PanelDefinition/index.vue

@@ -19,6 +19,7 @@
 <template>
   <component
     :is="componentRender"
+    :parent-uuid="parentUuid"
     :container-uuid="containerUuid"
     :container-manager="containerManager"
     :panel-metadata="metadata"

src/lang/ADempiere/en/fieldDisplayOptions.js

@@ -0,0 +1,23 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Edwin Betancourt [email protected] www.erpya.com
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const fieldsDisplayOptions = {
+  // fields showed options
+  hideOptionalFields: 'Hide Optional Fields',
+  showOptionalFields: 'Show Opcional Fields'
+}
+
+export default fieldsDisplayOptions

src/lang/ADempiere/en/index.js

@@ -1,8 +1,12 @@
 
 import actionMenu from './actionMenu'
+import fieldDisplayOptions from './fieldDisplayOptions'
+import recordManager from './recordManager'
 
 export default {
   actionMenu,
+  fieldDisplayOptions,
+  recordManager,
 
   language: 'Language',
   route: {

src/lang/ADempiere/es/fieldDisplayOptions.js

@@ -0,0 +1,23 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Edwin Betancourt [email protected] www.erpya.com
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const fieldsDisplayOptions = {
+  // fields showed options
+  hideOptionalFields: 'Ocultar Campos Opcionales',
+  showOptionalFields: 'Mostrar Campos Opcionales'
+}
+
+export default fieldsDisplayOptions

src/lang/ADempiere/es/index.js

@@ -1,9 +1,11 @@
 
 import actionMenu from './actionMenu'
+import fieldDisplayOptions from './fieldDisplayOptions'
 import recordManager from './recordManager'
 
 export default {
   actionMenu,
+  fieldDisplayOptions,
   recordManager,
 
   language: 'Idioma',

src/store/modules/ADempiere/dictionary/window/actions.js

@@ -16,6 +16,7 @@
 
 import { requestWindowMetadata } from '@/api/ADempiere/dictionary/window'
 import { generateWindow } from '@/views/ADempiere/Window/windowUtils'
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 
 export default {
   addWindow({ commit }, windowResponse) {
@@ -42,6 +43,37 @@ export default {
     })
   },
 
+  /**
+   * Used by components/fields/filterFields
+   */
+  changeTabFieldShowedFromUser({ commit, getters }, {
+    parentUuid,
+    containerUuid,
+    groupField,
+    fieldsShowed,
+    fieldsList = []
+  }) {
+    if (isEmptyValue(fieldsList)) {
+      console.log(parentUuid, 1, containerUuid)
+      fieldsList = getters.getStoredFieldsFromTab(parentUuid, containerUuid)
+    }
+
+    fieldsList.forEach(itemField => {
+      if (groupField === itemField.groupAssigned) {
+        let isShowedFromUser = false
+        if (fieldsShowed.includes(itemField.columnName)) {
+          isShowedFromUser = true
+        }
+
+        commit('changeTabFieldAttribute', {
+          field: itemField,
+          attributeName: 'isShowedFromUser',
+          attributeValue: isShowedFromUser
+        })
+      }
+    })
+  },
+
   changeTabAttribute({ commit, getters }, {
     parentUuid,
     containerUuid,