Zylinder angefangen

client/src/app/app.routes.ts

@@ -7,12 +7,14 @@ import { LayoutComponent } from './core/layout/layout.component';
 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';
 
 export const routes: Routes = [
   { path: '', component: LayoutComponent, canActivate: [AuthenticatedGuard], children: [
     { path: '', component: DashboardComponent },
     { path: 'users', component: AllUsersComponent },
-    { path: 'keys', component: KeysComponent }
+    { path: 'keys', component: KeysComponent },
+    { path: 'cylinders', component: CylinderComponent }
   ]},
   { path: 'login', component: LoginComponent},
 ];

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

@@ -14,6 +14,7 @@
   <mat-drawer #drawer class="main_sidenav" mode="side" opened="true" style="border-right: 1px solid #dfdfdf">
     <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="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
   </mat-drawer>
 

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

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

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

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

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

@@ -0,0 +1,50 @@
+import { Component, inject } from '@angular/core';
+import { HELPER } from '../../shared/helper.service';
+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';
+
+@Component({
+  selector: 'app-cylinder',
+  standalone: true,
+  imports: [AgGridAngular],
+  providers: [DatePipe],
+  templateUrl: './cylinder.component.html',
+  styleUrl: './cylinder.component.scss'
+})
+export class CylinderComponent {
+  private api: ApiService = inject(ApiService);
+  private datePipe = inject(DatePipe);
+
+  gridApi!: GridApi;
+
+  gridOptions: GridOptions = HELPER.getGridOptions();
+
+
+  constructor() {
+
+    this.gridOptions.columnDefs = [
+      {  field: 'name', headerName: 'Name', sort: 'asc', flex: 1 },
+      {  field: 'system.name', headerName: 'System', flex: 1 },
+      {  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)) : '-' },
+    ]
+
+  }
+
+  loadCylinders() {
+    this.api.getCylinders().subscribe({
+      next: n => {
+        this.gridApi.setGridOption("rowData", n);
+        this.gridApi.setGridOption("loading", false);
+      }
+    })
+  }
+
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+    this.loadCylinders();
+  }
+}

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

@@ -33,10 +33,6 @@ export class ApiService {
     return this.http.put<IKey>('api/key', key);
   }
 
-  getCylinders(): Observable<any[]> {
-    return this.http.get<any[]>('api/key/cylinder');
-  }
-
   createKey(key: any) {
     return this.http.post<IKey>('api/key', key);
   }
@@ -72,4 +68,8 @@ export class ApiService {
   restoreKey(id: string) {
     return this.http.put(`api/key/${id}/restore`, null);
   }
+
+  getCylinders(): Observable<any[]> {
+    return this.http.get<any[]>('api/cylinder');
+  }
 }