feat: Unify FilterField and FilterColumn component (#931)

src/components/ADempiere/DataTable/dataTables-Script.js

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import FieldDefinition from '@/components/ADempiere/Field'
-import FilterColumns from '@/components/ADempiere/DataTable/filterColumns'
+import FilterFields from '@/components/ADempiere/FilterFields'
 import FixedColumns from '@/components/ADempiere/DataTable/fixedColumns'
 import TableContextMenu from '@/components/ADempiere/DataTable/menu/tableContextMenu'
 import TableMainMenu from '@/components/ADempiere/DataTable/menu'
@@ -35,7 +35,7 @@ export default {
   components: {
     CustomPagination,
     FieldDefinition,
-    FilterColumns,
+    FilterFields,
     FixedColumns,
     IconElement,
     MainPanel,

src/components/ADempiere/DataTable/dataTables-StyleScoped.scss

@@ -6,13 +6,6 @@
   cursor: pointer !important;
 }
 
-
-.field-optional {
-  margin: 3px 10px;
-  float: right;
-}
-
-
 // Local search input
 .local-search-container {
   font-size: 0 !important;
@@ -101,4 +94,4 @@
       background-color: initial !important;
     }
   }
-}
+}

src/components/ADempiere/DataTable/filterColumns.vue

@@ -1,93 +0,0 @@
-<!--
- ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
- Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
- Contributor(s): Yamel Senih ysenih@erpya.com 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-select
-    v-model="fieldsListShowed"
-    :filterable="!isMobile"
-    :placeholder="$t('components.filterableItems')"
-    multiple
-    size="mini"
-    collapse-tags
-    value-key="key"
-    class="select"
-  >
-    <el-option
-      v-for="(item, key) in fieldsListAvailable"
-      :key="key"
-      :label="item.name"
-      :value="item.columnName"
-    />
-  </el-select>
-</template>
-
-<script>
-import { fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils.js'
-
-export default {
-  name: 'FilterColumns',
-  props: {
-    containerUuid: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    isMobile() {
-      return this.$store.state.app.device === 'mobile'
-    },
-    fieldsList() {
-      return this.$store.getters.getFieldsListFromPanel(this.containerUuid)
-    },
-    // available fields
-    fieldsListAvailable() {
-      return this.fieldsList.filter(fieldItem => {
-        return fieldIsDisplayed(fieldItem, true)
-      })
-    },
-    fieldsListShowed: {
-      get() {
-        // columns showed
-        return this.fieldsListAvailable.filter(itemField => {
-          return itemField.isShowedTableFromUser
-        }).map(itemField => {
-          return itemField.columnName
-        })
-      },
-      set(selecteds) {
-        // set columns to show/hidden in vuex store
-        this.addField(selecteds)
-      }
-    }
-  },
-  methods: {
-    /**
-     * Set columns to hidden/showed in table
-     * @param {array} selectedValues
-     */
-    addField(selectedValues) {
-      this.$store.dispatch('changeFieldAttributesBoolean', {
-        containerUuid: this.containerUuid,
-        fieldsIncludes: selectedValues,
-        attribute: 'isShowedTableFromUser',
-        valueAttribute: true
-      })
-    }
-  }
-}
-</script>

src/components/ADempiere/DataTable/index.vue

@@ -71,12 +71,14 @@
                 class="header-search-input"
               />
             </icon-element>
-            <filter-columns
+
+            <filter-fields
               v-if="isShowOptionalColumns"
               :container-uuid="containerUuid"
               :panel-type="panelType"
-              class="field-optional"
+              :in-table="true"
             />
+
             <div :class="{ show: showTableSearch }" class="local-search-container">
               <svg-icon class-name="search-icon" icon-class="search" @click.stop="click()" />
               <el-input

src/components/ADempiere/FilterFields/index.vue

@@ -17,21 +17,24 @@
 -->
 
 <template>
-  <el-form class="form-filter-fields">
-    <!-- <el-form-item :label="groupField"> -->
+  <el-form :class="cssClass" style="float: right;">
     <el-form-item>
+      <template v-if="!isEmptyValue(groupField)" slot="label">
+        {{ groupField }}
+      </template>
+
       <el-select
-        v-model="selectedFields"
+        v-model="fieldsListShowed"
         :filterable="!isMobile"
         :placeholder="$t('components.filterableItems')"
         multiple
         collapse-tags
         value-key="key"
-        :popper-append-to-body="false"
-        @change="addField"
+        :size="size"
+        :popper-append-to-body="true"
       >
         <el-option
-          v-for="(item, key) in fieldsListOptional"
+          v-for="(item, key) in fieldsListAvailable"
           :key="key"
           :label="item.name"
           :value="item.columnName"
@@ -42,7 +45,7 @@
 </template>
 
 <script>
-import { defineComponent, computed, ref } from '@vue/composition-api'
+import { defineComponent, computed } from '@vue/composition-api'
 
 export default defineComponent({
   name: 'FilterFields',
@@ -59,18 +62,37 @@ export default defineComponent({
     panelType: {
       type: String,
       default: 'window'
+    },
+    /**
+     * If is used in table, by default false
+     */
+    inTable: {
+      type: Boolean,
+      default: false
     }
   },
 
   setup(props, { root }) {
     const isAdvancedQuery = props.panelType === 'table'
 
+    const size = props.inTable
+      ? 'mini'
+      : 'small'
+
+    const cssClass = props.inTable
+      ? 'form-filter-columns'
+      : 'form-filter-fields'
+
+    const showedAttibute = props.inTable
+      ? 'isShowedTableFromUser'
+      : 'isShowedFromUser'
+
     const isMobile = computed(() => {
       root.$store.state.app.device === 'mobile'
     })
 
-    const fieldsListOptional = computed(() => {
-      if (props.panelType === 'window' && !root.isEmptyValue(props.groupField)) {
+    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
@@ -81,27 +103,40 @@ export default defineComponent({
       }
       // get fields not mandatory
       return root.$store.getters.getFieldsListNotMandatory({
-        containerUuid: props.containerUuid
+        containerUuid: props.containerUuid,
+        isTable: props.inTable
       })
     })
 
-    const getFieldSelected = computed(() => {
-      return fieldsListOptional.value
-        .filter(fieldItem => {
-          return fieldItem.isShowedFromUser
-        })
-        .map(itemField => {
+    // fields showed
+    const fieldsListShowed = computed({
+      get() {
+        return fieldsListAvailable.value.filter(itemField => {
+          return itemField[showedAttibute]
+        }).map(itemField => {
           return itemField.columnName
         })
+      },
+      set(selecteds) {
+        // set columns to show/hidden in vuex store
+        changeShowed(selecteds)
+      }
     })
 
-    // fields optional showed
-    const selectedFields = ref(getFieldSelected.value)
+    const changeShowed = (selectedValues) => {
+      if (props.inTable) {
+        return changeShowedTable(selectedValues)
+      }
+      return changeShowedPanel(selectedValues)
+    }
 
     /**
+     * Set fields to hidden/showed in panel
+     * if is advanced query or browser panel with values or null/not null
+     * operator, dispatch search
      * @param {array} selectedValues
      */
-    const addField = (selectedValues) => {
+    const changeShowedPanel = (selectedValues) => {
       root.$store.dispatch('changeFieldShowedFromUser', {
         containerUuid: props.containerUuid,
         fieldsUser: selectedValues,
@@ -109,15 +144,30 @@ export default defineComponent({
         groupField: props.groupField,
         isAdvancedQuery
       })
-      selectedFields.value = selectedValues
+    }
+
+    /**
+     * Set columns to hidden/showed in table
+     * @param {array} selectedValues
+     */
+    const changeShowedTable = (selectedValues) => {
+      root.$store.dispatch('changeFieldAttributesBoolean', {
+        containerUuid: props.containerUuid,
+        fieldsIncludes: selectedValues,
+        attribute: 'isShowedTableFromUser',
+        valueAttribute: true
+      })
     }
 
     return {
+      cssClass,
+      // computeds
       isMobile,
-      addField,
-      fieldsListOptional,
-      getFieldSelected,
-      selectedFields
+      size,
+      fieldsListShowed,
+      fieldsListAvailable,
+      // methods
+      changeShowed
     }
   }
 })
@@ -131,12 +181,14 @@ export default defineComponent({
     margin-right: 0px !important;
   }
 }
+
+.form-filter-columns {
+  margin: 0px;
+}
 </style>
 <style lang="scss">
+/*
 .form-filter-fields {
-  // position
-  float: right;
-
   .el-tag--small {
     max-width: 132px !important;
   }
@@ -177,4 +229,5 @@ export default defineComponent({
     }
   }
 }
+*/
 </style>

src/store/modules/ADempiere/panel/getters.js

@@ -143,7 +143,7 @@ const getters = {
     return getters.getFieldsListFromPanel(containerUuid)
       .filter(fieldItem => {
         const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
-        if (isMandatory) {
+        if (isMandatory && !isTable) {
           return false
         }