"added" admin data page
FlayInAHook
4 years ago
parent
a21d1ab4e9
commit
102203a02c
@ -0,0 +1,171 @@
|
||||
<mat-spinner
|
||||
*ngIf="isLoading"
|
||||
[diameter]="32"
|
||||
class="page-loading-spinner"
|
||||
></mat-spinner>
|
||||
<div class="page-wrapper" *ngIf="!isLoading && !data">
|
||||
<h1>Seite konnte nicht gefunden werden :(</h1>
|
||||
</div>
|
||||
|
||||
<div class="data-page-wrapper" *ngIf="data && !isLoading">
|
||||
<h1 class="headline">
|
||||
{{ getHeadline !== undefined ? getHeadline(data) : data[headlineDataPath] }}
|
||||
<mat-icon>{{ headlineIconName }}</mat-icon>
|
||||
</h1>
|
||||
<ng-container *ngFor="let object of propertiesInfo">
|
||||
<mat-card
|
||||
class="inline-card"
|
||||
*ngIf="
|
||||
object.type === 'Group' &&
|
||||
(!object.hideCondition || !object.hideCondition(data))
|
||||
"
|
||||
>
|
||||
<mat-card-title class="card-header">
|
||||
<h2>{{ object.title }}</h2>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="data?.isLockedByMe && object.possibleObjects"
|
||||
(click)="openSelectObjectDialog(object)"
|
||||
>
|
||||
<mat-icon>expand_more</mat-icon>
|
||||
</button>
|
||||
</mat-card-title>
|
||||
<ng-container *ngFor="let prop of object.properties">
|
||||
<app-cell
|
||||
*ngIf="
|
||||
prop.type !== 'NumRange' &&
|
||||
prop.type !== 'Link' &&
|
||||
prop.type !== 'DateRange'
|
||||
"
|
||||
[isList]="prop.list"
|
||||
[editable]="data?.isLockedByMe && prop.acceptedForUpdating"
|
||||
[required]="prop.requiredForUpdating && data?.isLockedByMe"
|
||||
(validityChange)="validityChange(prop.dataPath, $event)"
|
||||
[(value)]="data[prop.dataPath]"
|
||||
[label]="prop.translation || prop.dataPath"
|
||||
[inputType]="prop.type"
|
||||
></app-cell>
|
||||
<app-number-range-cell
|
||||
*ngIf="prop.type === 'NumRange'"
|
||||
[editable]="data?.isLockedByMe && prop.acceptedForUpdating"
|
||||
(validityChange)="validityChange(prop.dataPath, $event)"
|
||||
[(min)]="data[prop.dataPath + '.min']"
|
||||
[(max)]="data[prop.dataPath + '.max']"
|
||||
[label]="prop.translation || prop.dataPath"
|
||||
></app-number-range-cell>
|
||||
<app-date-range-cell
|
||||
*ngIf="prop.type === 'DateRange'"
|
||||
[editable]="data?.isLockedByMe && prop.acceptedForUpdating"
|
||||
[required]="prop.requiredForUpdating && data?.isLockedByMe"
|
||||
(validityChange)="validityChange(prop.dataPath, $event)"
|
||||
[(from)]="data[prop.dataPath + '.from']"
|
||||
[(to)]="data[prop.dataPath + '.to']"
|
||||
></app-date-range-cell>
|
||||
<a
|
||||
mat-button
|
||||
class="link-button"
|
||||
color="primary"
|
||||
*ngIf="prop.type === 'Link'"
|
||||
[routerLink]="prop.link(data)"
|
||||
>{{ prop.linkText }}
|
||||
</a>
|
||||
</ng-container>
|
||||
</mat-card>
|
||||
|
||||
<mat-card
|
||||
class="inline-card"
|
||||
*ngIf="
|
||||
object.type === 'ReferenceTable' &&
|
||||
(!object.hideCondition || !object.hideCondition(data))
|
||||
"
|
||||
>
|
||||
<mat-card-title
|
||||
><h2>{{ object.title }}</h2>
|
||||
<a
|
||||
mat-button
|
||||
*ngIf="object.linkToTable"
|
||||
color="primary"
|
||||
[routerLink]="object.linkToTable(data)"
|
||||
[queryParams]="
|
||||
object.linkToTableParams ? object.linkToTableParams(data) : {}
|
||||
"
|
||||
matTooltip="Zur Tabelle"
|
||||
>
|
||||
<mat-icon>subdirectory_arrow_right</mat-icon>
|
||||
<mat-icon>table_chart</mat-icon>
|
||||
</a>
|
||||
</mat-card-title>
|
||||
<app-reference-table
|
||||
[dataServiceThatProvidesThePossibleData]="object.dataService"
|
||||
[nameToShowInSelection]="object.nameToShowInSelection"
|
||||
[columnInfo]="object.columnInfo"
|
||||
[data]="data[object.dataPath]"
|
||||
[editable]="data?.isLockedByMe"
|
||||
[tableDataGQLType]="object.tableDataGQLType"
|
||||
(referenceIds)="addReferenceIdsToObject($event, object)"
|
||||
[editableReferences]="object.editableReferences"
|
||||
></app-reference-table>
|
||||
</mat-card>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
||||
<button
|
||||
mat-mini-fab
|
||||
(click)="reloadPageData()"
|
||||
class="floating-fab-button-top"
|
||||
[disabled]="isSavingOrLocking || isLoading"
|
||||
color="primary"
|
||||
matTooltip="Daten aktualisieren. Achtung! Alle ungespeicherten Änderungen gehen verloren."
|
||||
>
|
||||
<mat-icon>sync</mat-icon>
|
||||
</button>
|
||||
|
||||
<div id="floating-fab-button-box">
|
||||
<button
|
||||
mat-fab
|
||||
(click)="lock()"
|
||||
*ngIf="!data?.isLockedByMe && !data?.isLocked"
|
||||
class="floating-fab-button"
|
||||
color="primary"
|
||||
[disabled]="isSavingOrLocking || isLoading"
|
||||
>
|
||||
<mat-icon>edit</mat-icon>
|
||||
</button>
|
||||
<button
|
||||
mat-mini-fab
|
||||
(click)="cancel()"
|
||||
*ngIf="data?.isLockedByMe"
|
||||
class="floating-fab-button"
|
||||
[disabled]="isSavingOrLocking || isLoading"
|
||||
>
|
||||
<mat-icon>cancel</mat-icon>
|
||||
</button>
|
||||
<div
|
||||
*ngIf="data?.isLockedByMe"
|
||||
[matTooltip]="
|
||||
countUnvalidProperties() > 0
|
||||
? 'Ungültige oder nicht ausgefüllte Pflichtfelder (rot): ' +
|
||||
countUnvalidProperties()
|
||||
: 'Abspeichern'
|
||||
"
|
||||
>
|
||||
<button
|
||||
mat-fab
|
||||
(click)="save()"
|
||||
class="floating-fab-button"
|
||||
[disabled]="
|
||||
isSavingOrLocking || isLoading || countUnvalidProperties() > 0
|
||||
"
|
||||
>
|
||||
<mat-icon>save</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
mat-fab
|
||||
*ngIf="data?.isLocked"
|
||||
matTooltip="Dieser Eintrag wird gerade von einem anderen Bearbeiter editiert. Aktualisieren Sie die Seite, um den neuen Status abzurufen."
|
||||
class="floating-fab-button"
|
||||
>
|
||||
<mat-icon>locked</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
@ -0,0 +1,43 @@
|
||||
.page-loading-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.data-page-wrapper {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
padding: 2em;
|
||||
.inline-card {
|
||||
display: inline-table;
|
||||
min-width: 20em;
|
||||
margin: 1em;
|
||||
.link-button {
|
||||
padding: 0;
|
||||
margin-top: -16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#floating-fab-button-box {
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
bottom: 2em;
|
||||
right: 2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.floating-fab-button {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
.floating-fab-button-top {
|
||||
position: absolute;
|
||||
top: 2em;
|
||||
right: 2em;
|
||||
}
|
||||
|
||||
.headline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.mat-icon {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,246 @@
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnDestroy,
|
||||
OnInit,
|
||||
Output,
|
||||
} from '@angular/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { deepen } from '../../helperFunctions/deepenObject';
|
||||
import { flatten } from '../../helperFunctions/flattenObject';
|
||||
import { SchemaService } from '../../services/schema.service';
|
||||
import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component';
|
||||
|
||||
interface PropertyTypeInfo {
|
||||
dataPath: string;
|
||||
translation: string;
|
||||
acceptedForUpdating?: boolean;
|
||||
requiredForUpdating?: boolean;
|
||||
required?: boolean;
|
||||
type?: string;
|
||||
}
|
||||
|
||||
interface PropertyGroupInfo {
|
||||
type: string;
|
||||
title: string;
|
||||
properties: PropertyTypeInfo[];
|
||||
}
|
||||
interface ReferenceTableInfo {
|
||||
type: string;
|
||||
title: string;
|
||||
dataPath: string;
|
||||
dataService: any;
|
||||
columnInfo: PropertyTypeInfo[];
|
||||
nameToShowInSelection: any;
|
||||
propertyNameOfUpdateInput: string;
|
||||
referenceIds: Array<string>;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-data-page',
|
||||
templateUrl: './admin-data-page.component.html',
|
||||
styleUrls: ['./admindata-page.component.scss'],
|
||||
})
|
||||
export class DataPageComponent implements OnInit, OnDestroy {
|
||||
@Input()
|
||||
propertiesInfo: Array<any> = [];
|
||||
|
||||
@Input()
|
||||
dataService: any;
|
||||
|
||||
/** specifies which property should be shown in the headline */
|
||||
@Input()
|
||||
headlineDataPath: string;
|
||||
/** specifies which string should be shown in the headline. If this is provided headlineDataPath is ignored*/
|
||||
@Input()
|
||||
getHeadline: (any) => string;
|
||||
@Input()
|
||||
headlineIconName: string = 'help_outline';
|
||||
@Input()
|
||||
pageDataGQLType: string;
|
||||
@Input()
|
||||
pageDataGQLUpdateInputType: string;
|
||||
@Input()
|
||||
propertyNameOfUpdateInput: string;
|
||||
|
||||
relockingInterval = null;
|
||||
@Input()
|
||||
relockingIntervalDuration = 1000 * 60 * 1;
|
||||
|
||||
@Output() lockEvent = new EventEmitter();
|
||||
@Output() saveEvent = new EventEmitter();
|
||||
@Output() cancelEvent = new EventEmitter();
|
||||
|
||||
id: string;
|
||||
data: any = null;
|
||||
isLoading: boolean = false;
|
||||
isSavingOrLocking: boolean = false;
|
||||
|
||||
propertyValidity = {};
|
||||
|
||||
constructor(
|
||||
private route: ActivatedRoute,
|
||||
private schemaService: SchemaService,
|
||||
public dialog: MatDialog
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.addPropertiesFromGQLSchemaToObject(this.propertiesInfo);
|
||||
this.id = this.route.snapshot.paramMap.get('id');
|
||||
this.reloadPageData();
|
||||
this.dataService.pageData.subscribe((data) => {
|
||||
if (data == null) {
|
||||
this.data = null;
|
||||
} else if (this.data?.isLockedByMe && data?.isLockedByMe) {
|
||||
// dont overwrite data when in edit mode and relock is performed
|
||||
return;
|
||||
} else {
|
||||
this.data = flatten(data);
|
||||
}
|
||||
});
|
||||
this.dataService.isLoadingPageData.subscribe(
|
||||
(isLoading) => (this.isLoading = isLoading)
|
||||
);
|
||||
this.dataService.loadingRowIds.subscribe((loadingRowIds) => {
|
||||
this.isSavingOrLocking = loadingRowIds.includes(this.id);
|
||||
});
|
||||
|
||||
this.relockingInterval = setInterval(() => {
|
||||
if (this.data?.isLockedByMe) {
|
||||
this.lock();
|
||||
}
|
||||
}, this.relockingIntervalDuration);
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
clearInterval(this.relockingInterval);
|
||||
}
|
||||
|
||||
addPropertiesFromGQLSchemaToObject(infoObject: any) {
|
||||
for (const prop of infoObject) {
|
||||
if (prop.type === 'Link') {
|
||||
continue;
|
||||
}
|
||||
if (prop.type === 'Group') {
|
||||
this.addPropertiesFromGQLSchemaToObject(prop.properties);
|
||||
} else if (prop.type === 'ReferenceTable') {
|
||||
prop.tableDataGQLType =
|
||||
prop.tableDataGQLType ||
|
||||
this.schemaService.getTypeInformation(
|
||||
this.pageDataGQLType,
|
||||
prop.dataPath
|
||||
).type;
|
||||
if (!prop.type) {
|
||||
console.error(
|
||||
"Didn't found type for: " +
|
||||
prop.dataPath +
|
||||
' on ' +
|
||||
this.pageDataGQLType
|
||||
);
|
||||
}
|
||||
prop.referenceIds = [];
|
||||
} else {
|
||||
const typeInformation = this.schemaService.getTypeInformation(
|
||||
this.pageDataGQLType,
|
||||
prop.dataPath
|
||||
);
|
||||
prop.type = prop.type || typeInformation.type;
|
||||
prop.list = typeInformation.isList;
|
||||
if (!prop.type) {
|
||||
console.error(
|
||||
"Didn't found type for: " +
|
||||
prop.dataPath +
|
||||
' on ' +
|
||||
this.pageDataGQLType
|
||||
);
|
||||
}
|
||||
prop.required =
|
||||
prop.required != null ? prop.required : typeInformation.isRequired;
|
||||
|
||||
const updateTypeInformation = this.schemaService.getTypeInformation(
|
||||
this.pageDataGQLUpdateInputType,
|
||||
prop.dataPath
|
||||
);
|
||||
prop.acceptedForUpdating =
|
||||
prop.acceptedForUpdating != null
|
||||
? prop.acceptedForUpdating
|
||||
: updateTypeInformation.isPartOfType;
|
||||
|
||||
prop.requiredForUpdating =
|
||||
prop.requiredForUpdating != null
|
||||
? prop.requiredForUpdating
|
||||
: prop.required || typeInformation.isRequired;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lock() {
|
||||
this.lockEvent.emit(deepen(this.data));
|
||||
}
|
||||
|
||||
validityChange(propName: string, isValid: Event) {
|
||||
this.propertyValidity[propName] = isValid;
|
||||
}
|
||||
|
||||
countUnvalidProperties() {
|
||||
let unvalidFieldsCount = 0;
|
||||
for (const prop in this.propertyValidity) {
|
||||
if (!this.propertyValidity[prop]) {
|
||||
unvalidFieldsCount++;
|
||||
}
|
||||
}
|
||||
return unvalidFieldsCount;
|
||||
}
|
||||
|
||||
save() {
|
||||
this.saveEvent.emit(
|
||||
this.schemaService.filterObject(
|
||||
this.pageDataGQLUpdateInputType,
|
||||
deepen(this.data)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
cancel() {
|
||||
this.cancelEvent.emit(deepen(this.data));
|
||||
}
|
||||
|
||||
openSelectObjectDialog(object: any) {
|
||||
const dialogRef = this.dialog.open(SelectObjectDialogComponent, {
|
||||
width: 'auto',
|
||||
autoFocus: false,
|
||||
data: {
|
||||
nameToShowInSelection: object.nameToShowInSelection,
|
||||
currentlySelectedObjectId: object.currentlySelectedObjectId(this.data),
|
||||
possibleObjects: object.possibleObjects,
|
||||
},
|
||||
});
|
||||
dialogRef.afterClosed().subscribe((selectedObject) => {
|
||||
if (selectedObject) {
|
||||
this.data[object.propertyNameOfReferenceId] = selectedObject.id;
|
||||
const newObjectFlattened = flatten(selectedObject);
|
||||
for (const newProperty in newObjectFlattened) {
|
||||
this.data[object.propertyPrefixToOverwrite + '.' + newProperty] =
|
||||
newObjectFlattened[newProperty];
|
||||
}
|
||||
} else if (selectedObject === null) {
|
||||
this.data[object.propertyNameOfReferenceId] = null;
|
||||
for (const prop in this.data) {
|
||||
if (prop.startsWith(object.propertyPrefixToOverwrite)) {
|
||||
this.data[prop] = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addReferenceIdsToObject(ids: string[], object) {
|
||||
this.data[object.propertyNameOfUpdateInput] = ids;
|
||||
}
|
||||
|
||||
reloadPageData() {
|
||||
this.dataService.loadPageData({ id: this.id });
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue