Ag Grid anpassungen

2026-02-19 12:21:30 +01:00
parent d7cfc89ba5
commit ef45e91141
31 changed files with 469 additions and 75 deletions
--- a/client/angular.json
+++ b/client/angular.json
@@ -34,7 +34,6 @@
            "styles": [
              "@angular/material/prebuilt-themes/azure-blue.css",
              "src/styles.scss",
-              "src/styles/ag.css",
              "node_modules/@ngxpert/hot-toast/src/styles/styles.css"
            ],
            "scripts": []
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -5,6 +5,7 @@ import { BehaviorSubject, Observable, tap, of, catchError } from 'rxjs';
 import { IUser } from '../../model/interface/user.interface';
 import { environment } from '../../../environments/environment';
 import { HotToastService } from '@ngxpert/hot-toast';
+import { ApiService } from '../../shared/api.service';

@Injectable({
  providedIn: 'root'
@@ -16,6 +17,7 @@ export class AuthService {
  private http: HttpClient = inject(HttpClient);
  private router: Router = inject(Router);
  private toast: HotToastService = inject(HotToastService);
+  private api: ApiService = inject(ApiService);

  private _user: IUser | null = null;

@@ -35,21 +37,27 @@ export class AuthService {
    return this.user != null && this.user.role == 'admin';
  }

-  getMe() {
+  async getMe() {
    if (!this.getAccessToken()) {
      return false;
    }
-    return new Promise(resolve => {
-      this.http.get<IUser>('/api/auth/me').subscribe({
-        next: user => {
-          this._user = user;
-          resolve(true)
-        },
-        error: () => {
-          resolve(false)
-        }
-      })
-    })
+    const user = await this.api.getMe();
+    if (user) {
+      this._user = user;
+      return Promise.resolve(true);
+    }
+    return Promise.resolve(false)
+    // return new Promise(resolve => {
+    //   this.http.get<IUser>('/api/auth/me').subscribe({
+    //     next: user => {
+    //       this._user = user;
+    //       resolve(true)
+    //     },
+    //     error: () => {
+    //       resolve(false)
+    //     }
+    //   })
+    // })
  }


--- a/client/src/app/modules/admin/all-users/all-users.component.html
+++ b/client/src/app/modules/admin/all-users/all-users.component.html
@@ -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"
  />
 }
--- a/client/src/app/modules/admin/all-users/all-users.component.ts
+++ b/client/src/app/modules/admin/all-users/all-users.component.ts
@@ -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);
--- a/client/src/app/modules/cylinder/cylinder.component.html
+++ b/client/src/app/modules/cylinder/cylinder.component.html
@@ -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>
--- a/client/src/app/modules/cylinder/cylinder.component.ts
+++ b/client/src/app/modules/cylinder/cylinder.component.ts
@@ -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 },
--- a/client/src/app/modules/dashboard/dashboard.component.html
+++ b/client/src/app/modules/dashboard/dashboard.component.html
@@ -73,6 +73,7 @@
                    style="width: 100%; height: 100%;"
                    [gridOptions]="gridOptions"
                    (gridReady)="onGridReady($event)"
+                    [theme]="myTheme"
                >
                </ag-grid-angular>
            </mat-card-content>
--- a/client/src/app/modules/dashboard/dashboard.component.ts
+++ b/client/src/app/modules/dashboard/dashboard.component.ts
@@ -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);
  
--- a/client/src/app/modules/keys/keys.component.html
+++ b/client/src/app/modules/keys/keys.component.html
@@ -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>
--- a/client/src/app/modules/keys/keys.component.ts
+++ b/client/src/app/modules/keys/keys.component.ts
@@ -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']   
+        }
+      })
    }

   
--- a/client/src/app/modules/settings/settings.component.html
+++ b/client/src/app/modules/settings/settings.component.html
@@ -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>

    
--- a/client/src/app/modules/settings/settings.component.scss
+++ b/client/src/app/modules/settings/settings.component.scss
@@ -47,3 +47,7 @@
  font-size: 1.5rem;
  cursor: pointer;
 }
