handover pdf

client/src/app/model/interface/handover-pdf.interface.ts

@@ -0,0 +1,17 @@
+export interface IKeyHandoverPDF {
+  handoverId: string;
+  handoverDate: Date;
+  place: string;
+
+  giverName: string;
+  giverAddress?: string;
+
+  receiverName: string;
+  receiverAddress?: string;
+
+  keyType: string;
+  keyNumber?: string;
+  quantity: number;
+  objectDescription?: string;
+  notes?: string;
+}

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

@@ -0,0 +1,54 @@
+<h2 mat-dialog-title>Übergabeprotokoll</h2>
+<mat-dialog-content>
+  <div class="text" style="margin: 0 0 24px 0;">
+    Fülle alle Daten aus und klicke auf PDF erzeugen. Das PDF wird anschließend heruntergeladen.
+  </div>
+  <form [formGroup]="handoverPDFForm" class="flex flex-col items-stretch justify-stretch">
+    <div class="flex-row">
+
+      <mat-form-field style="flex: 1 1 auto;">
+        <mat-label>Herausgeber</mat-label>
+        <input type="text" matInput formControlName="giverName">
+      </mat-form-field>
+
+      <mat-form-field style="flex: 1 1 auto;">
+        <mat-label>Empfänger</mat-label>
+        <input type="text" matInput formControlName="receiverName">
+      </mat-form-field>
+
+    </div>
+
+    <div class="flex-row">
+
+      <mat-form-field style="flex: 1 1 auto;">
+        <mat-label>Adresse des Herausgebendens</mat-label>
+        <input type="text" matInput formControlName="giverAddress">
+      </mat-form-field>
+
+      <mat-form-field style="flex: 1 1 auto;">
+        <mat-label>Adresse des Empfängers</mat-label>
+        <input type="text" matInput formControlName="receiverAddress">
+      </mat-form-field>
+    </div>
+
+    
+    <mat-form-field>
+      <mat-label>Objektbeschreibung / Schließanlage</mat-label>
+      <input type="text" matInput formControlName="objectDescription">
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Notizen</mat-label>
+      <textarea type="text" matInput formControlName="notes" rows="5"></textarea>
+    </mat-form-field>
+
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button matButton mat-dialog-close class="btn-warning">Schließen</button>
+  <button matButton="elevated" (click)="createPdf()" class="btn-primary">
+      <mat-icon>save</mat-icon>
+      PDF erzeugen
+    </button>
+    
+</mat-dialog-actions>

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

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

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

