pdf

Reviewed-on: #1

api/Dockerfile

@@ -3,7 +3,7 @@ FROM node:22 AS build
 WORKDIR /app
 
 COPY package*.json ./
-RUN npm ci
+RUN npm install
 COPY . .
 RUN npm run build
 
@@ -12,7 +12,7 @@ FROM node:22 AS deps
 WORKDIR /app
 
 COPY package*.json ./
-RUN npm ci --omit=dev && npm cache clean --force
+RUN npm install --omit=dev && npm cache clean --force
 
 # -------- RUNTIME --------
 FROM node:22-slim AS runtime

api/package.json

@@ -20,6 +20,7 @@
     "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.1007.0",
     "@nestjs-modules/mailer": "2.0.2",
     "@nestjs/axios": "4.0.1",
     "@nestjs/cache-manager": "3.1.0",
@@ -28,7 +29,7 @@
     "@nestjs/core": "11.1.14",
     "@nestjs/jwt": "11.0.2",
     "@nestjs/mapped-types": "2.1.0",
-    "@nestjs/platform-express": "11.1.14",
+    "@nestjs/platform-express": "11.1.16",
     "@nestjs/typeorm": "11.0.0",
     "axios": "1.13.5",
     "cache-manager": "7.2.8",

api/src/app.module.ts

@@ -11,11 +11,10 @@ import { KeyModule } from './modules/key/key.module';
 import { CustomerModule } from './modules/customer/customer.module';
 import { CylinderModule } from './modules/cylinder/cylinder.module';
 import { SystemModule } from './modules/system/system.module';
-import { CacheInterceptor, CacheModule } from '@nestjs/cache-manager';
-import { APP_INTERCEPTOR } from '@nestjs/core';
 import { MailModule } from './modules/mail/mail.module';
 import { LogModule } from './modules/log/log.module';
 import { SseModule } from './modules/realtime/sse/sse.module';