+
+.content {
+  overflow-y: auto;
+}
--- a/client/src/app/modules/settings/settings.component.ts
+++ b/client/src/app/modules/settings/settings.component.ts
@@ -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() {
--- a/client/src/app/modules/system/system.component.html
+++ b/client/src/app/modules/system/system.component.html
@@ -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>
--- a/client/src/app/modules/system/system.component.ts
+++ b/client/src/app/modules/system/system.component.ts
@@ -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 => {
--- a/client/src/app/shared/ag-grid/ag-grid.service.spec.ts
+++ b/client/src/app/shared/ag-grid/ag-grid.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AgGridService } from './ag-grid.service';
+
+describe('AgGridService', () => {
+  let service: AgGridService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AgGridService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/client/src/app/shared/ag-grid/ag-grid.service.ts
+++ b/client/src/app/shared/ag-grid/ag-grid.service.ts
@@ -0,0 +1,66 @@
+import { inject, Injectable } from '@angular/core';
+import { ApiService } from '../api.service';
+import { Theme, ThemeDefaultParams, themeQuartz } from 'ag-grid-community';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AgGridService {
+  private api = inject(ApiService);
+
+  private baseConfig = {
+    
+    accentColor: "#125312",
+    backgroundColor: "#FFFFFF",
+    borderColor: "#D7E2E6",
+    borderRadius: 2,
+    browserColorScheme: "light",
+    cellHorizontalPaddingScale: 0.7,
+    chromeBackgroundColor: {
+        ref: "backgroundColor"
+    },
+    columnBorder: false,
+    fontFamily: {
+        googleFont: "Roboto"
+    },
+    headerFontSize: 16,
+    foregroundColor: "#555B62",
+    headerBackgroundColor: "#FFFFFF",
+    
+    headerFontWeight: 400,
+    headerTextColor: "#84868B",
+    rowBorder: true,
+    sidePanelBorder: true,
+    
+    wrapperBorder: false,
+    wrapperBorderRadius: 2,
+    spacing: 1,
+    cellHorizontalPadding: 10,
+    headerVerticalPaddingScale: 5
+
+  }
+
+  private userScale = {
+    s: {
+      fontSize: 12,
+      rowVerticalPaddingScale: 4
+    },
+    m: {
+      fontSize: 16,
+      rowVerticalPaddingScale: 8
+    },
+    l: {
+      fontSize: 18,
+      rowVerticalPaddingScale: 12
+    }
+  }
+
+  async getGridConfig(): Promise<Theme<ThemeDefaultParams>> {
+    let settings = await this.api.userSettings;
+    const scale = (this.userScale as any)[(settings as any)['uiScale']];
+    const conf = {...this.baseConfig, ...scale};
+    return themeQuartz.withParams(conf);
+  }
+
+  
+}
--- a/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.html
+++ b/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.html
@@ -0,0 +1 @@
+<p>ag-grid-container works!</p>
--- a/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.scss
+++ b/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.scss
--- a/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.spec.ts
+++ b/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AgGridContainerComponent } from './ag-grid-container.component';
+
+describe('AgGridContainerComponent', () => {
+  let component: AgGridContainerComponent;
+  let fixture: ComponentFixture<AgGridContainerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AgGridContainerComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AgGridContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.ts
+++ b/client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.ts
@@ -0,0 +1,31 @@
+import { Component, inject } from '@angular/core';
+import { Theme, ThemeDefaultParams } from 'ag-grid-community';
+import { AgGridService } from '../../ag-grid.service';
+import { ApiService } from '../../../api.service';
+import { filter } from 'rxjs';
+
+@Component({
+  selector: 'app-ag-grid-container',
+  imports: [],
+  templateUrl: './ag-grid-container.component.html',
+  styleUrl: './ag-grid-container.component.scss',
+})
+export class AgGridContainerComponent {
+  myTheme: Theme<ThemeDefaultParams> = null!;
+  private gridService: AgGridService = inject(AgGridService);
+  private apiService: ApiService = inject(ApiService);
+
+  constructor() {
+    this.loadAgTheme();
+  }
+
+
+  private async loadAgTheme() {
+    this.apiService.userSettings;
+    this.apiService.settings.subscribe(async (v) => {
+      if (v != null) {
+        this.myTheme = await this.gridService.getGridConfig()
+      }
+    })
+  }
+}
--- a/client/src/app/shared/api.service.ts
+++ b/client/src/app/shared/api.service.ts
@@ -17,9 +17,26 @@ export class ApiService {
  public cylinders: BehaviorSubject<ICylinder[]> = new BehaviorSubject<ICylinder[]>([]);


+  public user: BehaviorSubject<IUser> = new BehaviorSubject<IUser>(null!);
+  public settings: BehaviorSubject<Object> = new BehaviorSubject<Object>(null!);
+

  constructor() { }

+  getMe(): Promise<IUser> {
+    return new Promise(resolve => {
+      this.http.get<IUser>('/api/auth/me').subscribe({
+        next: user => {
+          this.user.next(user);
+          resolve(user)
+        },
+        error: () => {
+          resolve(null!)
+        }
+      })
+    })
+  }
+

  getAllUsers(): Observable<IUser[]> {
    return this.http.get<IUser[]>('/api/user');
@@ -157,11 +174,44 @@ export class ApiService {
    return this.http.post<ICylinder>('api/cylinder', data);
  }

-  getSettings(): Observable<any> {
-    return this.http.get('api/user/settings')
+  private loadSettings(): Promise<Object> {
+    return new Promise(resolve => {
+      this.http.get('api/user/settings').subscribe({
+        next: val => {
+          this.settings.next(val);
+          return resolve(val);
+        },
+        error: () => {
+          this.toast.error("Einstellungen konnten nicht geladen werden");
+        }
+      })
+    })
  }

-  updateSettings(settings: any): Observable<any> {
-    return this.http.post('api/user/settings', settings)
+  get userSettings(): Promise<Object> {
+    if (!this.settings.value) {
+      return this.loadSettings();
+    }
+    return new Promise(resolve => {
+      return resolve(this.settings.value);
+    })
+    
+  }
+
+  updateSettings(settings: any): Promise<boolean> {
+    return new Promise(resolve => {
+      this.http.post('api/user/settings', settings).subscribe({
+        next: async () => {
+          await this.loadSettings();
+          this.toast.success('Einstellungen gespeichert')
+          return resolve(true);
+        },
+        error: () => {
+          this.toast.error("Fehler beim Speichern der Einstellungen");
+          return resolve(false)
+        }
+      })
+
+    })
  }
 }
--- a/client/src/app/shared/helper.service.ts
+++ b/client/src/app/shared/helper.service.ts
@@ -11,8 +11,6 @@ export class HELPER {
      columnDefs: [],
      loading: true,
      loadingOverlayComponent: AgLoadingComponent,
-      rowHeight: 54,
-    
    }
  }
 }
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -1,8 +1,8 @@
 /* You can add global styles to this file, and also import other style files */
 /* Core Data Grid CSS */
-@import "ag-grid-community/styles/ag-grid.css";
+// @import "ag-grid-community/styles/ag-grid.css";
 /* Quartz Theme Specific CSS */
-@import 'ag-grid-community/styles/ag-theme-quartz.css';
+// @import 'ag-grid-community/styles/ag-theme-quartz.css';

@tailwind base;
@tailwind components;
@@ -46,11 +46,11 @@ html, body {
  padding: 4px;
  box-sizing: border-box;
  border-radius: 6px;
-  background-size: 20px;
+  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
-  width: 38px;
-  height: 38px;
+  width: 28px;
+  height: 28px;
  transition: box-shadow 0.1s ease-in-out;

  &:hover {