diff --git a/client/src/app/modules/keys/create/create.component.ts b/client/src/app/modules/keys/create/create.component.ts index 27213e7..9f98ec3 100644 --- a/client/src/app/modules/keys/create/create.component.ts +++ b/client/src/app/modules/keys/create/create.component.ts @@ -1,7 +1,7 @@ import { Component, inject } from '@angular/core'; import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; -import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; +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'; @@ -12,6 +12,8 @@ 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'; @Component({ selector: 'app-create', @@ -26,24 +28,33 @@ export class CreateKeyComponent { private toast: HotToastService = inject(HotToastService); readonly dialogRef = inject(MatDialogRef); private readonly dialog = inject(MatDialog); + readonly key = inject(MAT_DIALOG_DATA); createForm = new FormGroup({ - name: new FormControl(null, Validators.required), - nr: new FormControl(null, Validators.required), + name: new FormControl(null, Validators.required), + nr: new FormControl(null, Validators.required), digital: new FormControl(false, Validators.required), - cylinder: new FormControl(null, Validators.required), + cylinder: new FormControl(null, Validators.required), }) cylinders: any[] = []; filteredCylinders!: Observable; ngOnInit(): void { - this.loadCylinders(); + this.doSetup(); + } + + async doSetup() { + 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[] { @@ -53,16 +64,19 @@ export class CreateKeyComponent { } loadCylinders() { - this.api.getCylinders().subscribe({ + return new Promise(resolve => { + this.api.getCylinders().subscribe({ next: n => { this.cylinders = n; this.createForm.controls.cylinder.patchValue(null); + resolve(null) } + }); }) + } save() { - this.api.createKey(this.createForm.value as any) .pipe( this.toast.observe({ @@ -96,4 +110,10 @@ export class CreateKeyComponent { } }) } + + 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))); + console.log(this.createForm.value) + } } diff --git a/client/src/app/modules/keys/keys.component.ts b/client/src/app/modules/keys/keys.component.ts index b5b08f4..cd26a32 100644 --- a/client/src/app/modules/keys/keys.component.ts +++ b/client/src/app/modules/keys/keys.component.ts @@ -17,6 +17,7 @@ import { map, of } from 'rxjs'; import { ICylinder } from '../../model/interface/cylinder.interface'; import { LostKeysComponent } from './components/lost-keys/lost-keys.component'; import { MatTooltipModule } from '@angular/material/tooltip'; +import { SelectKeyCylinderComponent } from './create/select-key-cylinder/select-key-cylinder.component'; @Component({ selector: 'app-keys', @@ -44,10 +45,13 @@ export class KeysComponent { { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true }, { colId: 'nr', field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true }, { colId: 'cylinder', field: 'cylinder' , headerName: 'Zylinder', flex: 1, editable: false, filter: true, + valueFormatter: (data: any) => { return data; }, cellRenderer: (data: any) => {return data.value?.map((m: ICylinder) => m.name).join(', ')}, - tooltipValueGetter: (data: any) => data.value?.map((m: ICylinder) => m.name).join(', '), - cellEditor: 'agSelectCellEditor', - cellEditorPopup: false, + tooltipValueGetter: (data: any) => data.value?.map((m: ICylinder) => m.name).join(','), + onCellDoubleClicked(event) { + + }, + cellEditorPopup: true, filterValueGetter: (params: any) => {return params.data.cylinder?.map((m: ICylinder) => m.name).join(', ')}, }, { colId: 'system', field: 'cylinder' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => { @@ -57,11 +61,13 @@ export class KeysComponent { filterValueGetter: (params: any) => { const s = new Set(params.data.cylinder?.map((m: ICylinder) => m.system?.name)); return [...s].join(', ') - } + }, + valueFormatter: (data: any) => { return data; }, }, { colId: 'customer', field: 'customer' , headerName: 'Kunde', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {return data.value?.name}, filterValueGetter: (params: any) => {return params.data.customer?.name}, + valueFormatter: (data: any) => { return data; }, }, { field: 'createdAt' @@ -69,7 +75,8 @@ export class KeysComponent { , width: 120 // , type: 'date' , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) - , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium') + , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium'), + valueFormatter: (data: any) => { return data; }, },{ colId: 'updatedAt', field: 'updatedAt' @@ -86,6 +93,7 @@ export class KeysComponent { , width: 140 , cellRenderer: AgDeleteKeyComponent // , onCellClicked: (event) => { this.deleteKey(event.data.id)} + ,valueFormatter: (data: any) => { return data; }, } ], loading: true, @@ -98,6 +106,10 @@ export class KeysComponent { this.api.deleteKey(id).subscribe() } + editKey(id: string) { + + } + ngOnInit(): void { this.api.getCylinders().subscribe({ next: n => { @@ -168,6 +180,19 @@ export class KeysComponent { }) } + openSelectCylinder(params: any) { + this.dialog.open(SelectKeyCylinderComponent, { + maxWidth: "calc(100vw - 24px)", + width: "30vw", + minWidth: "200px", + disableClose: true + }).afterClosed().subscribe({ + next: key => { + console.log(key) + } + }) + } + openArchive() { this.dialog.open(ArchiveComponent, { maxHeight: "calc(100vh - 24px)", diff --git a/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.html b/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.html index 34a6aa7..aa63b9b 100644 --- a/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.html +++ b/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.html @@ -1,3 +1,4 @@
-
\ No newline at end of file +
+ \ No newline at end of file diff --git a/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.ts b/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.ts index 33f9f90..209b1dd 100644 --- a/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.ts +++ b/client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.ts @@ -9,6 +9,7 @@ import { HotToastService } from '@ngxpert/hot-toast'; import { HandoverDialogComponent } from '../../../../modules/keys/components/handover-dialog/handover-dialog.component'; import { MatTooltipModule } from '@angular/material/tooltip'; import { LostKeyComponent } from '../../../../modules/keys/components/lost-key/lost-key.component'; +import { CreateKeyComponent } from '../../../../modules/keys/create/create.component'; @Component({ selector: 'app-ag-delete-key', @@ -50,6 +51,25 @@ export class AgDeleteKeyComponent implements ICellRendererAngularComp { }) } + edit() { + const ref = this.dialog.open(CreateKeyComponent, { + data: this.key, + autoFocus: false, + maxWidth: '100vw', + maxHeight: '100vh' + }) + ref.afterClosed().subscribe({ + next: n => { + if (n != null) { + this.key.handedOut = n; + this.params.api.refreshCells(); + } + } + }); + + // ref.componentInstance.editKey(this.key) + } + deleteThisKey() { this.params.api.setGridOption("loading", true); this.api.deleteKey(this.key.id).pipe( diff --git a/client/src/assets/img/edit.svg b/client/src/assets/img/edit.svg new file mode 100644 index 0000000..492261c --- /dev/null +++ b/client/src/assets/img/edit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/client/src/styles.scss b/client/src/styles.scss index 6caf03e..772b2af 100644 --- a/client/src/styles.scss +++ b/client/src/styles.scss @@ -88,6 +88,10 @@ html, body { background-image: url("./assets/img/delete.svg"); } +.edit { + background-image: url("./assets/img/edit.svg"); +} + .restore { background-image: url("./assets/img/restore.svg"); }