Fix SelectAll issue in DataTable after search (#893)

Fix SelectAll issue in DataTable when filter is applied

webapp/src/components/DynamicDataTable.vue

@@ -18,6 +18,7 @@
       :global-filter-fields="globalFilterFields"
       removable-sort
       sort-mode="multiple"
+      @filter="onFilter"
       @row-click="goToEditPage"
       @select-all-change="onSelectAllChange"
       @page="onPageChange"
@@ -182,6 +183,7 @@ export default {
       addToCollectionModalIsOpen: false,
       isSampleFetchError: false,
       itemsSelected: [],
+      allSelected: false,
       filters: {
         global: { value: null },
         item_id: {
@@ -197,8 +199,8 @@ export default {
           constraints: [{ value: null, matchMode: FilterMatchMode.CONTAINS }],
         },
       },
+      filteredData: [],
       allowedTypes: INVENTORY_TABLE_TYPES,
-      allSelected: false,
       page: 0,
       rows: 20,
     };
@@ -296,19 +298,42 @@ export default {
       }
       return false;
     },
+    getVisibleItems() {
+      const start = this.page * this.rows;
+      const end = start + this.rows;
+      if (this.filteredData.length <= this.rows) {
+        return this.filteredData.slice(start, end);
+      }
+
+      return this.data.slice(start, end);
+    },
+    checkAllSelected() {
+      const visibleItems = this.getVisibleItems();
+
+      if (visibleItems.length === 0) {
+        return false;
+      }
+      return visibleItems.every((currentItem) =>
+        this.itemsSelected.some((selectedItem) => selectedItem.item_id === currentItem.item_id),
+      );
+    },
+    onFilter(event) {
+      this.filteredData = event.filteredValue;
+      this.allSelected = this.checkAllSelected();
+    },
     onSelectAllChange(event) {
-      if (event.checked) {
-        this.allSelected = event.checked;
-        const newItems = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
-        newItems.forEach((item) => {
-          if (!this.itemsSelected.includes(item)) {
+      this.allSelected = event.checked;
+      const itemsToSelect = this.getVisibleItems();
+
+      if (this.allSelected) {
+        const selectedIds = new Set(this.itemsSelected.map((item) => item.item_id));
+        itemsToSelect.forEach((item) => {
+          if (!selectedIds.has(item.item_id)) {
             this.itemsSelected.push(item);
           }
         });
       } else {
-        this.allSelected = event.checked;
-        const itemsToRemove = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
-        const idsToRemove = new Set(itemsToRemove.map((item) => item.item_id));
+        const idsToRemove = new Set(itemsToSelect.map((item) => item.item_id));
         this.itemsSelected = this.itemsSelected.filter((item) => !idsToRemove.has(item.item_id));
       }
     },
@@ -321,10 +346,7 @@ export default {
     onPageChange(event) {
       this.page = event.page;
       this.rows = event.rows;
-      const currentItems = this.data.slice(this.page * this.rows, (this.page + 1) * this.rows);
-      this.allSelected = currentItems.every((currentItem) =>
-        this.itemsSelected.some((selectedItem) => selectedItem.item_id === currentItem.item_id),
-      );
+      this.allSelected = this.checkAllSelected();
     },
   },
 };