xxx

client/src/app/app.routes.ts

@@ -8,13 +8,15 @@ import { DashboardComponent } from './modules/dashboard/dashboard.component';
 import { AllUsersComponent } from './modules/admin/all-users/all-users.component';
 import { KeysComponent } from './modules/keys/keys.component';
 import { CylinderComponent } from './modules/cylinder/cylinder.component';
+import { SystemComponent } from './modules/system/system.component';
 
 export const routes: Routes = [
   { path: '', component: LayoutComponent, canActivate: [AuthenticatedGuard], children: [
     { path: '', component: DashboardComponent },
     { path: 'users', component: AllUsersComponent },
     { path: 'keys', component: KeysComponent },
-    { path: 'cylinders', component: CylinderComponent }
+    { path: 'cylinders', component: CylinderComponent },
+    { path: 'systems', component: SystemComponent }
   ]},
   { path: 'login', component: LoginComponent},
 ];

client/src/app/core/layout/layout.component.html

@@ -15,6 +15,7 @@
     <button mat-button routerLink="/" routerLinkActive="mat-elevation-z1" [routerLinkActiveOptions]="{exact: true}">Home</button>
     <button mat-button routerLink="/keys" routerLinkActive="mat-elevation-z1">Schlüssel</button>
     <button mat-button routerLink="/cylinders" routerLinkActive="mat-elevation-z1">Zylinder</button>
+    <button mat-button routerLink="/systems" routerLinkActive="mat-elevation-z1">System</button>
     <button mat-button routerLink="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
   </mat-drawer>
 

client/src/app/model/interface/cylinder.interface.ts

@@ -0,0 +1,12 @@
+import { IKey } from "./key.interface";
+
+export interface ICylinder {
+  id: string;
+  name: string;
+  createdAt: string;
+  updatedAt: string;
+  deletedAt: string;
+  system: any;
+  keys: IKey[];
+  keyCount: number;
+}

client/src/app/model/interface/key.interface.ts

@@ -1,10 +1,12 @@
+import { ICylinder } from "./cylinder.interface";
+
 export interface IKey {
   id: string;
   name: string;
   createdAt: string;
   updatedAt: string;
   handedOut: boolean;
-  cylinder: any;
+  cylinder: ICylinder;
   nr: number;
   deletedAt?: string;
 }

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

@@ -70,7 +70,6 @@ export class AllUsersComponent {
       next: n => {
         this.gridApi.setGridOption("rowData", n)
         this.gridApi.setGridOption("loading", false);
-        n.filter(u => u.username == 'mail@bastian-wagner.de').map((u: any) => { console.log(u['lastLogin'])})
       }
     })
   }
@@ -98,7 +97,6 @@ export class AllUsersComponent {
     const self = this;
     this.gridApi.addEventListener("cellEditingStopped", evt => this.cellEditEnd(evt, self))
     this.loadUsers();
-    console.log(params)
   }
 
 }

client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.html

@@ -0,0 +1,9 @@
+<h2 mat-dialog-title>Zylinder <u>{{key.name}}</u> löschen?</h2>
+<mat-dialog-content>
+  <p>Soll der Zylinder wirklich gelöscht werden? Alle {{ key.keyCount | number:'0.0-0'}} enthaltenen Schlüssel werden mit entfernt!</p>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="false"  >Abbrechen</button>
+  <button mat-button [mat-dialog-close]="true" color="warn">Ja, löschen</button>
+</mat-dialog-actions>

client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.spec.ts

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

client/src/app/modules/cylinder/components/delete-cylinder/delete-cylinder.component.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, LOCALE_ID } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-delete-cylinder',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule, CommonModule],
+  providers: [{ provide: LOCALE_ID, useValue: 'de-DE' },],
+  templateUrl: './delete-cylinder.component.html',
+  styleUrl: './delete-cylinder.component.scss'
+})
+export class DeleteCylinderComponent {
+  readonly dialogRef = inject(MatDialogRef<DeleteCylinderComponent>);
+  readonly key = inject<any>(MAT_DIALOG_DATA);
+
+}

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

@@ -4,6 +4,7 @@ import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
 import { AgGridAngular } from 'ag-grid-angular';
 import { ApiService } from '../../shared/api.service';
 import { DatePipe } from '@angular/common';
+import { AgDeleteCylinderComponent } from '../../shared/ag-grid/components/ag-delete-cylinder/ag-delete-cylinder.component';
 
 @Component({
   selector: 'app-cylinder',
@@ -30,6 +31,12 @@ export class CylinderComponent {
       {  field: 'keyCount', headerName: 'Anzahl Schlüssel', flex: 0, type: 'number' },
       { 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: AgDeleteCylinderComponent
+      }
     ]
 
   }

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

@@ -83,9 +83,7 @@ export class KeysComponent {
   }
 
   deleteKey(id: string) {
-    this.api.deleteKey(id).subscribe({
-      next: n => console.log(n)
-    })
+    this.api.deleteKey(id).subscribe()
   }
 
   ngOnInit(): void {

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

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

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

@@ -1,19 +0,0 @@
-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)
-    })
-  }
-}

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

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

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

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

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

