From dd64b34fa3c397c38e9d6b08fee44b0773298a2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Zieli=C5=84ski?= Date: Tue, 22 Aug 2023 19:26:08 +0200 Subject: [PATCH] Layer type on list --- Frontend/src/app/models/layer.model.ts | 16 +- .../layers-list/layers-list.component.html | 63 ++------ .../layers-list/layers-list.component.ts | 23 ++- .../app/views/main/main-view.component.html | 2 +- Frontend/src/styles.scss | 137 +++++++++--------- WebAPI/Models/Layer.cs | 3 +- WebAPI/dataParsers/morskaK5.parser.cs | 1 + 7 files changed, 110 insertions(+), 135 deletions(-) diff --git a/Frontend/src/app/models/layer.model.ts b/Frontend/src/app/models/layer.model.ts index 4b61fcd..a03d5b6 100644 --- a/Frontend/src/app/models/layer.model.ts +++ b/Frontend/src/app/models/layer.model.ts @@ -5,6 +5,13 @@ import { environment } from 'src/environments/environment'; import { map } from 'rxjs'; import { Record } from 'src/app/models/record.model'; +export enum LayerType { + Ipmort, + Processed, + Administration, + Dictionary +} + export class Layer extends Base { // eslint-disable-next-line @typescript-eslint/ban-types number?: Number; @@ -12,7 +19,7 @@ export class Layer extends Base { name?: string; records: Record[] = []; created?: string; - type?: 'import' | 'processed'; + type?: LayerType = LayerType.Ipmort; constructor(data: Partial = {}) { super(); @@ -21,6 +28,8 @@ export class Layer extends Base { // eslint-disable-next-line @typescript-eslint/no-explicit-any override deserialize(input: any): this { 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)); } return this; } @@ -33,7 +42,7 @@ export class Layer extends Base { id: [null], name: ['', Validators.required], source: ['', Validators.required], - sheetId: '1G_Hu8DTP-PSPNXTaVYhc_ppnTQi6HWoA4oXSSdUmM9E', + sheetId: '', createdAt: '', modifiedAt: '', createdBy: '', @@ -51,7 +60,8 @@ export class Layer extends Base { } loadForm(form: UntypedFormGroup) { 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.modifiedBy = undefined; diff --git a/Frontend/src/app/modules/layers/layers-list/layers-list.component.html b/Frontend/src/app/modules/layers/layers-list/layers-list.component.html index 48e5b80..031988d 100644 --- a/Frontend/src/app/modules/layers/layers-list/layers-list.component.html +++ b/Frontend/src/app/modules/layers/layers-list/layers-list.component.html @@ -1,60 +1,21 @@ -
- - - +
+ - Number - {{item.number}} + + - Name - {{item.name}} + + - - Source - {{item.source}} + + + - - - + + +
Number{{element.number}} Name{{element.name}} Type{{element.type}}
\ No newline at end of file diff --git a/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts b/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts index b20c9c6..36e93a6 100644 --- a/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts +++ b/Frontend/src/app/modules/layers/layers-list/layers-list.component.ts @@ -1,7 +1,7 @@ import { HttpClient } from '@angular/common/http'; -import { Component, HostListener, OnInit, ViewChild } from '@angular/core'; -import { MatSort, MatSortable, MatSortModule } from '@angular/material/sort'; -import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { Component, HostListener, OnInit } from '@angular/core'; +import { MatSortModule } from '@angular/material/sort'; +import { MatTableModule } from '@angular/material/table'; import { Layer } from 'src/app/models/layer.model'; import { MatInputModule } from '@angular/material/input'; import { MatFormFieldModule } from '@angular/material/form-field'; @@ -24,10 +24,8 @@ import { NgFor } from '@angular/common'; MatChipsModule, MatIconModule, NgFor] }) export class LayersListComponent implements OnInit { - displayedColumns = ['number', 'name', 'source']; - dataSource!: MatTableDataSource; - - @ViewChild(MatSort) sort!: MatSort; + displayedColumns = ['number', 'name', 'type']; + dataSource!: Layer[]; start = 0; limit = 50; @@ -46,8 +44,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; - const data: Layer[] = await Layer.getList(this._http, this.start, this.limit, this.codes); - this.dataSource.data = this.dataSource.data.concat(data); + this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes); this.start = this.end; this.end = this.limit + this.start; setTimeout(() => { @@ -56,9 +53,7 @@ export class LayersListComponent implements OnInit { } } async ngOnInit() { - 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.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes); this.start = this.end; this.end = this.limit + this.start; } @@ -71,7 +66,7 @@ export class LayersListComponent implements OnInit { 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); + this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes); } } // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -81,7 +76,7 @@ export class LayersListComponent implements OnInit { 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); + this.dataSource = await Layer.getList(this._http, this.start, this.limit, this.codes); } event.target.value = ''; } diff --git a/Frontend/src/app/views/main/main-view.component.html b/Frontend/src/app/views/main/main-view.component.html index 5c3f6d6..9eee333 100644 --- a/Frontend/src/app/views/main/main-view.component.html +++ b/Frontend/src/app/views/main/main-view.component.html @@ -39,7 +39,7 @@ -
+
\ No newline at end of file diff --git a/Frontend/src/styles.scss b/Frontend/src/styles.scss index b266c9e..f189912 100644 --- a/Frontend/src/styles.scss +++ b/Frontend/src/styles.scss @@ -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-warn: mat.define-palette(mat.$red-palette); -$my-app-theme: mat.define-light-theme( - ( - color: ( - primary: $my-app-primary, - accent: $my-app-accent, - warn: $my-app-warn, - ), - ) -); +$my-app-theme: mat.define-light-theme((color: (primary: $my-app-primary, + accent: $my-app-accent, + warn: $my-app-warn, + ), + )); @include mat.all-component-themes($my-app-theme); -html, body { height: 100%; } -body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } +html, +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 */ .AppLoading { - margin-top: -10px; - margin-left: -10px; - opacity: 0; - transition: opacity .8s ease-in-out; - position: fixed; - height: 105%; - width: 105%; - z-index: -1; - background-color: lightgrey; - background-image: url('./assets/loader.gif'); - background-repeat: no-repeat; - 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; - } + margin-top: -10px; + margin-left: -10px; + opacity: 0; + transition: opacity .8s ease-in-out; + position: fixed; + height: 105%; + width: 105%; + z-index: -1; + background-color: lightgrey; + background-image: url('./assets/loader.gif'); + background-repeat: no-repeat; + background-position: center; +} - :root { - --avatar-size: 30px; - } - - .avatar { - background-color: #ccc; - border-radius: 50%; - height: var(--avatar-size); - text-align: center; - width: var(--avatar-size); - vertical-align: middle; - margin-right: 10px; - } +/* .loading screen is visible when app is not bootstrapped yet, my-app is empty */ +app-root:empty+.AppLoading { + opacity: 1; + z-index: 100; +} - .form-card { - min-width: 120px; - margin: 20px auto; - } - - .full-width { - width: 100%; - } - - .row { - display: flex; - flex-direction: row; - } - - .col { - flex: 1; - margin-right: 20px; - } - - .col:last-child { - margin-right: 0; - } \ No newline at end of file +:root { + --avatar-size: 30px; +} + +.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 { + min-width: 120px; + margin: 20px auto; +} + +.full-width { + width: 100%; +} + +.row { + display: flex; + flex-direction: row; +} + +.col { + flex: 1; + margin-right: 20px; +} + +.col:last-child { + margin-right: 0; +} + +.list-container { + width: 100%; +} \ No newline at end of file diff --git a/WebAPI/Models/Layer.cs b/WebAPI/Models/Layer.cs index 12c3b0a..1afaccd 100644 --- a/WebAPI/Models/Layer.cs +++ b/WebAPI/Models/Layer.cs @@ -5,7 +5,8 @@ namespace WebAPI.Models public enum LayerType { import, - processed + processed, + administration, } public class Layer { diff --git a/WebAPI/dataParsers/morskaK5.parser.cs b/WebAPI/dataParsers/morskaK5.parser.cs index dd5b873..2304ad1 100644 --- a/WebAPI/dataParsers/morskaK5.parser.cs +++ b/WebAPI/dataParsers/morskaK5.parser.cs @@ -33,6 +33,7 @@ namespace WebAPI.dataParsers layer.Source = "GoogleSheet"; 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.Type = LayerType.import; List records = new List();