From 14c080195e2b21bc83e270f69649d7157e249706 Mon Sep 17 00:00:00 2001 From: Max Ehrlicher-Schmidt Date: Mon, 23 Nov 2020 16:11:42 +0100 Subject: [PATCH] Create Page template component --- src/app/app.module.ts | 6 +- .../data-page/data-page.component.html | 62 +++++++++++ .../data-page/data-page.component.scss | 19 ++++ .../data-page/data-page.component.ts | 102 ++++++++++++++++++ src/app/components/table/table.component.html | 2 +- src/app/components/table/table.component.ts | 18 ++-- .../pages/dataPages/bike/bike.component.html | 29 ++--- .../pages/dataPages/bike/bike.component.scss | 6 -- .../pages/dataPages/bike/bike.component.ts | 53 +++------ .../pages/tables/bikes/bikes.component.html | 3 +- src/app/pages/tables/bikes/bikes.component.ts | 6 +- src/app/services/bikes.service.ts | 67 +++++------- 12 files changed, 243 insertions(+), 130 deletions(-) create mode 100644 src/app/components/data-page/data-page.component.html create mode 100644 src/app/components/data-page/data-page.component.scss create mode 100644 src/app/components/data-page/data-page.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2d7fee4..5edba02 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,7 +45,8 @@ import {SidenavProfileComponent} from './components/sidenav-profile/sidenav-prof import { NavService }from './components/menu-list-item/nav.service'; import { TokenInterceptor } from './helper/token.interceptor'; import { BikeComponent } from './pages/dataPages/bike/bike.component'; -import { TableComponent, DeleteConfirmationDialog } from './components/table/table.component' +import { TableComponent, DeleteConfirmationDialog } from './components/table/table.component'; +import { DataPageComponent } from './components/data-page/data-page.component' @NgModule({ @@ -61,7 +62,8 @@ import { TableComponent, DeleteConfirmationDialog } from './components/table/tab CellComponent, DeleteConfirmationDialog, BikeComponent, - TableComponent + TableComponent, + DataPageComponent ], imports: [ BrowserModule, diff --git a/src/app/components/data-page/data-page.component.html b/src/app/components/data-page/data-page.component.html new file mode 100644 index 0000000..3a83ba6 --- /dev/null +++ b/src/app/components/data-page/data-page.component.html @@ -0,0 +1,62 @@ + +
+

Seite konnte nicht gefunden werden :(

+
+ +
+

+ {{ data[headlineDataPath] }} +

+ +
+ +
+
+ + + + + + diff --git a/src/app/components/data-page/data-page.component.scss b/src/app/components/data-page/data-page.component.scss new file mode 100644 index 0000000..332002c --- /dev/null +++ b/src/app/components/data-page/data-page.component.scss @@ -0,0 +1,19 @@ +.page-loading-spinner { + margin: 0 auto; +} +.data-page-wrapper { + height: 100%; + box-sizing: border-box; + overflow: auto; + padding: 2em; +} +.floating-fab-button { + position: absolute; + bottom: 2em; + right: 2em; + } + .floating-fab-button-top { + position: absolute; + top: 2em; + right: 2em; + } diff --git a/src/app/components/data-page/data-page.component.ts b/src/app/components/data-page/data-page.component.ts new file mode 100644 index 0000000..9a61b91 --- /dev/null +++ b/src/app/components/data-page/data-page.component.ts @@ -0,0 +1,102 @@ +import { + AfterViewInit, + Component, + EventEmitter, + Input, + OnInit, + Output, +} from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { deepen } from 'src/app/helperFunctions/deepenObject'; +import { flatten } from 'src/app/helperFunctions/flattenObject'; +import { BikesService } from 'src/app/services/bikes.service'; +import { SchemaService } from 'src/app/services/schema.service'; +import { runInThisContext } from 'vm'; + +@Component({ + selector: 'app-data-page', + templateUrl: './data-page.component.html', + styleUrls: ['./data-page.component.scss'], +}) +export class DataPageComponent implements OnInit { + @Input() + propertiesInfo: { + name: string; + translation: string; + readonly?: boolean; + type?: string; + }[] = []; + + @Input() + dataService: any; + + @Input() + headlineDataPath: string; + @Input() + pageDataGQLType: string = 'CargoBike'; + @Input() + pageDataGQLUpdateInputType: string = 'CargoBikeUpdateInput'; + + @Output() lockEvent = new EventEmitter(); + @Output() saveEvent = new EventEmitter(); + + id: string; + data: any; + isLoading: boolean = false; + isSavingOrLocking: boolean = false; + + constructor( + private route: ActivatedRoute, + private schemaService: SchemaService + ) {} + + ngOnInit(): void { + this.addPropertiesFromGQLSchemaToPropertiesInfo(); + this.id = this.route.snapshot.paramMap.get('id'); + this.reloadPageData(); + this.dataService.pageData.subscribe((data) => { + this.data = flatten(data); + }); + this.dataService.isLoadingPageData.subscribe( + (isLoading) => (this.isLoading = isLoading) + ); + this.dataService.loadingRowIds.subscribe(loadingRowIds => { + console.log(loadingRowIds); + this.isSavingOrLocking = loadingRowIds.includes(this.id); + }) + } + + addPropertiesFromGQLSchemaToPropertiesInfo() { + for (const column of this.propertiesInfo) { + const typeInformation = this.schemaService.getTypeInformation( + this.pageDataGQLType, + column.name + ); + column.type = column.type || typeInformation.type; + } + for (const column of this.propertiesInfo) { + const typeInformation = this.schemaService.getTypeInformation( + this.pageDataGQLUpdateInputType, + column.name + ); + column.readonly = column.readonly || !typeInformation.isPartOfType; + } + } + + lock() { + this.lockEvent.emit(deepen(this.data)); + } + + save() { + this.saveEvent.emit( + this.schemaService.filterObject( + this.pageDataGQLUpdateInputType, + deepen(this.data) + ) + ); + } + + reloadPageData() { + this.dataService.loadPageData({ id: this.id }); + } +} diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html index dc4faff..c5b12cb 100644 --- a/src/app/components/table/table.component.html +++ b/src/app/components/table/table.component.html @@ -136,7 +136,7 @@