authentication

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

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

client/src/app/modules/admin/all-users/all-users.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AllUsersComponent } from './all-users.component';
+
+describe('AllUsersComponent', () => {
+  let component: AllUsersComponent;
+  let fixture: ComponentFixture<AllUsersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AllUsersComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AllUsersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,80 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
+import { ApiService } from '../../../shared/api.service';
+import { AgGridAngular } from 'ag-grid-angular';
+import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent } from 'ag-grid-community';
+import { HotToastService } from '@ngxpert/hot-toast';
+
+@Component({
+  selector: 'app-all-users',
+  standalone: true,
+  imports: [AgGridAngular],
+  templateUrl: './all-users.component.html',
+  styleUrl: './all-users.component.scss'
+})
+export class AllUsersComponent {
+
+  private toast: HotToastService = inject(HotToastService);
+  private api: ApiService = inject(ApiService);
+
+  gridApi!: GridApi;
+
+  private roles: string [] = [];
+
+  gridOptions: GridOptions = {
+    rowData: [],
+    columnDefs: [
+      { field: 'username' , headerName: 'User', flex: 1, editable: true, sort: 'asc' },
+      { field: 'firstName', headerName: 'Vorname', flex: 1, editable: true},
+      { field: 'lastName', headerName: 'Nachname', flex: 1, editable: true},
+      { field: 'isActive', headerName: 'Aktiv', flex: 1, editable: true, },
+      { field: 'role', headerName: 'Rolle', flex: 1, editable: true, cellEditor: 'agSelectCellEditor',
+        cellEditorParams: {
+          values: ['user', 'develop', 'admin'],
+      },
+      singleClickEdit: true,
+       },
+    ],
+    loading: true,
+    overlayLoadingTemplate: 'Lade Daten...'
+  }
+
+  ngOnInit(): void {
+  }
+
+  loadUsers() {
+    this.api.getAllUsers().subscribe({
+      next: n => {
+        this.gridApi.setGridOption("rowData", n)
+        this.gridApi.setGridOption("loading", false);
+      }
+    })
+  }
+
+  cellEditEnd(params: CellEditingStoppedEvent, self: AllUsersComponent) {
+    if (!params.valueChanged) { return; }
+
+    self.api.saveUser(params.data)
+    .pipe(
+      self.toast.observe({
+        loading: 'speichern...',
+        success: 'Änderungen gespeichert',
+        error: 'Änderungen konnten nicht gespeichert werden!'
+      })
+    ).subscribe({
+      error: () => {
+        const data = self.gridApi.getRowNode(params.node.id as string);
+        data?.setDataValue(params.colDef.field as string, params.oldValue)
+      }
+    });
+  }
+
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+    const self = this;
+    this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt, self))
+    this.loadUsers();
+    console.log(params)
+  }
+
+}

client/src/app/modules/auth/login/login.component.html

@@ -0,0 +1 @@
+<button mat-flat-button color="primary" (click)="authService.routeToLogin()">Login</button>

client/src/app/modules/auth/login/login.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/modules/auth/login/login.component.ts

@@ -0,0 +1,14 @@
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { AuthService } from '../../../core/auth/auth.service';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [MatButtonModule],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.scss'
+})
+export class LoginComponent {
+  public authService: AuthService = inject(AuthService);
+}

client/src/app/modules/dashboard/dashboard.component.html

@@ -0,0 +1,7 @@
+<ag-grid-angular
+      style="width: 100%; height: 100%;"
+      
+      [rowData]="rowData"
+      [columnDefs]="colDefs"
+      [defaultColDef]="defaultColDef"
+  />

client/src/app/modules/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/modules/dashboard/dashboard.component.ts

@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ColDef } from 'ag-grid-community'; // Column Definition Type Interface
+
+@Component({
+  selector: 'app-dashboard',
+  standalone: true,
+  imports: [AgGridAngular],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.scss'
+})
+export class DashboardComponent {
+
+  defaultColDef: ColDef = {
+    flex: 1,
+    editable: true
+};
+  rowData = [
+    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+    { make: "Ford", model: "F-Series", price: 33850, electric: false },
+    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+    { make: "Ford", model: "F-Series", price: 33850, electric: false },
+    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+    { make: "Ford", model: "F-Series", price: 33850, electric: false },
+    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
+    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
+  ];
+ 
+  // Column Definitions: Defines the columns to be displayed.
+  colDefs: ColDef[] = [
+    { field: "make" },
+    { 
+      field: "model", 
+      cellEditor: 'agSelectCellEditor',
+      singleClickEdit: true,
+      cellEditorParams: {
+        values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],
+    }
+    },
+    { field: "price", type: 'number'
+      // cellEditor: 'agDateCellEditor',
+      // cellEditorParams: {
+      //     min: '2000-01-01',
+      //     max: '2019-12-31',
+      // }
+    },
+    { field: "electric", editable: true }
+  ];
+}

client/src/app/modules/start/start.component.html

@@ -0,0 +1 @@
+<p>start works!</p>

client/src/app/modules/start/start.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StartComponent } from './start.component';
+
+describe('StartComponent', () => {
+  let component: StartComponent;
+  let fixture: ComponentFixture<StartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [StartComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(StartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/modules/start/start.component.ts

@@ -0,0 +1,19 @@
+import { HttpClient } from '@angular/common/http';
+import { Component, inject } from '@angular/core';
+
+@Component({
+  selector: 'app-start',
+  standalone: true,
+  imports: [],
+  templateUrl: './start.component.html',
+  styleUrl: './start.component.scss'
+})
+export class StartComponent {
+  private http: HttpClient = inject(HttpClient);
+
+  ngOnInit(): void {
+    this.http.get('/api/').subscribe(res => {
+      console.log(res)
+    })
+  }
+}