Cobbler-Frontend: Add edit functionality

projects/cobbler-frontend/src/app/actions/mkloaders/mkloaders.component.ts

@@ -1,8 +1,8 @@
-import { Component, inject, OnDestroy } from '@angular/core';
+import { Component, OnDestroy } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { UserService } from '../../services/user.service';
 import { CobblerApiService } from 'cobbler-api';
-import { Subject, Subscription } from 'rxjs';
+import { Subject } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatButton } from '@angular/material/button';
 import Utils from '../../utils';

projects/cobbler-frontend/src/app/actions/replicate/replicate.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { MatButton } from '@angular/material/button';
 import { MatFormFieldModule, MatLabel } from '@angular/material/form-field';

projects/cobbler-frontend/src/app/common/dialog-box-confirm-cancel-edit/dialog-box-confirm-cancel-edit.component.html

@@ -0,0 +1,12 @@
+<h1 mat-dialog-title>Cancel Edit?</h1>
+<div mat-dialog-content class="content">
+  <p>
+    Are you sure you want to cancel the edit for the item &quot;{{
+      data.name
+    }}&quot;? All changes will be lost!
+  </p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button [mat-dialog-close]="true">Yes</button>
+  <button mat-button [mat-dialog-close]="false">No</button>
+</div>

projects/cobbler-frontend/src/app/common/dialog-box-confirm-cancel-edit/dialog-box-confirm-cancel-edit.component.spec.ts

@@ -0,0 +1,35 @@
+import { DialogModule } from '@angular/cdk/dialog';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DialogBoxConfirmCancelEditComponent } from './dialog-box-confirm-cancel-edit.component';
+
+describe('DialogBoxConfirmCancelEditComponent', () => {
+  let component: DialogBoxConfirmCancelEditComponent;
+  let fixture: ComponentFixture<DialogBoxConfirmCancelEditComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DialogBoxConfirmCancelEditComponent,
+        DialogModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: { name: '' },
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DialogBoxConfirmCancelEditComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/cobbler-frontend/src/app/common/dialog-box-confirm-cancel-edit/dialog-box-confirm-cancel-edit.component.ts

@@ -0,0 +1,18 @@
+import { Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+
+export interface DialogConfirmCancelData {
+  name: string;
+}
+
+@Component({
+  selector: 'cobbler-dialog-box-confirm-cancel-edit',
+  standalone: true,
+  imports: [MatButtonModule, MatDialogModule],
+  templateUrl: './dialog-box-confirm-cancel-edit.component.html',
+  styleUrl: './dialog-box-confirm-cancel-edit.component.scss',
+})
+export class DialogBoxConfirmCancelEditComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: DialogConfirmCancelData) {}
+}

projects/cobbler-frontend/src/app/common/dialog-item-copy/dialog-item-copy.component.spec.ts

@@ -5,7 +5,6 @@ import {
   MatDialogRef,
 } from '@angular/material/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
 
 import { DialogItemCopyComponent } from './dialog-item-copy.component';
 

projects/cobbler-frontend/src/app/common/dialog-item-copy/dialog-item-copy.component.ts

@@ -6,7 +6,7 @@ import {
   model,
 } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButton, MatButtonModule } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
   MatDialogModule,

projects/cobbler-frontend/src/app/common/dialog-item-rename/dialog-item-rename.component.spec.ts

@@ -5,7 +5,6 @@ import {
   MatDialogRef,
 } from '@angular/material/dialog';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { provideRouter } from '@angular/router';
 
 import { DialogItemRenameComponent } from './dialog-item-rename.component';
 

projects/cobbler-frontend/src/app/common/dialog-item-rename/dialog-item-rename.component.ts

