update

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<string>(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)",