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

Lost Keys

Browse Source
This commit is contained in:
Bastian Wagner
2025-01-03 13:39:47 +01:00
parent c8c2ee18cb
commit 92f0c10bd8
35 changed files with 569 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

2
client/src/app/modules/dashboard/dashboard.component.ts
View File

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

2
client/src/app/modules/keys/components/archive/archive.component.ts
View File

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

41
client/src/app/modules/keys/components/lost-key/lost-key.component.html Normal file
View File

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

0
client/src/app/modules/keys/components/lost-key/lost-key.component.scss Normal file
View File

23
client/src/app/modules/keys/components/lost-key/lost-key.component.spec.ts Normal file
View File

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

33
client/src/app/modules/keys/components/lost-key/lost-key.component.ts Normal file
View File

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

11
client/src/app/modules/keys/components/lost-keys/lost-keys.component.html Normal file
View File

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

0
client/src/app/modules/keys/components/lost-keys/lost-keys.component.scss Normal file
View File

23
client/src/app/modules/keys/components/lost-keys/lost-keys.component.spec.ts Normal file
View File

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

95
client/src/app/modules/keys/components/lost-keys/lost-keys.component.ts Normal file
View File

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

25
client/src/app/modules/keys/create/create.component.html
View File

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

4
client/src/app/modules/keys/create/create.component.ts
View File

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

3
client/src/app/modules/keys/keys.component.html
View File

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

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

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

7
client/src/app/modules/system/create/create.component.html
View File

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

3
client/src/app/modules/system/create/create.component.ts
View File

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