From 260e1055042ad4919870c371ba1aaeb20f4bfcba Mon Sep 17 00:00:00 2001 From: Max Ehrlicher-Schmidt Date: Tue, 24 Nov 2020 19:25:51 +0100 Subject: [PATCH] Add reference table --- src/app/app.module.ts | 11 +- .../data-page/data-page.component.html | 94 +++++---- .../data-page/data-page.component.scss | 4 +- .../data-page/data-page.component.ts | 40 +++- .../reference-table.component.html | 93 +++++++++ .../reference-table.component.scss | 60 ++++++ .../reference-table.component.ts | 189 ++++++++++++++++++ src/app/components/table/table.component.html | 2 +- src/app/components/table/table.component.ts | 2 +- src/app/helperFunctions/deepenObject.ts | 39 ++-- src/app/helperFunctions/flattenObject.ts | 30 +-- .../pages/dataPages/bike/bike.component.html | 1 + .../pages/dataPages/bike/bike.component.ts | 37 +++- .../table-overview.component.html | 2 +- .../table-overview.component.scss | 1 + .../table-overview.component.spec.ts | 25 --- src/app/services/bikes.service.ts | 16 +- src/app/services/equipmentType.service.ts | 12 +- src/app/services/schema.service.ts | 7 +- 19 files changed, 528 insertions(+), 137 deletions(-) create mode 100644 src/app/components/reference-table/reference-table.component.html create mode 100644 src/app/components/reference-table/reference-table.component.scss create mode 100644 src/app/components/reference-table/reference-table.component.ts delete mode 100644 src/app/pages/table-overview/table-overview.component.spec.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a8d49ef..73cabde 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -27,7 +27,7 @@ import {MatSelectModule} from '@angular/material/select'; import { MatPaginatorModule } from '@angular/material/paginator'; import { MatSortModule } from '@angular/material/sort'; import {MatDialogModule} from '@angular/material/dialog'; - +import {MatAutocompleteModule} from '@angular/material/autocomplete'; import { AppRoutingModule } from './app-routing.module'; @@ -49,7 +49,8 @@ import { TableComponent, DeleteConfirmationDialog } from './components/table/tab import { DataPageComponent } from './components/data-page/data-page.component'; import { EquipmentTypesComponent } from './pages/tables/equipment-types/equipment-types.component'; import { EngagementTypesComponent } from './pages/tables/engagement-types/engagement-types.component'; -import { WorkshopsComponent } from './pages/tables/workshops/workshops.component' +import { WorkshopsComponent } from './pages/tables/workshops/workshops.component'; +import { ReferenceTableComponent } from './components/reference-table/reference-table.component' @NgModule({ @@ -69,7 +70,8 @@ import { WorkshopsComponent } from './pages/tables/workshops/workshops.component DataPageComponent, EquipmentTypesComponent, EngagementTypesComponent, - WorkshopsComponent + WorkshopsComponent, + ReferenceTableComponent ], imports: [ BrowserModule, @@ -100,7 +102,8 @@ import { WorkshopsComponent } from './pages/tables/workshops/workshops.component MatSelectModule, MatPaginatorModule, MatSortModule, - MatDialogModule + MatDialogModule, + MatAutocompleteModule ], providers: [NavService, { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }], diff --git a/src/app/components/data-page/data-page.component.html b/src/app/components/data-page/data-page.component.html index f998061..4ff4910 100644 --- a/src/app/components/data-page/data-page.component.html +++ b/src/app/components/data-page/data-page.component.html @@ -12,16 +12,30 @@ {{ data[headlineDataPath] }} - - {{object.title}} + + {{ object.title }} - + + + {{ object.title }} + + @@ -37,40 +51,40 @@
- - - - -
\ No newline at end of file + + + + + diff --git a/src/app/components/data-page/data-page.component.scss b/src/app/components/data-page/data-page.component.scss index e7a2001..6083b22 100644 --- a/src/app/components/data-page/data-page.component.scss +++ b/src/app/components/data-page/data-page.component.scss @@ -6,9 +6,9 @@ box-sizing: border-box; overflow: auto; padding: 2em; - .card { + .inline-card { display: inline-table; - width: 20em; + min-width: 20em; margin: 1em; } } diff --git a/src/app/components/data-page/data-page.component.ts b/src/app/components/data-page/data-page.component.ts index 242c8ba..9998ffe 100644 --- a/src/app/components/data-page/data-page.component.ts +++ b/src/app/components/data-page/data-page.component.ts @@ -4,17 +4,27 @@ import { deepen } from 'src/app/helperFunctions/deepenObject'; import { flatten } from 'src/app/helperFunctions/flattenObject'; import { SchemaService } from 'src/app/services/schema.service'; -interface PropertyInfoType { +interface PropertyTypeInfo { name: string; translation: string; readonly?: boolean; type?: string; } -interface PropertyGroup { - isGroup: boolean; +interface PropertyGroupInfo { + type: string; title: string; - properties: PropertyInfoType[]; + properties: PropertyTypeInfo[]; +} +interface ReferenceTableInfo { + type: string; + title: string; + name: string; + dataService: any; + columnInfo: PropertyTypeInfo[]; + nameToShowInSelection: any; + propertyNameOfUpdateInput: string; + referenceIds: Array; } @Component({ @@ -24,7 +34,7 @@ interface PropertyGroup { }) export class DataPageComponent implements OnInit { @Input() - propertiesInfo: Array = []; + propertiesInfo: Array = []; @Input() dataService: any; @@ -32,9 +42,11 @@ export class DataPageComponent implements OnInit { @Input() headlineDataPath: string; @Input() - pageDataGQLType: string = 'CargoBike'; + pageDataGQLType: string; @Input() - pageDataGQLUpdateInputType: string = 'CargoBikeUpdateInput'; + pageDataGQLUpdateInputType: string; + @Input() + propertyNameOfUpdateInput: string; @Output() lockEvent = new EventEmitter(); @Output() saveEvent = new EventEmitter(); @@ -67,8 +79,14 @@ export class DataPageComponent implements OnInit { addPropertiesFromGQLSchemaToObject(infoObject: any) { for (const prop of infoObject) { - if (prop.isGroup) { + if (prop.type === 'Group') { this.addPropertiesFromGQLSchemaToObject(prop.properties); + } else if (prop.type === 'ReferenceTable') { + prop.tableDataGQLType = + prop.tableDataGQLType || + this.schemaService.getTypeInformation(this.pageDataGQLType, prop.name) + .type; + prop.referenceIds = []; } else { const typeInformation = this.schemaService.getTypeInformation( this.pageDataGQLType, @@ -98,7 +116,11 @@ export class DataPageComponent implements OnInit { } cancel() { - this.cancelEvent.emit(deepen(this.data)) + this.cancelEvent.emit(deepen(this.data)); + } + + addReferenceIdsToObject(ids: string[], object) { + this.data[object.propertyNameOfUpdateInput] = ids; } reloadPageData() { diff --git a/src/app/components/reference-table/reference-table.component.html b/src/app/components/reference-table/reference-table.component.html new file mode 100644 index 0000000..d6b7c5f --- /dev/null +++ b/src/app/components/reference-table/reference-table.component.html @@ -0,0 +1,93 @@ +
+
+
+ + + + + {{ nameToShowInSelection(element) }} + + + +
+ + Tabelle filtern + + + +
+
+ + + + + + + + + + + + + + + + + + +
+ {{ column.translation || column.name }} + + + + {{ element[column.name] }} + {{ element[column.name] }} + + +
+ +
+
+
+
diff --git a/src/app/components/reference-table/reference-table.component.scss b/src/app/components/reference-table/reference-table.component.scss new file mode 100644 index 0000000..70eb8ba --- /dev/null +++ b/src/app/components/reference-table/reference-table.component.scss @@ -0,0 +1,60 @@ +.table-page-wrapper { + display: flex; + flex-direction: column; + height: 100%; + .headline { + margin: 0 0.5em; + } + .table-control { + margin: 0.5em; + flex: none; + .table-control-button { + margin: 0.25em; + } + .filter { + margin-right: 0.5em; + } + .mat-paginator { + display: inline-block; + width: 50em; + margin-right: 0.5em; + } + } + .table-container { + flex: 1; + width: auto; + margin-left: 0.5em; + margin-right: 0.5em; + max-width: 100%; + overflow: auto; + table { + max-width: 100%; + margin: 0 auto; + .mat-header-cell, + .mat-footer-cell, + .mat-cell { + min-width: 3em; + box-sizing: border-box; + padding: 0 0.25em; + ::ng-deep.mat-form-field-infix { + width: auto !important; + min-width: 50px !important; + } + } + ::ng-deep.mat-form-field { + width: 100%; + } + + .mat-table-sticky { + filter: brightness(90%); + //opacity: 1; + } + + .button-wrapper { + display: flex; + flex-direction: row; + } + } + } + } + \ No newline at end of file diff --git a/src/app/components/reference-table/reference-table.component.ts b/src/app/components/reference-table/reference-table.component.ts new file mode 100644 index 0000000..356325b --- /dev/null +++ b/src/app/components/reference-table/reference-table.component.ts @@ -0,0 +1,189 @@ +import { + Component, + EventEmitter, + Input, + Output, + ViewChild, +} from '@angular/core'; +import { flatten } from 'src/app/helperFunctions/flattenObject'; +import { SchemaService } from 'src/app/services/schema.service'; + +import { MatTableDataSource } from '@angular/material/table'; +import { MatPaginator } from '@angular/material/paginator'; +import { MatSort } from '@angular/material/sort'; +import { FormControl, FormGroup } from '@angular/forms'; + +@Component({ + selector: 'app-reference-table', + templateUrl: './reference-table.component.html', + styleUrls: ['./reference-table.component.scss'], +}) +export class ReferenceTableComponent { + /** this array defines the columns and translations of the table and the order they are displayed */ + @Input() + columnInfo: { + name: string; + translation: string; + sticky?: boolean; + type?: string; + link?: (row: any) => string; + }[] = []; + + @Input() + dataServiceThatProvidesThePossibleData: any; + @Input() + nameToShowInSelection: any; + @Input() + set editable(value: boolean) { + this._editable = value; + value + ? this.addForm.get('addGroup').enable() + : this.addForm.get('addGroup').disable(); + } + get editable() { + return this._editable; + } + _editable: boolean = false; + + @Input() + set data(newdata) { + if (!newdata) return; + this.dataSource.data = []; + for (const element of newdata) { + this.dataSource.data.push(flatten(element)); + } + this.dataSource.data = this.dataSource.data; + this.onReferenceChange(); + } + get data(): any { + return this.dataSource.data; + } + + @Input() + tableDataGQLType: string; + + @Output() referenceIds = new EventEmitter(); + + @ViewChild(MatPaginator) paginator: MatPaginator; + @ViewChild(MatSort) sort: MatSort; + + displayedColumns: string[] = []; + + /** data source of the table */ + dataSource: MatTableDataSource = new MatTableDataSource([]); + possibleValues: Array = []; + possibleValueOptions: Array = []; + + reloadingTable = false; + + addForm: FormGroup = new FormGroup({ addGroup: new FormControl() }); + + tableFilterString: string = ''; + + constructor(private schemaService: SchemaService) {} + + ngOnInit() { + this.addColumnPropertiesFromGQLSchemaToColumnInfo(); + this.columnInfo.forEach((column) => { + this.displayedColumns.push(column.name); + }); + this.displayedColumns.push('buttons'); + + this.addForm + .get('addGroup') + .valueChanges.subscribe(() => this.filterPossibleValueOptions()); + } + + ngAfterViewInit() { + this.dataSource.paginator = this.paginator; + this.dataSource.sort = this.sort; + + this.dataSource.sortingDataAccessor = (item, columnName) => { + if (typeof item[columnName] === 'string') { + return item[columnName].toLocaleLowerCase(); + } + return item[columnName]; + }; + + this.dataServiceThatProvidesThePossibleData.tableData.subscribe((data) => { + this.possibleValues = []; + if (data) { + for (const row of data) { + this.possibleValues.push(flatten(row)); + } + } + this.filterPossibleValueOptions(); + }); + this.dataServiceThatProvidesThePossibleData.loadTableData(); + } + + addColumnPropertiesFromGQLSchemaToColumnInfo() { + for (const column of this.columnInfo) { + const typeInformation = this.schemaService.getTypeInformation( + this.tableDataGQLType, + column.name + ); + column.type = column.type || typeInformation.type; + } + } + + isStickyColumn(propertyName: string) { + return ( + this.columnInfo.find((column) => column.name === propertyName)?.sticky || + false + ); + } + + delete(row: any) { + const index = this.dataSource.data.findIndex( + (element) => element.id === row.id + ); + if (index === -1) return; + this.dataSource.data.splice(index, 1); + this.dataSource.data = this.dataSource.data; //needed to trigger update lol + this.filterPossibleValueOptions(); + this.onReferenceChange(); + } + + addReference(row: any) { + this.addForm.get('addGroup').reset(); + this.dataSource.data = [row, ...this.dataSource.data]; + + this.tableFilterString = ''; + this.applyTableFilter(); + this.filterPossibleValueOptions(); + this.onReferenceChange(); + } + + getRowById(id: string) { + return this.dataSource.data.find((row) => row.id === id); + } + + filterPossibleValueOptions() { + this.possibleValueOptions = this.possibleValues.filter( + (element) => !this.dataSource.data.find((row) => row.id === element.id) + ); + let searchString = this.addForm.get('addGroup').value; + if (!searchString) { + return; + } + searchString = searchString.toLocaleLowerCase(); + this.possibleValueOptions = this.possibleValueOptions.filter((element) => + this.nameToShowInSelection(element) + .toLocaleLowerCase() + .includes(searchString) + ); + } + + applyTableFilter() { + this.dataSource.filter = this.tableFilterString; + } + + onReferenceChange() { + const ids = []; + for (const element of this.data) { + ids.push(element.id); + } + this.referenceIds.emit(ids); + } +} diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html index e2a2486..de1a6b2 100644 --- a/src/app/components/table/table.component.html +++ b/src/app/components/table/table.component.html @@ -1,5 +1,5 @@
-

+

{{ headline }}

diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts index 8024f8d..2f157af 100644 --- a/src/app/components/table/table.component.ts +++ b/src/app/components/table/table.component.ts @@ -24,7 +24,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog'; }) export class TableComponent { @Input() - headline: string = "Keine Überschrift"; + headline: string = null; /** this array defines the columns and translations of the table and the order they are displayed */ @Input() columnInfo: { diff --git a/src/app/helperFunctions/deepenObject.ts b/src/app/helperFunctions/deepenObject.ts index 7286923..dfafd83 100644 --- a/src/app/helperFunctions/deepenObject.ts +++ b/src/app/helperFunctions/deepenObject.ts @@ -1,21 +1,24 @@ export function deepen(object: Object): any { - let newObject = {}; - for (const prop in object) { - if (prop.includes('.')) { - const splittedProp = prop.split('.'); - const outerProp = splittedProp[0]; - const innerProp = splittedProp.slice(1).join('.'); - if (!newObject[outerProp]) { - newObject[outerProp] = {}; - } - newObject[outerProp][innerProp] = object[prop]; - } else { - newObject[prop] = object[prop]; + let newObject; + if (Array.isArray(object)) { + newObject = new Array(); + } else newObject = new Object(); + for (const prop in object) { + if (prop.includes('.')) { + const splittedProp = prop.split('.'); + const outerProp = splittedProp[0]; + const innerProp = splittedProp.slice(1).join('.'); + if (!newObject[outerProp]) { + newObject[outerProp] = {}; } + newObject[outerProp][innerProp] = object[prop]; + } else { + newObject[prop] = object[prop]; } - for (const prop in newObject) { - if (typeof newObject[prop] === 'object' && newObject[prop] !== null) - newObject[prop] = deepen(newObject[prop]); - } - return newObject; - } \ No newline at end of file + } + for (const prop in newObject) { + if (typeof newObject[prop] === 'object' && newObject[prop] !== null) + newObject[prop] = deepen(newObject[prop]); + } + return newObject; +} diff --git a/src/app/helperFunctions/flattenObject.ts b/src/app/helperFunctions/flattenObject.ts index 1edae54..cb54d92 100644 --- a/src/app/helperFunctions/flattenObject.ts +++ b/src/app/helperFunctions/flattenObject.ts @@ -1,16 +1,20 @@ export function flatten(object: Object, prefix: string = ''): any { - let newObject = {}; - for (const prop in object) { - let propName = prefix + prop; - if (typeof object[prop] === 'object' && object[prop] !== null) { - const flattenedObject = flatten(object[prop], propName + '.'); - for (const flattenedProperty in flattenedObject) { - newObject[flattenedProperty] = - flattenedObject[flattenedProperty]; - } - } else { - newObject[propName] = object[prop]; + let newObject = {}; + for (const prop in object) { + let propName = prefix + prop; + if (Array.isArray(object[prop])) { + newObject[propName] = []; + for (const arrayElement of object[prop]) { + newObject[propName].push(flatten(arrayElement)); } + } else if (typeof object[prop] === 'object' && object[prop] !== null) { + const flattenedObject = flatten(object[prop], propName + '.'); + for (const flattenedProperty in flattenedObject) { + newObject[flattenedProperty] = flattenedObject[flattenedProperty]; + } + } else { + newObject[propName] = object[prop]; } - return newObject; - } \ No newline at end of file + } + return newObject; +} diff --git a/src/app/pages/dataPages/bike/bike.component.html b/src/app/pages/dataPages/bike/bike.component.html index f84bcad..b5b5773 100644 --- a/src/app/pages/dataPages/bike/bike.component.html +++ b/src/app/pages/dataPages/bike/bike.component.html @@ -4,6 +4,7 @@ [headlineDataPath]="headlineDataPath" [pageDataGQLType]="pageDataGQLType" [pageDataGQLUpdateInputType]="pageDataGQLUpdateInputType" + [propertyNameOfUpdateInput]="propertyNameOfUpdateInput" (lockEvent)="lock($event)" (saveEvent)="save($event)" (cancelEvent)="cancel($event)" diff --git a/src/app/pages/dataPages/bike/bike.component.ts b/src/app/pages/dataPages/bike/bike.component.ts index b1a6bae..6355668 100644 --- a/src/app/pages/dataPages/bike/bike.component.ts +++ b/src/app/pages/dataPages/bike/bike.component.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { BikesService } from 'src/app/services/bikes.service'; +import { EquipmentTypeService } from 'src/app/services/equipmentType.service'; @Component({ selector: 'app-bike', @@ -9,17 +10,17 @@ import { BikesService } from 'src/app/services/bikes.service'; export class BikeComponent implements OnInit { propertiesInfo = [ { - isGroup: true, + type: 'Group', title: 'Allgemein', properties: [ { name: 'name', translation: 'Name' }, { name: 'id', translation: 'ID', readonly: true }, - { name: 'group', translation: 'Gruppe' }, + { name: 'Group', translation: 'Gruppe' }, { name: 'modelName', translation: 'Modell' }, ], }, { - isGroup: true, + type: 'Group', title: 'Versicherungsdaten', properties: [ { @@ -51,7 +52,7 @@ export class BikeComponent implements OnInit { ], }, { - isGroup: true, + type: 'Group', title: 'Maße und Ladungen', properties: [ { name: 'dimensionsAndLoad.bikeLength', translation: 'Länge' }, @@ -85,7 +86,7 @@ export class BikeComponent implements OnInit { ], }, { - isGroup: true, + type: 'Group', title: 'Sicherheitsinformationen', properties: [ { name: 'security.frameNumber', translation: 'Rahmennummer' }, @@ -102,7 +103,7 @@ export class BikeComponent implements OnInit { ], }, { - isGroup: true, + type: 'Group', title: 'Ausstattung', properties: [ { name: 'technicalEquipment.bicycleShift', translation: 'Schaltung' }, @@ -118,7 +119,7 @@ export class BikeComponent implements OnInit { ], }, { - isGroup: true, + type: 'Group', title: 'Sonstiges', properties: [ { name: 'stickerBikeNameState', translation: 'Aufkleber Status' }, @@ -131,7 +132,7 @@ export class BikeComponent implements OnInit { ], }, { - isGroup: true, + type: 'Group', title: 'provider', properties: [ { name: 'provider.id', translation: '' }, @@ -147,7 +148,7 @@ export class BikeComponent implements OnInit { ], }, { - isGroup: true, + type: 'Group', title: 'lendingstation', properties: [ { name: 'lendingStation.id', translation: '' }, @@ -157,6 +158,15 @@ export class BikeComponent implements OnInit { { name: 'lendingStation.address.zip', translation: '' }, ], }, + { + type: 'ReferenceTable', + title: 'Equipmenttypen', + name: 'equipmentType', + dataService: null, + columnInfo: [{name: 'name', translation: "Name"}, {name: 'description', translation: "Beschreibung"}], + nameToShowInSelection: (element) => {return element.name}, + propertyNameOfUpdateInput: "equipmentTypeIds" + }, ]; headlineDataPath = 'name'; @@ -165,7 +175,14 @@ export class BikeComponent implements OnInit { dataService: any; - constructor(private bikesService: BikesService) {} + constructor( + private bikesService: BikesService, + private equipmentTypeService: EquipmentTypeService + ) { + this.propertiesInfo.find( + (prop) => prop.name === 'equipmentType' + ).dataService = this.equipmentTypeService; + } ngOnInit(): void { this.dataService = this.bikesService; diff --git a/src/app/pages/table-overview/table-overview.component.html b/src/app/pages/table-overview/table-overview.component.html index 161fcdd..0fee1ae 100644 --- a/src/app/pages/table-overview/table-overview.component.html +++ b/src/app/pages/table-overview/table-overview.component.html @@ -9,7 +9,7 @@
- Tabelle 5 + Equipmenttypen Tabelle 7 Tabelle 8 Tabelle 9 diff --git a/src/app/pages/table-overview/table-overview.component.scss b/src/app/pages/table-overview/table-overview.component.scss index 40613c0..c42a930 100644 --- a/src/app/pages/table-overview/table-overview.component.scss +++ b/src/app/pages/table-overview/table-overview.component.scss @@ -1,5 +1,6 @@ mat-grid-tile { background: gray; + cursor: pointer; } .grid-list-spacer{ diff --git a/src/app/pages/table-overview/table-overview.component.spec.ts b/src/app/pages/table-overview/table-overview.component.spec.ts deleted file mode 100644 index 999cc86..0000000 --- a/src/app/pages/table-overview/table-overview.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { TableOverviewComponent } from './table-overview.component'; - -describe('TableOverviewComponent', () => { - let component: TableOverviewComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ TableOverviewComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(TableOverviewComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/services/bikes.service.ts b/src/app/services/bikes.service.ts index 3211dff..c613cc3 100644 --- a/src/app/services/bikes.service.ts +++ b/src/app/services/bikes.service.ts @@ -63,7 +63,7 @@ export class BikesService { loadTableData() { this.tableData.next(null); this.getCargoBikesGQL.fetch().subscribe((result) => { - this.tableData.next(result.data.cargoBikes); + this.tableData.next(result.data?.cargoBikes); }); } @@ -85,7 +85,7 @@ export class BikesService { this.reloadCargoBikeByIdGQL .fetch(variables) .subscribe((result) => { - this.updateDataRowFromResponse(result.data.cargoBikeById) + this.updateDataRowFromResponse(result.data.cargoBikeById); }) .add(() => { this.removeLoadingRowId(variables.id); @@ -153,11 +153,13 @@ export class BikesService { } private updateDataRowFromResponse(rowFromResponse: any) { - const newTableData = this.tableData.value.map((row) => - rowFromResponse.id === row.id ? rowFromResponse : row - ); - this.tableData.next(newTableData); - if ((rowFromResponse.id === this.pageData?.value?.id)) { + if (this.tableData.value) { + const newTableData = this.tableData.value.map((row) => + rowFromResponse.id === row.id ? rowFromResponse : row + ); + this.tableData.next(newTableData); + } + if (rowFromResponse.id === this.pageData?.value?.id) { this.pageData.next(rowFromResponse); } } diff --git a/src/app/services/equipmentType.service.ts b/src/app/services/equipmentType.service.ts index 30a0dcc..a595930 100644 --- a/src/app/services/equipmentType.service.ts +++ b/src/app/services/equipmentType.service.ts @@ -32,7 +32,7 @@ export class EquipmentTypeService { private updateEquipmentTypeGQL: UpdateEquipmentTypeGQL, private lockEquipmentTypeGQL: LockEquipmentTypeGQL, private unlockEquipmentTypeGQL: UnlockEquipmentTypeGQL, - private deleteEquipmentTypeGQL: DeleteEquipmentTypeGQL, + private deleteEquipmentTypeGQL: DeleteEquipmentTypeGQL ) {} addLoadingRowId(id: string) { @@ -116,9 +116,11 @@ export class EquipmentTypeService { } private updateDataRowFromResponse(rowFromResponse: any) { - const newTableData = this.tableData.value.map((row) => - rowFromResponse.id === row.id ? rowFromResponse : row - ); - this.tableData.next(newTableData); + if (this.tableData.value) { + const newTableData = this.tableData.value.map((row) => + rowFromResponse.id === row.id ? rowFromResponse : row + ); + this.tableData.next(newTableData); + } } } diff --git a/src/app/services/schema.service.ts b/src/app/services/schema.service.ts index 90d383c..82d9159 100644 --- a/src/app/services/schema.service.ts +++ b/src/app/services/schema.service.ts @@ -95,7 +95,12 @@ export class SchemaService { } filterObject(graphQLTypeName: string, object: object): any { - const filteredObject = {}; + let filteredObject; + if (Array.isArray(object)) { + return object; + //TODO: check if array consists of objects? + } else filteredObject = new Object(); + for (const prop in object) { if (typeof object[prop] === 'object' && object[prop] !== null) { const info = this.getTypeInformation(graphQLTypeName, prop);