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

Layer type on list

Browse Source
This commit is contained in:
Michał Zieliński
2023-08-22 19:26:08 +02:00
parent f4978009b5
commit dd64b34fa3
7 changed files with 110 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,13 @@ import { environment } from 'src/environments/environment';
import { map } from 'rxjs'; import { map } from 'rxjs';
import { Record } from 'src/app/models/record.model'; import { Record } from 'src/app/models/record.model';
export enum LayerType {
Ipmort,
Processed,
Administration,
Dictionary
}
export class Layer extends Base { export class Layer extends Base {
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types
number?: Number; number?: Number;
@@ -12,7 +19,7 @@ export class Layer extends Base {
name?: string; name?: string;
records: Record[] = []; records: Record[] = [];
created?: string; created?: string;
type?: 'import' | 'processed'; type?: LayerType = LayerType.Ipmort;
constructor(data: Partial<Layer> = {}) { constructor(data: Partial<Layer> = {}) {
super(); super();
@@ -21,6 +28,8 @@ export class Layer extends Base {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
override deserialize(input: any): this { override deserialize(input: any): this {
Object.assign(this, Object.assign(this, super.deserialize(input))); Object.assign(this, Object.assign(this, super.deserialize(input)));
console.log(input.type);
console.log(this.type);
if (this.records) { this.records = this.records.map(x => new Record().deserialize(x)); } if (this.records) { this.records = this.records.map(x => new Record().deserialize(x)); }
return this; return this;
} }
@@ -33,7 +42,7 @@ export class Layer extends Base {
id: [null], id: [null],
name: ['', Validators.required], name: ['', Validators.required],
source: ['', Validators.required], source: ['', Validators.required],
sheetId: '1G_Hu8DTP-PSPNXTaVYhc_ppnTQi6HWoA4oXSSdUmM9E', sheetId: '',
createdAt: '', createdAt: '',
modifiedAt: '', modifiedAt: '',
createdBy: '', createdBy: '',
@@ -51,7 +60,8 @@ export class Layer extends Base {
} }
loadForm(form: UntypedFormGroup) { loadForm(form: UntypedFormGroup) {
for (const field of Object.keys(form.controls)) { for (const field of Object.keys(form.controls)) {
this[field as keyof Layer] = form.controls[field].value; console.log(field);
//this[field as keyof Layer] = form.controls[field].value;
} }
this.createdBy = undefined; this.createdBy = undefined;
this.modifiedBy = undefined; this.modifiedBy = undefined;

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

@@ -1,60 +1,21 @@
<div class="list-container mat-elevation-z8" (scroll)="onScroll($event)" style="overflow-y: scroll;"> <div class="list-container" (scroll)="onScroll($event)" style="overflow-y: scroll;">
<!-- <table mat-table [dataSource]="dataSource">
<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"> <ng-container matColumnDef="number">
<mat-header-cell *matHeaderCellDef mat-sort-header>Number</mat-header-cell> <th mat-header-cell *matHeaderCellDef>Number</th>
<mat-cell *matCellDef="let item">{{item.number}}</mat-cell> <td mat-cell *matCellDef="let element">{{element.number}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell> <th mat-header-cell *matHeaderCellDef>Name</th>
<mat-cell *matCellDef="let item">{{item.name}}</mat-cell> <td mat-cell *matCellDef="let element">{{element.name}}</td>
</ng-container> </ng-container>
<ng-container matColumnDef="source"> <ng-container matColumnDef="type">
<mat-header-cell *matHeaderCellDef mat-sort-header>Source</mat-header-cell> <th mat-header-cell *matHeaderCellDef>Type</th>
<mat-cell *matCellDef="let item">{{item.source}}</mat-cell> <td mat-cell *matCellDef="let element">{{element.type}}</td>
</ng-container> </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<mat-row *matRowDef="let item; columns: displayedColumns;" [routerLink]="['Detail/', item.id]"></mat-row> <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['Detail/', row.id]"></tr>
</mat-table> </table>
</div> </div>

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

@@ -1,7 +1,7 @@
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Component, HostListener, OnInit, ViewChild } from '@angular/core'; import { Component, HostListener, OnInit } from '@angular/core';
import { MatSort, MatSortable, MatSortModule } from '@angular/material/sort'; import { MatSortModule } from '@angular/material/sort';
import { MatTableDataSource, MatTableModule } from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import { Layer } from 'src/app/models/layer.model'; import { Layer } from 'src/app/models/layer.model';
import { MatInputModule } from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field'; import { MatFormFieldModule } from '@angular/material/form-field';
@@ -24,10 +24,8 @@ import { NgFor } from '@angular/common';
MatChipsModule, MatIconModule, NgFor] MatChipsModule, MatIconModule, NgFor]
}) })
export class LayersListComponent implements OnInit { export class LayersListComponent implements OnInit {
displayedColumns = ['number', 'name', 'source']; displayedColumns = ['number', 'name', 'type'];
dataSource!: MatTableDataSource<Layer>; dataSource!: Layer[];
@ViewChild(MatSort) sort!: MatSort;
start = 0; start = 0;
limit = 50; limit = 50;
@@ -46,8 +44,7 @@ export class LayersListComponent implements OnInit {
public async onScroll(event: any) { public async onScroll(event: any) {
if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 1 && !this.loadingInProgress) { if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 1 && !this.loadingInProgress) {
this.loadingInProgress = true; this.loadingInProgress = true;
const data: Layer[] = await Layer.getList(this._http, this.start, this.limit, this.codes); this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes);
this.dataSource.data = this.dataSource.data.concat(data);
this.start = this.end; this.start = this.end;
this.end = this.limit + this.start; this.end = this.limit + this.start;
setTimeout(() => { setTimeout(() => {
@@ -56,9 +53,7 @@ export class LayersListComponent implements OnInit {
} }
} }
async ngOnInit() { async ngOnInit() {
this.dataSource = new MatTableDataSource(await Layer.getList(this._http, this.start, this.limit, this.codes)); this.dataSource = 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.start = this.end;
this.end = this.limit + this.start; this.end = this.limit + this.start;
} }
@@ -71,7 +66,7 @@ export class LayersListComponent implements OnInit {
this.start = 0; this.start = 0;
this.end = this.limit + this.start; this.end = this.limit + this.start;
this.codes.splice(index, 1); this.codes.splice(index, 1);
this.dataSource.data = await Layer.getList(this._http, this.start, this.limit, this.codes); this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes);
} }
} }
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -81,7 +76,7 @@ export class LayersListComponent implements OnInit {
this.start = 0; this.start = 0;
this.end = this.limit + this.start; this.end = this.limit + this.start;
this.codes.push(value); this.codes.push(value);
this.dataSource.data = await Layer.getList(this._http, this.start, this.limit, this.codes); this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes);
} }
event.target.value = ''; event.target.value = '';
} }

