Merge remote-tracking branch 'origin/master'
Max Ehrlicher-Schmidt
4 years ago
commit
a00dd22615
@ -0,0 +1,21 @@
|
||||
<form [formGroup]="addForm">
|
||||
<mat-form-field>
|
||||
<input
|
||||
type="text"
|
||||
matInput
|
||||
#trigger="matAutocompleteTrigger"
|
||||
placeholder="Objekt suchen"
|
||||
formControlName="addGroup"
|
||||
[matAutocomplete]="autoGroup"
|
||||
/>
|
||||
<mat-autocomplete #autoGroup="matAutocomplete" panelWidth="auto">
|
||||
<mat-option
|
||||
*ngFor="let object of filteredPossibleObjects"
|
||||
[value]="nameToShowInSelection(object)"
|
||||
(click)="onOptionClicked($event, object, trigger)"
|
||||
>
|
||||
{{ nameToShowInSelection(object) }}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
@ -0,0 +1,97 @@
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
Input,
|
||||
OnInit,
|
||||
Output,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { FormControl, FormGroup } from '@angular/forms';
|
||||
import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
|
||||
|
||||
@Component({
|
||||
selector: 'app-autocomplete-select',
|
||||
templateUrl: './autocomplete-select.component.html',
|
||||
styleUrls: ['./autocomplete-select.component.scss'],
|
||||
})
|
||||
export class AutocompleteSelectComponent implements OnInit {
|
||||
@Input()
|
||||
set possibleObjects(objects: any[]) {
|
||||
this._possibleObjects = objects;
|
||||
this.filterPossibleObjects();
|
||||
}
|
||||
get possibleObjects(): any[] {
|
||||
return this._possibleObjects;
|
||||
}
|
||||
_possibleObjects: any[];
|
||||
|
||||
@Input()
|
||||
set idsOfObjectsToHide(value) {
|
||||
this._idsOfObjectsToHide = value;
|
||||
setTimeout(() => this.filterPossibleObjects());
|
||||
}
|
||||
get idsOfObjectsToHide(): string[] {
|
||||
return this._idsOfObjectsToHide;
|
||||
}
|
||||
_idsOfObjectsToHide: string[] = [];
|
||||
|
||||
@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;
|
||||
|
||||
/** function that returns the string that should be displayed in the selection */
|
||||
@Input()
|
||||
nameToShowInSelection;
|
||||
|
||||
@Input()
|
||||
keepAutocompleteOpenAfterClick: boolean = false;
|
||||
|
||||
@Output() selectedElementChange = new EventEmitter();
|
||||
|
||||
addForm: FormGroup = new FormGroup({ addGroup: new FormControl() });
|
||||
|
||||
filteredPossibleObjects: any[] = [];
|
||||
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.addForm
|
||||
.get('addGroup')
|
||||
.valueChanges.subscribe(() => this.filterPossibleObjects());
|
||||
}
|
||||
|
||||
onOptionClicked(event: Event, element: any, trigger: MatAutocompleteTrigger) {
|
||||
event.stopPropagation();
|
||||
if (this.keepAutocompleteOpenAfterClick) {
|
||||
trigger.openPanel();
|
||||
}
|
||||
this.addForm.get('addGroup').reset();
|
||||
this.selectedElementChange.emit(element);
|
||||
}
|
||||
|
||||
filterPossibleObjects() {
|
||||
this.filteredPossibleObjects = this.possibleObjects.filter(
|
||||
(element) =>
|
||||
this.idsOfObjectsToHide.findIndex((id) => id === element.id) === -1
|
||||
);
|
||||
let searchString = this.addForm.get('addGroup').value;
|
||||
if (!searchString) {
|
||||
return;
|
||||
}
|
||||
searchString = searchString.toLocaleLowerCase();
|
||||
this.filteredPossibleObjects = this.filteredPossibleObjects.filter(
|
||||
(element) =>
|
||||
this.nameToShowInSelection(element)
|
||||
.toLocaleLowerCase()
|
||||
.includes(searchString)
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
<div mat-dialog-content>
|
||||
<h1 mat-dialog-title>Neues Objekt auswählen</h1>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-content>
|
||||
<app-autocomplete-select
|
||||
[editable]="true"
|
||||
[possibleObjects]="data.possibleObjects"
|
||||
[nameToShowInSelection]="data.nameToShowInSelection"
|
||||
(selectedElementChange)="onObjectClicked($event)"
|
||||
></app-autocomplete-select>
|
||||
|
||||
<span>aktuell ausgewählt: <b>{{getSelectedObjectName()}}</b></span>
|
||||
</div>
|
||||
|
||||
<div mat-dialog-actions>
|
||||
<button mat-button (click)="onCancelClick()" i18n>Abbrechen</button>
|
||||
<button mat-button (click)="onConfirmClick()" color="primary">
|
||||
Übernehmen
|
||||
</button>
|
||||
</div>
|
||||
@ -0,0 +1,44 @@
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
import { DeleteConfirmationDialog } from '../../table/table.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-select-object-dialog',
|
||||
templateUrl: './select-object-dialog.component.html',
|
||||
styleUrls: ['./select-object-dialog.component.scss'],
|
||||
})
|
||||
export class SelectObjectDialogComponent implements OnInit {
|
||||
constructor(
|
||||
public dialogRef: MatDialogRef<DeleteConfirmationDialog>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) {
|
||||
console.log(this.data);
|
||||
}
|
||||
|
||||
ngOnInit(): void {}
|
||||
|
||||
onObjectClicked(object: any) {
|
||||
this.data.currentlySelectedObjectId = object.id;
|
||||
}
|
||||
|
||||
getSelectedObject() {
|
||||
return this.data.possibleObjects.find(
|
||||
(object) => object.id === this.data.currentlySelectedObjectId
|
||||
)
|
||||
}
|
||||
|
||||
getSelectedObjectName() {
|
||||
const selectedObject = this.getSelectedObject();
|
||||
if (!selectedObject) {
|
||||
return "";
|
||||
}
|
||||
return this.data.nameToShowInSelection(selectedObject);
|
||||
}
|
||||
|
||||
onConfirmClick(): void {
|
||||
this.dialogRef.close(this.getSelectedObject());
|
||||
}
|
||||
onCancelClick(): void {
|
||||
this.dialogRef.close();
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
@ -1,5 +1,5 @@
|
||||
export const environment = {
|
||||
production: true,
|
||||
apiUrl: "http://173.212.197.169:4000", // graphql api url without /graphql!
|
||||
authUrl: "http://173.212.197.169:8080" // user server url
|
||||
apiUrl: "https://api.flotte-berlin.duckdns.org", // graphql api url without /graphql!
|
||||
authUrl: "https://userserver.flotte-berlin.duckdns.org" // user server url
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue