feat: Admin Area General Settings and Categories 1.07

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

@@ -11,6 +11,7 @@ import {
   deriveEventState,
   endAfterStartValidator,
   endBeforeStartMessage,
+  eventEndFieldMessage,
   isoDatetimeValidator,
   normalizePageTitle,
   pageTitleMessage,
@@ -114,17 +115,12 @@ import {
                 type="datetime-local"
                 formControlName="eventEndUtc"
                 data-testid="general-eventEnd"
-                [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)"
+                [attr.aria-invalid]="eventEndFieldMessageText() ? 'true' : null"
+                [attr.aria-describedby]="eventEndFieldMessageText() ? 'general-eventEnd-error' : null"
+                [attr.title]="eventEndFieldMessageText()"
               />
-              @if (showEventEndError()) {
-                <div class="field-error" id="general-eventEnd-error" data-testid="general-eventEnd-error">{{ eventEndMessage() }}</div>
-              }
-              @if (eventEndCrossFieldError()) {
-                <div class="field-error" id="general-endBeforeStart" data-testid="general-endBeforeStart">{{ endBeforeStartMessage }}</div>
+              @if (eventEndFieldMessageText(); as msg) {
+                <div class="field-error" id="general-eventEnd-error" data-testid="general-eventEnd-error">{{ msg }}</div>
               }
             </div>
 
@@ -260,9 +256,11 @@ export class AdminGeneralComponent implements OnInit {
     datetimeMessage('Event end', this.eventEndValue(), this.form.controls.eventEndUtc.errors),
   );
 
-  readonly eventEndCrossFieldError = computed(
-    () => !!this.form.errors?.['endBeforeStart'],
-  );
+  readonly eventEndFieldMessageText = computed(() => {
+    const fieldErrs = this.eventEndTouchedOrDirty() ? this.form.controls.eventEndUtc.errors : null;
+    const crossErrs = this.form.errors;
+    return eventEndFieldMessage(fieldErrs, crossErrs);
+  });
 
   constructor() {
     this.form.controls.welcomeMarkdown.valueChanges

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

@@ -87,3 +87,16 @@ export function datetimeMessage(
 }
 
 export const endBeforeStartMessage = 'Event end must be after event start.';
+
+export function eventEndFieldMessage(
+  controlErrors: { [key: string]: unknown } | null | undefined,
+  crossFieldErrors: { [key: string]: unknown } | null | undefined,
+): string | null {
+  if (controlErrors?.['invalidDatetime']) {
+    return 'Event end must be a valid ISO-8601 datetime.';
+  }
+  if (crossFieldErrors?.['endBeforeStart']) {
+    return endBeforeStartMessage;
+  }
+  return null;
+}