+import { StorageModule } from './shared/storage/storage.module';
 
 @Module({
   imports: [
@@ -34,7 +33,8 @@ import { SseModule } from './modules/realtime/sse/sse.module';
     SystemModule,
     MailModule,
     LogModule,
-    SseModule
+    SseModule,
+    StorageModule
   ],
   controllers: [AppController],
   providers: [

api/src/model/dto/key-handover.dto.ts

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

api/src/model/entitites/index.ts

@@ -5,3 +5,4 @@ export * from './customer.entity';
 export * from './key-handout.entity';
 export * from './activity.entity';
 export * from './user';
+export * from './key-handout-pdf-data.entity';

api/src/model/entitites/key-handout-pdf-data.entity.ts

@@ -0,0 +1,52 @@
+import { Column, CreateDateColumn, Entity, ManyToOne, PrimaryGeneratedColumn, UpdateDateColumn } from "typeorm";
+import { KeyHandout } from "./key-handout.entity";
+
+@Entity()
+export class KeyHandoutPdfDataEntity {
+
+
+  @PrimaryGeneratedColumn('uuid')
+  id: string;
+
+  @ManyToOne(() => KeyHandout, handout => handout.pdfs)
+  handout: KeyHandout
+
+  @Column({ type: 'date' })
+  handoverDate: Date;
+
+  @Column({ name: 'giver_name' })
+  giverName: string;
+
+  @Column({ name: 'giver_address', nullable: true })
+  giverAddress: string;
+
+  @Column({ name: 'receiver_name' })
+  receiverName: string;
+
+  @Column({ name: 'receiver_address', nullable: true })
+  receiverAddress: string;
+
+  @CreateDateColumn({ name: 'created_at' })
+  createdAt: Date;
+
+  @Column({ name: 'file_name', nullable: true })
+  fileName: string;
+
+  @Column({ name: 'key_nr' })
+  keyNumber: string;
+
+  @Column({ type: 'int', default: 1 })
+  quantity: number;
+
+  @Column({ name: 'object_description', nullable: true })
+  objectDescription: string;
+
+  @Column({ nullable: true })
+  notes: string;
+  
+  @UpdateDateColumn({ name: 'updatet_at' })
+  updatedAt: Date;
+
+
+
+}

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

@@ -4,11 +4,13 @@ import {
   CreateDateColumn,
   Entity,
   ManyToOne,
+  OneToMany,
   PrimaryGeneratedColumn,
 } from 'typeorm';
 import { Key } from './key.entity';
 import { Customer } from './customer.entity';
 import { User } from './user';
+import { KeyHandoutPdfDataEntity } from './key-handout-pdf-data.entity';
 
 @Entity()
 export class KeyHandout {
@@ -33,6 +35,10 @@ export class KeyHandout {
   @ManyToOne(() => User)
   user: User;
 
+
+  @OneToMany(() => KeyHandoutPdfDataEntity, pdf => pdf.handout)
+  pdfs: KeyHandoutPdfDataEntity[];
+
   @BeforeInsert()
   insertTimestamp() {
     if (this.timestamp == null) {

api/src/model/repositories/index.ts

@@ -7,3 +7,4 @@ export * from './key.repository';
 export * from './customer.repository';
 export * from './activity.repository';
 export * from './user.settings.repository';
+export * from './key-handout-pdf-data.repository';

api/src/model/repositories/key-handout-pdf-data.repository.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@nestjs/common';
+import { Repository, DataSource } from 'typeorm';
+import { KeyHandoutPdfDataEntity } from '../entitites';
+
+@Injectable()
+export class KeyHandoutPdfDataEntityRepository extends Repository<KeyHandoutPdfDataEntity> {
+  constructor(dataSource: DataSource) {
+    super(KeyHandoutPdfDataEntity, dataSource.createEntityManager());
+  }
+}

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

@@ -7,57 +7,69 @@ import {
   Post,
   Put,
   Req,
-  Sse,
+  Res,
   UseGuards,
 } from '@nestjs/common';
+import { Response } from 'express';
 import { KeyService } from './key.service';
 import { AuthenticatedRequest } from 'src/model/interface/authenticated-request.interface';
 import { AuthGuard } from 'src/core/guards/auth.guard';
 import { Key } from 'src/model/entitites';
-import { interval, map, Observable } from 'rxjs';
+import { KeyHandoutPDFDataDto } from 'src/model/dto/key-handover.dto';
 
 
+@UseGuards(AuthGuard)
 @Controller('key')
 export class KeyController {
   constructor(private service: KeyService) {}
 
-  @UseGuards(AuthGuard)
   @Get()
   getKeys(@Req() req: AuthenticatedRequest) {
     return this.service.getUsersKeys(req.user);
   }
 
-  @UseGuards(AuthGuard)
   @Get('lost')
   getLostKeys(@Req() req: AuthenticatedRequest) {
     return this.service.getLostKeys(req.user);
   }
 
-  @UseGuards(AuthGuard)
   @Post()
   postKey(@Req() req: AuthenticatedRequest, @Body() key: Key) {
     return this.service.createKey(req.user, key);
   }
 
-  @UseGuards(AuthGuard)
   @Put()
   updateKey(@Req() req: AuthenticatedRequest, @Body() key: Key) {
     return this.service.updateKey(req.user, key);
   }
 
-  @UseGuards(AuthGuard)
   @Put(':id/restore')
   restoreKey(@Req() req: AuthenticatedRequest, @Param('id') id: string) {
     return this.service.restoreKey(req.user, id);
   }
 
-  @UseGuards(AuthGuard)
+
-  @Delete(':id')
+  @Get(':id/handover/pdf')
-  deleteKey(@Req() req: AuthenticatedRequest, @Param('id') id: string) {
+  async getHandoverPDF(@Param('id') id: string, @Res() res: Response) {
-    return this.service.deleteKey(req.user, id);
+    const { pdf, response } = await this.service.getPdf(id);
+    res.setHeader(
+    'Content-Type',
+    response.headers['content-type'] ?? 'application/pdf',
+    );
+
+    if (response.headers['content-length']) {
+      res.setHeader('Content-Length', response.headers['content-length']);
+    }
+
+    if (response.headers['content-disposition']) {
+      res.setHeader('Content-Disposition', response.headers['content-disposition']);
+    } else {
+      res.setHeader('Content-Disposition', `inline; filename="uebergabe.pdf"`);
+    }
+
+    res.end(pdf);
   }
 
-  @UseGuards(AuthGuard)
   @Post(':id/handover')
   handoutKey(
     @Req() req: AuthenticatedRequest,
@@ -67,15 +79,40 @@ export class KeyController {
     return this.service.handoverKey(req.user, body, id);
   }
 
-  @UseGuards(AuthGuard)
   @Get(':id/handover')
   getKeyHandouts(@Req() req: AuthenticatedRequest, @Param('id') id: string) {
     return this.service.getKeyHandovers(req.user, id);
   }
 
-  @UseGuards(AuthGuard)
   @Get('archive')
   getArchive(@Req() req: AuthenticatedRequest) {
     return this.service.getDeletedKeys(req.user);
   }
+
+  @Post('pdf')
+  async generatePdf(@Body() dto: KeyHandoutPDFDataDto, @Res() res: Response) {
+    const { pdf, response } = await this.service.createPdf(dto);
+
+    res.setHeader(
+    'Content-Type',
+    response.headers['content-type'] ?? 'application/pdf',
+  );
+
+  if (response.headers['content-length']) {
+    res.setHeader('Content-Length', response.headers['content-length']);
+  }
+
+  if (response.headers['content-disposition']) {
+    res.setHeader('Content-Disposition', response.headers['content-disposition']);
+  } else {
+    res.setHeader('Content-Disposition', `inline; filename="uebergabe.pdf"`);
+  }
+
+  res.end(pdf);
+  }
+
+  @Delete(':id')
+  deleteKey(@Req() req: AuthenticatedRequest, @Param('id') id: string) {
+    return this.service.deleteKey(req.user, id);
+  }
 }

api/src/modules/key/key.module.ts

@@ -7,10 +7,12 @@ import { SharedServiceModule } from 'src/shared/service/shared.service.module';
 import { ConfigService } from '@nestjs/config';
 import { MailModule } from '../mail/mail.module';
 import { SseModule } from '../realtime/sse/sse.module';
+import { HttpModule } from '@nestjs/axios';
+import { StorageModule } from 'src/shared/storage/storage.module';
 
 @Module({
   controllers: [KeyController],
   providers: [KeyService, ConfigService],
-  imports: [DatabaseModule, AuthModule, SharedServiceModule, MailModule, SseModule],
+  imports: [DatabaseModule, AuthModule, SharedServiceModule, MailModule, SseModule, HttpModule, StorageModule],
 })
 export class KeyModule {}

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

@@ -2,17 +2,19 @@ import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
 import { Customer, Cylinder, Key, User } from 'src/model/entitites';
 import {
   CylinderRepository,
+  KeyHandoutPdfDataEntityRepository,
   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 { FindOperator, IsNull, Not } from 'typeorm';
-import { faker } from '@faker-js/faker';
 import { ConfigService } from '@nestjs/config';
 import { MailService } from '../mail/mail.service';
 import { SseService } from '../realtime/sse/sse.service';
+import { KeyHandoutPDFDataDto } from 'src/model/dto/key-handover.dto';
+import { PdfService } from 'src/shared/storage/services/pdf/pdf.service';
+import { AxiosResponse } from 'axios';
 
 @Injectable()
 export class KeyService {
@@ -24,9 +26,11 @@ export class KeyService {
     private readonly helper: HelperService,
     private readonly configService: ConfigService,
     private readonly mailService: MailService,
-    private readonly sseService: SseService
+    private readonly sseService: SseService,
+    private readonly pdfService: PdfService,
+    private readonly handoutPDFRepo: KeyHandoutPdfDataEntityRepository
   ) {
-    console.log("INIT KEYSERVICE")
+    // this.getLatestHandoverPDF('a4f4f32b-96de-4f20-b5bd-ac3a128da121')
   }
 
   get isDevelopMode(): boolean {
@@ -165,7 +169,7 @@ export class KeyService {
         timestamp: { direction: 'DESC' },
         created: { direction: 'DESC' },
       },
-      relations: ['customer'],
+      relations: ['customer', 'pdfs'],
     });
   }
 
@@ -230,4 +234,35 @@ export class KeyService {
     this.sendKeysToSSE(k)
     return k;
   }
+
+  async createPdf(dto: KeyHandoutPDFDataDto): Promise<{ pdf: Buffer, response: AxiosResponse}> {
+    const handout = await this.handoverRepo.findOneByOrFail({ id: dto.handoverId })
+    const data = {
+      ...dto,
+      handout
+    }
+
+    data.handoverDate = new Date(data.handoverDate);
+
+    const entity = await this.handoutPDFRepo.save(this.handoutPDFRepo.create(data));
+
+    const fileName = await this.pdfService.generatePDF(dto);
+    entity.createdAt = new Date();
+    entity.fileName = fileName;
+    await this.handoutPDFRepo.save(entity);
+    const file = await this.pdfService.getPDFByHandoverKey(fileName);
+    return file;
+  }
+
+  async getPdf(handoverId: string): Promise<{ pdf: Buffer, response: AxiosResponse}> {
+    return this.pdfService.getPDFByHandoverKey(handoverId);
+  }
+
+  async getLatestHandoverPDF(handoverId: string) {
+    const pdf = await this.handoutPDFRepo.findOne({
+      where: { handout: { id: handoverId}},
+      order: {createdAt: 'DESC' },
+    });
+    console.log(pdf)
+  }
 }

api/src/shared/database/database.module.ts

@@ -6,6 +6,7 @@ import {
   Cylinder,
   Key,
   KeyHandout,
+  KeyHandoutPdfDataEntity,
   Role,
   SSOUser,
   User,
@@ -18,6 +19,7 @@ import {
   ActivityRepository,
   CustomerRepository,
   CylinderRepository,
+  KeyHandoutPdfDataEntityRepository,
   KeyRepository,
   KeySystemRepository,
   RoleRepository,
@@ -41,7 +43,8 @@ const ENTITIES = [
   Activity,
   EmailLog,
   UserSettings,
-  Impersonation
+  Impersonation,
+  KeyHandoutPdfDataEntity
 ];
 const REPOSITORIES = [
   UserRepository,
@@ -55,7 +58,8 @@ const REPOSITORIES = [
   ActivityRepository,
   EmailLogRepository,
   UserSettingsRepository,
-  ImpersonationRepository
+  ImpersonationRepository,
+  KeyHandoutPdfDataEntityRepository
 ];
 
 @Module({

api/src/shared/storage/services/pdf/pdf.service.ts

@@ -0,0 +1,47 @@
+import { HttpService } from '@nestjs/axios';
+import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
+import { AxiosResponse } from 'axios';
+import { firstValueFrom } from 'rxjs';
+import { KeyHandoutPDFDataDto } from 'src/model/dto/key-handover.dto';
+import { KeyHandoutRepository } from 'src/model/repositories/key-handout.repository';
+
+@Injectable()
+export class PdfService {
+
+  private readonly STORAGESERVER = this.configService.get('STORAGE_HOST')
+
+  constructor(
+    private readonly configService: ConfigService,
+    private readonly httpService: HttpService
+  ) {  }
+
+  public async generatePDF(dto: KeyHandoutPDFDataDto): Promise<string> {
+    const response = await this.post(`${this.STORAGESERVER}/pdf/keyhandover`, dto);
+    if (response?.data == null) { throw new HttpException('Konnte nicht erstellt werden', HttpStatus.INTERNAL_SERVER_ERROR) }
+    return response.data;
+    
+  }
+
+  public async getPDFByHandoverKey(key: string): Promise<{ pdf: Buffer, response: AxiosResponse}> {
+    return new Promise(resolve => {
+      this.httpService.get(`${this.STORAGESERVER}/pdf/keyhandover/${key}`, {
+      responseType: 'arraybuffer',
+      }).subscribe({
+        next: pdf => {
+          const pdfBuffer = Buffer.from(pdf.data);
+          resolve({ pdf: pdfBuffer, response: pdf})
+        },
+        error: e => console.log(e)
+      })
+    })
+  }
+
+  private async post(url: string, data: any): Promise<AxiosResponse> {
+    return new Promise(resolve => {
+      this.httpService.post(url, data).subscribe({
+        next: data => resolve(data)
+      })
+    })
+  }
+}

api/src/shared/storage/storage.module.ts

@@ -0,0 +1,12 @@
+import { Module } from '@nestjs/common';
+import { StorageService } from './storage.service';
+import { HttpModule } from '@nestjs/axios';
+import { ConfigModule } from '@nestjs/config';
+import { PdfService } from './services/pdf/pdf.service';
+
+@Module({
+  imports: [HttpModule, ConfigModule],
+  providers: [StorageService, PdfService ],
+  exports: [ StorageService, PdfService ]
+})
+export class StorageModule {}

api/src/shared/storage/storage.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class StorageService {
+  constructor() {}
+
+  
+}

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,59 @@
+@if(isLoading) {
+  <div class="loading-overlay">
+    <mat-spinner></mat-spinner>
+  </div>
+}
+<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" [disabled]="this.isLoading">Schließen</button>
+  <button matButton="elevated" (click)="createPdf()" class="btn-primary" [disabled]="this.isLoading">
+      <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.ts

@@ -0,0 +1,68 @@
+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';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'app-create-handover-pdf-dialog',
+  imports: [MatDialogModule, FormsModule, ReactiveFormsModule, CommonModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule, MatProgressSpinnerModule],
+  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);
+
+  public isLoading = false;
+
+  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() {
+    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() {
+    this.isLoading = true;
+    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();
 
@@ -77,7 +80,18 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
         , sort: 'desc'
         , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
       },
-    
+      {
+        colId: 'download',
+        headerName: 'PDF',
+        field: 'pdfs',
+        width: 60,
+        tooltipValueGetter: () => 'Übergabeprotokoll herunterladen',
+        cellRenderer: () => '',
+        cellClass: (data: any) => data.value.length ? 'download-pdf' : '',
+        onCellClicked: (event) => {
+          this.downloadHandoverPDF(event.value)
+        },
+      }
     ]
   }
 
@@ -90,7 +104,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>(true)
   });
 
   ngOnInit() {
@@ -100,7 +115,6 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
   loadData() {
     this.isLoading = true;
     const promises: Observable<any>[] = [
-      this.getHandovers(),
       from(this.loadCustomers())
     ];
 
@@ -148,7 +162,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 +190,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
+          })
+        }
       }
     })
   }
@@ -204,6 +228,14 @@ export class HandoverDialogComponent extends AgGridContainerComponent {
   onGridReady(params: GridReadyEvent) {
     this.gridApi = params.api;
     this.gridApi.addEventListener("cellEditingStopped", evt => {})
+    this.getHandovers();
+    //this.downloadHandoverPDF('5b1f92d9-c66c-49ad-b654-b9a9a6a59752')
+  }
+
+  downloadHandoverPDF(pdfs: any[]) {
+    if (!pdfs || pdfs.length < 1) { return; }
+
+    this.api.getHandoverPdf(pdfs[0]['fileName'])
   }
 
 }

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

@@ -112,6 +112,5 @@ export class CreateKeyComponent {
   async setEditKey(key: IKey) {
     this.createForm.patchValue(key as any);
     this.createForm.controls.cylinder.patchValue(this.cylinders.filter(c => key.cylinder.some(v => v.id == c.id)));
-    console.log(this.createForm.value)
   }
 }

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/modules/system/system.component.ts

@@ -51,7 +51,6 @@ export class SystemComponent extends AgGridContainerComponent {
     await this.api.refreshSystems();
     this.gridApi.setGridOption("loading", false);
     const a = await this.api.getSystemArchive();
-    console.log(a)
   }
 
   onGridReady(params: GridReadyEvent) {

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(() => {
+    // setTimeout(() => {
-      this.setupKeyFeed();
+    //   this.setupKeyFeed();
-    }, 2000)
+    //   this.createPdf()
+    // }, 2000)
   }
 
   getMe(): Promise<IUser> {
@@ -455,4 +457,45 @@ export class ApiService {
       })
     })
   }
+
+  createPdf(data: IKeyHandoverPDF) {
+    return new Promise(resolve => {
+
+      this.http.post('api/key/pdf', data, {
+        responseType: 'blob',
+      }).pipe( 
+      this.toast.observe({
+        loading: `Erstelle Übergabedokument`,
+        success: `Übergabedokument wurde erfolgreich erstellt und wird gespeichert.`,
+        error: 'Es ist ein Fehler aufgetreten'
+      }))
+      .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)
+      });
+
+    })
+    
+  }
+
+  getHandoverPdf(handoverId: string) {
+    return new Promise(resolve => {
+      this.http.get(`api/key/${handoverId}/handover/pdf`,{
+        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

@@ -62,6 +62,19 @@ html, body {
 
 }
 
+.download-pdf {
+  background-image: url("./assets/img/pdf.png");
+  background-size: 22px;
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+  // background-color: red;
+  &:hover {
+    background-color: #ccc;
+  }
+}
+
 .icon-btn-xs {
   width: 28px;
   height: 28px;
@@ -228,3 +241,24 @@ div.ag-row {
   // border-bottom-right-radius: 0 !important;
   color: #2D6B05;
 }
+
+.flex-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.loading-overlay {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  z-index: 2;
+  background: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}