Ag Grid anpassungen

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

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

client/src/app/shared/ag-grid/components/ag-grid-container/ag-grid-container.component.html

@@ -0,0 +1 @@
+<p>ag-grid-container works!</p>

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

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()
+      }
+    })
+  }
+}

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)
+        }
+      })
+
+    })
   }
 }

client/src/app/shared/helper.service.ts

@@ -11,8 +11,6 @@ export class HELPER {
       columnDefs: [],
       loading: true,
       loadingOverlayComponent: AgLoadingComponent,
-      rowHeight: 54,
-    
     }
   }
 }