@@ -0,0 +1,65 @@
+import { Component, inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { ApiService } from '../../../../shared/api.service';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { IKeyHandoverPDF } from '../../../../model/interface/handover-pdf.interface';
+
+@Component({
+  selector: 'app-create-handover-pdf-dialog',
+  imports: [MatDialogModule, FormsModule, ReactiveFormsModule, CommonModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule],
+  templateUrl: './create-handover-pdf-dialog.component.html',
+  styleUrl: './create-handover-pdf-dialog.component.scss',
+})
+export class CreateHandoverPdfDialogComponent {
+  private api: ApiService = inject(ApiService);
+  readonly dialogRef = inject(MatDialogRef<CreateHandoverPdfDialogComponent>);
+  readonly data = inject<any>(MAT_DIALOG_DATA);
+
+  handoverPDFForm = new FormGroup({
+    handoverDate: new FormControl<Date>(new Date(), Validators.required),
+    place: new FormControl<string | null>(null, Validators.required),
+
+    giverName: new FormControl<string | null>(null, Validators.required),
+    giverAddress: new FormControl<string | null>(null),
+
+    receiverName: new FormControl<string | null>(null, Validators.required),
+    receiverAddress: new FormControl<string | null>(null),
+
+    objectDescription: new FormControl<string | null>(null),
+    notes: new FormControl<string | null>(null)
+  });
+
+  ngOnInit() {
+    console.log(this.data)
+    this.patchInitialData();
+  }
+
+  patchInitialData() {
+    const dto = {
+      handoverDate: this.data.timestamp,
+      receiverName: this.data.customer.name,
+      receiverAddress: this.data.customer.address,
+
+      giverName: `${this.api.user.value.firstName} ${this.api.user.value.lastName}`
+    }
+
+    this.handoverPDFForm.patchValue(dto);
+  }
+
+  async createPdf() {
+    const dto: IKeyHandoverPDF = {
+      ...this.handoverPDFForm.value as any,
+      quantity: 1,
+      keyType: "",
+      keyNumber: this.data.key.nr,
+      handoverId: this.data.handoverId
+    }
+    await this.api.createPdf(dto)
+    this.dialogRef.close();
+  }
+}

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

@@ -40,6 +40,13 @@
         <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
         <mat-datepicker #picker></mat-datepicker>
       </mat-form-field>
+
+      <div style="padding: 8px 0;margin-top: 12px">
+        <mat-slide-toggle formControlName="handoverDocument">
+          Übergabeprotokoll anlegen
+        </mat-slide-toggle>
+      </div>
+
     </form>
   </mat-dialog-content>
   <mat-dialog-actions>

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

@@ -1,7 +1,7 @@
 import { Component, inject, LOCALE_ID, signal } from '@angular/core';
 import { ApiService } from '../../../../shared/api.service';
 import { IKey } from '../../../../model/interface/key.interface';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -27,10 +27,12 @@ import { AgGridAngular } from 'ag-grid-angular';
 import { MatIconModule } from '@angular/material/icon';
 import { AgGridContainerComponent } from '../../../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
 import { ICustomer } from '../../../../model/interface/customer.interface';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { CreateHandoverPdfDialogComponent } from '../create-handover-pdf-dialog/create-handover-pdf-dialog.component';
 
 @Component({
     selector: 'app-handover-dialog',
-    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe, MatIconModule, DatePipe],
+    imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule, AsyncPipe, MatIconModule, DatePipe, MatSlideToggleModule],
     providers: [
         provideNativeDateAdapter(),
         { provide: LOCALE_ID, useValue: 'de-DE' },
@@ -48,6 +50,7 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
   private _bottomSheet = inject(MatBottomSheet);
   private datePipe = inject(DatePipe);
   private toast: HotToastService = inject(HotToastService);
+  private dialog = inject(MatDialog)
 
   public exampleDate = new Date();
 
@@ -90,7 +93,8 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
     customer: new FormControl<any>(null, Validators.required),
     key: new FormControl(this.data),
     direction: new FormControl('out', Validators.required),
-    timestamp: new FormControl(new Date(), Validators.required)
+    timestamp: new FormControl(new Date(), Validators.required),
+    handoverDocument: new FormControl<boolean>(false)
   });
 
   ngOnInit() {
@@ -148,7 +152,8 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
       key: this.data,
       customer: this.customers.find(c => c.name == val.customer || c.id == val.customer),
       timestamp: val.timestamp,
-      direction: val.direction
+      direction: val.direction,
+      createHandoverPDF: val.handoverDocument
     }
 
     if (dto.customer == null) {
@@ -175,8 +180,17 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
       })
     )
     .subscribe({
-      next: n => {
+      next: (n: any) => {
         this.dialogRef.close(data.direction == 'out');
+        if (data.createHandoverPDF) {
+          data.handoverId = n.id
+          this.dialog.open(CreateHandoverPdfDialogComponent, {
+            data,
+            maxWidth: "calc(100vw - 48px)",
+            width: "900px",
+            disableClose: true
+          })
+        }
       }
     })
   }

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

@@ -19,6 +19,7 @@ import { SelectKeyCylinderComponent } from './create/select-key-cylinder/select-
 import { ActivatedRoute } from '@angular/router';
 import { ModuleRegistry } from 'ag-grid-community'; 
 import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
+import { CreateHandoverPdfDialogComponent } from './components/create-handover-pdf-dialog/create-handover-pdf-dialog.component';
 
 @Component({
     selector: 'app-keys',

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

@@ -7,6 +7,7 @@ import { ICylinder } from '../model/interface/cylinder.interface';
 import { HotToastService } from '@ngxpert/hot-toast';
 import { ICustomer } from '../model/interface/customer.interface';
 import { ISystem } from '../model/interface/keysystem.interface';
+import { IKeyHandoverPDF } from '../model/interface/handover-pdf.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -26,9 +27,10 @@ export class ApiService {
 
 
   constructor() {
-    setTimeout(() => {
-      this.setupKeyFeed();
-    }, 2000)
+    // setTimeout(() => {
+    //   this.setupKeyFeed();
+    //   this.createPdf()
+    // }, 2000)
   }
 
   getMe(): Promise<IUser> {
@@ -455,4 +457,23 @@ export class ApiService {
       })
     })
   }
+
+  createPdf(data: IKeyHandoverPDF) {
+    return new Promise(resolve => {
+
+      this.http.post('/api/key/pdf', data, {
+        responseType: 'blob',
+      }).subscribe((blob) => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'schluesseluebergabe.pdf';
+        a.click();
+        URL.revokeObjectURL(url);
+        resolve(null)
+      });
+
+    })
+    
+  }
 }

client/src/styles.scss

@@ -227,4 +227,10 @@ div.ag-row {
   // border-top-right-radius: 0 !important;
   // border-bottom-right-radius: 0 !important;
   color: #2D6B05;
+}
+
+.flex-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
 }