Lost Keys

api/src/model/entitites/key.entity.ts

@@ -29,8 +29,11 @@ export class Key implements IKey {
   @Column({ name: 'handed_out', default: false })
   handedOut: boolean;
 
-  @Column({ name: 'lost', default: false })
+  @Column({ name: 'lost', default: null })
-  keyLost: boolean;
+  keyLost: Date;
+
+  @Column({ name: 'is_digital', default: false })
+  digital: boolean;
 
   @ManyToMany(() => Cylinder, (cylinder) => cylinder.keys)
   @JoinTable()

api/src/model/interface/key.interface.ts

@@ -8,4 +8,6 @@ export interface IKey {
   cylinder: Cylinder[];
   customer: Customer;
   createdAt: Date;
+  digital: boolean;
+  keyLost: Date;
 }

api/src/modules/cylinder/cylinder.service.ts

@@ -1,7 +1,7 @@
 import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { Cylinder, User } from 'src/model/entitites';
 import { ActivityRepository, CylinderRepository, KeyRepository } from 'src/model/repositories';
-import { ManageHelperService } from 'src/shared/service/system.helper.service';
+import { HelperService } from 'src/shared/service/system.helper.service';
 
 @Injectable()
 export class CylinderService {
@@ -9,7 +9,7 @@ export class CylinderService {
     private readonly cylinderRepo: CylinderRepository,
     private readonly keyRepo: KeyRepository,
     private systemActivityRepo: ActivityRepository, 
-    private readonly helper: ManageHelperService
+    private readonly helper: HelperService
   ) {}
 
   async getCylinders(user: User): Promise<Cylinder[]> {

api/src/modules/key/key.controller.ts

@@ -24,6 +24,11 @@ export class KeyController {
     return this.service.getUsersKeys(req.user);
   }
 
+  @Get('lost')
+  getLostKeys(@Req() req: AuthenticatedRequest) {
+    return this.service.getLostKeys(req.user);
+  }
+
   @Post()
   postKey(@Req() req: AuthenticatedRequest, @Body() key: Key) {
     return this.service.createKey(req.user, key);

api/src/modules/key/key.service.ts

@@ -1,14 +1,13 @@
 import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { Customer, Cylinder, Key, User } from 'src/model/entitites';
-import { IUser } from 'src/model/interface';
 import {
-  ActivityRepository,
   CylinderRepository,
   KeyRepository,
   KeySystemRepository,
 } from 'src/model/repositories';
 import { KeyHandoutRepository } from 'src/model/repositories/key-handout.repository';
 import { ActivityHelperService } from 'src/shared/service/activity.logger.service';
+import { HelperService } from 'src/shared/service/system.helper.service';
 import { IsNull, Not } from 'typeorm';
 
 @Injectable()
@@ -16,14 +15,25 @@ export class KeyService {
   constructor(
     private readonly keyrepository: KeyRepository,
     private readonly cylinderRepository: CylinderRepository,
-    private readonly systemRepo: KeySystemRepository,
+    private readonly handoverRepo: KeyHandoutRepository,
-    private handoverRepo: KeyHandoutRepository,
+    private readonly activityService: ActivityHelperService,
-    private readonly activityService: ActivityHelperService
+    private readonly helper: HelperService,
   ) {}
 
   async getUsersKeys(user: User): Promise<Key[]> {
     const keys = await this.keyrepository.find({
-      where: { cylinder: { system: { managers: { id: user.id } } } },
+      where: { cylinder: { system: { managers: { id: user.id } } }, keyLost: IsNull() },
+      relations: ['cylinder', 'cylinder.system', 'customer'],
+    });
+    for (let k of keys) {
+      k.customer = await this.getCustomerOfLastHandout(user, k.id);
+    }
+    return keys;
+  }
+
+  async getLostKeys(user: User): Promise<Key[]> {
+    const keys = await this.keyrepository.find({
+      where: { cylinder: { system: { managers: { id: user.id } } }, keyLost: Not(IsNull()) },
       relations: ['cylinder', 'cylinder.system', 'customer'],
     });
     for (let k of keys) {
@@ -36,10 +46,19 @@ export class KeyService {
     if (!user || !user.id) {
       throw new HttpException('forbidden', HttpStatus.FORBIDDEN);
     }
-    await this.keyrepository.findOneOrFail({
+
-      where: { cylinder: { system: { managers: { id: user.id } } } },
+    const k = await this.keyrepository.findOneOrFail({
+      where: { id: key.id, cylinder: { system: { managers: { id: user.id } } } },
+      relations: ['cylinder', 'cylinder.system'],
+      withDeleted: true
     });
 
+    if (k.name != key.name) {
+      await this.activityService.logKeyRenamed(user, key, key.cylinder[0].system, k.name);
+    }
+    if (k.keyLost != key.keyLost) {
+      await this.activityService.logKeyLostUpdate(user, key, key.keyLost);
+    }
     return this.keyrepository.save(this.keyrepository.create(key));
   }
 
@@ -121,6 +140,7 @@ export class KeyService {
     const key = await this.keyrepository.findOneOrFail({
       where: { id, cylinder: { system: { managers: { id: user.id } } } },
     });
+    await this.activityService.logDeleteKey(user, key);
     return this.keyrepository.softRemove(key);
   }
 
@@ -136,11 +156,14 @@ export class KeyService {
   }
 
   async restoreKey(user: User, keyID: string) {
+    
     const key = await this.keyrepository.findOneOrFail({
       where: { cylinder: { system: { managers: { id: user.id } } }, id: keyID },
       withDeleted: true,
     });
     key.deletedAt = null;
+    await this.activityService.logKeyRestored(user, key);
+    await this.helper.deleteKeyArchiveCache();
     return this.keyrepository.save(key);
   }
 }

api/src/modules/user/user.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@nestjs/common';
 import { User } from 'src/model/entitites';
 import { IUser } from 'src/model/interface';
 import { ActivityRepository, KeySystemRepository, RoleRepository, UserRepository } from 'src/model/repositories';
-import { ManageHelperService } from 'src/shared/service/system.helper.service';
+import { HelperService } from 'src/shared/service/system.helper.service';
 @Injectable()
 export class UserService {
   constructor(
@@ -10,7 +10,7 @@ export class UserService {
     private readonly roleRepo: RoleRepository,
     private readonly systemRepo: KeySystemRepository,
     private readonly systemActivityRepo: ActivityRepository,
-    private readonly helper: ManageHelperService,
+    private readonly helper: HelperService,
   ) {}
 
   getAllUsers(): Promise<User[]> {

api/src/shared/service/activity.logger.service.ts

@@ -2,11 +2,13 @@ import { Injectable } from "@nestjs/common";
 import { Key, KeyHandout, User } from "src/model/entitites";
 import { KeySystem } from "src/model/entitites/system.entity";
 import { ActivityRepository, CylinderRepository, KeyRepository } from "src/model/repositories";
+import { HelperService } from "./system.helper.service";
 
 @Injectable()
 export class ActivityHelperService {
 
   constructor(
+    private readonly helper: HelperService,
     private readonly activityRepo: ActivityRepository,
     private readonly keyRepository: KeyRepository,
     private readonly cylinderRepo: CylinderRepository,
@@ -54,8 +56,8 @@ export class ActivityHelperService {
     }))
   }
 
-  async logKeyRenamed(user: User, key: Key, system: KeySystem) {
+  async logKeyRenamed(user: User, key: Key, system: KeySystem, oldName?: string) {
-    let msg = `Schlüssel ${key.nr} in ${key.name} umbenannt`;
+    let msg = `Schlüssel ${key.nr} ${oldName ? 'von ' + oldName + ' in ' : ''}in ${key.name} umbenannt`;
     this.activityRepo.save(
       this.activityRepo.create({
       system,
@@ -64,6 +66,31 @@ export class ActivityHelperService {
     }))
   }
 
+  /**
+   * Logs when a key is reported as lost or misplaced in the system.
+   * 
+   * @param user - The user who reported the key as lost
+   * @param key - The key that was reported as lost
+   * @param system - The key system the lost key belongs to
+   * @param lostDate - The date when the key was reported as lost
+   */
+  async logKeyLostUpdate(user: User, key: Key,lostDate: Date | string) {
+    const sys = await this.helper.getSystemOfKey(key);
+    let msg;
+    if (lostDate == null) {
+      msg = `Schlüssel ${key.nr} als gefunden gemeldet`;
+    } else {
+       msg = `Schlüssel ${key.nr} als verloren gemeldet`
+    }
+    this.activityRepo.save(
+      this.activityRepo.create({
+        system: sys,
+        user,
+        message: msg,
+      })
+    )
+  }
+
   logKeyHandover(user: User, key: Key, system: KeySystem, handover: KeyHandout) {
 
     const msg = `Schlüssel ${key.nr} ${handover.direction == 'out' ? 'ausgegeben an ' : 'zurückgegeben von '}${handover.customer.name}`
@@ -75,4 +102,17 @@ export class ActivityHelperService {
     }))
 
   }
+
+  async logKeyRestored(user: User, key: Key) {
+    let msg = `Schlüssel ${key.nr} wiederhergestellt`;
+
+    const system: KeySystem = await this.helper.getSystemOfKey(key);
+
+    this.activityRepo.save(
+      this.activityRepo.create({
+      system,
+      user,
+      message: msg,
+    }))
+  }
 }

api/src/shared/service/shared.service.module.ts

@@ -1,14 +1,15 @@
 import { Module } from "@nestjs/common";
 import { DatabaseModule } from "../database/database.module";
-import { ManageHelperService } from "./system.helper.service";
+import { HelperService } from "./system.helper.service";
 import { CylinderRepository, KeySystemRepository } from "src/model/repositories";
 import { Cylinder, User } from "src/model/entitites";
 import { ActivityHelperService } from "./activity.logger.service";
+import { CacheModule } from "@nestjs/cache-manager";
 
 @Module({
   imports: [ DatabaseModule ],
-  providers: [ ManageHelperService, ActivityHelperService ],
+  providers: [ HelperService, ActivityHelperService ],
-  exports: [ ManageHelperService, ActivityHelperService ],
+  exports: [ HelperService, ActivityHelperService ],
 })
 
 export class SharedServiceModule {

api/src/shared/service/system.helper.service.ts

@@ -1,14 +1,17 @@
-import { Injectable } from "@nestjs/common";
+import { Inject, Injectable } from "@nestjs/common";
 import { User, Cylinder, Key } from "src/model/entitites";
+import { KeySystem } from "src/model/entitites/system.entity";
 import { KeySystemRepository, CylinderRepository, KeyRepository } from "src/model/repositories";
+import { Cache } from "@nestjs/cache-manager";
 
 @Injectable()
-export class ManageHelperService {
+export class HelperService {
 
   constructor(
     private readonly systemRepository: KeySystemRepository,
     private readonly cylinderRepository: CylinderRepository,
     private readonly keyRepo: KeyRepository,
+    private cacheManager: Cache
   ) {}
 
 
@@ -35,4 +38,24 @@ export class ManageHelperService {
     });
     return keys;
   }
+
+  async getSystemOfKey(key: Key): Promise<KeySystem> {
+    const k = await this.keyRepo.findOne({
+      where: { id: key.id },
+      relations: ['cylinder', 'cylinder.system'],
+      withDeleted: true,
+    });
+    this.cache()
+    const found = k.cylinder.find(c => c.system != null);
+    return found.system;
+  }
+
+  async cache() {
+    const value = await this.cacheManager.store.keys()
+    console.log(value)
+  }
+
+  async deleteKeyArchiveCache() {
+    await this.cacheManager.del('/key/archive');
+  }
 }

client/src/app/model/interface/key.interface.ts

@@ -9,4 +9,5 @@ export interface IKey {
   cylinder: ICylinder[];
   nr: number;
   deletedAt?: string;
+  keyLost: Date | null;
 }

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

@@ -25,6 +25,9 @@
     </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-    <button mat-button mat-dialog-close>Abbrechen</button>
+    <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-    <button mat-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid">Speichern</button>
+    <button mat-raised-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid" color="accent">
+        <mat-icon>save</mat-icon>
+        Speichern
+    </button>
 </mat-dialog-actions>

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

@@ -8,11 +8,12 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-create-cylinder',
   standalone: true,
-  imports: [CommonModule, MatFormFieldModule, MatInputModule, MatDialogModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatButtonModule],
+  imports: [CommonModule, MatFormFieldModule, MatInputModule, MatDialogModule, ReactiveFormsModule, FormsModule, MatSelectModule, MatButtonModule, MatIconModule],
   templateUrl: './create-cylinder.component.html',
   styleUrl: './create-cylinder.component.scss'
 })

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

@@ -31,7 +31,7 @@ export class DashboardComponent {
         cellRenderer: (data: any) => `${data.value?.firstName} ${data.value?.lastName}` }
     ],
     pagination: true,
-    paginationPageSize: 10,
+    paginationPageSize: 50,
     loading: true,
     localeText: AG_GRID_LOCALE_DE,
     loadingOverlayComponent: AgLoadingComponent

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>
+    <div class="flex items-center gap-6">
-      <mat-label>Schlüsselnummer</mat-label>
+      <mat-form-field class="flex-auto">
-      <input type="text" matInput formControlName="nr"  maxlength="100">
+        <mat-label>Schlüsselnummer</mat-label>
-      <mat-hint>Nummer auf dem Schlüssel</mat-hint>
+        <input type="text" matInput formControlName="nr"  maxlength="100">
-    </mat-form-field>
+        <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 mat-dialog-close color="warn">Abbrechen</button>
-  <button mat-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid">Speichern</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();
+        }
+      }
+    })
+  }
 }

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

