fix fields styling and condense

Author: ryanslatten

web-app/admin/src/app/admin/admin-event/_shared-event-styles.scss

@@ -1,6 +1,5 @@
-<!-- Detailed View (for edit form) -->
 <div *ngIf="showDetailedView" class="fields-list-detailed">
-    <mage-draggable-list [items]="getActiveFields()" [enableDragDrop]="enableDragDrop"
+    <mage-draggable-list [items]="getActiveFields()" [enableDragDrop]="true"
         [emptyMessage]="'No fields have been added yet.'" [emptyIcon]="'fa-file-text fa-3x'"
         [trackByFunction]="trackByFieldId" (itemsChange)="onItemsReordered($event)">
 
@@ -58,30 +57,29 @@ <h4 class="field-title">{{ field.title || 'No title set' }}</h4>
                 matTooltipPosition="above">
                 <mat-icon>edit</mat-icon>
             </button>
-            <button mat-icon-button (click)="$event.stopPropagation(); removeField(field)" matTooltip="Delete field"
+            <button mat-icon-button (click)="$event.stopPropagation(); removeField(field)"
+                [disabled]="!canRemoveField()"
+                [matTooltip]="canRemoveField() ? 'Delete field' : 'Cannot delete last field'"
                 matTooltipPosition="above">
                 <mat-icon>delete</mat-icon>
             </button>
         </ng-template>
     </mage-draggable-list>
 
     <div class="section-save-actions">
-        <button class="action-button btn-primary" (click)="addField()">
-            <i class="fa fa-plus"></i> Add Field
+        <button type="button" class="action-button btn-primary" (click)="addField()">
+            <i class="fa fa-plus"></i>
+            Add Field
         </button>
     </div>
 </div>
 
-<!-- Compact View (for create form) -->
 <div *ngIf="!showDetailedView" class="fields-list-compact">
-    <mage-draggable-list [items]="getActiveFields()" [enableDragDrop]="false" [emptyMessage]="'No fields added yet'"
+    <mage-draggable-list [items]="getActiveFields()" [enableDragDrop]="true" [emptyMessage]="'No fields added yet'"
         [emptyIcon]="'fa-inbox'" [trackByFunction]="trackByFieldId" (itemsChange)="onItemsReordered($event)">
 
         <ng-template #itemTemplate let-field>
             <div class="field-content-compact">
-                <div class="field-icon">
-                    <i class="fa fa-bars"></i>
-                </div>
                 <div class="field-info">
                     <div class="field-title">{{ field.title }}</div>
                     <div class="field-type">{{ getFieldTypeLabel(field.type) }}
@@ -92,9 +90,15 @@ <h4 class="field-title">{{ field.title || 'No title set' }}</h4>
         </ng-template>
 
         <ng-template #itemActionsTemplate let-field>
-            <button type="button" class="icon-button delete-button"
-                (click)="$event.stopPropagation(); removeField(field)" title="Remove field">
-                <i class="fa fa-trash"></i>
+            <button mat-icon-button (click)="$event.stopPropagation(); editField(field)" matTooltip="Edit field"
+                matTooltipPosition="above">
+                <mat-icon>edit</mat-icon>
+            </button>
+            <button mat-icon-button (click)="$event.stopPropagation(); removeField(field)"
+                [disabled]="!canRemoveField()"
+                [matTooltip]="canRemoveField() ? 'Delete field' : 'Cannot delete last field'"
+                matTooltipPosition="above">
+                <mat-icon>delete</mat-icon>
             </button>
         </ng-template>
     </mage-draggable-list>

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

