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

tabs

Browse Source
This commit is contained in:
Bastian Wagner
2024-10-21 14:40:16 +02:00
parent aa9abdd512
commit 8485343f4d
2 changed files with 44 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,11 +3,46 @@
<mat-spinner></mat-spinner>
</div>
}
<h2 mat-dialog-title>Übergaben {{ data.name }}</h2>
<mat-dialog-content>
<mat-tab-group mat-stretch-tabs="true" mat-align-tabs="start" [dynamicHeight]="true" >
<mat-tab label="Neue Übergabe" >
<form [formGroup]="handoverForm" class="flex-column" style="margin-top: 12px;">
<!-- <h6>Neue Übergabe anlegen:</h6> -->
<mat-form-field>
<mat-label>Kunde</mat-label>
<input type="text"
matInput
formControlName="customer"
[matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
@for (option of filteredCustomers | async; track option) {
<mat-option [value]="option.name">{{option.name}}</mat-option>
}
</mat-autocomplete>
<mat-hint>Wähle den Empfänger oder tippe einen neuen Namen ein</mat-hint>
</mat-form-field>
<div style="margin: 24px 0;">
Der Schlüssel wurde
<mat-radio-group formControlName="direction" class="flex-column" style="align-items: flex-start; justify-content: flex-start;">
<mat-radio-button [value]="'out'">Ausgegeben</mat-radio-button>
<mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field>
<mat-label>Datum der Übergabe</mat-label>
<input matInput [matDatepicker]="picker" formControlName="timestamp">
<mat-hint>TT/MM/JJJJ</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</form>
</mat-tab>
<h6>Historie:</h6>
<mat-tab label="Historie">
<table class="handouts">
<tr>
<th>Kunde</th>
@@ -34,40 +69,8 @@
</table>
<form [formGroup]="handoverForm" class="flex-column" style="margin-top: 48px;">
<h6>Neue Übergabe anlegen:</h6>
<mat-form-field>
<mat-label>Kunde</mat-label>
<input type="text"
matInput
formControlName="customer"
[matAutocomplete]="auto">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
@for (option of filteredCustomers | async; track option) {
<mat-option [value]="option.name">{{option.name}}</mat-option>
}
</mat-autocomplete>
<mat-hint>Wähle den Empfänger oder tippe einen neuen Namen ein</mat-hint>
</mat-form-field>
<div style="margin: 24px 0;">
Der Schlüssel wurde
<mat-radio-group formControlName="direction" class="flex-column" style="align-items: flex-start; justify-content: flex-start;">
<mat-radio-button [value]="'out'">Ausgegeben</mat-radio-button>
<mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
</mat-radio-group>
</div>
<mat-form-field>
<mat-label>Datum der Übergabe</mat-label>
<input matInput [matDatepicker]="picker" formControlName="timestamp">
<mat-hint>TT/MM/JJJJ</mat-hint>
<mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</form>
</mat-tab>
</mat-tab-group>
</mat-dialog-content>

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

@@ -1,4 +1,4 @@
import { Component, inject, LOCALE_ID } from '@angular/core';
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';
@@ -20,11 +20,13 @@ import {MatListModule} from '@angular/material/list';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio';
import { HotToastService } from '@ngxpert/hot-toast';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatTabsModule} from '@angular/material/tabs';
@Component({
selector: 'app-handover-dialog',
standalone: true,
imports: [FormsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
imports: [FormsModule, MatExpansionModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
providers: [
provideNativeDateAdapter(),
{ provide: LOCALE_ID, useValue: 'de-DE' },
@@ -42,6 +44,7 @@ export class HandoverDialogComponent {
private toast: HotToastService = inject(HotToastService);
isLoading: boolean = false;
readonly panelOpenState = signal(false);
customers: { name: string, id: string }[] = [];
filteredCustomers: Observable<any[]> = new Observable();