@@ -0,0 +1,47 @@
+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 { ApiService } from '../../shared/api.service';
+import { HELPER } from '../../shared/helper.service';
+
+@Component({
+  selector: 'app-system',
+  standalone: true,
+  imports: [AgGridAngular],
+  providers: [DatePipe],
+  templateUrl: './system.component.html',
+  styleUrl: './system.component.scss'
+})
+export class SystemComponent {
+  private api: ApiService = inject(ApiService);
+  private datePipe = inject(DatePipe);
+
+  gridApi!: GridApi;
+
+  gridOptions: GridOptions = HELPER.getGridOptions();
+
+  constructor() {
+    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)) : '-' },
+    ]
+  }
+
+
+  loadSystems() {
+    this.api.getSystems().subscribe({
+      next: n => {
+        this.gridApi.setGridOption("rowData", n);
+        this.gridApi.setGridOption("loading", false);
+      }
+    })
+  }
+
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+    this.loadSystems();
+  }
+
+}

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

@@ -0,0 +1 @@
+<p>ag-base-component works!</p>

client/src/app/shared/ag-grid/components/ag-base-component/ag-base-component.component.spec.ts

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

client/src/app/shared/ag-grid/components/ag-base-component/ag-base-component.component.ts

@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { HotToastService } from '@ngxpert/hot-toast';
+import { ApiService } from '../../../api.service';
+import { ICellRendererAngularComp } from 'ag-grid-angular';
+import { ICellRendererParams } from 'ag-grid-community';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  standalone: true,
+  imports: [MatDialogModule, MatTooltipModule],
+  templateUrl: './ag-base-component.component.html',
+  styleUrl: './ag-base-component.component.scss'
+})
+export class AgBaseComponentComponent implements ICellRendererAngularComp {
+  protected api: ApiService = inject(ApiService);
+  protected dialog: MatDialog = inject(MatDialog);
+  protected toast = inject(HotToastService);
+  params!: ICellRendererParams<any, any, any>;
+
+  agInit(params: ICellRendererParams<any, any, any>): void {
+    this.params = params;
+  }
+  refresh(params: ICellRendererParams<any, any, any>): boolean {
+    return false;
+  }
+
+}

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

@@ -0,0 +1 @@
+<div class="delete icon-btn-sm" (click)="delete()" matTooltip="Löschen" [matTooltipShowDelay]="600"></div>

client/src/app/shared/ag-grid/components/ag-delete-cylinder/ag-delete-cylinder.component.spec.ts

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

client/src/app/shared/ag-grid/components/ag-delete-cylinder/ag-delete-cylinder.component.ts

@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { AgBaseComponentComponent } from '../ag-base-component/ag-base-component.component';
+import { DeleteCylinderComponent } from '../../../../modules/cylinder/components/delete-cylinder/delete-cylinder.component';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-ag-delete-cylinder',
+  standalone: true,
+  imports: [MatTooltipModule],
+  templateUrl: './ag-delete-cylinder.component.html',
+  styleUrl: './ag-delete-cylinder.component.scss'
+})
+export class AgDeleteCylinderComponent extends AgBaseComponentComponent {
+
+
+  delete() {
+    const ref = this.dialog.open(DeleteCylinderComponent, {
+      data: this.params.data,
+      autoFocus: false
+    })
+
+    ref.afterClosed().subscribe({
+      next: n => {
+        if (n) {
+          this.deleteThisCylinder();
+        }
+      }
+    })
+  }
+
+  deleteThisCylinder() {
+    this.api.deleteCylinder(this.params.data)
+    .pipe(
+      this.toast.observe({
+        loading: 'Löschen...',
+        success: 'Gelöscht!',
+        error: 'Konnte nicht gelöscht werden'
+      })
+    ).subscribe({
+      next: () => {
+        const rows = this.params.api.getGridOption("rowData")?.filter(r => r.id != this.params.data.id);
+        this.params.api.setGridOption("rowData", rows);
+      }
+    })
+  }
+
+}

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

@@ -3,6 +3,7 @@ import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IUser } from '../model/interface/user.interface';
 import { IKey } from '../model/interface/key.interface';
+import { ICylinder } from '../model/interface/cylinder.interface';
 
 @Injectable({
   providedIn: 'root'
@@ -37,8 +38,12 @@ export class ApiService {
     return this.http.post<IKey>('api/key', key);
   }
 
-  postKeySystem(keySystem: any) {
-    return this.http.post('api/key/system', keySystem);
+  createSystem(keySystem: any) {
+    return this.http.post('api/system', keySystem);
+  }
+
+  getSystems(): Observable<any[]> {
+    return this.http.get<any[]>('api/system');
   }
 
   handoverKey(data: any) {
@@ -69,7 +74,11 @@ export class ApiService {
     return this.http.put(`api/key/${id}/restore`, null);
   }
 
-  getCylinders(): Observable<any[]> {
-    return this.http.get<any[]>('api/cylinder');
+  getCylinders(): Observable<ICylinder[]> {
+    return this.http.get<ICylinder[]>('api/cylinder');
+  }
+
+  deleteCylinder(cylinder: ICylinder): Observable<any> {
+    return this.http.delete(`api/cylinder/${cylinder.id}`)
   }
 }