@@ -1,5 +1,7 @@
-// Detailed View Styles (for edit form)
-.fields-list-detailed {
+@import '../../shared-event-styles';
+
+.fields-list-detailed,
+::ng-deep .cdk-drag-preview {
     .field-content-detailed {
         flex: 1;
         min-width: 0;
@@ -49,55 +51,47 @@
         color: #333;
         font-weight: 500;
     }
+}
 
+.fields-list-detailed {
     .add-field-button-container {
         display: flex;
         justify-content: flex-start;
         margin-top: 1.5rem;
     }
 
-    .action-button {
-        padding: 0.625rem 1.25rem;
-        font-size: 0.875rem;
-        font-weight: 500;
-        border: none;
-        border-radius: 4px;
-        cursor: pointer;
-        transition: background-color 0.2s;
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
+    .drag-handle {
+        cursor: move;
+        color: #9e9e9e;
+        margin-right: 8px;
 
-        &.btn-primary {
-            background-color: #1976d2;
-            color: white;
-
-            &:hover {
-                background-color: #1565c0;
-            }
-        }
-
-        i {
-            font-size: 0.875rem;
+        &:hover {
+            color: #616161;
         }
     }
 
-    .section-save-actions {
+    .form-actions {
         display: flex;
-        justify-content: flex-end;
-        gap: 0.75rem;
-        margin-top: 1.5rem;
-        padding-top: 1.5rem;
-        border-top: 1px solid #e5e7eb;
+        gap: 8px;
+        align-items: center;
+
+        button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            mat-icon {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                margin: 0;
+            }
+        }
     }
 }
 
-// Compact View Styles (for create form)
-.fields-list-compact {
-    display: flex;
-    flex-direction: column;
-    gap: 1.25rem;
-
+.fields-list-compact,
+::ng-deep .cdk-drag-preview {
     .field-content-compact {
         display: flex;
         align-items: center;
@@ -140,34 +134,12 @@
         font-weight: 500;
         text-transform: uppercase;
     }
+}
 
-    .icon-button {
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 0.5rem;
-        color: #757575;
-        transition: color 0.2s;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-            color: #333;
-        }
-
-        &.delete-button {
-            color: #f44336;
-
-            &:hover {
-                color: #d32f2f;
-            }
-        }
-
-        i {
-            font-size: 1rem;
-        }
-    }
+.fields-list-compact {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
 
     .add-field-button {
         align-self: flex-start;

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

@@ -29,7 +29,6 @@ export class FieldsListComponent {
     @Input() fields: Field[] = [];
     @Input() fieldTypes: FieldType[] = [];
     @Input() attachmentAllowedTypes: AttachmentType[] = [];
-    @Input() enableDragDrop: boolean = false;
     @Input() showDetailedView: boolean = false;
     @Output() fieldsChange = new EventEmitter<Field[]>();
 
@@ -85,22 +84,26 @@ export class FieldsListComponent {
     }
 
     /**
-     * Removes a field from the list
+     * Removes a field from the list (permanently deletes)
      */
     removeField(field: Field): void {
-        if (this.enableDragDrop) {
-            // For edit mode, mark as archived instead of removing
-            field.archived = true;
-        } else {
-            // For create mode, actually remove from array
-            const index = this.fields.findIndex(f => f.id === field.id);
-            if (index !== -1) {
-                this.fields.splice(index, 1);
-            }
+        if (!this.canRemoveField()) {
+            return;
+        }
+        const index = this.fields.findIndex(f => f.id === field.id);
+        if (index !== -1) {
+            this.fields.splice(index, 1);
         }
         this.fieldsChange.emit(this.fields);
     }
 
+    /**
+     * Checks if a field can be removed (must have at least one active field)
+     */
+    canRemoveField(): boolean {
+        return this.showDetailedView && this.getActiveFields().length > 1;
+    }
+
     /**
      * Moves a field up in the list
      */

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

@@ -1,3 +1,5 @@
+@import '../../../shared-event-styles';
+
 ::ng-deep .add-field-dialog {
     .mat-mdc-dialog-container {
         --mdc-dialog-container-color: #ffffff;

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

@@ -125,7 +125,7 @@ <h3 class="section-title">Fields</h3>
 
                                     <!-- Use the fields-list component -->
                                     <mage-fields-list [fields]="form.fields || []" [fieldTypes]="fieldTypes"
-                                        [attachmentAllowedTypes]="attachmentAllowedTypes" [enableDragDrop]="true"
+                                        [attachmentAllowedTypes]="attachmentAllowedTypes"
                                         [showDetailedView]="true" (fieldsChange)="onFieldsChange($event)">
                                     </mage-fields-list>
                                 </div>