@@ -14,6 +14,9 @@
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button mat-button mat-dialog-close >Abbrechen</button>
+  <button mat-button mat-dialog-close color="warn">Abbrechen</button>
-  <button mat-button (click)="save()" [disabled]="createForm.disabled">Speichern</button>
+  <button mat-raised-button (click)="save()" [disabled]="createForm.disabled" color="accent">
+    <mat-icon>save</mat-icon>
+    Speichern
+  </button>
 </mat-dialog-actions>

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

@@ -6,11 +6,12 @@ import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule }
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-create',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatDialogModule],
+  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatDialogModule, MatIconModule],
   templateUrl: './create.component.html',
   styleUrl: './create.component.scss'
 })

client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.html

@@ -1,3 +1,5 @@
-<div class="handover icon-btn-sm" (click)="openHandoutDialog()" matTooltip="Schlüsselübergaben" [matTooltipShowDelay]="600"></div>
+<div class="handover icon-btn-sm" (click)="openHandoutDialog()" matTooltip="Schlüsselübergaben" [matTooltipShowDelay]="400"></div>
 
-<div class="delete icon-btn-sm" (click)="delete()" matTooltip="Löschen" [matTooltipShowDelay]="600"></div>
+<div class="delete icon-btn-sm" (click)="delete()" matTooltip="Löschen" [matTooltipShowDelay]="400"></div>
+
+<div class="magnifying-glass icon-btn-sm" (click)="openLostKeyDialog()" matTooltip="Verloren melden" [matTooltipShowDelay]="400"></div>

