feat: Admin Area General Settings and Categories 1.06

frontend/src/app/features/admin/general.component.ts

@@ -10,6 +10,7 @@ import {
   datetimeMessage,
   deriveEventState,
   endAfterStartValidator,
+  endBeforeStartMessage,
   isoDatetimeValidator,
   normalizePageTitle,
   pageTitleMessage,
@@ -113,14 +114,17 @@ import {
                 type="datetime-local"
                 formControlName="eventEndUtc"
                 data-testid="general-eventEnd"
-                [attr.aria-invalid]="showEventEndError() || (form.controls.eventEndUtc.touched && !!form.error?.['endBeforeStart']) ? 'true' : null"
-                [attr.aria-describedby]="(showEventEndError() || (form.controls.eventEndUtc.touched && !!form.error?.['endBeforeStart'])) ? 'general-eventEnd-error general-endBeforeStart' : null"
+                [attr.aria-invalid]="showEventEndError() || eventEndCrossFieldError() ? 'true' : null"
+                [attr.aria-describedby]="(showEventEndError() || eventEndCrossFieldError())
+                  ? 'general-eventEnd-error general-endBeforeStart'
+                  : null"
+                [attr.title]="(showEventEndError() ? eventEndMessage() : eventEndCrossFieldError() ? endBeforeStartMessage : null)"
               />
               @if (showEventEndError()) {
                 <div class="field-error" id="general-eventEnd-error" data-testid="general-eventEnd-error">{{ eventEndMessage() }}</div>
               }
-              @if (form.controls.eventEndUtc.touched && form.error?.['endBeforeStart']) {
-                <div class="field-error" id="general-endBeforeStart" data-testid="general-endBeforeStart">Event end must be after event start.</div>
+              @if (eventEndCrossFieldError()) {
+                <div class="field-error" id="general-endBeforeStart" data-testid="general-endBeforeStart">{{ endBeforeStartMessage }}</div>
               }
             </div>
 
@@ -256,6 +260,10 @@ export class AdminGeneralComponent implements OnInit {
     datetimeMessage('Event end', this.eventEndValue(), this.form.controls.eventEndUtc.errors),
   );
 
+  readonly eventEndCrossFieldError = computed(
+    () => !!this.form.errors?.['endBeforeStart'],
+  );
+
   constructor() {
     this.form.controls.welcomeMarkdown.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef))

frontend/src/app/features/admin/general.pure.ts

@@ -67,7 +67,6 @@ export function toIsoUtc(local: string): string {
 
 export function isoDatetimeValidator(ctrl: { value: string | null | undefined }): { invalidDatetime: true } | null {
   const v = ctrl?.value ?? '';
-  if (v === '') return null;
   const t = Date.parse(v);
   return Number.isFinite(t) ? null : { invalidDatetime: true };
 }
@@ -81,8 +80,10 @@ export function datetimeMessage(
     return `${fieldLabel} must be a valid ISO-8601 datetime.`;
   }
   const v = value ?? '';
-  if (v !== '' && !Number.isFinite(Date.parse(v))) {
+  if (!Number.isFinite(Date.parse(v))) {
     return `${fieldLabel} must be a valid ISO-8601 datetime.`;
   }
   return null;
 }
+
+export const endBeforeStartMessage = 'Event end must be after event start.';