keys

client/src/app/modules/admin/all-users/all-users.component.ts

@@ -48,7 +48,7 @@ export class AllUsersComponent {
         , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
         , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
       },
-       {
+      {
         field: 'lastLogin'
         , headerName: 'Letzter Login'
         , width: 170
@@ -61,6 +61,7 @@ export class AllUsersComponent {
   }
 
   ngOnInit(): void {
+    
   }
 
 
@@ -69,6 +70,7 @@ export class AllUsersComponent {
       next: n => {
         this.gridApi.setGridOption("rowData", n)
         this.gridApi.setGridOption("loading", false);
+        n.filter(u => u.username == 'mail@bastian-wagner.de').map((u: any) => { console.log(u['lastLogin'])})
       }
     })
   }

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

@@ -0,0 +1,7 @@
+@if (gridOptions || true) {
+  <ag-grid-angular
+      style="width: 100%; height: 100%;"
+      (gridReady)="onGridReady($event)"
+      [gridOptions]="gridOptions!"
+  />
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KeysComponent } from './keys.component';
+
+describe('KeysComponent', () => {
+  let component: KeysComponent;
+  let fixture: ComponentFixture<KeysComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [KeysComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KeysComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,112 @@
+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 } from 'ag-grid-community';
+import { CommonModule, DatePipe } from '@angular/common';
+import { ApiService } from '../../shared/api.service';
+import { IKey } from '../../model/interface/key.interface';
+import { HotToastService } from '@ngxpert/hot-toast';
+
+@Component({
+  selector: 'app-keys',
+  standalone: true,
+  imports: [AgGridAngular],
+  providers: [DatePipe],
+  templateUrl: './keys.component.html',
+  styleUrl: './keys.component.scss'
+})
+export class KeysComponent {
+  private api: ApiService = inject(ApiService);
+  private datePipe = inject(DatePipe);
+  private toast: HotToastService = inject(HotToastService);
+
+  cylinders: any[] = [{name: 'dummy'}];
+
+  gridApi!: GridApi;
+
+  gridOptions: GridOptions = {
+    localeText: AG_GRID_LOCALE_DE,
+    rowData: [],
+    columnDefs: [
+      { field: 'handedOut' , headerName: 'Ausgegeben', width: 100,editable: true, filter: true, headerTooltip: 'Ausgegeben' },
+      { field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
+      { field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true },
+      { field: 'cylinder' , headerName: 'Zylinder', flex: 1, editable: true, filter: true, cellRenderer: (data: any) => {return data.value?.name}, cellEditor: 'agSelectCellEditor',
+        cellEditorParams: () => {
+          return {
+            values: this.cylinders,
+          }
+        },
+        valueFormatter: (val) => {
+          return val.value?.name;
+        }
+      },
+      { field: 'cylinder.system' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {return data.value?.name} },
+      {
+        field: 'createdAt'
+        , headerName: 'Erstellt'
+        , 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')
+      },{
+        field: 'updatedAt'
+        , headerName: 'Geändert'
+        , width: 120
+        , type: 'date'
+        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value), 'medium') : '-'
+        , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
+      },
+    ],
+    loading: true,
+  }
+
+  ngOnInit(): void {
+    this.api.getCylinders().subscribe({
+      next: n => {
+        this.cylinders = n;
+      }
+    })
+    this.api.postKeySystem({ name: 'Development' }).subscribe()
+  }
+
+  loadKeys() {
+    this.gridApi.setGridOption("loading", true);
+    this.api.getKeys().subscribe(res => {
+      this.gridApi.setGridOption("rowData", res);
+      this.gridApi.setGridOption("loading", false);
+      res.map((r: any) => console.log(r.updatedAt))
+    })
+  }
+
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt))
+    this.loadKeys();
+  }
+
+  cellEditEnd(event: CellEditingStoppedEvent) {
+    const key: IKey = event.data;
+    console.log(event)
+
+    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();
+      }
+    })
+  }
+}