2
Frontend/src/app/views/main/main-view.component.html
View File

@@ -39,7 +39,7 @@
</button> </button>
</mat-menu> </mat-menu>
</mat-toolbar> </mat-toolbar>
<div class="app-content"> <div>
<router-outlet></router-outlet> <router-outlet></router-outlet>
</div> </div>
</mat-drawer-container> </mat-drawer-container>

137
Frontend/src/styles.scss
View File

@@ -6,77 +6,84 @@ $my-app-primary: mat.define-palette(mat.$orange-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); $my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-app-warn: mat.define-palette(mat.$red-palette); $my-app-warn: mat.define-palette(mat.$red-palette);
$my-app-theme: mat.define-light-theme( $my-app-theme: mat.define-light-theme((color: (primary: $my-app-primary,
( accent: $my-app-accent,
color: ( warn: $my-app-warn,
primary: $my-app-primary, ),
accent: $my-app-accent, ));
warn: $my-app-warn,
),
)
);
@include mat.all-component-themes($my-app-theme); @include mat.all-component-themes($my-app-theme);
html, body { height: 100%; } html,
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */ /* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.AppLoading { .AppLoading {
margin-top: -10px; margin-top: -10px;
margin-left: -10px; margin-left: -10px;
opacity: 0; opacity: 0;
transition: opacity .8s ease-in-out; transition: opacity .8s ease-in-out;
position: fixed; position: fixed;
height: 105%; height: 105%;
width: 105%; width: 105%;
z-index: -1; z-index: -1;
background-color: lightgrey; background-color: lightgrey;
background-image: url('./assets/loader.gif'); background-image: url('./assets/loader.gif');
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
} }
/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
app-root:empty + .AppLoading {
opacity: 1;
z-index: 100;
}
:root { /* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
--avatar-size: 30px; app-root:empty+.AppLoading {
} opacity: 1;
z-index: 100;
.avatar { }
background-color: #ccc;
border-radius: 50%;
height: var(--avatar-size);
text-align: center;
width: var(--avatar-size);
vertical-align: middle;
margin-right: 10px;
}
.form-card { :root {
min-width: 120px; --avatar-size: 30px;
margin: 20px auto; }
}
.avatar {
.full-width { background-color: #ccc;
width: 100%; border-radius: 50%;
} height: var(--avatar-size);
text-align: center;
.row { width: var(--avatar-size);
display: flex; vertical-align: middle;
flex-direction: row; margin-right: 10px;
} }
.col { .form-card {
flex: 1; min-width: 120px;
margin-right: 20px; margin: 20px auto;
} }
.col:last-child { .full-width {
margin-right: 0; width: 100%;
} }
.row {
display: flex;
flex-direction: row;
}
.col {
flex: 1;
margin-right: 20px;
}
.col:last-child {
margin-right: 0;
}
.list-container {
width: 100%;
}

3
WebAPI/Models/Layer.cs
View File

@@ -5,7 +5,8 @@ namespace WebAPI.Models
public enum LayerType public enum LayerType
{ {
import, import,
processed processed,
administration,
} }
public class Layer public class Layer
{ {

1
WebAPI/dataParsers/morskaK5.parser.cs
View File

@@ -33,6 +33,7 @@ namespace WebAPI.dataParsers
layer.Source = "GoogleSheet"; layer.Source = "GoogleSheet";
layer.Number = db.Layers.Count() + 1; layer.Number = db.Layers.Count() + 1;
layer.Name = $"L{layer.Number}-I-{data[0][1]}-{data[0][2]}/{data[0][3]}-{DateTime.Now.ToString("yyyyMMddHHmm")}"; layer.Name = $"L{layer.Number}-I-{data[0][1]}-{data[0][2]}/{data[0][3]}-{DateTime.Now.ToString("yyyyMMddHHmm")}";
layer.Type = LayerType.import;
List<Record> records = new List<Record>(); List<Record> records = new List<Record>();