Zylinder angefangen

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