client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.scss

@@ -5,7 +5,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  gap: 12px;
+  gap: 6px;
 }
 
 .handover {

client/src/app/shared/ag-grid/components/ag-delete-key/ag-delete-key.component.ts

@@ -8,6 +8,7 @@ import { DeleteKeyComponent } from '../../../../modules/keys/components/delete-k
 import { HotToastService } from '@ngxpert/hot-toast';
 import { HandoverDialogComponent } from '../../../../modules/keys/components/handover-dialog/handover-dialog.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { LostKeyComponent } from '../../../../modules/keys/components/lost-key/lost-key.component';
 
 @Component({
   selector: 'app-ag-delete-key',
@@ -86,4 +87,24 @@ export class AgDeleteKeyComponent implements ICellRendererAngularComp {
       }
     })
   }
+
+  openLostKeyDialog() {
+    this.dialog.open(LostKeyComponent, {
+      data: this.key,
+      autoFocus: false,
+      maxWidth: '100vw',
+      maxHeight: '100vh'
+    }).afterClosed().subscribe({
+      next: n => {
+        if (n != null) {
+          if (n == "") {
+            n = null;
+          }
+          this.key.keyLost = n;
+          this.params.api.refreshCells();
+          this.api.updateKey(this.key).subscribe();
+        }
+      }
+    })
+  }
 }

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

