mz/DiunaBI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Search by layer number

Browse Source
This commit is contained in:
Michał Zieliński
2023-06-25 19:08:26 +02:00
parent 69a9b200c5
commit f80ece56b1
5 changed files with 112 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
Frontend/src/app/models/layer.model.ts
View File

@@ -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),

95
Frontend/src/app/modules/layers/layers-list/layers-list.component.html
View File

@@ -1,40 +1,59 @@
<div class="list-container mat-elevation-z8" (scroll)="onScroll($event)" style="overflow-y: scroll;">
<div class="list-header">
<mat-grid-list cols="10" rowHeight="60">
<mat-grid-tile>
<button mat-button routerLink="Edit/new">
Add
</button>
</mat-grid-tile>
<mat-grid-tile [colspan]="8">
<mat-form-field class="searchListInput">
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event)">
</mat-form-field>
</mat-grid-tile>
</mat-grid-list>
</div>
<mat-table #table [dataSource]="dataSource" [trackBy]="trackByUid"
matSort class="animate">
<ng-container matColumnDef="number">
<mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="source">
<mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.source}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
</mat-table>
<div class="list-header">
<mat-grid-list cols="10" rowHeight="60">
<mat-grid-tile>
<button mat-button routerLink="Edit/new">
Add
</button>
</mat-grid-tile>
<mat-grid-tile [colspan]="2">
<mat-form-field>
<mat-label>Code</mat-label>
<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" matSort class="animate">
<ng-container matColumnDef="number">
<mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.number}}</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="source">
<mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell>
<mat-cell *matCellDef="let item">{{item.source}}</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row>
</mat-table>
</div>

40
Frontend/src/app/modules/layers/layers-list/layers-list.component.ts
View File

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