fix field types

Author: ryanslatten

web-app/admin/src/app/admin/admin-event/admin-event-form/fields-list/fields-list.component.html

@@ -11,7 +11,7 @@ <h4 class="field-title">{{ field.title || 'No title set' }}</h4>
                 <div class="field-details">
                     <div class="field-row">
                         <span class="field-label">Type:</span>
-                        <span class="field-value">{{ getFieldTypeLabel(field.type) }}</span>
+                        <span class="field-value">{{ getFieldTypeLabel(field.type, field) }}</span>
                         <span class="field-label" *ngIf="field.required" style="margin-left: 1rem;">Required:</span>
                         <span class="field-value" *ngIf="field.required">Yes</span>
                     </div>
@@ -81,7 +81,7 @@ <h4 class="field-title">{{ field.title || 'No title set' }}</h4>
             <div class="field-content-compact">
                 <div class="field-info">
                     <div class="field-title">{{ field.title }}</div>
-                    <div class="field-type">{{ getFieldTypeLabel(field.type) }}
+                    <div class="field-type">{{ getFieldTypeLabel(field.type, field) }}
                         <span *ngIf="field.required" class="required-badge">Required</span>
                     </div>
                 </div>

web-app/admin/src/app/admin/admin-event/admin-event-form/fields-list/fields-list.component.ts