@@ -6,7 +6,7 @@ import {
   model,
 } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButton, MatButtonModule } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import {
   MAT_DIALOG_DATA,
   MatDialogModule,

projects/cobbler-frontend/src/app/common/dialog-key-value-input/dialog-key-value-input.component.html

@@ -0,0 +1,15 @@
+<h2 mat-dialog-title>Add new Option:</h2>
+<mat-dialog-content>
+  <mat-form-field>
+    <mat-label>New Key</mat-label>
+    <input matInput cdkFocusInitial [(ngModel)]="this.data.key" />
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>New Value</mat-label>
+    <input matInput [(ngModel)]="this.data.value" />
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">No Thanks</button>
+  <button mat-button [mat-dialog-close]="onYesClick()">Ok</button>
+</mat-dialog-actions>

projects/cobbler-frontend/src/app/common/dialog-key-value-input/dialog-key-value-input.component.spec.ts

@@ -0,0 +1,34 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DialogKeyValueInputComponent } from './dialog-key-value-input.component';
+
+describe('DialogKeyValueInputComponent', () => {
+  let component: DialogKeyValueInputComponent;
+  let fixture: ComponentFixture<DialogKeyValueInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DialogKeyValueInputComponent,
+        MatDialogModule,
+        NoopAnimationsModule,
+      ],
+      providers: [
+        {
+          provide: MatDialogRef,
+          useValue: {},
+        },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DialogKeyValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/cobbler-frontend/src/app/common/dialog-key-value-input/dialog-key-value-input.component.ts

@@ -0,0 +1,37 @@
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+export interface DialogKeyValueInputReturnData {
+  key: string;
+  value: string;
+}
+
+@Component({
+  selector: 'cobbler-dialog-key-value-input',
+  standalone: true,
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+  ],
+  templateUrl: './dialog-key-value-input.component.html',
+  styleUrl: './dialog-key-value-input.component.scss',
+})
+export class DialogKeyValueInputComponent {
+  data: DialogKeyValueInputReturnData = { key: '', value: '' };
+  readonly dialogRef = inject(MatDialogRef<DialogKeyValueInputComponent>);
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onYesClick(): DialogKeyValueInputReturnData {
+    return this.data;
+  }
+}

projects/cobbler-frontend/src/app/common/dialog-text-input/dialog-text-input.component.html

@@ -2,12 +2,10 @@ <h2 mat-dialog-title>Add new Option:</h2>
 <mat-dialog-content>
   <mat-form-field>
     <mat-label>New Option</mat-label>
-    <input matInput [(ngModel)]="dialogCloseSignal" />
+    <input matInput [(ngModel)]="data" cdkFocusInitial />
   </mat-form-field>
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button (click)="onNoClick()">No Thanks</button>
-  <button mat-button [mat-dialog-close]="dialogCloseSignal()" cdkFocusInitial>
-    Ok
-  </button>
+  <button mat-button [mat-dialog-close]="onYesClick()">Ok</button>
 </mat-dialog-actions>

projects/cobbler-frontend/src/app/common/dialog-text-input/dialog-text-input.component.ts

@@ -1,16 +1,9 @@
-import { Component, inject, model } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { MatButton } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogClose,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatFormField, MatLabel } from '@angular/material/form-field';
-import { MatInput } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 export interface DialogTextInputData {
   text: string;
@@ -20,25 +13,28 @@ export interface DialogTextInputData {
   selector: 'cobbler-dialog-text-input',
   standalone: true,
   imports: [
-    MatDialogContent,
-    MatDialogTitle,
-    MatFormField,
-    MatDialogActions,
-    MatButton,
-    MatDialogClose,
-    MatInput,
-    MatLabel,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatButtonModule,
+    MatInputModule,
     FormsModule,
   ],
   templateUrl: './dialog-text-input.component.html',
   styleUrl: './dialog-text-input.component.scss',
 })
 export class DialogTextInputComponent {
   readonly dialogRef = inject(MatDialogRef<DialogTextInputComponent>);
-  readonly data = inject<DialogTextInputData>(MAT_DIALOG_DATA);
-  readonly dialogCloseSignal = model(this.data.text);
+  public data: string;
+
+  constructor() {
+    this.data = '';
+  }
 
   onNoClick(): void {
     this.dialogRef.close();
   }
+
+  onYesClick(): string {
+    return this.data;
+  }
 }

projects/cobbler-frontend/src/app/common/key-value-editor/key-value-editor.component.html

@@ -2,7 +2,7 @@
   <mat-card-header>
     <mat-card-title>{{ label }}</mat-card-title>
   </mat-card-header>
-  @if (Object.keys(this.keyValueOptions).length === 0) {
+  @if (this.keyValueOptions.size === 0) {
     <p style="text-align: center">Empty list of options</p>
   } @else {
     <div
@@ -28,7 +28,7 @@
               matInput
               formControlName="value"
               placeholder="Value"
-              value="{{ keyValueOptions[key] }}"
+              value="{{ keyValueOptions.get(key) }}"
             />
           </mat-form-field>
           <button
@@ -45,4 +45,7 @@
       }
     </div>
   }
+  <button mat-button [disabled]="isDisabled" (click)="addOption()">
+    Add option
+  </button>
 </mat-card>