Lost Keys

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

@@ -46,10 +46,12 @@ export class ArchiveComponent {
         width: 40,
         cellRenderer: () => '<div class="icon-btn-sm restore icon-btn-xs" ></div>',
         onCellClicked: (event) => { this.restoreKey(event.data);},
+        tooltipValueGetter: () => 'Wiederherstellen',
         sortable: false
       }
     ];
     this.gridOptions.rowHeight = 36;
+    this.gridOptions.overlayNoRowsTemplate = 'Bisher wurden keine Schlüssel gelöscht. Sobald dies der Fall ist, werden sie hier angezeigt.';
   }
 
   onGridReady(params: GridReadyEvent) {

client/src/app/modules/keys/components/lost-key/lost-key.component.html

@@ -0,0 +1,41 @@
+@if(key.keyLost != null) {
+    <h2 mat-dialog-title>Schlüssel als gefunden markieren</h2>
+} @else {
+    <h2 mat-dialog-title>Schlüssel als verloren markieren</h2>
+}
+<mat-dialog-content>
+    <div class="warning-message">
+        @if(key.keyLost != null) {
+            <mat-icon color="accent">report</mat-icon>
+            <p>
+                <b>{{key.name}}</b> wirklich als gefunden markieren?
+            </p>
+            <p class="additional-info">
+                <small>Die Information, dass er am {{ key.keyLost| date:'shortDate' }} verloren wurde, wird gelöscht!</small>
+            </p>
+        } @else {
+            <mat-icon color="warn">warning</mat-icon>
+        <p>
+            <b>{{key.name}}</b> wirklich als verloren markieren?
+        </p>
+        <p class="additional-info">
+            <small>Verlorene Schlüssel müssen gesperrt und neu angefertigt werden.</small>
+        </p>
+        }
+    </div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button [mat-dialog-close]="null">Abbrechen</button>
+    
+    @if(key.keyLost != null) {
+        <button mat-raised-button color="accent" (click)="closeFound()">
+            <mat-icon>report</mat-icon>
+            Als gefunden melden
+        </button>
+    } @else {
+        <button mat-raised-button color="warn" (click)="closeWithData()">
+            <mat-icon>report_problem</mat-icon>
+            Als verloren melden
+        </button>
+    }
+</mat-dialog-actions>

client/src/app/modules/keys/components/lost-key/lost-key.component.spec.ts

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

client/src/app/modules/keys/components/lost-key/lost-key.component.ts

@@ -0,0 +1,33 @@
+import { Component, inject, LOCALE_ID } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { IKey } from '../../../../model/interface/key.interface';
+import { CommonModule, DatePipe } from '@angular/common';
+
+@Component({
+  selector: 'app-lost-key',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule, MatIconModule, CommonModule],
+  providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
+  templateUrl: './lost-key.component.html',
+  styleUrl: './lost-key.component.scss'
+})
+export class LostKeyComponent {
+  readonly dialogRef = inject(MatDialogRef<LostKeyComponent>);
+  readonly key = inject<IKey>(MAT_DIALOG_DATA);
+
+  closeWithData() {
+    this.dialogRef.close(new Date());
+  }
+
+  closeFound() {
+    this.dialogRef.close("");
+  }
+
+  get loss(): Date | null {
+    if (!this.key.keyLost) { return null }
+
+    return new Date(this.key.keyLost);
+  }
+}

client/src/app/modules/keys/components/lost-keys/lost-keys.component.html

@@ -0,0 +1,11 @@
+<h2 mat-dialog-title>Verlorene Schlüssel</h2>
+<mat-dialog-content>
+    <ag-grid-angular
+            style="width: 100%; height: 100%;"
+            (gridReady)="onGridReady($event)"
+            [gridOptions]="gridOptions!"
+    />
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="dataChanged">Schließen</button>
+</mat-dialog-actions>

client/src/app/modules/keys/components/lost-keys/lost-keys.component.spec.ts

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

client/src/app/modules/keys/components/lost-keys/lost-keys.component.ts

