Lost Keys

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);
+  }
+}