refactor: update search functionality to reset page and filter items based on search term (#117)

Author: Yehonal

src/app/home/home.component.html

@@ -13,7 +13,7 @@
         class="form-control"
         placeholder="Search an item in the catalogue"
         [(ngModel)]="search"
-        (ngModelChange)="refresh()"
+        (ngModelChange)="onSearchChange($event)"
         aria-label="Search"
         aria-describedby="search"
       />
@@ -46,7 +46,7 @@
 
           <mat-paginator
             [pageIndex]="page"
-            [length]="items.length"
+            [length]="filteredLength(items)"
             [pageSize]="catalogueService.CONF.pageSize"
             (page)="onPageChange($event)"
             [hidePageSize]="true"

src/app/home/home.component.ts

@@ -23,6 +23,12 @@ export class HomeComponent {
     this.cdRef.detectChanges();
   }
 
+  onSearchChange(value: string): void {
+    // Ensure we reset to the first page when the search term changes
+    this.page = 0;
+    this.refresh();
+  }
+
   onPageChange(page: PageEvent): void {
     this.page = page.pageIndex;
   }
@@ -44,4 +50,11 @@ export class HomeComponent {
     }
     return filteredItems.slice(this.catalogueService.CONF.pageSize * this.page, this.catalogueService.CONF.pageSize * (this.page + 1));
   }
+
+  filteredLength(modules: Repository[]): number {
+    if (!this.search) {
+      return modules.length;
+    }
+    return modules.filter((item) => item.name.toLowerCase().indexOf(this.search.toLowerCase()) > -1).length;
+  }
 }