@@ -0,0 +1,95 @@
+import { CommonModule, DatePipe } from '@angular/common';
+import { Component, inject } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { HotToastService } from '@ngxpert/hot-toast';
+import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { ICylinder } from '../../../../model/interface/cylinder.interface';
+import { IKey } from '../../../../model/interface/key.interface';
+import { ApiService } from '../../../../shared/api.service';
+import { HELPER } from '../../../../shared/helper.service';
+import { AgGridAngular } from 'ag-grid-angular';
+import { LostKeyComponent } from '../lost-key/lost-key.component';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-lost-keys',
+  standalone: true,
+  imports: [MatDialogModule, AgGridAngular, CommonModule, MatButtonModule],
+  providers: [DatePipe],
+  templateUrl: './lost-keys.component.html',
+  styleUrl: './lost-keys.component.scss'
+})
+export class LostKeysComponent {
+  private api: ApiService = inject(ApiService);
+  private datePipe = inject(DatePipe);
+  private dialog: MatDialog = inject(MatDialog);
+  private toast = inject(HotToastService);
+
+  gridApi!: GridApi;
+
+  dataChanged = false;
+
+  gridOptions: GridOptions = HELPER.getGridOptions();
+
+  constructor() {
+    this.gridOptions.columnDefs = [
+      { colId: 'name', field: 'name', headerName: 'Name', sort: 'asc', flex: 1, filter: true },
+      { colId: 'nr', field: 'nr', headerName: 'Schlüsselnummer', flex: 1, filter: true },
+      { colId: 'cylinder', field: 'cylinder', headerName: 'Zylinder', flex: 1, filter: true, 
+        cellRenderer: (data: any) => data.value?.map((m: ICylinder) => m.name).join(', ') 
+      },
+      {
+        colId: 'customer', field: 'customer.name', headerName: 'Kunde', flex: 1, filter: true,
+      },
+      { colId: 'keyLost', field: 'keyLost', headerName: 'Verloren seit', width: 100,
+        cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value), 'dd.MM.yyyy'),
+      },
+      {
+        colId: 'actions',
+        headerName: 'Aktionen',
+        width: 100,
+        tooltipValueGetter: () => 'Als gefunden markieren',
+        cellRenderer: (params: any) => `<div class="icon magnifying-glass icon-btn-sm"></div>`,
+        onCellClicked: (event: any) => {
+          if (event.colDef.colId === 'actions') {
+            this.markAsFound(event.data);
+          }
+        }
+      }
+    ];
+    this.gridOptions.overlayNoRowsTemplate = 'Bisher wurden keine Schlüssel als verloren gemeldet. Sobald dies der Fall ist, werden sie hier angezeigt.';
+  }
+
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+    this.loadLostKeys();
+  }
+
+  loadLostKeys() {
+    this.gridApi?.setGridOption("loading", true);
+    this.api.getLostKeys().subscribe({
+      next: keys => {
+        this.gridApi.setGridOption("rowData", keys);
+        this.gridApi.setGridOption("loading", false);
+      }
+    });
+  }
+
+  markAsFound(key: IKey) {
+    this.dialog.open(LostKeyComponent, { data: key, autoFocus: false }).afterClosed().subscribe({
+      next: (result) => {
+        if (result == "") {
+          key.keyLost = null;
+          this.api.updateKey(key).subscribe({
+            next: () => {
+              this.toast.success('Schlüssel als gefunden markiert');
+              this.loadLostKeys();
+            }
+          });
+          this.dataChanged = true;
+        }
+      }
+    })
+
+  }
+}

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

@@ -12,11 +12,17 @@
       }
     </mat-form-field>
 
-    <mat-form-field>
-      <mat-label>Schlüsselnummer</mat-label>
-      <input type="text" matInput formControlName="nr"  maxlength="100">
-      <mat-hint>Nummer auf dem Schlüssel</mat-hint>
-    </mat-form-field>
+    <div class="flex items-center gap-6">
+      <mat-form-field class="flex-auto">
+        <mat-label>Schlüsselnummer</mat-label>
+        <input type="text" matInput formControlName="nr"  maxlength="100">
+        <mat-hint>Nummer auf dem Schlüssel</mat-hint>
+      </mat-form-field>
+  
+      <div>
+        <mat-checkbox formControlName="digital" style="margin-bottom: 12px;">Schlüsselkarte</mat-checkbox>
+      </div>
+    </div>
 
     <div class="flex items-center gap-3">
       <mat-form-field class="flex-auto">
