Multicylinders

client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.html

@@ -0,0 +1,15 @@
+
+
+<h2 mat-dialog-title>Zylinder auswählen</h2>
+<mat-dialog-content>
+    <ag-grid-angular
+    style="width: 100%; height: 100%;"
+    (gridReady)="onGridReady($event)"
+    [gridOptions]="gridOptions!"
+/>
+
+</mat-dialog-content>
+<mat-dialog-actions>
+    <button mat-button color="warn" [mat-dialog-close]="null">Abbrechen</button>
+    <button mat-button color="accent" [mat-dialog-close]="selectedCylinders">Übernehmen</button>
+</mat-dialog-actions>

client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.spec.ts

@@ -0,0 +1,37 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectKeyCylinderComponent } from './select-key-cylinder.component';
+import { HotToastService } from '@ngxpert/hot-toast';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MockHotToastService } from '../../../../../../mocks/services/mock.hottoast.service';
+
+describe('SelectKeyCylinderComponent', () => {
+  let component: SelectKeyCylinderComponent;
+  let fixture: ComponentFixture<SelectKeyCylinderComponent>;
+
+  const mockHotToastService = {
+    info: jest.fn(),
+    error: jest.fn(),
+    success: jest.fn(),
+  }
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SelectKeyCylinderComponent],
+      providers: [
+        { provide: HotToastService, useClass: MockHotToastService },
+        { provide: MatDialogRef, useValue: {} },
+        { provide: MAT_DIALOG_DATA, useValue: [] }
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SelectKeyCylinderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

client/src/app/modules/keys/create/select-key-cylinder/select-key-cylinder.component.ts

@@ -0,0 +1,54 @@
+import { Component, inject } from '@angular/core';
+import { ApiService } from '../../../../shared/api.service';
+import { ICylinder } from '../../../../model/interface/cylinder.interface';
+import { HotToastService } from '@ngxpert/hot-toast';
+import { AgGridAngular } from 'ag-grid-angular';
+import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-select-key-cylinder',
+  standalone: true,
+  imports: [AgGridAngular, MatDialogModule, MatButtonModule],
+  templateUrl: './select-key-cylinder.component.html',
+  styleUrl: './select-key-cylinder.component.scss'
+})
+export class SelectKeyCylinderComponent {
+  private toast: HotToastService = inject(HotToastService);
+  readonly dialogRef = inject(MatDialogRef<SelectKeyCylinderComponent>);
+  readonly cylinders = inject<ICylinder[]>(MAT_DIALOG_DATA);
+
+  gridApi!: GridApi;
+  
+  gridOptions: GridOptions = {
+    localeText: AG_GRID_LOCALE_DE,
+    loading: false,
+    rowData: this.cylinders,
+    onSelectionChanged: (event) => {
+      this.selectionChanged();
+    },
+    rowSelection: 'multiple',
+    columnDefs: [
+      // selected rows
+      { colId: 'selected', headerName: '', checkboxSelection: true, width: 40, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true },
+      { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
+    ]
+  };
+
+  selectedCylinders: ICylinder[] = [];
+
+  ngOnInit(): void {
+    console.log(this.toast)
+    this.toast.error('Wähle die Zylinder aus, die dem Schlüssel zugeordnet werden sollen.');
+  }
+
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+  }
+
+  selectionChanged(): void {
+    this.selectedCylinders =this.gridApi?.getSelectedRows();
+  }
+}