Multicylinders

client/src/app/modules/keys/create/create.component.html

@@ -18,18 +18,23 @@
       <mat-hint>Nummer auf dem Schlüssel</mat-hint>
     </mat-form-field>
 
-    <mat-form-field>
-      <mat-label>Schließzylinder</mat-label>
-      <mat-select formControlName="cylinder">
-        @for (item of cylinders; track $index) {
-          <mat-option [value]="item">{{ item.name }}</mat-option>
-        }
-      </mat-select>
-      <mat-hint>Wo sperrt der Schlüssel?</mat-hint>
-    </mat-form-field>
+    <div class="flex items-center gap-3">
+      <mat-form-field class="flex-auto">
+        <mat-label>Schließzylinder</mat-label>
+        <mat-select formControlName="cylinder" multiple>
+          @for (item of cylinders; track $index) {
+            <mat-option [value]="item">{{ item.name }}</mat-option>
+          }
+        </mat-select>
+        <mat-hint>Wo sperrt der Schlüssel?</mat-hint>
+      </mat-form-field>
+        <button mat-icon-button (click)="openSelectMultipleCylinders()">
+          <mat-icon>open_in_new</mat-icon>
+        </button>
+    </div>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button mat-dialog-close >Abbrechen</button>
-  <button mat-button (click)="save()" [disabled]="createForm.disabled">Speichern</button>
+  <button mat-button (click)="save()" [disabled]="createForm.disabled || createForm.invalid">Speichern</button>
 </mat-dialog-actions>

client/src/app/modules/keys/create/create.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { ApiService } from '../../../shared/api.service';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -9,11 +9,13 @@ import { MatInputModule } from '@angular/material/input';
 import { map, Observable, startWith } from 'rxjs';
 import { MatSelectModule } from '@angular/material/select';
 import { HotToastService } from '@ngxpert/hot-toast';
+import { SelectKeyCylinderComponent } from './select-key-cylinder/select-key-cylinder.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-create',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule],
+  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule],
   templateUrl: './create.component.html',
   styleUrl: './create.component.scss'
 })
@@ -22,6 +24,7 @@ export class CreateKeyComponent {
   private api: ApiService = inject(ApiService);
   private toast: HotToastService = inject(HotToastService);
   readonly dialogRef = inject(MatDialogRef<CreateKeyComponent>);
+  private readonly dialog = inject(MatDialog);
 
   createForm = new FormGroup({
     name: new FormControl(null, Validators.required),
@@ -57,6 +60,8 @@ export class CreateKeyComponent {
   }
 
   save() {
+    console.log(this.createForm.value)
+    
     this.api.createKey(this.createForm.value as any)
     .pipe(
       this.toast.observe({
@@ -72,4 +77,23 @@ export class CreateKeyComponent {
       }
     })
   }
+
+  openSelectMultipleCylinders() {
+    this.dialog.open(SelectKeyCylinderComponent, {
+      maxHeight: "calc(100vh - 24px)",
+      maxWidth: "calc(100vw - 24px)",
+      width: "50vw",
+      minWidth: "300px",
+      height: "70vh",
+      disableClose: true,
+      data: this.cylinders
+    }).afterClosed().subscribe({
+      next: c => {
+        if (c) {
+          this.createForm.controls.cylinder.patchValue(c);
+          console.log(c);
+        }
+      }
+    })
+  }
 }

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