feat: Redefinition filter fields. (#879)

* feat: Redefinition filter fields.

* remove unused element

* change email.

* changes licence

Co-authored-by: EdwinBetanc0urt <EdwinBetanco0urt@outlook.com>

src/components/ADempiere/FilterFields/index.vue

@@ -0,0 +1,180 @@
+<!--
+ 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 EdwinBetanc0urt@outlook.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-form class="form-filter-fields">
+    <!-- <el-form-item :label="groupField"> -->
+    <el-form-item>
+      <el-select
+        v-model="selectedFields"
+        :filterable="!isMobile"
+        :placeholder="$t('components.filterableItems')"
+        multiple
+        collapse-tags
+        value-key="key"
+        :popper-append-to-body="false"
+        @change="addField"
+      >
+        <el-option
+          v-for="(item, key) in fieldsListOptional"
+          :key="key"
+          :label="item.name"
+          :value="item.columnName"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import { defineComponent, computed, ref } from '@vue/composition-api'
+
+export default defineComponent({
+  name: 'FilterFields',
+
+  props: {
+    containerUuid: {
+      type: String,
+      required: true
+    },
+    groupField: {
+      type: String,
+      default: ''
+    },
+    panelType: {
+      type: String,
+      default: 'window'
+    }
+  },
+
+  setup(props, { root }) {
+    const isAdvancedQuery = props.panelType === 'table'
+
+    const isMobile = computed(() => {
+      root.$store.state.app.device === 'mobile'
+    })
+
+    const fieldsListOptional = computed(() => {
+      if (props.panelType === 'window' && !root.isEmptyValue(props.groupField)) {
+        // compare group fields to window
+        return root.$store.getters.getFieldsListNotMandatory({
+          containerUuid: props.containerUuid
+        })
+          .filter(fieldItem => {
+            return fieldItem.groupAssigned === props.groupField
+          })
+      }
+      // get fields not mandatory
+      return root.$store.getters.getFieldsListNotMandatory({
+        containerUuid: props.containerUuid
+      })
+    })
+
+    const getFieldSelected = computed(() => {
+      return fieldsListOptional.value
+        .filter(fieldItem => {
+          return fieldItem.isShowedFromUser
+        })
+        .map(itemField => {
+          return itemField.columnName
+        })
+    })
+
+    // fields optional showed
+    const selectedFields = ref(getFieldSelected.value)
+
+    /**
+     * @param {array} selectedValues
+     */
+    const addField = (selectedValues) => {
+      root.$store.dispatch('changeFieldShowedFromUser', {
+        containerUuid: props.containerUuid,
+        fieldsUser: selectedValues,
+        show: true,
+        groupField: props.groupField,
+        isAdvancedQuery
+      })
+      selectedFields.value = selectedValues
+    }
+
+    return {
+      isMobile,
+      addField,
+      fieldsListOptional,
+      getFieldSelected,
+      selectedFields
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.form-filter-fields {
+  .el-form-item {
+    margin-bottom: 0px !important;
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+  }
+}
+</style>
+<style lang="scss">
+.form-filter-fields {
+  // position
+  float: right;
+
+  .el-tag--small {
+    max-width: 132px !important;
+  }
+
+  // text tag
+  .el-tag {
+    &.el-tag--info {
+      &.el-tag--small {
+        &.el-tag--light  {
+          // max-width: calc(100% - 10px);
+          &:first-child {
+            .el-select__tags-text {
+              max-width: calc(100% - 15px);
+            }
+          }
+        }
+      }
+    }
+  }
+  .el-select__tags-text {
+    width: 100%;
+    overflow: hidden !important;
+    white-space: nowrap;
+    text-overflow: ellipsis !important; // ... end text
+    display: inline-block;
+  }
+
+  // icon X close tag
+  .el-select i.el-tag__close {
+    &.el-tag__close {
+      // left: 58%;
+      // margin-top: 0px !important;
+      // top: 0 !important;
+      color: #FFF !important;
+      // position: absolute !important;
+      position: relative !important;
+      top: -7 !important;
+    }
+  }
+}
+</style>

src/components/ADempiere/Panel/filterFields.vue

@@ -1,135 +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): Edwin Betancourt edwinBetanc0urt@hotmail.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="selectedFields"
-    :filterable="!isMobile"
-    :placeholder="$t('components.filterableItems')"
-    multiple
-    collapse-tags
-    value-key="key"
-    style="float: right;"
-    @change="addField"
-  >
-    <el-option
-      v-for="(item, key) in fieldsListOptional"
-      :key="key"
-      :label="item.name"
-      :value="item.columnName"
-    />
-  </el-select>
-</template>
-
-<script>
-export default {
-  name: 'FilterFields',
-  props: {
-    containerUuid: {
-      type: String,
-      required: true
-    },
-    groupField: {
-      type: String,
-      default: ''
-    },
-    panelType: {
-      type: String,
-      default: 'window'
-    },
-    isAdvancedQuery: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      selectedFields: [] // fields optional showed
-    }
-  },
-  computed: {
-    isMobile() {
-      return this.$store.state.app.device === 'mobile'
-    },
-    fieldsListOptional() {
-      if (this.panelType === 'table') {
-        // fields to search without taking into account the mandatory
-        return this.$store.getters.getFieldsListFromPanel(this.containerUuid, this.isAdvancedQuery)
-          .filter(fieldItem => {
-            return fieldItem.componentPath !== 'FieldButton'
-          })
-      } else if (this.panelType === 'window') {
-        // compare group fields to window
-        return this.$store.getters.getFieldsListNotMandatory({ containerUuid: this.containerUuid })
-          .filter(fieldItem => {
-            return fieldItem.groupAssigned === this.groupField
-          })
-      }
-      // get fields not mandatory
-      return this.$store.getters.getFieldsListNotMandatory({ containerUuid: this.containerUuid })
-    },
-    getFieldSelected() {
-      return this.fieldsListOptional
-        .filter(fieldItem => {
-          return fieldItem.isShowedFromUser
-        })
-        .map(itemField => itemField.columnName)
-    }
-  },
-  watch: {
-    // TODO: Verify peformance with computed set (dispatch) and get (state)
-    getFieldSelected(value) {
-      this.selectedFields = value
-    }
-  },
-  created() {
-    this.selectedFields = this.getFieldSelected
-  },
-  methods: {
-    /**
-     * @param {array} selectedValues
-     */
-    addField(selectedValues) {
-      this.$store.dispatch('changeFieldShowedFromUser', {
-        containerUuid: this.containerUuid,
-        fieldsUser: selectedValues,
-        show: true,
-        groupField: this.groupField,
-        isAdvancedQuery: this.isAdvancedQuery
-      })
-    }
-  }
-}
-</script>
-
-<style>
-  .el-tag--small {
-    height: 24px;
-    padding: 0 8px;
-    line-height: 22px;
-    max-width: 65%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-  .el-select .el-tag__close.el-icon-close {
-    background-color: #C0C4CC;
-    right: 0px;
-    top: 0;
-    color: #FFFFFF;
-  }
-</style>

src/components/ADempiere/Panel/mainPanelMixin.js

@@ -1,6 +1,6 @@
 // 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 edwinBetanc0urt@hotmail.com www.erpya.com
+// Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.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
@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import FieldDefinition from '@/components/ADempiere/Field'
-import FilterFields from '@/components/ADempiere/Panel/filterFields'
+import FilterFields from '@/components/ADempiere/FilterFields'
 import { fieldIsDisplayed } from '@/utils/ADempiere/dictionaryUtils.js'
 import { parsedValueComponent } from '@/utils/ADempiere/valueUtils.js'
 import { convertObjectToKeyValue } from '@/utils/ADempiere/valueFormat.js'

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

@@ -1,3 +1,19 @@
+// 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 EdwinBetanc0urt@outlook.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/>.
+
 import {
   isEmptyValue,
   parsedValueComponent
@@ -113,7 +129,8 @@ const getters = {
   },
 
   /**
-   * Show all available fields not mandatory to show, used in components panel/filterFields.vue
+   * Show all available fields not mandatory and not button
+   * to show, used in components FilterFields
    * @param {string} containerUuid
    * @param {boolean} isEvaluateShowed
    */
@@ -122,15 +139,21 @@ const getters = {
     isEvaluateShowed = true
   }) => {
     // all optionals (not mandatory) fields
-    return getters.getFieldsListFromPanel(containerUuid).filter(fieldItem => {
-      const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
-      if (!isMandatory) {
+    return getters.getFieldsListFromPanel(containerUuid)
+      .filter(fieldItem => {
+        const isMandatory = fieldItem.isMandatory || fieldItem.isMandatoryFromLogic
+        if (isMandatory) {
+          return false
+        }
+        const isButtonField = fieldItem.componentPath === 'FieldButton'
+        if (isButtonField) {
+          return false
+        }
         if (isEvaluateShowed) {
           return fieldIsDisplayed(fieldItem)
         }
-        return !isMandatory
-      }
-    })
+        return true
+      })
   },
 
   /**

src/utils/ADempiere/dictionaryUtils.js

@@ -1,6 +1,6 @@
 // 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 edwinBetanc0urt@hotmail.com www.erpya.com
+// Contributor(s): Edwin Betancourt EdwinBetanc0urt@outlook.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
@@ -61,6 +61,17 @@ export function generateField({
     parsedDefaultValue = undefined
     parsedDefaultValueTo = undefined
 
+    // mandatory, read only and displayed is changed to FilterFields component
+    evaluatedLogics = {
+      isDisplayedFromLogic: true,
+      isMandatoryFromLogic: false,
+      isReadOnlyFromLogic: false
+    }
+    fieldToGenerate.isDisplayed = true
+    fieldToGenerate.isReadOnly = false
+    // Is mandatory to showed available filter fields
+    fieldToGenerate.isMandatory = false
+
     // set field operators list
     isComparisonField = !['FieldBinary', 'FieldButton', 'FieldImage'].includes(componentReference.componentPath)
     if (isComparisonField) {
@@ -460,7 +471,7 @@ export function evalutateTypeField(displayTypeId, isAllInfo = true) {
   if (isAllInfo) {
     return component
   }
-  return component.type
+  return component.componentPath
 }
 
 /**