Fast filtering in the tables (#885)

* Filter on tables by columns marked as isSelectionColumn

* remove unnecessary code

* Search Table Children

* minimal chages

Co-authored-by: elsiosanchez <elsiossanches@gmail.com>

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

@@ -73,13 +73,17 @@ export default {
       currentTable: 0,
       visible: this.getShowContextMenuTable,
       searchTable: '', // text from search
+      searchTableChildren: '', // text from search
       defaultMaxPagination: 50,
       activeName,
       rowStyle: {
         height: '52px'
       },
       uuidCurrentRecordSelected: '',
-      showTableSearch: false
+      showTableSearch: false,
+      searchColumnName: [],
+      recordsSearchTable: [],
+      recordsSearchTableChildren: []
     }
   },
   computed: {
@@ -257,6 +261,15 @@ export default {
         return this.currentTable
       }
       return this.currentTable + 1
+    },
+
+    allRecordsData() {
+      if (this.isParent && !this.isEmptyValue(this.searchTable)) {
+        return this.recordsSearchTable
+      } else if (!this.isParent && !this.isEmptyValue(this.searchTableChildren)) {
+        return this.recordsSearchTableChildren
+      }
+      return this.recordsData
     }
   },
   watch: {
@@ -631,21 +644,37 @@ export default {
         selection: rowsSelection
       })
     },
-    filterResult() {
+    filterResult(value) {
-      const data = this.recordsData.filter(rowItem => {
+      const selectionColumn = this.fieldsList.filter(element => element.isSelectionColumn)
-        if (this.searchTable.trim().length) {
+      this.searchColumnName = selectionColumn.map(element => {
-          let find = false
+        if (element.isSelectionColumn) {
-          Object.keys(rowItem).forEach(key => {
+          return element.columnName
-            if (String(rowItem[key]).toLowerCase().includes(String(this.searchTable).toLowerCase())) {
-              find = true
-              return find
-            }
-          })
-          return find
         }
-        return true
       })
-      return data
+      if (this.isParent) {
+        this.searchTable = value
+      } else {
+        this.searchTableChildren = value
+      }
+      const result = this.getterDataRecordsAndSelection.record.filter(record => {
+        let list
+        this.searchColumnName.forEach(validate => {
+          if (typeof record[validate] !== 'boolean' && !this.isEmptyValue(record[validate]) || !this.isEmptyValue(record['DisplayColumn_' + validate])) {
+            const SearchColumns = typeof record[validate] === 'number' ? record['DisplayColumn_' + validate] : record[validate]
+            if (SearchColumns.includes(value)) {
+              list = record
+            }
+          }
+        })
+        return list
+      })
+      if (this.isParent) {
+        this.searchTable = value
+        this.recordsSearchTable = result
+      } else {
+        this.searchTableChildren = value
+        this.recordsSearchTableChildren = result
+      }
     },
     /**
      * Verify is displayed field in column table

src/components/ADempiere/DataTable/index.vue

@@ -84,6 +84,7 @@
                 size="mini"
                 :placeholder="$t('table.dataTable.search')"
                 class="header-search-input"
+                @input="filterResult"
               />
             </div>
           </div>
@@ -138,7 +139,6 @@
             :is-mobile="isMobile"
             :panel-metadata="panelMetadata"
           />
-
           <el-table
             ref="multipleTable"
             v-loading="!isCreateNewRoute && isLoaded"
@@ -149,7 +149,7 @@
             reserve-selection
             highlight-current-row
             :row-style="rowStyle"
-            :data="showTableSearch ? filterResult() : recordsData"
+            :data="allRecordsData"
             :element-loading-text="$t('notifications.loading')"
             element-loading-background="rgba(255, 255, 255, 0.8)"
             cell-class-name="datatable-max-cell-height"