Search by layer number

Frontend/src/app/models/layer.model.ts

@@ -66,9 +66,13 @@ export class Layer extends Base {
         });
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    static getList(_http: HttpClient, start: number, limit: number): any {
+    static getList(_http: HttpClient, start: number, limit: number, codes: string[]): any {
         return new Promise((resolve, reject) => {
-            _http.get<Layer[]>(`${environment.api.url}/layers?start=${start}&limit=${limit}`)
+            let codesQuery = "";
+            if (codes.length) {
+                codesQuery = `&${codes.map(x => `codes=${x}`).join('&')}`;
+            }
+            _http.get<Layer[]>(`${environment.api.url}/layers?start=${start}&limit=${limit}${codesQuery}`)
                 .pipe(map(data => data.map(x => new Layer().deserialize(x))))
                 .subscribe({
                     next: (data) => resolve(data),

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

@@ -6,17 +6,37 @@
           Add
         </button>
       </mat-grid-tile>
-        <mat-grid-tile [colspan]="8">
+      <mat-grid-tile [colspan]="2">
-          <mat-form-field class="searchListInput">
+        <mat-form-field>
-            <mat-label>Filter</mat-label>
+          <mat-label>Code</mat-label>
-            <input matInput (keyup)="applyFilter($event)">
+          <input matInput (blur)="addCode($event)" (keyup.enter)="addCode($event)"/>
+        </mat-form-field>
+      </mat-grid-tile>
+      <mat-grid-tile [colspan]="5">
+          <mat-chip-listbox>
+            <mat-chip *ngFor="let code of codes" 
+              selected color="accent" removable (removed)="removeCode(code)">
+              {{code}}
+              <button matChipRemove>
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </mat-chip>
+          </mat-chip-listbox>
+      </mat-grid-tile>
+      <mat-grid-tile colspan="2">
+        <mat-form-field>
+          <mat-label>Layer type</mat-label>
+          <mat-select [(ngModel)]="type">
+            <mat-option value="">All</mat-option>
+            <mat-option value="import">Import</mat-option>
+            <mat-option value="processed">Processed</mat-option>
+          </mat-select>
         </mat-form-field>
       </mat-grid-tile>
     </mat-grid-list>
   </div>
 
-    <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" 
+  <mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid" matSort class="animate">
-      matSort class="animate">
 
     <ng-container matColumnDef="number">
       <mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
@@ -36,5 +56,4 @@
     <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
     <mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
   </mat-table>
-  </div>
+</div>
-  

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 = '';
+  }
 }
 

WebAPI/Controllers/LayersController.cs

@@ -1,17 +1,8 @@
-using Google.Apis.Auth;
+using System.Linq;
-using Google.Apis.Http;
 using Google.Apis.Sheets.v4;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
-using Microsoft.Extensions.Configuration;
-using Microsoft.Identity.Client.Platforms.Features.DesktopOs.Kerberos;
-using Microsoft.IdentityModel.Tokens;
-using System;
-using System.Configuration;
-using System.IdentityModel.Tokens.Jwt;
-using System.Security.Claims;
-using System.Text;
 using WebAPI.dataParsers;
 using WebAPI.Exports;
 using WebAPI.Models;
@@ -40,14 +31,23 @@ namespace WebAPI.Controllers
         }
 
         [HttpGet]
-        public IActionResult GetAll(int start, int limit)
+        public IActionResult GetAll(int start, int limit, [FromQuery] string[] codes)
         {
             try
+            {
+                if (codes != null && codes.Length > 0)
+                {
+                    return Ok(db.Layers.Where(x => !x.IsDeleted)
+                        .Where(x => codes.Select(Int32.Parse).ToList().Contains(x.Number))
+                        .OrderByDescending(x => x.Number)
+                        .Skip(start).Take(limit).ToList());
+                } else
                 {
                     return Ok(db.Layers.Where(x => !x.IsDeleted)
                         .OrderByDescending(x => x.Number)
                         .Skip(start).Take(limit).ToList());
                 }
+            }
             catch (Exception e)
             {
                 return BadRequest(e.ToString());

WebAPI/Models/Layer.cs

@@ -8,7 +8,7 @@ namespace WebAPI.Models
         [Key]
         public Guid Id { get; set; }
         [Required]
-        public int? Number { get; set; }
+        public int Number { get; set; }
         [Required]
         public string? Source { get; set; }
         [Required]