Api umgebaut

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html

@@ -36,7 +36,7 @@
       <mat-form-field>
         <mat-label>Datum der Übergabe</mat-label>
         <input matInput [matDatepicker]="picker" formControlName="timestamp">
-        <mat-hint>TT/MM/JJJJ</mat-hint>
+        <mat-hint>TT.MM.JJJJ (Beispiel: {{ exampleDate | date:'dd.MM.yyyy'}})</mat-hint>
         <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
       </mat-form-field>
@@ -44,7 +44,7 @@
   </mat-dialog-content>
   <mat-dialog-actions>
     <button matButton mat-dialog-close class="btn-warning">Schließen</button>
-    <button matButton="elevated" (click)="save()" class="btn-primary" [disabled]="handoverForm.invalid || handoverForm.pristine">
+    <button matButton="elevated" (click)="save()" class="btn-primary" [disabled]="handoverForm.invalid">
       <mat-icon>save</mat-icon>
       Speichern
     </button>

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts

@@ -28,7 +28,7 @@ import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'app-handover-dialog',
-    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe, MatIconModule],
+    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe, MatIconModule, DatePipe],
     providers: [
         provideNativeDateAdapter(),
         { provide: LOCALE_ID, useValue: 'de-DE' },
@@ -47,6 +47,8 @@ export class HandoverDialogComponent {
   private datePipe = inject(DatePipe);
   private toast: HotToastService = inject(HotToastService);
 
+  public exampleDate = new Date();
+
   gridApi!: GridApi;
   gridOptions: GridOptions = {
     localeText: AG_GRID_LOCALE_DE,

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

@@ -44,6 +44,12 @@ export class CreateKeyComponent {
   }
 
   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(
@@ -63,15 +69,7 @@ export class CreateKeyComponent {
   }
 
   loadCylinders() {
-    return new Promise(resolve => {
-      this.api.getCylinders().subscribe({
-      next: n => {
-        this.cylinders = n;
-        this.createForm.controls.cylinder.patchValue(null);
-        resolve(null)
-      }
-    });
-    })
+    return this.api.refreshCylinders();
     
   }
 

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

@@ -35,7 +35,7 @@ export class KeysComponent {
   private dialog: MatDialog = inject(MatDialog);
   private route: ActivatedRoute = inject(ActivatedRoute)
 
-  cylinders: any[] = [];
+  // cylinders: any[] = [];
 
   gridApi!: GridApi;
 
@@ -93,7 +93,6 @@ export class KeysComponent {
         , width: 140
         , cellRenderer: AgKeyActionsComponent
         , sortable: false
-        // , onCellClicked: (event) => { this.deleteKey(event.data.id)}
         ,valueFormatter: (data: any) => { return data; },
       }
     ],
@@ -103,30 +102,15 @@ export class KeysComponent {
     pagination: true,
   }
 
-
-  deleteKey(id: string) {
-    this.api.deleteKey(id).subscribe()
-  }
-
   editKey(id: string) {
     
   }
 
   ngOnInit(): void {
-    this.api.getCylinders().subscribe({
-      next: n => {
-        this.cylinders = n;
-
-        this.setFilterToParams();
-      },
-      error: () => {
-        this.cylinders = [];
-      }
-    })
   }
+  
 
   private setFilterToParams() {
-    console.log(this.route.snapshot.queryParams);
     const params = this.route.snapshot.queryParams;
 
     if (Object.keys(params).includes('handedOut')) {
@@ -143,23 +127,21 @@ export class KeysComponent {
 
   loadKeys() {
     this.gridApi.setGridOption("loading", true);
-    this.api.getKeys().subscribe({
-      next: n => {
-        this.gridApi.setGridOption("rowData", n);
-        this.gridApi.setGridOption("loading", false);
-      },
-      error: () => {
-        this.gridApi.setGridOption("loading", false);
-        // set error in grid
-        this.toast.error('Fehler beim Laden der Schlüssel')
-      }
-    })
+    this.api.refreshKeys();
   }
 
   onGridReady(params: GridReadyEvent) {
     this.gridApi = params.api;
-    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt))
+    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt));
+    this.api.keys.asObservable().subscribe({
+      next: keys => {
+        console.log(keys)
+        this.gridApi.setGridOption("rowData", keys);
+        this.gridApi.setGridOption("loading", false);
+      }
+    })
     this.loadKeys();
+    this.setFilterToParams();
   }
 
   cellEditEnd(event: CellEditingStoppedEvent) {