schlüssel neuen zylindern zuordnen geht

client/src/app/modules/keys/keys.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
 import { AgGridAngular } from 'ag-grid-angular';
-import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams, FilterActionParams, FilterAction, themeQuartz, Theme, ThemeDefaultParams } from 'ag-grid-community';
+import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams, FilterActionParams, FilterAction, themeQuartz, Theme, ThemeDefaultParams, AgGridEvent, CellClickedEvent, CellDoubleClickedEvent } from 'ag-grid-community';
 import { DatePipe } from '@angular/common';
 import { ApiService } from '../../shared/api.service';
 import { IKey } from '../../model/interface/key.interface';
@@ -54,7 +54,9 @@ export class KeysComponent extends AgGridContainerComponent {
         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(','),
-        onCellDoubleClicked(event) {},
+        onCellDoubleClicked: (event) => {
+          this.openSelectCylinder(event)
+        },
         cellEditorPopup: true,
         filterValueGetter: (params: any) => {return params.data.cylinder?.map((m: ICylinder) => m.name).join(', ')},
       },
@@ -157,24 +159,13 @@ export class KeysComponent extends AgGridContainerComponent {
     this.setFilterToParams();
   }
 
-  cellEditEnd(event: CellEditingStoppedEvent) {
+  async cellEditEnd(event: CellEditingStoppedEvent) {
     const key: IKey = event.data;
     if (!event.valueChanged || event.newValue == event.oldValue) { return; }
     
     this.gridApi.setGridOption("loading", true);
-    this.api.updateKey(key)
-    .pipe(
-      this.toast.observe({
-        loading: 'speichern...',
-        success: 'Änderungen gespeichert',
-        error: 'Änderungen konnten nicht gespeichert werden!'
-      })
-    ).subscribe({
-      next: () => {this.gridApi.setGridOption("loading", false);},
-      error: () => {
-        this.loadKeys();
-      }
-    })
+    await this.api.updateKey(key)
+    this.gridApi.setGridOption("loading", false);
   }
 
   openCreateKey() {
@@ -195,17 +186,33 @@ export class KeysComponent extends AgGridContainerComponent {
     })
   }
 
-  openSelectCylinder(params: any) {
-    this.dialog.open(SelectKeyCylinderComponent, {
+  async openSelectCylinder(event: CellDoubleClickedEvent) {
+    const key: IKey = event.data;
+    this.gridApi.setGridOption("loading", true);
+    const cylinders = await this.api.refreshCylinders()
+    this.gridApi.setGridOption('loading', false)
+    const ref = this.dialog.open(SelectKeyCylinderComponent, {
+      data: cylinders,
+      maxHeight: "calc(100vh - 24px)",
       maxWidth: "calc(100vw - 24px)",
-      width: "30vw",
-      minWidth: "200px",
-      disableClose: true
-    }).afterClosed().subscribe({
-      next: key => {
-        console.log(key)
+      width: "50vw",
+      minWidth: "300px",
+      height: "70vh",
+      disableClose: true,
+    });
+    
+    ref.afterOpened().subscribe({
+      next: () => {
+        ref.componentInstance.preselectCylinders(event.data.cylinder);
       }
     })
+    ref.afterClosed().subscribe({
+      next: (cylinders: ICylinder[]) => {
+        if (cylinders == null) { return; }
+        key.cylinder = cylinders;
+        this.api.updateKey(key)
+      }
+    });
   }
 
   openArchive() {