@@ -28,13 +34,16 @@
         </mat-select>
         <mat-hint>Wo sperrt der Schlüssel?</mat-hint>
       </mat-form-field>
-        <button mat-icon-button (click)="openSelectMultipleCylinders()">
+        <button mat-icon-button (click)="openSelectMultipleCylinders()" style="margin-bottom: 12px;">
           <mat-icon>open_in_new</mat-icon>
         </button>
     </div>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close >Abbrechen</button>
-  <button mat-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid">Speichern</button>
+  <button mat-button mat-dialog-close color="warn">Abbrechen</button>
+  <button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" mat-raised-button color="accent">
+    <mat-icon>save</mat-icon>
+        Speichern
+  </button>
 </mat-dialog-actions>

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

@@ -11,11 +11,12 @@ import { MatSelectModule } from '@angular/material/select';
 import { HotToastService } from '@ngxpert/hot-toast';
 import { SelectKeyCylinderComponent } from './select-key-cylinder/select-key-cylinder.component';
 import { MatIconModule } from '@angular/material/icon';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 @Component({
   selector: 'app-create',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule],
+  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule, MatCheckboxModule],
   templateUrl: './create.component.html',
   styleUrl: './create.component.scss'
 })
@@ -29,6 +30,7 @@ export class CreateKeyComponent {
   createForm = new FormGroup({
     name: new FormControl(null, Validators.required),
     nr: new FormControl(null, Validators.required),
+    digital: new FormControl(false, Validators.required),
     cylinder: new FormControl(null, Validators.required),
   })
 

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

@@ -6,5 +6,6 @@
 
 <div class="floating-btn-container">
   <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()" color="accent" >Schlüssel anlegen</button>
-  <button mat-mini-fab (click)="openArchive()"><mat-icon>inventory_2</mat-icon></button>
+  <button mat-mini-fab (click)="openArchive()" matTooltip="Archiv"><mat-icon>inventory_2</mat-icon></button>
+  <button mat-mini-fab (click)="openLostKeys()" class="lost icon-btn-xs" style="background-repeat: no-repeat; background-position: center;" matTooltip="Verlorene Schlüssel"></button>
 </div>

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

@@ -15,11 +15,13 @@ import { ArchiveComponent } from './components/archive/archive.component';
 import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component';
 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';
 
 @Component({
   selector: 'app-keys',
   standalone: true,
-  imports: [AgGridAngular, MatButtonModule, MatDialogModule, MatIconModule],
+  imports: [AgGridAngular, MatButtonModule, MatDialogModule, MatIconModule, MatTooltipModule],
   providers: [DatePipe],
   templateUrl: './keys.component.html',
   styleUrl: './keys.component.scss'
@@ -37,6 +39,9 @@ export class KeysComponent {
   gridOptions: GridOptions = {
     localeText: AG_GRID_LOCALE_DE,
     rowData: [],
+    rowClassRules: {
+      'key-lost': (params) => {console.log(params.data); return params.data.keyLost != null},
+    },
     columnDefs: [
       
       { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
@@ -178,4 +183,22 @@ export class KeysComponent {
       }
     })
   }
+
+  openLostKeys() {
+    this.dialog.open(LostKeysComponent, {
+      maxHeight: "calc(100vh - 24px)",
+      maxWidth: "calc(100vw - 24px)",
+      width: "50vw",
+      minWidth: "min(700px,calc(100vw - 24px))",
+      height: "70vh",
+      disableClose: true
+    }).afterClosed().subscribe({
+      next: changed => {
+        console.log(changed)
+        if (changed) {
+          this.loadKeys();
+        }
+      }
+    })
+  }
 }