@@ -30,6 +30,10 @@ export class ApiService {
     return this.http.get<IKey[]>('api/key')
   }
 
+  getLostKeys(): Observable<IKey[]> {
+    return this.http.get<IKey[]>('api/key/lost')
+  }
+
   updateKey(key: IKey): Observable<IKey> {
     return this.http.put<IKey>('api/key', key);
   }

client/src/assets/img/lost.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg1359"
+   xml:space="preserve"
+   width="682.66669"
+   height="682.66669"
+   viewBox="0 0 682.66669 682.66669"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1363"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath1373"><path
+         d="M 0,512 H 512 V 0 H 0 Z"
+         id="path1371" /></clipPath></defs><g
+     id="g1365"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,682.66667)"><g
+       id="g1367"><g
+         id="g1369"
+         clip-path="url(#clipPath1373)"><g
+           id="g1375"
+           transform="translate(336.3335,400.6001)"><path
+             d="M 0,0 V 64.267 H -160.667 V 0"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1377" /></g><g
+           id="g1379"
+           transform="translate(111.3999,400.6001)"><path
+             d="m 0,0 h -64.267 c -8.522,0 -16.695,-3.385 -22.721,-9.412 -6.027,-6.026 -9.412,-14.199 -9.412,-22.721 V -96.4 h 32.133 C -28.773,-96.4 0,-67.627 0,-32.133 Z"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1381" /></g><g
+           id="g1383"
+           transform="translate(111.3999,47.1333)"><path
+             d="m 0,0 h -64.267 c -8.522,0 -16.695,3.385 -22.721,9.412 -6.027,6.026 -9.412,14.199 -9.412,22.721 V 96.4 h 32.133 C -28.773,96.4 0,67.627 0,32.133 Z"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1385" /></g><g
+           id="g1387"
+           transform="translate(400.6001,400.6001)"><path
+             d="m 0,0 h 64.267 c 8.522,0 16.695,-3.385 22.721,-9.412 6.027,-6.026 9.412,-14.199 9.412,-22.721 V -96.4 H 64.267 C 28.773,-96.4 0,-67.627 0,-32.133 Z"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1389" /></g><g
+           id="g1391"
+           transform="translate(400.6001,47.1333)"><path
+             d="m 0,0 h 64.267 c 8.522,0 16.695,3.385 22.721,9.412 6.027,6.026 9.412,14.199 9.412,22.721 V 96.4 H 64.267 C 28.773,96.4 0,67.627 0,32.133 Z"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1393" /></g><g
+           id="g1395"
+           transform="translate(497,368.4668)"><path
+             d="m 0,0 c 0,8.522 -3.385,16.695 -9.412,22.721 -6.026,6.027 -14.199,9.412 -22.721,9.412 h -417.734 c -8.522,0 -16.695,-3.385 -22.721,-9.412 C -478.615,16.695 -482,8.522 -482,0 v -289.2 c 0,-8.523 3.385,-16.696 9.412,-22.721 6.026,-6.027 14.199,-9.412 22.721,-9.412 h 417.734 c 8.522,0 16.695,3.385 22.721,9.412 6.027,6.025 9.412,14.198 9.412,22.721 z"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1397" /></g><g
+           id="g1399"
+           transform="translate(191.7334,272.0669)"><path
+             d="M 0,0 V 0.016 C 0,35.5 28.766,64.267 64.25,64.267 h 0.017 c 17.044,0 33.391,-6.772 45.443,-18.824 C 121.762,33.391 128.533,17.044 128.533,0 c 0,-35.494 -28.773,-64.267 -64.266,-64.267 v -40.167"
+             style="fill:none;stroke:#000000;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path1401" /></g><g
+           id="g1403"
+           transform="translate(256,126.3999)"><path
+             d="m 0,0 c 8.278,0 15,-6.721 15,-15 0,-8.278 -6.722,-15 -15,-15 -8.278,0 -15,6.722 -15,15 0,8.279 6.722,15 15,15"
+             style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             id="path1405" /></g></g></g></g></svg>

