Schließanlagen können gelöscht werden

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

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>Gelöschte Schließanlagen</h2>
+<mat-dialog-content>
+  @if(myTheme) {
+    <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/system/components/system-archive/system-archive.component.spec.ts

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

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

@@ -0,0 +1,70 @@
+import { Component, inject, LOCALE_ID } from '@angular/core';
+import { AgGridContainerComponent } from '../../../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
+import { DatePipe } from '@angular/common';
+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 { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { ApiService } from '../../../../shared/api.service';
+import { HELPER } from '../../../../shared/helper.service';
+import { ISystem } from '../../../../model/interface/keysystem.interface';
+
+@Component({
+  selector: 'app-system-archive',
+  imports: [MatDialogModule, AgGridAngular, MatButtonModule, MatIconModule],
+  templateUrl: './system-archive.component.html',
+  styleUrl: './system-archive.component.scss',
+  providers: [DatePipe, { provide: LOCALE_ID, useValue: 'de-DE' }]
+})
+export class SystemArchiveComponent extends AgGridContainerComponent {
+  private api: ApiService = inject(ApiService);
+  private datePipe = inject(DatePipe);
+
+  gridApi!: GridApi;
+  
+  gridOptions: GridOptions = HELPER.getGridOptions();
+
+  constructor() {
+    super();
+
+    this.gridOptions.columnDefs = [
+      { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
+      // { colId: 'nr', field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true },
+      {
+        field: 'deletedAt'
+        , headerName: 'Gelöscht'
+        , width: 160
+        // , type: 'date'
+        , 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.restoreSystem(event.data);},
+        tooltipValueGetter: () => 'Wiederherstellen',
+        sortable: false
+      }
+    ];
+    this.gridOptions.rowHeight = 36;
+    this.gridOptions.overlayNoRowsTemplate = 'Bisher wurden keine Schließanlagen gelöscht. Sobald dies der Fall ist, werden sie hier angezeigt.';
+  }
+
+  onGridReady(params: GridReadyEvent) {
+      this.gridApi = params.api;
+      this.loadSystems();
+  }
+
+  async loadSystems() {
+      this.gridApi.setGridOption("loading", true);
+      const systems = await this.api.getSystemArchive()
+      this.gridApi.setGridOption("rowData", systems);
+      this.gridApi.setGridOption("loading", false);
+  }
+
+  async restoreSystem(system: ISystem) {
+    await this.api.restoreSystem(system);
+    this.loadSystems();
+  }
+
+}

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

@@ -8,4 +8,5 @@
 }
 <div class="floating-btn-container">
     <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateSystem()"  >Schließanlage anlegen</button>
+    <button mat-mini-fab (click)="openArchive()" matTooltip="Archiv"><mat-icon>inventory_2</mat-icon></button>
   </div>

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

@@ -9,10 +9,12 @@ import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CreateSystemComponent } from './create/create.component';
 import { AgGridContainerComponent } from '../../shared/ag-grid/components/ag-grid-container/ag-grid-container.component';
 import { AgSystemManagerComponent } from '../../shared/ag-grid/components/ag-system-manager/ag-system-manager.component';
+import { SystemArchiveComponent } from './components/system-archive/system-archive.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
     selector: 'app-system',
-    imports: [AgGridAngular, MatButtonModule, MatDialogModule],
+    imports: [AgGridAngular, MatButtonModule, MatDialogModule, MatIconModule],
     providers: [DatePipe, { provide: LOCALE_ID, useValue: 'de-DE' }],
     templateUrl: './system.component.html',
     styleUrl: './system.component.scss'
@@ -41,12 +43,15 @@ export class SystemComponent extends AgGridContainerComponent {
         // , onCellClicked: (event) => { this.deleteKey(event.data.id)}
       }
     ];
+    
   }
 
   async loadSystems() {
     this.gridApi.setGridOption("loading", true);
     await this.api.refreshSystems();
     this.gridApi.setGridOption("loading", false);
+    const a = await this.api.getSystemArchive();
+    console.log(a)
   }
 
   onGridReady(params: GridReadyEvent) {
@@ -81,4 +86,15 @@ export class SystemComponent extends AgGridContainerComponent {
           }
         })
   }
+
+  openArchive() {
+      this.dialog.open(SystemArchiveComponent, {
+        maxHeight: "calc(100vh - 24px)",
+        maxWidth: "calc(100vw - 24px)",
+        width: "50vw",
+        minWidth: "300px",
+        height: "70vh",
+        disableClose: true
+      })
+    }
 }