fix(visual-editor): initialize field types synchronously before async DB load

The field type dropdown was empty until getFieldTypes() API resolved,
causing Playwright tests to timeout waiting for options. Now initialize
with hardcoded enum IDs immediately (synchronous), then update with
correct DB IDs when the API responds. This ensures the dropdown is
always usable even if the API is slow.

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

@@ -51,32 +51,45 @@ export class VisualEditorFieldModalComponent implements OnInit {
   }
 
   setFieldTypes() {
+    this.buildFieldTypeList(null);
+
     this.eformService.getFieldTypes().subscribe(res => {
-      const dbFieldTypes = res?.success && res.model ? res.model : [];
-      const allTypes = getTranslatedTypes(this.translateService, dbFieldTypes);
+      if (res?.success && res.model?.length > 0) {
+        this.buildFieldTypeList(res.model);
+      }
+    });
+  }
 
-      const adminOnlyNames = ['Audio', 'Movie', 'NumberStepper'];
-      const fieldGroupName = 'FieldGroup';
+  private buildFieldTypeList(dbFieldTypes: {id: number; type: string}[] | null) {
+    const allTypes = getTranslatedTypes(this.translateService, dbFieldTypes ?? undefined);
 
-      const dbFieldGroupId = dbFieldTypes.find(ft => ft.type === fieldGroupName)?.id;
-      const dbAdminIds = dbFieldTypes
-        .filter(ft => adminOnlyNames.includes(ft.type))
-        .map(ft => ft.id);
+    const adminOnlyNames = ['Audio', 'Movie', 'NumberStepper'];
+    const fieldGroupName = 'FieldGroup';
 
-      if (this.recursionModel.fieldIsNested) {
-        this.fieldTypes = allTypes.filter(x => x.id !== dbFieldGroupId);
-      } else {
-        this.fieldTypes = [...allTypes];
-      }
+    let fieldGroupId: number | undefined;
+    let adminIds: number[] = [];
 
-      this.selectCurrentUserIsAdmin$.subscribe((isAdmin) => {
-        if (isAdmin) {
-          this.fieldTypes = [
-            ...this.fieldTypes,
-            ...allTypes.filter(x => dbAdminIds.includes(x.id))
-          ];
-        }
-      });
+    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];
+    }
+
+    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))
+        ];
+      }
     });
   }