fix(visual-editor): load DB FieldType IDs once in container, pass to modal synchronously

The modal's field type dropdown needs DB-correct IDs for new field
creation, but the previous async approach (loading inside the modal)
caused race conditions and empty dropdowns.

Fix: load FieldTypes from the DB once in the visual editor container
component on init, pass them to the field modal via MAT_DIALOG_DATA.
The modal receives dbFieldTypes synchronously in its constructor and
passes them to getTranslatedTypes(), which remaps the hardcoded enum
ordinals to actual DB IDs by matching on the type name string.

If dbFieldTypes is empty (API not loaded yet), falls back to the
hardcoded enum ordinals — preserving the original behavior.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: renemadsen

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.ts

@@ -14,7 +14,7 @@ import * as R from 'ramda';
 import {AuthStateService} from 'src/app/common/store';
 import {TranslateService} from '@ngx-translate/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
-import {EFormService, TranslationRequestModel, TranslationService} from 'src/app/common/services';
+import {TranslationRequestModel, TranslationService} from 'src/app/common/services';
 import {selectCurrentUserIsAdmin} from 'src/app/state/auth/auth.selector';
 import {Store} from '@ngrx/store';
 
@@ -29,7 +29,6 @@ export class VisualEditorFieldModalComponent implements OnInit {
   private authStore = inject(Store);
   private translateService = inject(TranslateService);
   private translationService = inject(TranslationService);
-  private eformService = inject(EFormService);
   dialogRef = inject<MatDialogRef<VisualEditorFieldModalComponent>>(MatDialogRef);
 
   @ViewChild('popTemplate', { static: true }) popTemplate;
@@ -39,6 +38,7 @@ export class VisualEditorFieldModalComponent implements OnInit {
   fieldTypes: EformVisualEditorFieldTypeModel[];
   appLanguages: LanguagesModel = new LanguagesModel();
   translationPossible = false;
+  private dbFieldTypes: {id: number; type: string}[] = [];
   public selectCurrentUserIsAdmin$ = this.authStore.select(selectCurrentUserIsAdmin);
 
   get languages() {
@@ -51,44 +51,26 @@ export class VisualEditorFieldModalComponent implements OnInit {
   }
 
   setFieldTypes() {
-    this.buildFieldTypeList(null);
+    const db = this.dbFieldTypes.length > 0 ? this.dbFieldTypes : undefined;
+    const allTypes = getTranslatedTypes(this.translateService, db);
 
-    this.eformService.getFieldTypes().subscribe(res => {
-      if (res?.success && res.model?.length > 0) {
-        this.buildFieldTypeList(res.model);
-      }
-    });
-  }
-
-  private buildFieldTypeList(dbFieldTypes: {id: number; type: string}[] | null) {
-    const allTypes = getTranslatedTypes(this.translateService, dbFieldTypes ?? undefined);
-
-    const adminOnlyNames = ['Audio', 'Movie', 'NumberStepper'];
-    const fieldGroupName = 'FieldGroup';
-
-    let fieldGroupId: number | undefined;
-    let adminIds: number[] = [];
-
-    if (dbFieldTypes) {
-      fieldGroupId = dbFieldTypes.find(ft => ft.type === fieldGroupName)?.id;
-      adminIds = dbFieldTypes.filter(ft => adminOnlyNames.includes(ft.type)).map(ft => ft.id);
-    } else {
-      fieldGroupId = EformFieldTypesEnum.FieldGroup;
-      adminIds = [EformFieldTypesEnum.Audio, EformFieldTypesEnum.Movie, EformFieldTypesEnum.NumberStepper];
-    }
+    const fieldGroupId = db
+      ? db.find(ft => ft.type === 'FieldGroup')?.id ?? EformFieldTypesEnum.FieldGroup
+      : EformFieldTypesEnum.FieldGroup;
+    const adminOnlyIds = db
+      ? db.filter(ft => ['Audio', 'Movie', 'NumberStepper'].includes(ft.type)).map(ft => ft.id)
+      : [EformFieldTypesEnum.Audio, EformFieldTypesEnum.Movie, EformFieldTypesEnum.NumberStepper];
 
     if (this.recursionModel.fieldIsNested) {
       this.fieldTypes = allTypes.filter(x => x.id !== fieldGroupId);
     } else {
       this.fieldTypes = [...allTypes];
     }
-
     this.selectCurrentUserIsAdmin$.subscribe((isAdmin) => {
       if (isAdmin) {
-        this.fieldTypes = [
-          ...this.fieldTypes,
-          ...allTypes.filter(x => adminIds.includes(x.id))
-        ];
+        this.fieldTypes = [...this.fieldTypes, ...allTypes.filter(
+          (x) => adminOnlyIds.includes(x.id)
+        )];
       }
     });
   }
@@ -123,11 +105,13 @@ export class VisualEditorFieldModalComponent implements OnInit {
     model?: EformVisualEditorRecursionFieldModel;
     appLanguages: LanguagesModel;
     translationPossible: boolean;
+    dbFieldTypes?: {id: number; type: string}[];
 }>(MAT_DIALOG_DATA);
 
     this.translationPossible = model.translationPossible;
     this.selectedLanguages = model.selectedLanguages;
     this.appLanguages = model.appLanguages;
+    this.dbFieldTypes = model.dbFieldTypes ?? [];
     // this.setSelectedLanguage();
     if (model.model) {
       this.recursionModel = R.clone(model.model);

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.ts

@@ -16,6 +16,7 @@ import {
   EformVisualEditorUpdateModel, LanguagesModel,
 } from 'src/app/common/models';
 import {
+  EFormService,
   EformDocxReportService,
   EformTagService,
   EformVisualEditorService, TranslationService,
@@ -57,6 +58,7 @@ export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
   private reportService = inject(EformDocxReportService);
   private appSettingsStateService = inject(AppSettingsStateService);
   private translationService = inject(TranslationService);
+  private eformService = inject(EFormService);
 
   @ViewChild('tagsModal') tagsModal: EformsTagsComponent;
 
@@ -83,6 +85,7 @@ export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
   getLanguagesSub$: Subscription;
   appLanguages: LanguagesModel = new LanguagesModel();
   translationPossible: boolean;
+  dbFieldTypes: {id: number; type: string; description: string}[] = [];
   public selectCurrentUserIsAdmin$ = this.authStore.select(selectCurrentUserIsAdmin);
   private selectCurrentUserLocale$ = this.authStore.select(selectCurrentUserLocale);
 
@@ -129,6 +132,15 @@ export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.getEnabledLanguages();
+    this.loadDbFieldTypes();
+  }
+
+  loadDbFieldTypes() {
+    this.eformService.getFieldTypes().subscribe(res => {
+      if (res?.success && res.model) {
+        this.dbFieldTypes = res.model;
+      }
+    });
   }
 
   getReportHeaders(templateId: number) {
@@ -320,7 +332,7 @@ export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
   showFieldModal(model?: EformVisualEditorRecursionFieldModel) {
     this.visualEditorFieldModalComponentAfterClosedSub$ = this.dialog.open(VisualEditorFieldModalComponent,
       // eslint-disable-next-line max-len
-      {...dialogConfigHelper(this.overlay, {model: model, selectedLanguages: this.selectedLanguages, appLanguages: this.appLanguages, translationPossible: this.translationPossible}), minWidth: 600})
+      {...dialogConfigHelper(this.overlay, {model: model, selectedLanguages: this.selectedLanguages, appLanguages: this.appLanguages, translationPossible: this.translationPossible, dbFieldTypes: this.dbFieldTypes}), minWidth: 600})
       .afterClosed()
       .subscribe(data => data.result ? (data.create ? this.onFieldCreate(data.model) : this.onFieldUpdate(data.model)) : undefined);
   }