WIP Usermanagement
FlayInAHook
4 years ago
parent
f98ca428f2
commit
226b4bff2e
@ -1,171 +1,216 @@
|
|||||||
<mat-spinner
|
|
||||||
*ngIf="isLoading"
|
<mat-toolbar color="primary">
|
||||||
[diameter]="32"
|
<span>Admin Table</span>
|
||||||
class="page-loading-spinner"
|
<span class="spacer"></span>
|
||||||
></mat-spinner>
|
Reload data:
|
||||||
<div class="page-wrapper" *ngIf="!isLoading && !data">
|
<button mat-icon-button (click)="refresh()">
|
||||||
<h1>Seite konnte nicht gefunden werden :(</h1>
|
<mat-icon>refresh</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-toolbar>
|
||||||
|
|
||||||
|
<div class="container mat-elevation-z8">
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field floatPlaceholder="never" color="accent">
|
||||||
|
<input matInput #filter placeholder="Filter issues">
|
||||||
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="data-page-wrapper" *ngIf="data && !isLoading">
|
<mat-table #table [dataSource]="dataSource" matSort class="mat-cell">
|
||||||
<h1 class="headline">
|
|
||||||
{{ getHeadline !== undefined ? getHeadline(data) : data[headlineDataPath] }}
|
<!-- normal shit -->
|
||||||
<mat-icon>{{ headlineIconName }}</mat-icon>
|
<ng-container matColumnDef="name">
|
||||||
</h1>
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
|
||||||
<ng-container *ngFor="let object of propertiesInfo">
|
<mat-cell *matCellDef="let row" >{{row.name}}</mat-cell>
|
||||||
<mat-card
|
</ng-container>
|
||||||
class="inline-card"
|
|
||||||
*ngIf="
|
<ng-container matColumnDef="email">
|
||||||
object.type === 'Group' &&
|
<mat-header-cell *matHeaderCellDef mat-sort-header>E-Mail</mat-header-cell>
|
||||||
(!object.hideCondition || !object.hideCondition(data))
|
<mat-cell *matCellDef="let row"> {{row.email}}</mat-cell>
|
||||||
"
|
</ng-container>
|
||||||
>
|
|
||||||
<mat-card-title class="card-header">
|
<ng-container matColumnDef="password">
|
||||||
<h2>{{ object.title }}</h2>
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Passwort</mat-header-cell>
|
||||||
<button
|
<mat-cell *matCellDef="let row"> {{row.password}}</mat-cell>
|
||||||
mat-button
|
</ng-container>
|
||||||
*ngIf="data?.isLockedByMe && object.possibleObjects"
|
|
||||||
(click)="openSelectObjectDialog(object)"
|
<ng-container matColumnDef="roles">
|
||||||
>
|
<mat-header-cell *matHeaderCellDef mat-sort-header>Rollen</mat-header-cell>
|
||||||
<mat-icon>expand_more</mat-icon>
|
<mat-cell *matCellDef="let row"> {{row.roles}}</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- actions -->
|
||||||
|
<ng-container matColumnDef="actions">
|
||||||
|
<mat-header-cell *matHeaderCellDef>
|
||||||
|
<button mat-icon-button color="primary" (click)="addNew()">
|
||||||
|
<mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</mat-card-title>
|
</mat-header-cell>
|
||||||
<ng-container *ngFor="let prop of object.properties">
|
|
||||||
<app-cell
|
<mat-cell *matCellDef="let row; let i=index;">
|
||||||
*ngIf="
|
<button mat-icon-button color="accent" (click)="startEdit(row)">
|
||||||
prop.type !== 'NumRange' &&
|
<mat-icon aria-label="Edit">edit</mat-icon>
|
||||||
prop.type !== 'Link' &&
|
</button>
|
||||||
prop.type !== 'DateRange'
|
|
||||||
"
|
<button mat-icon-button color="accent" (click)="deleteItem(i, row.id, row.title, row.state, row.url)">
|
||||||
[isList]="prop.list"
|
<mat-icon aria-label="Delete">delete</mat-icon>
|
||||||
[editable]="data?.isLockedByMe && prop.acceptedForUpdating"
|
</button>
|
||||||
[required]="prop.requiredForUpdating && data?.isLockedByMe"
|
</mat-cell>
|
||||||
(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>
|
</ng-container>
|
||||||
</mat-card>
|
|
||||||
|
|
||||||
<mat-card
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||||
class="inline-card"
|
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||||
|
</mat-table>
|
||||||
|
<mat-paginator #paginator
|
||||||
|
[length]="dataSource.filteredData.length"
|
||||||
|
[pageIndex]="0"
|
||||||
|
[pageSize]="10"
|
||||||
|
[pageSizeOptions]="[5, 10, 25, 100]">
|
||||||
|
</mat-paginator>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--<div *ngIf="dataLoaded">
|
||||||
|
<app-editable-table
|
||||||
|
[columns]="['name','email','password', 'Actions']"
|
||||||
|
[editableColumns] = "['name', 'email', 'password']"
|
||||||
|
[dateColumns] ="[]"
|
||||||
|
[data]="tableData"
|
||||||
|
[pageSizeOptions]="[5,20,50,100]"
|
||||||
|
[searchable]="true"
|
||||||
|
(action)="action($event)"
|
||||||
|
[notification]="yourMessage"
|
||||||
|
[maxChar]="23">
|
||||||
|
</app-editable-table>
|
||||||
|
</div>-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!--<div style="overflow: auto;" *ngIf="dataLoaded">
|
||||||
|
<table mat-table [dataSource]="dataSource" matSort class="example-container">
|
||||||
|
Checkbox Column
|
||||||
|
<ng-container matColumnDef="select" sticky>
|
||||||
|
<th mat-header-cell *matHeaderCellDef>
|
||||||
|
<mat-checkbox
|
||||||
|
(change)="$event ? masterToggle() : null"
|
||||||
|
[checked]="selection.hasValue() && isAllSelected()"
|
||||||
|
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||||
|
>
|
||||||
|
</mat-checkbox>
|
||||||
|
</th>
|
||||||
|
<td
|
||||||
|
mat-cell
|
||||||
|
*matCellDef="let element"
|
||||||
|
[ngClass]="{ 'highlighted-column': column.highlighted }"
|
||||||
|
>
|
||||||
|
<ng-container
|
||||||
*ngIf="
|
*ngIf="
|
||||||
object.type === 'ReferenceTable' &&
|
column.type !== 'DateRange' &&
|
||||||
(!object.hideCondition || !object.hideCondition(data))
|
column.type !== 'NumRange' &&
|
||||||
|
column.possibleObjects === undefined
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<mat-card-title
|
<app-cell
|
||||||
><h2>{{ object.title }}</h2>
|
[editable]="
|
||||||
|
(element.newObject && column.acceptedForCreation) ||
|
||||||
|
(column.acceptedForUpdating && element.isLockedByMe)
|
||||||
|
"
|
||||||
|
[required]="true"
|
||||||
|
(validityChange)="
|
||||||
|
validityChange(element, column.dataPath, $event)
|
||||||
|
"
|
||||||
|
[(value)]="element[column.dataPath]"
|
||||||
|
[isList]="false"
|
||||||
|
[inputType]="column.type"
|
||||||
|
[link]="column.link ? column.link(element) : null"
|
||||||
|
></app-cell>
|
||||||
|
<ng-template #stringValue>
|
||||||
|
<span *ngIf="!column.link">{{ element[column.dataPath] }}</span>
|
||||||
<a
|
<a
|
||||||
mat-button
|
mat-button
|
||||||
*ngIf="object.linkToTable"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
[routerLink]="object.linkToTable(data)"
|
*ngIf="column.link"
|
||||||
[queryParams]="
|
[routerLink]="column.link(element)"
|
||||||
object.linkToTableParams ? object.linkToTableParams(data) : {}
|
>{{ element[column.dataPath] }}</a
|
||||||
"
|
|
||||||
matTooltip="Zur Tabelle"
|
|
||||||
>
|
>
|
||||||
<mat-icon>subdirectory_arrow_right</mat-icon>
|
</ng-template>
|
||||||
<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>
|
</ng-container>
|
||||||
</div>
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container
|
||||||
|
*ngFor="let column of columnInfo"
|
||||||
|
[matColumnDef]="column.def"
|
||||||
|
[sticky]="isStickyColumn(column.dataPath)"
|
||||||
|
><th mat-header-cell *matHeaderCellDef>
|
||||||
|
</th>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container matColumnDef="operations" stickyEnd>
|
||||||
|
<th mat-header-cell *matHeaderCellDef></th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
<button
|
<button
|
||||||
mat-mini-fab
|
mat-icon-button
|
||||||
(click)="reloadPageData()"
|
|
||||||
class="floating-fab-button-top"
|
|
||||||
[disabled]="isSavingOrLocking || isLoading"
|
|
||||||
color="primary"
|
color="primary"
|
||||||
matTooltip="Daten aktualisieren. Achtung! Alle ungespeicherten Änderungen gehen verloren."
|
aria-label="Example icon button with a home icon"
|
||||||
|
(click)="edit(element)"
|
||||||
>
|
>
|
||||||
<mat-icon>sync</mat-icon>
|
<mat-icon>edit</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<div id="floating-fab-button-box">
|
|
||||||
<button
|
<button
|
||||||
mat-fab
|
mat-icon-button
|
||||||
(click)="lock()"
|
color="warn"
|
||||||
*ngIf="!data?.isLockedByMe && !data?.isLocked"
|
aria-label="Example icon button with a menu icon"
|
||||||
class="floating-fab-button"
|
(click)="delete(element)"
|
||||||
color="primary"
|
|
||||||
[disabled]="isSavingOrLocking || isLoading"
|
|
||||||
>
|
>
|
||||||
<mat-icon>edit</mat-icon>
|
<mat-icon>delete</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
|
</td></ng-container
|
||||||
|
>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-card
|
||||||
|
*ngIf="isLoading"
|
||||||
|
style="display: flex; justify-content: center; align-items: center"
|
||||||
|
>
|
||||||
|
<mat-progress-spinner color="primary" mode="indeterminate">
|
||||||
|
</mat-progress-spinner>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
<div class="button-container-explorer">
|
||||||
<button
|
<button
|
||||||
mat-mini-fab
|
mat-raised-button
|
||||||
(click)="cancel()"
|
class="button-actions"
|
||||||
*ngIf="data?.isLockedByMe"
|
color="primary"
|
||||||
class="floating-fab-button"
|
(click)="export()"
|
||||||
[disabled]="isSavingOrLocking || isLoading"
|
|
||||||
>
|
>
|
||||||
<mat-icon>cancel</mat-icon>
|
Export
|
||||||
</button>
|
</button>
|
||||||
<div
|
|
||||||
*ngIf="data?.isLockedByMe"
|
|
||||||
[matTooltip]="
|
|
||||||
countUnvalidProperties() > 0
|
|
||||||
? 'Ungültige oder nicht ausgefüllte Pflichtfelder (rot): ' +
|
|
||||||
countUnvalidProperties()
|
|
||||||
: 'Abspeichern'
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
mat-fab
|
mat-raised-button
|
||||||
(click)="save()"
|
class="button-actions"
|
||||||
class="floating-fab-button"
|
color="warn"
|
||||||
[disabled]="
|
(click)="deleteArray()"
|
||||||
isSavingOrLocking || isLoading || countUnvalidProperties() > 0
|
|
||||||
"
|
|
||||||
>
|
>
|
||||||
<mat-icon>save</mat-icon>
|
Löschen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
|
<a routerLink="/create/C_APPLICATION_COMPONENT">
|
||||||
<button
|
<button
|
||||||
mat-fab
|
mat-raised-button
|
||||||
*ngIf="data?.isLocked"
|
class="button-actions"
|
||||||
matTooltip="Dieser Eintrag wird gerade von einem anderen Bearbeiter editiert. Aktualisieren Sie die Seite, um den neuen Status abzurufen."
|
color="accent"
|
||||||
class="floating-fab-button"
|
|
||||||
>
|
>
|
||||||
<mat-icon>locked</mat-icon>
|
Neue Applikations-Komponente
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</a>
|
||||||
|
|
||||||
|
using .csv only works with csv specifically, google other types if needed
|
||||||
|
<input hidden (change)="onFileSelected()" #fileInput type="file" accept=".csv" id="file">
|
||||||
|
<button class="button-actions" color="primary" type="button" mat-raised-button (click)="fileInput.click()">Importieren</button>
|
||||||
|
|
||||||
|
|
||||||
|
</div> -->
|
||||||
|
|
||||||
@ -1,246 +1,187 @@
|
|||||||
|
import { HttpClient } from '@angular/common/http';
|
||||||
import {
|
import {
|
||||||
Component,
|
Component,
|
||||||
|
ElementRef,
|
||||||
EventEmitter,
|
EventEmitter,
|
||||||
Input,
|
Input,
|
||||||
OnDestroy,
|
OnDestroy,
|
||||||
OnInit,
|
OnInit,
|
||||||
Output,
|
Output,
|
||||||
|
ViewChild,
|
||||||
} from '@angular/core';
|
} from '@angular/core';
|
||||||
import { MatDialog } from '@angular/material/dialog';
|
import { MatDialog } from '@angular/material/dialog';
|
||||||
import { ActivatedRoute } from '@angular/router';
|
import { MatPaginator } from '@angular/material/paginator';
|
||||||
import { deepen } from '../../helperFunctions/deepenObject';
|
import { MatSort } from '@angular/material/sort';
|
||||||
import { flatten } from '../../helperFunctions/flattenObject';
|
import { MatTableDataSource } from '@angular/material/table';
|
||||||
import { SchemaService } from '../../services/schema.service';
|
import { fromEvent } from 'rxjs';
|
||||||
import { SelectObjectDialogComponent } from '../select-object-dialog/select-object-dialog.component';
|
import { first } from 'rxjs/operators';
|
||||||
|
import { User } from '../../models/user';
|
||||||
interface PropertyTypeInfo {
|
import {UserService} from '../../services/user.service';
|
||||||
dataPath: string;
|
import {DeleteDialogComponent} from '../../components/dialogs/delete/delete.dialog.component';
|
||||||
translation: string;
|
import {AddDialogComponent} from '../../components/dialogs/add/add.dialog.component';
|
||||||
acceptedForUpdating?: boolean;
|
import {EditDialogComponent} from '../../components/dialogs/edit/edit.dialog.component';
|
||||||
requiredForUpdating?: boolean;
|
|
||||||
required?: boolean;
|
import {deepCopy} from '../../helperFunctions/deepCopy';
|
||||||
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({
|
@Component({
|
||||||
selector: 'app-admin-data-page',
|
selector: 'app-admin-data-page',
|
||||||
templateUrl: './admin-data-page.component.html',
|
templateUrl: './admin-data-page.component.html',
|
||||||
styleUrls: ['./admindata-page.component.scss'],
|
styleUrls: ['./admin-data-page.component.scss'],
|
||||||
})
|
})
|
||||||
export class DataPageComponent implements OnInit, OnDestroy {
|
export class AdminDataPageComponent implements OnInit {
|
||||||
@Input()
|
|
||||||
propertiesInfo: Array<any> = [];
|
|
||||||
|
displayedColumns = ['name', 'email', 'password', 'roles', 'actions'];
|
||||||
@Input()
|
dataSource : MatTableDataSource<User>;
|
||||||
dataService: any;
|
index: number;
|
||||||
|
id: number;
|
||||||
/** specifies which property should be shown in the headline */
|
|
||||||
@Input()
|
constructor(public httpClient: HttpClient,
|
||||||
headlineDataPath: string;
|
public dialog: MatDialog,
|
||||||
/** specifies which string should be shown in the headline. If this is provided headlineDataPath is ignored*/
|
private userService: UserService) {}
|
||||||
@Input()
|
|
||||||
getHeadline: (any) => string;
|
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
|
||||||
@Input()
|
@ViewChild(MatSort, {static: true}) sort: MatSort;
|
||||||
headlineIconName: string = 'help_outline';
|
@ViewChild('filter', {static: true}) filter: ElementRef;
|
||||||
@Input()
|
|
||||||
pageDataGQLType: string;
|
ngOnInit() {
|
||||||
@Input()
|
this.loadData();
|
||||||
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(
|
refresh() {
|
||||||
(isLoading) => (this.isLoading = isLoading)
|
this.loadData();
|
||||||
);
|
}
|
||||||
this.dataService.loadingRowIds.subscribe((loadingRowIds) => {
|
|
||||||
this.isSavingOrLocking = loadingRowIds.includes(this.id);
|
|
||||||
|
addNew() {
|
||||||
|
const dialogRef = this.dialog.open(AddDialogComponent, {
|
||||||
|
data: {user: User }
|
||||||
});
|
});
|
||||||
|
|
||||||
this.relockingInterval = setInterval(() => {
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
if (this.data?.isLockedByMe) {
|
if (result === 1) {
|
||||||
this.lock();
|
|
||||||
}
|
|
||||||
}, this.relockingIntervalDuration);
|
this.dataSource.data.push(this.userService.getDialogData());
|
||||||
}
|
|
||||||
|
this.refreshTable();
|
||||||
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(
|
startEdit(user : User) {
|
||||||
this.pageDataGQLUpdateInputType,
|
const dialogRef = this.dialog.open(EditDialogComponent, {
|
||||||
prop.dataPath
|
data: deepCopy(user)
|
||||||
);
|
});
|
||||||
prop.acceptedForUpdating =
|
|
||||||
prop.acceptedForUpdating != null
|
|
||||||
? prop.acceptedForUpdating
|
|
||||||
: updateTypeInformation.isPartOfType;
|
|
||||||
|
|
||||||
prop.requiredForUpdating =
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
prop.requiredForUpdating != null
|
if (result === 1) {
|
||||||
? prop.requiredForUpdating
|
console.log("editing done");
|
||||||
: prop.required || typeInformation.isRequired;
|
|
||||||
}
|
const foundIndex = this.dataSource.data.findIndex(x => x.email === this.userService.getDialogData().email);
|
||||||
|
|
||||||
|
this.dataSource.data[foundIndex] = this.userService.getDialogData();
|
||||||
|
|
||||||
|
this.refreshTable();
|
||||||
}
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
lock() {
|
deleteItem(i: number, id: number, title: string, state: string, url: string) {
|
||||||
this.lockEvent.emit(deepen(this.data));
|
this.index = i;
|
||||||
|
this.id = id;
|
||||||
|
const dialogRef = this.dialog.open(DeleteDialogComponent, {
|
||||||
|
data: {id: id, title: title, state: state, url: url}
|
||||||
|
});
|
||||||
|
|
||||||
|
dialogRef.afterClosed().subscribe(result => {
|
||||||
|
if (result === 1) {
|
||||||
|
const foundIndex = this.dataSource.data.findIndex(x => x.id === this.id);
|
||||||
|
|
||||||
|
this.dataSource.data.splice(foundIndex, 1);
|
||||||
|
this.refreshTable();
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
validityChange(propName: string, isValid: Event) {
|
|
||||||
this.propertyValidity[propName] = isValid;
|
private refreshTable() {
|
||||||
|
//this.paginator._changePageSize(this.paginator.pageSize);
|
||||||
|
this.dataSource._updateChangeSubscription();
|
||||||
}
|
}
|
||||||
|
|
||||||
countUnvalidProperties() {
|
public loadData() {
|
||||||
let unvalidFieldsCount = 0;
|
this.userService.getAllUsers().pipe(first()).subscribe((data: User[]) => {
|
||||||
for (const prop in this.propertyValidity) {
|
this.dataSource = new MatTableDataSource(data);
|
||||||
if (!this.propertyValidity[prop]) {
|
});
|
||||||
unvalidFieldsCount++;
|
fromEvent(this.filter.nativeElement, 'keyup')
|
||||||
|
// .debounceTime(150)
|
||||||
|
// .distinctUntilChanged()
|
||||||
|
.subscribe(() => {
|
||||||
|
if (!this.dataSource) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
this.dataSource.filter = this.filter.nativeElement.value;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return unvalidFieldsCount;
|
|
||||||
|
ngAfterViewInit() {
|
||||||
|
this.dataSource.paginator = this.paginator;
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
}
|
}
|
||||||
|
|
||||||
save() {
|
orderData(id: string, start?: "asc" | "desc") {
|
||||||
this.saveEvent.emit(
|
const matSort = this.dataSource.sort;
|
||||||
this.schemaService.filterObject(
|
const disableClear = false;
|
||||||
this.pageDataGQLUpdateInputType,
|
|
||||||
deepen(this.data)
|
matSort.sort({ id: null, start, disableClear });
|
||||||
)
|
matSort.sort({ id, start, disableClear });
|
||||||
);
|
|
||||||
|
this.dataSource.sort = this.sort;
|
||||||
}
|
}
|
||||||
|
|
||||||
cancel() {
|
|
||||||
this.cancelEvent.emit(deepen(this.data));
|
private load() {
|
||||||
|
console.log("trying to load");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
openSelectObjectDialog(object: any) {
|
delete(user: User) {
|
||||||
const dialogRef = this.dialog.open(SelectObjectDialogComponent, {
|
let ownPassword : string;
|
||||||
width: 'auto',
|
this.userService.deleteUser(user.email, ownPassword)
|
||||||
autoFocus: false,
|
.pipe(first())
|
||||||
data: {
|
.subscribe(
|
||||||
nameToShowInSelection: object.nameToShowInSelection,
|
data => {
|
||||||
currentlySelectedObjectId: object.currentlySelectedObjectId(this.data),
|
//this.loadAllObjects();
|
||||||
possibleObjects: object.possibleObjects,
|
|
||||||
},
|
},
|
||||||
});
|
error => {
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
edit(user: User) {
|
||||||
|
let ownPassword : string;
|
||||||
|
this.userService.updateUser(user, ownPassword)
|
||||||
|
.pipe(first())
|
||||||
|
.subscribe(
|
||||||
|
data => {
|
||||||
|
//this.loadAllObjects();
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
addReferenceIdsToObject(ids: string[], object) {
|
/*findActualData(_id: string) {
|
||||||
this.data[object.propertyNameOfUpdateInput] = ids;
|
for (let data of this.actualData) {
|
||||||
|
if (data._id === _id) {
|
||||||
|
return data;
|
||||||
}
|
}
|
||||||
|
|
||||||
reloadPageData() {
|
|
||||||
this.dataService.loadPageData({ id: this.id });
|
|
||||||
}
|
}
|
||||||
|
} */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -0,0 +1,41 @@
|
|||||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import {Component, Inject} from '@angular/core';
|
||||||
|
import {UserService} from '../../../services/user.service';
|
||||||
|
import {FormControl, Validators} from '@angular/forms';
|
||||||
|
import {User} from '../../../models/user';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-add.dialog',
|
||||||
|
templateUrl: '../../dialogs/add/add.dialog.html',
|
||||||
|
styleUrls: ['../../dialogs/add/add.dialog.css']
|
||||||
|
})
|
||||||
|
|
||||||
|
export class AddDialogComponent {
|
||||||
|
constructor(public dialogRef: MatDialogRef<AddDialogComponent>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) public data: User,
|
||||||
|
public userService: UserService) { }
|
||||||
|
|
||||||
|
formControl = new FormControl('', [
|
||||||
|
Validators.required
|
||||||
|
// Validators.email,
|
||||||
|
]);
|
||||||
|
|
||||||
|
getErrorMessage() {
|
||||||
|
return this.formControl.hasError('required') ? 'Required field' :
|
||||||
|
this.formControl.hasError('email') ? 'Not a valid email' :
|
||||||
|
'';
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
// emppty stuff
|
||||||
|
}
|
||||||
|
|
||||||
|
onNoClick(): void {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
public confirmAdd(): void {
|
||||||
|
this.userService.addUser(this.data);
|
||||||
|
//this.dataService.addIssue(this.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 16px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<div class="container">
|
||||||
|
<h3 mat-dialog-title>Add new Issue</h3>
|
||||||
|
|
||||||
|
<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field color="accent">
|
||||||
|
<input matInput #input class="form-control" placeholder="Name" [(ngModel)]="data.name" name="name" required >
|
||||||
|
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field color="accent">
|
||||||
|
<input matInput #input class="form-control" placeholder="E-Mail" [(ngModel)]="data.email" name="email" required >
|
||||||
|
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field color="accent">
|
||||||
|
<input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div mat-dialog-actions>
|
||||||
|
<button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="confirmAdd()">Save</button>
|
||||||
|
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import {Component, Inject} from '@angular/core';
|
||||||
|
import {UserService} from '../../../services/user.service';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-delete.dialog',
|
||||||
|
templateUrl: '../../dialogs/delete/delete.dialog.html',
|
||||||
|
styleUrls: ['../../dialogs/delete/delete.dialog.css']
|
||||||
|
})
|
||||||
|
export class DeleteDialogComponent {
|
||||||
|
|
||||||
|
constructor(public dialogRef: MatDialogRef<DeleteDialogComponent>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) public data: any, public userService: UserService) { }
|
||||||
|
|
||||||
|
onNoClick(): void {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
confirmDelete(): void {
|
||||||
|
this.userService.deleteUser(this.data.mail, this.data.ownPassword);
|
||||||
|
//this.dataService.deleteIssue(this.data.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,8 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
<div class="container">
|
||||||
|
<h3 mat-dialog-title>Are you sure?</h3>
|
||||||
|
<div mat-dialog-content>
|
||||||
|
Name: {{data.name}}
|
||||||
|
<p></p>
|
||||||
|
E-Mail: {{data.email}}
|
||||||
|
<p></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div mat-dialog-actions>
|
||||||
|
<button mat-button [mat-dialog-close]="1" (click)="confirmDelete()">Delete</button>
|
||||||
|
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
||||||
|
import {Component, Inject} from '@angular/core';
|
||||||
|
import {UserService} from '../../../services/user.service';
|
||||||
|
import {FormControl, Validators} from '@angular/forms';
|
||||||
|
import { first } from 'rxjs/operators';
|
||||||
|
import { SnackBarService } from 'src/app/services/snackbar.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-baza.dialog',
|
||||||
|
templateUrl: '../../dialogs/edit/edit.dialog.html',
|
||||||
|
styleUrls: ['../../dialogs/edit/edit.dialog.css']
|
||||||
|
})
|
||||||
|
export class EditDialogComponent {
|
||||||
|
|
||||||
|
hide = true;
|
||||||
|
|
||||||
|
constructor(public dialogRef: MatDialogRef<EditDialogComponent>,
|
||||||
|
@Inject(MAT_DIALOG_DATA) public data: any, public userService: UserService, public snackbarService : SnackBarService) { }
|
||||||
|
|
||||||
|
formControl = new FormControl('', [
|
||||||
|
Validators.required
|
||||||
|
// Validators.email,
|
||||||
|
]);
|
||||||
|
|
||||||
|
getErrorMessage() {
|
||||||
|
return this.formControl.hasError('required') ? 'Required field' :
|
||||||
|
this.formControl.hasError('email') ? 'Not a valid email' :
|
||||||
|
'';
|
||||||
|
}
|
||||||
|
|
||||||
|
submit() {
|
||||||
|
// emppty stuff
|
||||||
|
}
|
||||||
|
|
||||||
|
onNoClick(): void {
|
||||||
|
this.dialogRef.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
stopEdit(): void {
|
||||||
|
this.data.roles = [];
|
||||||
|
this.userService.updateUser(this.data).pipe(first())
|
||||||
|
.subscribe(
|
||||||
|
data => {
|
||||||
|
this.snackbarService.openSnackBar("Der Nutzer wurde erfolgreich verändert!");
|
||||||
|
//this.loadAllObjects();
|
||||||
|
},
|
||||||
|
error => {
|
||||||
|
console.log("Eroor while editing: " + JSON.stringify(error));
|
||||||
|
this.snackbarService.openSnackBar(error, "Ok", true);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-width: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container > * {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
display: flex;
|
||||||
|
padding-top: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
font-size: 16px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
<div class="container">
|
||||||
|
<h3 mat-dialog-title>Issue id: {{data.id}}</h3>
|
||||||
|
|
||||||
|
<form class="mat-dialog-content" (ngSubmit)="submit" #formControl="ngForm">
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field color="accent">
|
||||||
|
<input matInput #input class="form-control" placeholder="Name" [(ngModel)]="data.name" name="name" required >
|
||||||
|
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field color="accent">
|
||||||
|
<input matInput #input class="form-control" placeholder="E-Mail" [(ngModel)]="data.email" name="email" required >
|
||||||
|
<mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field color="accent">
|
||||||
|
<input matInput placeholder="Passwort" [(ngModel)]="data.password" name="password">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="form">
|
||||||
|
<mat-form-field>
|
||||||
|
<mat-label>Eigenes Passwort</mat-label>
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
[type]="hide ? 'password' : 'text'"
|
||||||
|
name="ownPassword"
|
||||||
|
[(ngModel)]="data.own_password"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
matSuffix
|
||||||
|
(click)="hide = !hide"
|
||||||
|
[attr.aria-label]="'Hide password'"
|
||||||
|
[attr.aria-pressed]="hide"
|
||||||
|
>
|
||||||
|
<mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div mat-dialog-actions>
|
||||||
|
<button mat-button [type]="submit" [disabled]="!formControl.valid" [mat-dialog-close]="1" (click)="stopEdit()">Save</button>
|
||||||
|
<button mat-button (click)="onNoClick()" tabindex="-1">Cancel</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
<mat-form-field>
|
||||||
|
<mat-label>
|
||||||
|
{{label}}
|
||||||
|
</mat-label>
|
||||||
|
<mat-select [ngModel]="selectedOptions" (ngModelChange)="selectedOptions" [formControl]="formCtrl" [multiple]="multiple">
|
||||||
|
<mat-select-search [formControl]="searchCtrl"></mat-select-search>
|
||||||
|
<mat-option *ngFor="let risk of filteredInterfacesBMulti | async" [value]="risk">{{risk.NAME}}</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
.mat-stepper-horizontal {
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.right-align {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.right-align::-webkit-outer-spin-button,
|
||||||
|
input.right-align::-webkit-inner-spin-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
input.right-align {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-field-less-top-margin{
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.anti-margin{
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-form-field{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -0,0 +1,134 @@
|
|||||||
|
import { Component, OnInit, OnDestroy, Input, OnChanges, SimpleChanges } from "@angular/core";
|
||||||
|
import { Subscription, ReplaySubject, Subject } from "rxjs";
|
||||||
|
import { FormGroup, FormControl, FormBuilder } from '@angular/forms';
|
||||||
|
import { takeUntil } from 'rxjs/operators';
|
||||||
|
|
||||||
|
|
||||||
|
@Component({ selector: "select-search", templateUrl: "form-select-search.component.html", styleUrls: ["./form-select-search.component.scss"] })
|
||||||
|
export class FormSelectSearchComponent implements OnInit, OnDestroy, OnChanges {
|
||||||
|
|
||||||
|
|
||||||
|
//@Input() group: FormGroup;
|
||||||
|
//@Input() controlName: string;
|
||||||
|
@Input() formCtrl: FormControl;
|
||||||
|
|
||||||
|
@Input() data: any[];
|
||||||
|
@Input() preSelectedData: any[];
|
||||||
|
@Input() label: string;
|
||||||
|
@Input() multiple: boolean;
|
||||||
|
|
||||||
|
selectedOptions: any[] = [];
|
||||||
|
|
||||||
|
public filteredInterfacesBMulti: ReplaySubject<any[]> = new ReplaySubject<any[]>(1);
|
||||||
|
|
||||||
|
|
||||||
|
public searchCtrl: FormControl = new FormControl();
|
||||||
|
|
||||||
|
|
||||||
|
constructor(private _formBuilder: FormBuilder) {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges) {
|
||||||
|
// only run when property "data" changed
|
||||||
|
|
||||||
|
if (changes['data']) {
|
||||||
|
|
||||||
|
if (this.preSelectedData !== undefined){
|
||||||
|
//console.log( this.label + " is not undefined :D");
|
||||||
|
//console.log(this.label + " preselected: " + this.preSelectedData);
|
||||||
|
//console.log(JSON.stringify(this.preSelectedData))
|
||||||
|
this.riskListGeneratorB(this.preSelectedData);
|
||||||
|
console.log(this.label + " selected options: "+ JSON.stringify(this.selectedOptions) + " all options: " + JSON.stringify(this.data));
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.listenInterfacesSearchable();
|
||||||
|
this.filterInterfacesBMulti();
|
||||||
|
}
|
||||||
|
if (changes['preSelectedData']) {
|
||||||
|
|
||||||
|
if (this.preSelectedData !== undefined){
|
||||||
|
/*console.log(this.label + " preselect data change");
|
||||||
|
console.log(this.label + " preselected: " + this.preSelectedData);
|
||||||
|
console.log(JSON.stringify(this.preSelectedData))*/
|
||||||
|
this.riskListGeneratorB(this.preSelectedData);
|
||||||
|
console.log(this.label + " selected options: "+ JSON.stringify(this.selectedOptions) + " all options: " + JSON.stringify(this.data));
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.listenInterfacesSearchable();
|
||||||
|
this.filterInterfacesBMulti();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
//this.group.addControl('searchCtrl', this.searchCtrl);
|
||||||
|
//this.formCtrl = this.group[this.controlName];
|
||||||
|
if (this.preSelectedData !== undefined){
|
||||||
|
/*console.log("preselected is not undefined :D");
|
||||||
|
console.log("preselected: " + this.preSelectedData);*/
|
||||||
|
this.riskListGeneratorB(this.preSelectedData);
|
||||||
|
console.log("selected options: "+ JSON.stringify(this.selectedOptions) + " all options: " + JSON.stringify(this.data));
|
||||||
|
}
|
||||||
|
|
||||||
|
this.listenInterfacesSearchable();
|
||||||
|
}
|
||||||
|
|
||||||
|
private listenInterfacesSearchable(){
|
||||||
|
this.filteredInterfacesBMulti.next(this.data.slice());
|
||||||
|
|
||||||
|
this.searchCtrl.valueChanges
|
||||||
|
.pipe(takeUntil(this._onDestroy))
|
||||||
|
.subscribe(() => {
|
||||||
|
this.filterInterfacesBMulti();
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
private _onDestroy = new Subject<void>();
|
||||||
|
|
||||||
|
ngOnDestroy() {
|
||||||
|
this._onDestroy.next();
|
||||||
|
this._onDestroy.complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private filterInterfacesBMulti() {
|
||||||
|
if (!this.data) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// get the search keyword
|
||||||
|
let search = this.searchCtrl.value;
|
||||||
|
if (!search) {
|
||||||
|
this.filteredInterfacesBMulti.next(this.data.slice());
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
search = search.toLowerCase();
|
||||||
|
}
|
||||||
|
// filter the banks
|
||||||
|
this.filteredInterfacesBMulti.next(
|
||||||
|
this.data.filter(interf => interf.NAME.toLowerCase().indexOf(search) > -1)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
private riskListGeneratorB(risks: any[]) {
|
||||||
|
for (let risk of risks) {
|
||||||
|
for (let riskItem of this.data) {
|
||||||
|
if (risk._id === riskItem._id) {
|
||||||
|
console.log(this.label + " added id actual data: " + risk._id + " id background data: " + riskItem._id);
|
||||||
|
if (this.multiple === undefined){
|
||||||
|
this.selectedOptions = riskItem;
|
||||||
|
console.log("set instead of add");
|
||||||
|
} else if (this.selectedOptions.find(e => e._id === risk._id) == undefined){ // only add it to the list if its not added already
|
||||||
|
this.selectedOptions.push(riskItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue