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

Ag Grid anpassungen

Browse Source
This commit is contained in:
Bastian Wagner
2026-02-19 12:21:30 +01:00
parent d7cfc89ba5
commit ef45e91141
31 changed files with 469 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/app/modules/admin/all-users/all-users.component.html
View File

@@ -1,7 +1,8 @@
@if (gridOptions || true) {
@if (myTheme && gridOptions) {
<ag-grid-angular
style="width: 100%; height: 100%;"
(gridReady)="onGridReady($event)"
[gridOptions]="gridOptions!"
[theme]="myTheme"
/>
}

3
client/src/app/modules/admin/all-users/all-users.component.ts
View File

@@ -8,6 +8,7 @@ import { AuthService } from '../../../core/auth/auth.service';
import { DatePipe } from '@angular/common';
import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
import { MatButtonModule } from '@angular/material/button';
import { AgGridContainerComponent } from '../../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
@Component({
selector: 'app-all-users',
@@ -16,7 +17,7 @@ import { MatButtonModule } from '@angular/material/button';
templateUrl: './all-users.component.html',
styleUrl: './all-users.component.scss'
})
export class AllUsersComponent {
export class AllUsersComponent extends AgGridContainerComponent {
private toast: HotToastService = inject(HotToastService);
private api: ApiService = inject(ApiService);

5
client/src/app/modules/cylinder/cylinder.component.html
View File

@@ -1,8 +1,11 @@
<ag-grid-angular
@if (myTheme) {
<ag-grid-angular
style="width: 100%; height: 100%;"
(gridReady)="onGridReady($event)"
[gridOptions]="gridOptions!"
[theme]="myTheme"
/>
}
<div class="floating-btn-container">
<button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateCylinder()" >Zylinder anlegen</button>
<button mat-mini-fab disabled><mat-icon>inventory_2</mat-icon></button>

4
client/src/app/modules/cylinder/cylinder.component.ts
View File

@@ -9,6 +9,7 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { CreateCylinderComponent } from './components/create-cylinder/create-cylinder.component';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
@Component({
selector: 'app-cylinder',
@@ -17,7 +18,7 @@ import { MatButtonModule } from '@angular/material/button';
templateUrl: './cylinder.component.html',
styleUrl: './cylinder.component.scss'
})
export class CylinderComponent {
export class CylinderComponent extends AgGridContainerComponent {
private api: ApiService = inject(ApiService);
private datePipe = inject(DatePipe);
private dialog = inject(MatDialog);
@@ -28,6 +29,7 @@ export class CylinderComponent {
constructor() {
super();
this.gridOptions.columnDefs = [
{ field: 'name', headerName: 'Name', sort: 'asc', flex: 1, filter: true },

1
client/src/app/modules/dashboard/dashboard.component.html
View File

@@ -73,6 +73,7 @@
style="width: 100%; height: 100%;"
[gridOptions]="gridOptions"
(gridReady)="onGridReady($event)"
[theme]="myTheme"
>
</ag-grid-angular>
</mat-card-content>

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

@@ -9,6 +9,7 @@ import { RouterModule } from '@angular/router';
import { AgLoadingComponent } from '../../shared/ag-grid/components/ag-loading/ag-loading.component';
import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
import { MatButtonModule } from '@angular/material/button';
import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
@Component({
selector: 'app-dashboard',
@@ -17,7 +18,7 @@ import { MatButtonModule } from '@angular/material/button';
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss'
})
export class DashboardComponent {
export class DashboardComponent extends AgGridContainerComponent {
private api = inject(ApiService);
private datePipe = inject(DatePipe);

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

@@ -1,8 +1,11 @@
<ag-grid-angular
@if (myTheme) {
<ag-grid-angular
style="width: 100%; height: 100%;"
(gridReady)="onGridReady($event)"
[gridOptions]="gridOptions!"
[theme]="myTheme"
/>
}
<div class="floating-btn-container">
<button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()" >Schlüssel anlegen</button>

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

@@ -1,7 +1,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, FilterActionParams, FilterAction } from 'ag-grid-community';
import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams, FilterActionParams, FilterAction, themeQuartz, Theme, ThemeDefaultParams } from 'ag-grid-community';
import { DatePipe } from '@angular/common';
import { ApiService } from '../../shared/api.service';
import { IKey } from '../../model/interface/key.interface';
@@ -20,6 +20,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { SelectKeyCylinderComponent } from './create/select-key-cylinder/select-key-cylinder.component';
import { ActivatedRoute, Route } from '@angular/router';
import { ModuleRegistry } from 'ag-grid-community';
import { AgGridService } from '../../shared/ag-grid/ag-grid.service';
import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
@Component({
selector: 'app-keys',
@@ -28,12 +30,14 @@ import { ModuleRegistry } from 'ag-grid-community';
templateUrl: './keys.component.html',
styleUrl: './keys.component.scss'
})
export class KeysComponent {
export class KeysComponent extends AgGridContainerComponent {
private api: ApiService = inject(ApiService);
private datePipe = inject(DatePipe);
private toast: HotToastService = inject(HotToastService);
private dialog: MatDialog = inject(MatDialog);
private route: ActivatedRoute = inject(ActivatedRoute)
private route: ActivatedRoute = inject(ActivatedRoute);
// cylinders: any[] = [];
@@ -97,7 +101,7 @@ export class KeysComponent {
}
],
loading: true,
rowHeight: 54,
// rowHeight: 54,
loadingOverlayComponent: AgLoadingComponent,
pagination: true,
}
@@ -108,6 +112,7 @@ export class KeysComponent {
ngOnInit(): void {
}
private setFilterToParams() {
@@ -115,11 +120,20 @@ export class KeysComponent {
if (Object.keys(params).includes('handedOut')) {
this.gridApi.setFilterModel({
handedOut: {
filterType: 'text',
type: params['handedOut']
}
})
handedOut: {
filterType: 'text',
type: params['handedOut']
}
})
} if (Object.keys(params).includes('nr')) {
console.log("SET " + params['nr'] )
this.gridApi.setFilterModel({
nr: {
filterType: 'text',
type: 'equals',
filter: params['nr']
}
})
}

15
client/src/app/modules/settings/settings.component.html
View File

@@ -27,13 +27,13 @@
<mat-form-field appearance="outline">
<mat-label>Email</mat-label>
<input type="text" matInput formControlName="userName">
<mat-hint>Wird zum Login benötigt</mat-hint>
<mat-hint>Wird für den Emailversand benötigt</mat-hint>
</mat-form-field>
<div class="spacer-y16"></div>
<button matButton="elevated" [disabled]="userData.invalid" (click)="saveUser()">Speichern</button>
</form>
<div class="spacer-y32"></div>
<div class="spacer-y32"></div>
<div class="px-4">
<div class="text-2xl">Emailbenachrichtigungen</div>
<div>Sende Emails bei: </div>
@@ -48,6 +48,17 @@
<mat-slide-toggle formControlName="sendUserDisabledMails" (change)="save()">
Deaktivierung meines Users
</mat-slide-toggle>
<div class="spacer-y16"></div>
<div class="text-2xl">Oberfläche</div>
<mat-form-field appearance="outline">
<mat-label>Skalierung</mat-label>
<mat-select formControlName="uiScale" (selectionChange)="save()" >
<mat-option [value]="'s'">Klein</mat-option>
<mat-option [value]="'m'">Mittel</mat-option>
<mat-option [value]="'l'">Groß</mat-option>
</mat-select>
<mat-hint>Ändert die Schriftgröße in der Liste</mat-hint>
</mat-form-field>
</form>

4
client/src/app/modules/settings/settings.component.scss
View File

@@ -47,3 +47,7 @@
font-size: 1.5rem;
cursor: pointer;
}
.content {
overflow-y: auto;
}

29
client/src/app/modules/settings/settings.component.ts
View File

@@ -8,10 +8,11 @@ import { ApiService } from '../../shared/api.service';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import { HotToastService } from '@ngxpert/hot-toast';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import { MatSelectModule } from '@angular/material/select';
@Component({
selector: 'app-settings',
imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule],
imports: [MatProgressBarModule, MatFormFieldModule, MatInputModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatSlideToggleModule, MatSelectModule],
templateUrl: './settings.component.html',
styleUrl: './settings.component.scss'
})
@@ -36,6 +37,7 @@ export class SettingsComponent {
sendSystemAccessMails: new FormControl(false),
sendSystemUpdateMails: new FormControl(false),
sendUserDisabledMails: new FormControl(false),
uiScale: new FormControl('s')
})
open() {
@@ -70,25 +72,20 @@ export class SettingsComponent {
}
loadSettings() {
async loadSettings() {
this.isLoading = true;
this.api.getSettings().subscribe({
next: (r: any) => {
this.userSettings.patchValue(r)
this.isLoading = false;
}
})
const settings = await this.api.userSettings;
this.userSettings.patchValue(settings);
this.isLoading = false;
}
save() {
async save() {
this.isLoading = true;
this.api.updateSettings(this.userSettings.value).subscribe({
next: () => {
this.toast.success('Gespeichert')
this.isLoading = false;
this.userSettings.markAsPristine();
}
});
const res = await this.api.updateSettings(this.userSettings.value);
this.isLoading = false;
if (res) {
this.userSettings.markAsPristine();
}
}
saveUser() {

4
client/src/app/modules/system/system.component.html
View File

@@ -1,9 +1,11 @@
@if (myTheme) {
<ag-grid-angular
style="width: 100%; height: 100%;"
(gridReady)="onGridReady($event)"
[gridOptions]="gridOptions!"
[theme]="myTheme"
/>
}
<div class="floating-btn-container">
<button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()" >Schließanlage anlegen</button>
</div>

26
client/src/app/modules/system/system.component.ts
View File

@@ -1,13 +1,15 @@
import { DatePipe } from '@angular/common';
import { Component, inject } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
import { GridApi, GridOptions, GridReadyEvent, Theme, ThemeDefaultParams } from 'ag-grid-community';
import { ApiService } from '../../shared/api.service';
import { HELPER } from '../../shared/helper.service';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { CreateSystemComponent } from './create/create.component';
import { AgSystemManagerComponent } from '../../shared/ag-grid/components/ag-system-manager/ag-system-manager.component';
import { AgGridService } from '../../shared/ag-grid/ag-grid.service';
import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
@Component({
selector: 'app-system',
@@ -16,31 +18,31 @@ import { AgSystemManagerComponent } from '../../shared/ag-grid/components/ag-sys
templateUrl: './system.component.html',
styleUrl: './system.component.scss'
})
export class SystemComponent {
export class SystemComponent extends AgGridContainerComponent {
private api: ApiService = inject(ApiService);
private datePipe = inject(DatePipe);
private dialog: MatDialog = inject(MatDialog);
private dialog: MatDialog = inject(MatDialog);
gridApi!: GridApi;
gridOptions: GridOptions = HELPER.getGridOptions();
constructor() {
super();
this.gridOptions.columnDefs = [
{ colId: 'name', field: 'name', headerName: 'Name', sort: 'asc', flex: 1},
{ field: 'createdAt', headerName: 'Angelegt', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
{ field: 'updatedAt', headerName: 'Upgedated', cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-' },
{
colId: 'actions'
, headerName: 'Aktionen'
, width: 120
, cellRenderer: AgSystemManagerComponent
// , onCellClicked: (event) => { this.deleteKey(event.data.id)}
}
]
colId: 'actions'
, headerName: 'Aktionen'
, width: 120
, cellRenderer: AgSystemManagerComponent
// , onCellClicked: (event) => { this.deleteKey(event.data.id)}
}
];
}
loadSystems() {
this.api.getSystems().subscribe({
next: n => {