Search by layer number

Frontend/src/app/modules/layers/layers-list/layers-list.component.ts

@@ -8,13 +8,21 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { RouterLink } from '@angular/router';
 import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import {COMMA, ENTER, TAB} from '@angular/cdk/keycodes';
+import { NgFor } from '@angular/common';
 
 @Component({
     selector: 'app-layers-list',
     templateUrl: './layers-list.component.html',
     styleUrls: ['./layers-list.component.scss'],
     standalone: true,
-    imports: [MatGridListModule, MatButtonModule, RouterLink, MatFormFieldModule, MatInputModule, MatTableModule, MatSortModule]
+    imports: [MatGridListModule, MatButtonModule, RouterLink, MatFormFieldModule, 
+      MatInputModule, MatTableModule, MatSortModule, MatSelectModule, FormsModule,
+      MatChipsModule, MatIconModule, NgFor]
 })
 export class LayersListComponent implements OnInit {
   displayedColumns = ['number', 'name', 'source'];
@@ -27,6 +35,9 @@ export class LayersListComponent implements OnInit {
   end: number = this.limit + this.start;
   loadingInProgress: boolean = false;
 
+  type: string = "";
+  codes: string[] = [];
+
   constructor(
     private _http: HttpClient,
   ) { }
@@ -35,7 +46,7 @@ export class LayersListComponent implements OnInit {
   public async  onScroll(event: any) {
     if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 1 && !this.loadingInProgress) {
       this.loadingInProgress = true;
-      let data: Layer[] = await Layer.getList(this._http, this.start, this.limit);
+      let data: Layer[] = await Layer.getList(this._http, this.start, this.limit, this.codes);
       this.dataSource.data = this.dataSource.data.concat(data);
       this.start = this.end;
       this.end = this.limit + this.start;
@@ -45,18 +56,33 @@ export class LayersListComponent implements OnInit {
     }
   }
   async ngOnInit() {
-    this.dataSource = new MatTableDataSource(await Layer.getList(this._http, this.start, this.limit));
+    this.dataSource = new MatTableDataSource(await Layer.getList(this._http, this.start, this.limit, this.codes));
     this.dataSource.sort = this.sort;
     this.dataSource.sort.sort({ id: 'number', start: 'desc' } as MatSortable);
     this.start = this.end;
     this.end = this.limit + this.start;
   }
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter =  filterValue.trim().toLowerCase();
-  }
   trackByUid(index : number, item : Layer) {
     return item.id;
   }
+  async removeCode(code: string) {
+    const index = this.codes.indexOf(code);
+    if (index >= 0) {
+      this.start = 0;
+      this.end = this.limit + this.start;
+      this.codes.splice(index, 1);
+      this.dataSource.data = await Layer.getList(this._http, this.start, this.limit, this.codes);
+    }
+  }
+  async addCode(event: any) {
+    const value = (event.target.value || '').trim();
+    if (value) {
+      this.start = 0;
+      this.end = this.limit + this.start;
+      this.codes.push(value);
+      this.dataSource.data = await Layer.getList(this._http, this.start, this.limit, this.codes);
+    }
+    event.target.value = '';
+  }
 }