fix: Show/hidden optional columns in table. (#256)

src/components/ADempiere/DataTable/index.vue

@@ -49,7 +49,7 @@
                 />
               </icon-element>
               <filter-columns
-                v-if="isOptional"
+                v-if="isShowOptionalColumns"
                 :container-uuid="containerUuid"
                 :panel-type="panelType"
                 class="field-optional"
@@ -73,7 +73,7 @@
                   class="header-search-input"
                 />
                 <filter-columns
-                  v-if="isOptional"
+                  v-if="isShowOptionalColumns"
                   :container-uuid="containerUuid"
                   :panel-type="panelType"
                   class="field-optional"
@@ -334,7 +334,6 @@ export default {
       option: supportedTypes,
       menuTable: '1',
       activeName: this.$route.query.action === 'advancedQuery' ? '1' : '',
-      isOptional: false,
       isFixed: false,
       isLoadPanelFromServer: false,
       rowStyle: { height: '52px' },
@@ -406,6 +405,9 @@ export default {
     getterPanel() {
       return this.$store.getters.getPanel(this.containerUuid)
     },
+    isShowOptionalColumns() {
+      return this.getterPanel.isShowedTableOptionalColumns
+    },
     getterDataRecordsAndSelection() {
       return this.$store.getters.getDataRecordAndSelection(this.containerUuid)
     },
@@ -701,9 +703,6 @@ export default {
     handleChange(val) {
       val = !val
     },
-    showTotals() {
-      this.$store.dispatch('showedTotals', this.containerUuid)
-    },
     showOnlyMandatoryColumns() {
       this.$store.dispatch('showOnlyMandatoryColumns', {
         containerUuid: this.containerUuid
@@ -890,10 +889,6 @@ export default {
         })
       }
     },
-    optionalPanel() {
-      this.showTableSearch = false
-      this.isOptional = !this.isOptional
-    },
     fixedPanel() {
       this.showTableSearch = false
       this.isFixed = !this.isFixed
@@ -1144,7 +1139,6 @@ export default {
       })
     },
     click() {
-      this.isOptional = false
       this.showTableSearch = !this.showTableSearch
       if (this.showTableSearch) {
         this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()

src/components/ADempiere/DataTable/menu/index.vue

@@ -44,7 +44,7 @@
           </el-menu-item>
         </template>
       </el-submenu>
-      <el-menu-item index="optional" @click="optionalPanel()">
+      <el-menu-item index="optional" @click="showOptionalColums()">
         {{ $t('components.filterableItems') }}
       </el-menu-item>
       <el-menu-item index="mandatory" @click="showOnlyMandatoryColumns()">

src/components/ADempiere/DataTable/menu/mixinMenu.js

@@ -221,7 +221,10 @@ export const menuTableMixin = {
       this.showModal(process)
     },
     showTotals() {
-      this.$store.dispatch('showedTotals', this.containerUuid)
+      this.$store.dispatch('changePanelAttributesBoolean', {
+        containerUuid: this.containerUuid,
+        attributeName: 'isShowedTotals'
+      })
     },
     showOnlyMandatoryColumns() {
       this.$store.dispatch('showOnlyMandatoryColumns', {
@@ -261,9 +264,11 @@ export const menuTableMixin = {
         })
       }
     },
-    optionalPanel() {
-      this.showTableSearch = false
-      this.isOptional = !this.isOptional
+    showOptionalColums() {
+      this.$store.dispatch('changePanelAttributesBoolean', {
+        containerUuid: this.containerUuid,
+        attributeName: 'isShowedTableOptionalColumns'
+      })
     },
     fixedPanel() {
       this.showTableSearch = false

src/store/modules/ADempiere/panel.js

@@ -115,6 +115,8 @@ const panel = {
         })
 
       params.recordUuid = null
+      // show/hidden optionals columns to table
+      params.isShowedTableOptionalColumns = false
 
       commit('addPanel', params)
     },
@@ -772,10 +774,18 @@ const panel = {
           }
         })
     },
-    showedTotals({ commit, getters }, containerUuid) {
+    changePanelAttributesBoolean({ commit, getters }, {
+      containerUuid,
+      attributeName,
+      attributeValue
+    }) {
       const panel = getters.getPanel(containerUuid)
       const newPanel = panel
-      newPanel.isShowedTotals = !panel.isShowedTotals
+      if (isEmptyValue(attributeValue)) {
+        newPanel[attributeName] = !panel[attributeName]
+      } else {
+        newPanel[attributeName] = attributeValue
+      }
       commit('changePanel', {
         panel: panel,
         newPanel: newPanel