Logging und sowas

client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.html

@@ -18,6 +18,7 @@
               <mat-hint>Zylinderlänge und co.</mat-hint>
         </mat-form-field>
 
+        
         <mat-form-field>
             <mat-label>Schließanlage</mat-label>
             <mat-select formControlName="system">
@@ -26,6 +27,7 @@
                 }
             </mat-select>
             <mat-hint>Zu welcher Schließanlage gehört der Zylinder?</mat-hint>
+            <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
         </mat-form-field>
 
     </form>

client/src/app/modules/cylinder/components/create-cylinder/create-cylinder.component.ts

@@ -9,10 +9,12 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { CommonModule } from '@angular/common';
 
 @Component({
     selector: 'app-create-cylinder',
-    imports: [MatFormFieldModule, MatInputModule, MatDialogModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatButtonModule, MatIconModule],
+    imports: [MatFormFieldModule, MatInputModule, MatDialogModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatButtonModule, MatIconModule, MatProgressBarModule, CommonModule],
     templateUrl: './create-cylinder.component.html',
     styleUrl: './create-cylinder.component.scss'
 })
@@ -22,6 +24,7 @@ export class CreateCylinderComponent {
   readonly dialogRef = inject(MatDialogRef<CreateCylinderComponent>);
 
   systems: any[] = [];
+  isLoading = true;
 
   createForm = new FormGroup({
     name: new FormControl<string | null>(null, Validators.required),
@@ -35,6 +38,13 @@ export class CreateCylinderComponent {
         this.systems = systems;
       }
     });
+    this.loadCylinders();
+  }
+
+  private async loadCylinders() {
+    this.isLoading = true;
+    await this.api.refreshSystems();
+    this.isLoading = false;
   }
 
   save() {

client/src/app/modules/keys/create/create.component.html

@@ -29,12 +29,12 @@
         <mat-label>Schließzylinder</mat-label>
         <mat-select formControlName="cylinder" multiple>
           @for (item of cylinders; track $index) {
-            <mat-option [value]="item">{{ item.name }}</mat-option>
+            <mat-option [value]="item">{{ item.name }} ({{item.system.name}}) </mat-option>
           }
         </mat-select>
         <mat-hint>Wo sperrt der Schlüssel?</mat-hint>
       </mat-form-field>
-        <button mat-icon-button (click)="openSelectMultipleCylinders()" style="margin-bottom: 12px;">
+        <button mat-icon-button (click)="openSelectMultipleCylinders()" style="margin-bottom: 12px;" matTooltip="Zylinderauswahl in neuem Fenster öffnen">
           <mat-icon>open_in_new</mat-icon>
         </button>
     </div>

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

@@ -14,10 +14,11 @@ 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],
+    imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule, MatCheckboxModule, MatTooltipModule],
     templateUrl: './create.component.html',
     styleUrl: './create.component.scss'
 })

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

@@ -1,7 +1,7 @@
 import { DatePipe } from '@angular/common';
 import { Component, inject, LOCALE_ID } from '@angular/core';
 import { AgGridAngular } from 'ag-grid-angular';
-import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { CellEditingStoppedEvent, GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
 import { ApiService } from '../../shared/api.service';
 import { HELPER } from '../../shared/helper.service';
 import { MatButtonModule } from '@angular/material/button';
@@ -29,7 +29,7 @@ export class SystemComponent extends AgGridContainerComponent {
   constructor() {
     super();
     this.gridOptions.columnDefs = [
-      { colId: 'name', field: 'name', headerName: 'Name', sort: 'asc', flex: 1},
+      { colId: 'name', field: 'name', headerName: 'Name', sort: 'asc', flex: 1, editable: true},
       { colId: 'cylinderCount', field: 'cylinders', headerName: 'Zylinderanzahl', flex: 0, cellRenderer: (data: any) => data.value?.length || 0},
       { field: 'createdAt', headerName: 'Angelegt', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
       { field: 'updatedAt', headerName: 'Upgedated', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
@@ -51,6 +51,7 @@ export class SystemComponent extends AgGridContainerComponent {
 
   onGridReady(params: GridReadyEvent) {
     this.gridApi = params.api;
+    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt));
     this.api.systems.asObservable().subscribe({
       next: systems => {
         this.gridApi.setGridOption("rowData", systems);
@@ -60,6 +61,14 @@ export class SystemComponent extends AgGridContainerComponent {
     this.loadSystems();
   }
 
+  async cellEditEnd(event: CellEditingStoppedEvent) {
+    const key: any = event.data;
+    if (!event.valueChanged || event.newValue == event.oldValue) { return; }
+
+    this.api.updateSystem(key)
+
+  }
+
   openCreateSystem() {
     this.dialog.open(CreateSystemComponent).afterClosed().subscribe({
           next: sys => {

client/src/app/shared/api.service.ts

@@ -92,6 +92,24 @@ export class ApiService {
     })
   }
 
+  updateSystem(cylinder: any): Promise<boolean> {
+    return new Promise<boolean>(resolve => {
+      this.http.put('api/system', cylinder).pipe(
+        this.toast.observe({
+        loading: `Schließanlage ${cylinder} wird gespeichert...`,
+        success: `Schließanlage ${cylinder.name} gespeichert.`,
+        error: 'Es ist ein Fehler aufgetreten'
+      })
+      ).subscribe({
+        next: () => resolve(true),
+        error: () => resolve(false),
+        complete: () => {
+          this.refreshCylinders()
+        }
+      })
+    })
+  }
+
   createKey(key: any) {
     return this.http.post<IKey>('api/key', key);
   }