fix(forms): create new dropdown options from popup config window (#2040)

closes #1872 --------- Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>
Aam-Digital · Nov 19, 2023 · 2d2a172 · 2d2a172
1 parent 9668bd8
commit 2d2a172
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/...asic-datatypes/configurable-enum/configure-enum-popup/configure-enum-popup.component.html b/...asic-datatypes/configurable-enum/configure-enum-popup/configure-enum-popup.component.html
@@ -2,6 +2,7 @@ <h1 matDialogTitle i18n="title of dropdown options popup dialog">
   Edit dropdown options
 </h1>
 <app-dialog-close mat-dialog-close></app-dialog-close>
+
 <mat-dialog-content
   style="max-width: 400px; padding-top: 5px"
   cdkDropList
@@ -18,11 +19,27 @@ <h1 matDialogTitle i18n="title of dropdown options popup dialog">
       matIconPrefix
       class="grab-icon margin-right-small"
     ></fa-icon>
+
     <input matInput [(ngModel)]="v.label" />
+
     <button mat-icon-button matIconSuffix (click)="delete(v, i)">
       <fa-icon icon="trash"></fa-icon>
     </button>
   </mat-form-field>
+
+  <!-- CREATING NEW OPTION -->
+  <mat-form-field class="full-width">
+    <mat-label i18n>Add new option</mat-label>
+    <input matInput [(ngModel)]="newOptionInput" />
+    <button
+      mat-icon-button
+      color="accent"
+      matIconSuffix
+      (click)="createNewOption()"
+    >
+      <fa-icon icon="square-plus"></fa-icon>
+    </button>
+  </mat-form-field>
 </mat-dialog-content>
 
 <mat-dialog-actions>

diff --git a/...c-datatypes/configurable-enum/configure-enum-popup/configure-enum-popup.component.spec.ts b/...c-datatypes/configurable-enum/configure-enum-popup/configure-enum-popup.component.spec.ts
@@ -17,6 +17,7 @@ import {
   entityRegistry,
   EntityRegistry,
 } from "../../../entity/database-entity.decorator";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 
 describe("ConfigureEnumPopupComponent", () => {
   let component: ConfigureEnumPopupComponent;
@@ -26,7 +27,11 @@ describe("ConfigureEnumPopupComponent", () => {
   beforeEach(async () => {
     entityMapper = mockEntityMapper();
     await TestBed.configureTestingModule({
-      imports: [ConfigureEnumPopupComponent, FontAwesomeTestingModule],
+      imports: [
+        ConfigureEnumPopupComponent,
+        FontAwesomeTestingModule,
+        NoopAnimationsModule,
+      ],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: new ConfigurableEnum() },
         { provide: MatDialogRef, useValue: { afterClosed: () => EMPTY } },

diff --git a/.../basic-datatypes/configurable-enum/configure-enum-popup/configure-enum-popup.component.ts b/.../basic-datatypes/configurable-enum/configure-enum-popup/configure-enum-popup.component.ts
@@ -43,6 +43,8 @@ import { Entity } from "../../../entity/model/entity";
   standalone: true,
 })
 export class ConfigureEnumPopupComponent {
+  newOptionInput: string;
+
   constructor(
     @Inject(MAT_DIALOG_DATA) public enumEntity: ConfigurableEnum,
     private dialog: MatDialogRef<ConfigureEnumPopupComponent>,
@@ -125,4 +127,13 @@ export class ConfigureEnumPopupComponent {
       ),
     );
   }
+
+  createNewOption() {
+    this.enumEntity.values.push({
+      id: this.newOptionInput,
+      label: this.newOptionInput,
+    });
+    this.newOptionInput = "";
+  }
+  mynewFun() {}
 }