client/src/assets/img/magnifying-glass.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg2292"
+   xml:space="preserve"
+   width="682.66669"
+   height="682.66669"
+   viewBox="0 0 682.66669 682.66669"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs2296"><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath2306"><path
+         d="M 0,512 H 512 V 0 H 0 Z"
+         id="path2304" /></clipPath></defs><g
+     id="g2298"
+     transform="matrix(1.3333333,0,0,-1.3333333,0,682.66667)"><g
+       id="g2300"><g
+         id="g2302"
+         clip-path="url(#clipPath2306)"><g
+           id="g2308"
+           transform="translate(147.875,190.3018)"><path
+             d="m 0,0 -131.588,-131.588 c -11.716,-11.716 -11.716,-30.711 0,-42.427 11.715,-11.715 30.711,-11.715 42.426,0 L 42.426,-42.427 Z"
+             style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2310" /></g><g
+           id="g2312"
+           transform="translate(126.6616,169.0889)"><path
+             d="M 0,0 42.426,-42.427"
+             style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2314" /></g><g
+           id="g2316"
+           transform="translate(154.9463,183.2305)"><path
+             d="M 0,0 28.976,28.977"
+             style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2318" /></g><g
+           id="g2320"
+           transform="translate(183.231,154.9453)"><path
+             d="M 0,0 28.977,28.977"
+             style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2322" /></g><g
+           id="g2324"
+           transform="translate(324.5,504.5)"><path
+             d="m 0,0 c -99.252,0 -180,-80.747 -180,-180 0,-99.252 80.748,-180 180,-180 99.252,0 180,80.748 180,180 C 180,-80.747 99.252,0 0,0 Z"
+             style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2326" /></g><g
+           id="g2328"
+           transform="translate(208.4082,419.3789)"><path
+             d="m 0,0 c -21.181,-25.869 -33.908,-58.914 -33.908,-94.879 0,-82.71 67.289,-150 150,-150 82.71,0 150,67.29 150,150 0,82.711 -67.29,150 -150,150 -35.965,0 -69.009,-12.726 -94.879,-33.908"
+             style="fill:none;stroke:#000000;stroke-width:15;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1"
+             id="path2330" /></g></g></g></g></svg>

client/src/styles.scss

@@ -66,6 +66,8 @@ html, body {
   width: 28px;
   height: 28px;
   background-size: 20px;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 
 .loading-spinner {
@@ -90,6 +92,14 @@ html, body {
   background-image: url("./assets/img/restore.svg");
 }
 
+.magnifying-glass {
+  background-image: url("./assets/img/magnifying-glass.svg");
+}
+
+.lost {
+  background-image: url("./assets/img/lost.svg");
+}
+
 .ag-row {
   transition: background-color 0.2s ease-in-out;
 }
@@ -131,4 +141,11 @@ div.ag-row {
       margin-top: 1rem;
       color: rgba(0, 0, 0, 0.6);
   }
+}
+
+.key-lost{
+  span, div {
+
+    text-decoration: line-through !important;
+  }
 }