bastian/keyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handover pdf

Browse Source
This commit is contained in:
Bastian Wagner
2026-03-12 11:41:29 +01:00
parent 93053e0101
commit b72e2d6784
20 changed files with 2891 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/app/model/interface/handover-pdf.interface.ts Normal file
View File

@@ -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;
}

54
client/src/app/modules/keys/components/create-handover-pdf-dialog/create-handover-pdf-dialog.component.html Normal file
View File

@@ -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>

0
client/src/app/modules/keys/components/create-handover-pdf-dialog/create-handover-pdf-dialog.component.scss Normal file
View File

23
client/src/app/modules/keys/components/create-handover-pdf-dialog/create-handover-pdf-dialog.component.spec.ts Normal file
View File

@@ -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();
});
});

65
client/src/app/modules/keys/components/create-handover-pdf-dialog/create-handover-pdf-dialog.component.ts Normal file
View File

@@ -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();
}
}

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

@@ -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>

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

@@ -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
})
}
}
})
}

1
client/src/app/modules/keys/keys.component.ts
View File

@@ -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',

27
client/src/app/shared/api.service.ts
View File

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

6
client/src/styles.scss
View File

@@ -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;
}