117 lines
3.8 KiB
TypeScript
117 lines
3.8 KiB
TypeScript
import { Component, inject } from '@angular/core';
|
|
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
import { ApiService } from '../../../shared/api.service';
|
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { map, Observable, startWith } from 'rxjs';
|
|
import { MatSelectModule } from '@angular/material/select';
|
|
import { HotToastService } from '@ngxpert/hot-toast';
|
|
import { SelectKeyCylinderComponent } from './select-key-cylinder/select-key-cylinder.component';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import {MatCheckboxModule} from '@angular/material/checkbox';
|
|
import { IKey } from '../../../model/interface/key.interface';
|
|
import { ICylinder } from '../../../model/interface/cylinder.interface';
|
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
|
|
@Component({
|
|
selector: 'app-create',
|
|
imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule, MatCheckboxModule, MatTooltipModule],
|
|
templateUrl: './create.component.html',
|
|
styleUrl: './create.component.scss'
|
|
})
|
|
export class CreateKeyComponent {
|
|
|
|
private api: ApiService = inject(ApiService);
|
|
private toast: HotToastService = inject(HotToastService);
|
|
readonly dialogRef = inject(MatDialogRef<CreateKeyComponent>);
|
|
private readonly dialog = inject(MatDialog);
|
|
readonly key = inject<IKey>(MAT_DIALOG_DATA);
|
|
|
|
createForm = new FormGroup({
|
|
name: new FormControl<string | null>(null, Validators.required),
|
|
nr: new FormControl<number | null>(null, Validators.required),
|
|
digital: new FormControl(false, Validators.required),
|
|
cylinder: new FormControl<any>(null, Validators.required),
|
|
})
|
|
|
|
cylinders: any[] = [];
|
|
filteredCylinders!: Observable<any[]>;
|
|
|
|
ngOnInit(): void {
|
|
this.doSetup();
|
|
}
|
|
|
|
async doSetup() {
|
|
this.api.cylinders.subscribe({
|
|
next: data => {
|
|
this.cylinders = data;
|
|
this.createForm.controls.cylinder.patchValue(null);
|
|
}
|
|
})
|
|
await this.loadCylinders();
|
|
|
|
this.filteredCylinders = this.createForm.controls.cylinder.valueChanges.pipe(
|
|
startWith(''),
|
|
map(value => this._filter(value || '')),
|
|
);
|
|
|
|
if (this.key) {
|
|
this.setEditKey(this.key)
|
|
}
|
|
}
|
|
|
|
private _filter(value: string): string[] {
|
|
const filterValue = value.toLowerCase();
|
|
|
|
return this.cylinders.filter(option => option.name.toLowerCase().includes(filterValue));
|
|
}
|
|
|
|
loadCylinders() {
|
|
return this.api.refreshCylinders();
|
|
|
|
}
|
|
|
|
save() {
|
|
this.api.createKey(this.createForm.value as any)
|
|
.pipe(
|
|
this.toast.observe({
|
|
error: 'Konnte nicht angelegt werden...',
|
|
loading: 'Speichern...',
|
|
success: 'Gespeichert'
|
|
})
|
|
)
|
|
.subscribe({
|
|
next: key => {
|
|
this.createForm.reset();
|
|
this.dialogRef.close(key);
|
|
}
|
|
})
|
|
}
|
|
|
|
openSelectMultipleCylinders() {
|
|
this.dialog.open(SelectKeyCylinderComponent, {
|
|
maxHeight: "calc(100vh - 48px)",
|
|
maxWidth: "calc(100vw - 48px)",
|
|
width: "800px",
|
|
minWidth: "300px",
|
|
height: "70vh",
|
|
disableClose: true,
|
|
data: this.cylinders
|
|
}).afterClosed().subscribe({
|
|
next: c => {
|
|
if (c) {
|
|
this.createForm.controls.cylinder.patchValue(c);
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
async setEditKey(key: IKey) {
|
|
this.createForm.patchValue(key as any);
|
|
this.createForm.controls.cylinder.patchValue(this.cylinders.filter(c => key.cylinder.some(v => v.id == c.id)));
|
|
}
|
|
}
|