@@ -24,6 +24,7 @@ export class FieldsListComponent {
     @Input() fields: Field[] = [];
     @Input() fieldTypes: FieldType[] = [];
     @Input() attachmentAllowedTypes: AttachmentType[] = [];
+    @Input() userFields: string[] = [];
     @Input() showDetailedView: boolean = false;
     @Output() fieldsChange = new EventEmitter<Field[]>();
 
@@ -124,9 +125,18 @@ export class FieldsListComponent {
         this.fieldsChange.emit(this.fields);
     }
 
-    getFieldTypeLabel(type: string): string {
-        const fieldType = this.fieldTypes.find(ft => ft.name === type);
-        return fieldType?.title || type;
+    getFieldTypeLabel(type: string, field?: Field): string {
+        if (field && this.isMemberField(field)) {
+            const userType = this.fieldTypes.find(ft => ft.name === 'userDropdown');
+            return userType?.title || 'User Select';
+        }
+
+        const lookupType = type === 'multiselectdropdown' ? 'dropdown' : type;
+        const fieldType = this.fieldTypes.find(ft => ft.name === lookupType);
+        if (fieldType) {
+            return fieldType.title;
+        }
+        return type === 'multiselectdropdown' ? 'Select' : type;
     }
 
     getActiveFields(): Field[] {
@@ -150,7 +160,8 @@ export class FieldsListComponent {
     }
 
     isMemberField(field: Field): boolean {
-        return field.type === 'userDropdown' || field.type === 'multiSelectUserDropdown';
+        const isExplicitUserType = field.type === 'userDropdown' || field.type === 'multiSelectUserDropdown';
+        return isExplicitUserType || this.userFields.includes(field.name || '');
     }
 
     private getNextFieldId(): number {

web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.ts

@@ -40,10 +40,16 @@ export class FieldDialogComponent {
 
         if (this.isEditMode && data.existingField) {
             this.field = JSON.parse(JSON.stringify(data.existingField));
-            if (this.field.type === 'multiselectdropdown') {
+            const originalType = this.field.type;
+
+            if (data.isMemberField) {
+                const wasMultiselect = originalType === 'multiselectdropdown' || !!this.field.multiselect;
+                this.field.type = 'userDropdown';
+                this.field.multiselect = wasMultiselect;
+            } else if (originalType === 'multiselectdropdown') {
                 this.field.type = 'dropdown';
                 this.field.multiselect = true;
-            } else if (this.field.type === 'multiSelectUserDropdown') {
+            } else if (originalType === 'multiSelectUserDropdown') {
                 this.field.type = 'userDropdown';
                 this.field.multiselect = true;
             }
@@ -64,11 +70,6 @@ export class FieldDialogComponent {
 
     onSave(): void {
         if (this.field.title) {
-            if (this.field.type === 'dropdown' && this.field.multiselect) {
-                this.field.type = 'multiselectdropdown';
-            } else if (this.field.type === 'userDropdown' && this.field.multiselect) {
-                this.field.type = 'multiSelectUserDropdown';
-            }
             this.dialogRef.close(this.field);
         }
     }

web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html

@@ -164,7 +164,8 @@ <h3 class="section-title">Fields</h3>
 
                                     <!-- Use the fields-list component -->
                                     <mage-fields-list [fields]="form.fields || []" [fieldTypes]="fieldTypes"
-                                        [attachmentAllowedTypes]="attachmentAllowedTypes" [showDetailedView]="true"
+                                        [attachmentAllowedTypes]="attachmentAllowedTypes"
+                                        [userFields]="form.userFields || []" [showDetailedView]="true"
                                         (fieldsChange)="onFieldsChange($event)">
                                     </mage-fields-list>
                                 </div>
@@ -255,10 +256,10 @@ <h4 class="subsection-title">Configured Symbology</h4>
                                         </div>
 
                                         <!-- Field Selection Controls -->
-                                        <div style="flex: 1; display: flex; flex-direction: column; gap: 1.5rem;">
-                                            <!-- Primary Field Selection -->
+                                        <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">
+                                            <!-- Field Selection -->
                                             <div class="config-section">
-                                                <h4 class="subsection-title">Primary Field</h4>
+                                                <h4 class="subsection-title">Configure Fields</h4>
 
                                                 <div class="config-inline-item">
                                                     <div class="config-inline-label">
@@ -278,14 +279,9 @@ <h4 class="subsection-title">Primary Field</h4>
                                                         </select>
                                                     </div>
                                                 </div>
-                                            </div>
-
-                                            <!-- Variant Field Selection -->
-                                            <div class="config-section"
-                                                *ngIf="form.primaryField && getDropdownFields(form.primaryField).length > 0">
-                                                <h4 class="subsection-title">Variant Field</h4>
 
-                                                <div class="config-inline-item">
+                                                <div class="config-inline-item"
+                                                    *ngIf="form.primaryField && getDropdownFields(form.primaryField).length > 0">
                                                     <div class="config-inline-label">
                                                         <strong>Variant Field</strong>
                                                         <p class="field-hint">Select a second dropdown field for
@@ -414,7 +410,7 @@ <h4 class="subsection-title">Variant Field</h4>
                                         <div class="section-icon-wrapper feed-color">
                                             <i class="fa fa-list-ul"></i>
                                         </div>
-                                        <h3 class="section-title">Feed Configuration</h3>
+                                        <h3 class="section-title">Observation Feed Configuration</h3>
                                     </div>
                                     <button class="icon-button-subtle" type="button">
                                         <i class="fa"

web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss

@@ -349,7 +349,7 @@
 }
 
 .config-section {
-    margin-bottom: 1.5rem;
+    margin-bottom: 1rem;
 
     &:last-child {
         margin-bottom: 0;
@@ -366,29 +366,20 @@
 .feed-config-inline {
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 1rem;
     margin-bottom: 2rem;
 }
 
 .config-inline-item {
     display: grid;
     grid-template-columns: 1fr 2fr;
-    gap: 2rem;
-    padding: 1.5rem;
-    background: white;
-    border: 1px solid #e5e7eb;
-    border-radius: 12px;
+    gap: 1.25rem;
     align-items: start;
-    transition: all 0.2s ease;
-
-    &:hover {
-        border-color: #d1d5db;
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    }
+    margin-bottom: 1.5rem;
 
     @media (max-width: 768px) {
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: 0.75rem;
     }
 }
 
@@ -407,9 +398,9 @@
 .config-inline-control {
     .form-input {
         flex: 1;
-        height: 44px;
-        padding: 0.625rem 2.5rem 0.625rem 1rem;
-        font-size: 0.9375rem;
+        height: 36px;
+        padding: 0.5rem 2.5rem 0.5rem 0.875rem;
+        font-size: 0.875rem;
         font-weight: 500;
         color: #1f2937;
         background-color: #ffffff;
@@ -418,7 +409,7 @@
         background-repeat: no-repeat;
         background-size: 1.25rem 1.25rem;
         border: 2px solid #e5e7eb;
-        border-radius: 8px;
+        border-radius: 6px;
         cursor: pointer;
         transition: all 0.2s ease;
         appearance: none;

web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.spec.ts

@@ -214,8 +214,19 @@ describe('FormDetailsComponent', () => {
       component.saveForm();
 
       expect(component.saving).toBe(false);
-      expect(mockEventsService.updateForm).toHaveBeenCalledWith('1', '1', component.form);
-      expect(component.form).toEqual(savedForm);
+      expect(mockEventsService.updateForm).toHaveBeenCalled();
+      const [eventId, formId, payload] = mockEventsService.updateForm.calls.mostRecent().args;
+      expect(eventId).toBe('1');
+      expect(formId).toBe('1');
+      expect(payload).toEqual(jasmine.objectContaining({
+        name: 'Test Form',
+        color: '#ff0000'
+      }));
+      expect(payload.fields).toEqual([]);
+      expect(payload.userFields).toEqual([]);
+      expect(component.form).toEqual(jasmine.objectContaining(savedForm));
+      expect(component.form.fields).toEqual([]);
+      expect(component.form.userFields).toEqual([]);
       expect(component.formDirty).toBe(false);
       expect(component.generalFormSubmitted).toBe(false);
       expect(mockSnackBar.open).toHaveBeenCalledWith('Form saved successfully', 'Close', { duration: 3000 });
@@ -268,7 +279,11 @@ describe('FormDetailsComponent', () => {
       component.archiveForm();
 
       expect(component.form.archived).toBe(true);
-      expect(mockEventsService.updateForm).toHaveBeenCalledWith('1', '1', component.form);
+      expect(mockEventsService.updateForm).toHaveBeenCalledWith(
+        '1',
+        '1',
+        jasmine.objectContaining({ archived: true })
+      );
       expect(mockSnackBar.open).toHaveBeenCalledWith('Form archived successfully', 'Close', { duration: 3000 });
     });
 
@@ -304,7 +319,11 @@ describe('FormDetailsComponent', () => {
       component.restoreForm();
 
       expect(component.form.archived).toBe(false);
-      expect(mockEventsService.updateForm).toHaveBeenCalledWith('1', '1', component.form);
+      expect(mockEventsService.updateForm).toHaveBeenCalledWith(
+        '1',
+        '1',
+        jasmine.objectContaining({ archived: false })
+      );
       expect(mockSnackBar.open).toHaveBeenCalledWith('Form restored successfully', 'Close', { duration: 3000 });
     });