From d4ddcafd2bf03d40ddc6c10fcfb7f6f4cfbac3ab Mon Sep 17 00:00:00 2001 From: Bastian Wagner Date: Tue, 22 Oct 2024 14:17:12 +0200 Subject: [PATCH] Styling --- .../src/app/core/layout/layout.component.html | 6 +-- .../src/app/core/layout/layout.component.scss | 3 +- .../handover-dialog.component.html | 35 +++---------- .../handover-dialog.component.scss | 4 ++ .../handover-dialog.component.ts | 49 ++++++++++++++++--- client/src/app/modules/keys/keys.component.ts | 2 +- 6 files changed, 60 insertions(+), 39 deletions(-) diff --git a/client/src/app/core/layout/layout.component.html b/client/src/app/core/layout/layout.component.html index b35f6c3..ec8bfba 100644 --- a/client/src/app/core/layout/layout.component.html +++ b/client/src/app/core/layout/layout.component.html @@ -12,9 +12,9 @@ - - - + + + diff --git a/client/src/app/core/layout/layout.component.scss b/client/src/app/core/layout/layout.component.scss index 603a6e9..252d098 100644 --- a/client/src/app/core/layout/layout.component.scss +++ b/client/src/app/core/layout/layout.component.scss @@ -23,11 +23,12 @@ mat-drawer, mat-toolbar { .main_sidenav{ width: 200px; + padding: 0 2px; } mat-drawer { button { - width: 100%; + width: calc(100% - 4px); } } diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html index d9a19d9..c9fc3f3 100644 --- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html +++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html @@ -49,33 +49,14 @@ - - - - - - - - - @if (handovers.length == 0) { - - - - - - } - @for (item of handovers; track $index) { - - - - - - } - - -
KundeDatum - Übergabe -
---
{{ item.customer.name }}{{ item.timestamp | date}}{{ item.direction == 'out' ? 'Ausgabe' : 'Rückgabe'}}
+ +
+ +
diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.scss b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.scss index 1e69252..a2c9508 100644 --- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.scss +++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.scss @@ -21,4 +21,8 @@ form { th, td { text-align: start; +} + +.no-padding { + padding: 0 !important; } \ No newline at end of file diff --git a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts index e508b77..dabde7d 100644 --- a/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts +++ b/client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts @@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core'; import { MatButtonModule } from '@angular/material/button'; -import { CommonModule } from '@angular/common'; +import { CommonModule, DatePipe } from '@angular/common'; import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { map, Observable, startWith, timestamp } from 'rxjs'; import { @@ -21,15 +21,19 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatRadioModule} from '@angular/material/radio'; import { HotToastService } from '@ngxpert/hot-toast'; import {MatTabsModule} from '@angular/material/tabs'; +import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community'; +import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale'; +import { AgGridAngular } from 'ag-grid-angular'; @Component({ selector: 'app-handover-dialog', standalone: true, - imports: [FormsModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule], + imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule], providers: [ provideNativeDateAdapter(), { provide: LOCALE_ID, useValue: 'de-DE' }, { provide: MAT_DATE_LOCALE, useValue: 'de-DE' }, + DatePipe ], templateUrl: './handover-dialog.component.html', styleUrl: './handover-dialog.component.scss' @@ -40,17 +44,43 @@ export class HandoverDialogComponent { readonly dialogRef = inject(MatDialogRef); readonly data = inject(MAT_DIALOG_DATA); private _bottomSheet = inject(MatBottomSheet); + private datePipe = inject(DatePipe); private toast: HotToastService = inject(HotToastService); + gridApi!: GridApi; + gridOptions: GridOptions = { + localeText: AG_GRID_LOCALE_DE, + rowData: [], + columnDefs: [ + { colId: 'customer', field: 'customer.name' , headerName: 'Kunde', flex: 1, editable: false, filter: false}, + { + colId: 'handedOut', + field: 'direction' , + headerName: 'Richtung', + flex: 1, + editable: false, + filter: false, + headerTooltip: 'Wurde der Schlüssel ausgegeben oder zurückgegeben?', + cellRenderer: (data: any) => data.value == 'out' ? 'Ausgegeben' : 'Zurückgegeben' + }, + { + field: 'timestamp' + , headerName: 'Übergabe' + , flex: 1 + , type: 'date' + , sortable: true + , sort: 'desc' + , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value)) + }, + + ] + } + isLoading: boolean = false; - readonly panelOpenState = signal(false); customers: { name: string, id: string }[] = []; filteredCustomers: Observable = new Observable(); - handovers: any[] = []; - - handoverForm = new FormGroup({ customer: new FormControl(null, Validators.required), key: new FormControl(this.data), @@ -80,7 +110,7 @@ export class HandoverDialogComponent { promise.subscribe({ next: n => { - this.handovers = n; + this.gridApi.setGridOption("rowData", n); if (n && n.length > 0) { this.handoverForm.controls.customer.patchValue(n[0].customer.name); this.handoverForm.controls.direction.patchValue(n[0].direction == 'out' ? 'return' : 'out') @@ -162,6 +192,11 @@ export class HandoverDialogComponent { } + onGridReady(params: GridReadyEvent) { + this.gridApi = params.api; + this.gridApi.addEventListener("cellEditingStopped", evt => {}) + } + } diff --git a/client/src/app/modules/keys/keys.component.ts b/client/src/app/modules/keys/keys.component.ts index a299323..f650a6e 100644 --- a/client/src/app/modules/keys/keys.component.ts +++ b/client/src/app/modules/keys/keys.component.ts @@ -2,7 +2,7 @@ import { Component, inject } from '@angular/core'; import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale'; import { AgGridAngular } from 'ag-grid-angular'; import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams } from 'ag-grid-community'; -import { CommonModule, DatePipe } from '@angular/common'; +import { DatePipe } from '@angular/common'; import { ApiService } from '../../shared/api.service'; import { IKey } from '../../model/interface/key.interface'; import { HotToastService } from '@ngxpert/hot-toast';