Archive und Logging

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

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>Gelöschte Zylinder</h2>
+<mat-dialog-content>
+  @if(myTheme && gridOptions) {
+    <ag-grid-angular
+      style="width: 100%; height: 100%;"
+      (gridReady)="onGridReady($event)"
+      [gridOptions]="gridOptions!"
+      [theme]="myTheme"
+  />
+  }
+
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button matButton mat-dialog-close>Schließen</button>
+</mat-dialog-actions>

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

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

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

@@ -0,0 +1,78 @@
+import { Component, inject, LOCALE_ID } from '@angular/core';
+import { AgGridContainerComponent } from '../../../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
+import { CommonModule, DatePipe } from '@angular/common';
+import { HotToastService } from '@ngxpert/hot-toast';
+import { ApiService } from '../../../../shared/api.service';
+import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { HELPER } from '../../../../shared/helper.service';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { AgGridAngular } from 'ag-grid-angular';
+import { ICylinder } from '../../../../model/interface/cylinder.interface';
+
+@Component({
+  selector: 'app-cylinder-archive',
+  imports: [MatDialogModule, AgGridAngular, MatButtonModule, MatIconModule, CommonModule],
+  providers: [DatePipe, { provide: LOCALE_ID, useValue: 'de-DE' }],
+  templateUrl: './cylinder-archive.component.html',
+  styleUrl: './cylinder-archive.component.scss',
+})
+export class CylinderArchiveComponent extends AgGridContainerComponent {
+  private api: ApiService = inject(ApiService);
+  private datePipe = inject(DatePipe);
+  private toast = inject(HotToastService);
+
+  gridApi!: GridApi;
+  
+  gridOptions: GridOptions = HELPER.getGridOptions();
+
+  constructor() {
+    super();
+
+    this.createGridOptions();
+  
+  }
+
+  private createGridOptions() {
+    this.gridOptions.columnDefs = [
+      { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
+      { colId: 'nr', field: 'nr' , headerName: 'Name', flex: 1, editable: true, filter: true },
+      {
+        field: 'deletedAt'
+        , headerName: 'Gelöscht'
+        , width: 160
+        , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value), 'short')
+      },
+      {
+        width: 40,
+        cellRenderer: () => '<div class="icon-btn-sm restore icon-btn-xs" ></div>',
+        onCellClicked: (event) => { this.restoreCylinder(event.data);},
+        tooltipValueGetter: () => 'Wiederherstellen',
+        sortable: false
+      }
+    ];
+    this.gridOptions.rowHeight = 36;
+    this.gridOptions.overlayNoRowsTemplate = 'Bisher wurden keine Zylinder gelöscht. Sobald dies der Fall ist, werden sie hier angezeigt.';
+  }
+  
+
+  async restoreCylinder(data: ICylinder) {
+    this.gridApi.setGridOption("loading", true);
+    await this.api.restoreCylinder(data.id);
+    this.loadCylinders();
+  }
+
+  onGridReady(params: GridReadyEvent) {
+      this.gridApi = params.api;
+      this.loadCylinders();
+    }
+
+    async loadCylinders() {
+      this.gridApi.setGridOption("loading", true);
+      const cylinders = await this.api.getCylinderArchive();
+      this.gridApi.setGridOption("rowData", cylinders);
+      this.gridApi.setGridOption("loading", false);
+    }
+
+}