MBS-12230: Update date parser when date changes

This makes it so that the date parser and the parsed date are kept
in sync, so it is easier to edit and copy the dates.

Author: reosarevok

root/static/scripts/alias/AliasEditForm.js

@@ -17,6 +17,7 @@ import isBlank from '../common/utility/isBlank.js';
 import DateRangeFieldset, {
   type ActionT as DateRangeFieldsetActionT,
   runReducer as runDateRangeFieldsetReducer,
+  setInitialStateOnForm as setInitialDateRangeFieldsetStateOnForm,
 } from '../edit/components/DateRangeFieldset.js';
 import EnterEdit from '../edit/components/EnterEdit.js';
 import EnterEditNote from '../edit/components/EnterEditNote.js';
@@ -96,7 +97,7 @@ const blankDatePeriod = {
 
 function createInitialState(form: AliasEditFormT, searchHintType: number) {
   return {
-    form,
+    form: setInitialDateRangeFieldsetStateOnForm(form),
     guessCaseOptions: createGuessCaseOptionsState(),
     isEnded: form.field.period.field.ended.value,
     isGuessCaseOptionsOpen: false,

root/static/scripts/common/utility/formatDate.js

@@ -11,30 +11,34 @@ import ko from 'knockout';
 
 import {fixedWidthInteger} from './strings.js';
 
-function formatDate(date: ?PartialDateT): string {
+function formatDate(date: ?{
+  +day?: ?StrOrNum,
+  +month?: ?StrOrNum,
+  +year?: ?StrOrNum,
+}): string {
   if (!date) {
     return '';
   }
 
-  const y: number | null = ko.unwrap(date.year ?? null);
-  const m: number | null = ko.unwrap(date.month ?? null);
-  const d: number | null = ko.unwrap(date.day ?? null);
+  const y: StrOrNum | null = ko.unwrap(date.year ?? null);
+  const m: StrOrNum | null = ko.unwrap(date.month ?? null);
+  const d: StrOrNum | null = ko.unwrap(date.day ?? null);
 
   let result = '';
 
   if (nonEmpty(y)) {
     result += fixedWidthInteger(y, 4);
-  } else if (m != null || d != null) {
+  } else if (nonEmpty(m) || nonEmpty(d)) {
     result = '????';
   }
 
-  if (m != null) {
+  if (nonEmpty(m)) {
     result += '-' + fixedWidthInteger(m, 2);
-  } else if (d != null) {
+  } else if (nonEmpty(d)) {
     result += '-??';
   }
 
-  if (d != null) {
+  if (nonEmpty(d)) {
     result += '-' + fixedWidthInteger(d, 2);
   }
 

root/static/scripts/edit/components/DateRangeFieldset.js

@@ -22,6 +22,9 @@ import FormRowPartialDate, {
   type ActionT as FormRowPartialDateActionT,
   runReducer as runFormRowPartialDateReducer,
 } from './FormRowPartialDate.js';
+import {
+  createInitialState as createPartialDateInputState,
+} from './PartialDateInput.js';
 
 /* eslint-disable ft-flow/sort-keys */
 export type ActionT =
@@ -33,6 +36,11 @@ export type ActionT =
 
 export type StateT = DatePeriodFieldT;
 
+type FormWithDateRangeT = FormT<{
+  +period: DatePeriodFieldT,
+  ...
+}>;
+
 export function partialDateFromField(
   compoundField: PartialDateFieldT,
 ): PartialDateT {
@@ -44,6 +52,26 @@ export function partialDateFromField(
   };
 }
 
+export function setInitialStateOnForm<T: FormWithDateRangeT>(form: T): T {
+  const formCtx = mutate(form);
+  // $FlowIssue[incompatible-call]
+  const periodCtx = formCtx.get('field', 'period');
+  periodCtx.set(createInitialState(periodCtx.read()));
+  return formCtx.final();
+}
+
+
+export function createInitialState(
+  field: StateT,
+): StateT {
+  const fieldCtx = mutate(field);
+  const beginDateField = fieldCtx.get('field', 'begin_date');
+  beginDateField.set(createPartialDateInputState(beginDateField.read()));
+  const endDateField = fieldCtx.get('field', 'end_date');
+  endDateField.set(createPartialDateInputState(endDateField.read()));
+  return fieldCtx.final();
+}
+
 function validateDatePeriod(stateCtx: CowContext<StateT>) {
   const state = stateCtx.read();
   const beginDateField = state.field.begin_date;

root/static/scripts/edit/components/ExternalLinkAttributeDialog.js

@@ -30,6 +30,7 @@ import DateRangeFieldset, {
   partialDateFromField,
   runReducer as runDateRangeFieldsetReducer,
 } from './DateRangeFieldset.js';
+import {formatParserDate} from './PartialDateInput.js';
 import UrlRelationshipCreditFieldset
   from './UrlRelationshipCreditFieldset.js';
 
@@ -66,25 +67,35 @@ const createInitialState = (
       : null,
   );
 
+  const beginDateField = createCompoundFieldFromObject(
+    'period.begin_date',
+    {
+      day: beginDate?.day ?? null,
+      month: beginDate?.month ?? null,
+      year: beginDate?.year ?? null,
+    },
+  );
+
+  const endDateField = createCompoundFieldFromObject(
+    'period.end_date',
+    {
+      day: endDate?.day ?? null,
+      month: endDate?.month ?? null,
+      year: endDate?.year ?? null,
+    },
+  );
+
   const datePeriodField = {
     errors: [],
     field: {
-      begin_date: createCompoundFieldFromObject(
-        'period.begin_date',
-        {
-          day: beginDate?.day ?? null,
-          month: beginDate?.month ?? null,
-          year: beginDate?.year ?? null,
-        },
-      ),
-      end_date: createCompoundFieldFromObject(
-        'period.end_date',
-        {
-          day: endDate?.day ?? null,
-          month: endDate?.month ?? null,
-          year: endDate?.year ?? null,
-        },
-      ),
+      begin_date: {
+        ...beginDateField,
+        formattedDate: formatParserDate(beginDateField),
+      },
+      end_date: {
+        ...endDateField,
+        formattedDate: formatParserDate(endDateField),
+      },
       ended: createField('period.ended', relationship.ended),
     },
     has_errors: false,

root/static/scripts/edit/components/PartialDateInput.js

@@ -9,6 +9,7 @@
 
 import type {CowContext} from 'mutate-cow';
 
+import formatDate from '../../common/utility/formatDate.js';
 import parseNaturalDate from '../../common/utility/parseNaturalDate.js';
 import {isDateValid, isYearFourDigits} from '../utility/dates.js';
 import {applyPendingErrors} from '../utility/subfieldErrors.js';
@@ -17,12 +18,9 @@ import {applyPendingErrors} from '../utility/subfieldErrors.js';
 export type ActionT =
   | {
       +type: 'set-date',
-      +date: {
-        +year?: string,
-        +month?: string,
-        +day?: string,
-      },
+      +date: PartialDateStringsT,
     }
+  | {+type: 'set-parsed-date', +date: string}
   | {+type: 'show-pending-errors'};
 /* eslint-enable ft-flow/sort-keys */
 
@@ -32,6 +30,39 @@ type ControlledPropsT =
 
 export type StateT = PartialDateFieldT;
 
+export function createInitialState(
+  date: StateT,
+): StateT {
+  return {
+    ...date,
+    formattedDate: formatParserDate(date),
+  };
+}
+
+export function formatParserDate(date: StateT): string {
+  return formatDate({
+    day: date.field.day.value,
+    month: date.field.month.value,
+    year: date.field.year.value,
+  });
+}
+
+function updateDate(dateCtx: CowContext<StateT>, date: PartialDateStringsT) {
+  const newYear = date.year;
+  const newMonth = date.month;
+  const newDay = date.day;
+  if (newYear != null) {
+    dateCtx.set('field', 'year', 'value', newYear);
+  }
+  if (newMonth != null) {
+    dateCtx.set('field', 'month', 'value', newMonth);
+  }
+  if (newDay != null) {
+    dateCtx.set('field', 'day', 'value', newDay);
+  }
+  validateDate(dateCtx);
+}
+
 function validateDate(dateCtx: CowContext<StateT>) {
   const date = dateCtx.read();
   const year = String(date.field.year.value ?? '');
@@ -66,20 +97,20 @@ export function runReducer(
       applyPendingErrors(state);
       break;
     }
+    case 'set-parsed-date': {
+      const date = parseNaturalDate(action.date);
+      updateDate(state, date);
+      state.set('formattedDate', action.date);
+      break;
+    }
     case 'set-date': {
-      const newYear = action.date.year;
-      const newMonth = action.date.month;
-      const newDay = action.date.day;
-      if (newYear != null) {
-        state.set('field', 'year', 'value', newYear);
+      updateDate(state, action.date);
+      const formattedDate = formatParserDate(state.read());
+      if (nonEmpty(formattedDate)) {
+        state.set('formattedDate', formatParserDate(state.read()));
+      } else {
+        state.set('formattedDate', formatParserDate(state.read()));
       }
-      if (newMonth != null) {
-        state.set('field', 'month', 'value', newMonth);
-      }
-      if (newDay != null) {
-        state.set('field', 'day', 'value', newDay);
-      }
-      validateDate(state);
       break;
     }
   }
@@ -95,6 +126,7 @@ type DatePartPropsT = {
 type DateParserPropsT = {
   onBlur?: () => void,
   onChange?: (SyntheticEvent<HTMLInputElement>) => void,
+  value?: string,
 };
 
 component PartialDateInput(
@@ -147,16 +179,16 @@ component PartialDateInput(
     );
 
     parserProps.onChange = (event) => {
-      const date = parseNaturalDate(event.currentTarget.value);
       controlledProps.dispatch({
-        date,
-        type: 'set-date',
+        date: event.currentTarget.value,
+        type: 'set-parsed-date',
       });
     };
 
     yearProps.value = field.field.year.value ?? '';
     monthProps.value = field.field.month.value ?? '';
     dayProps.value = field.field.day.value ?? '';
+    parserProps.value = field.formattedDate ?? '';
   }
 
   return (

root/static/scripts/event/components/EventEditForm.js

@@ -18,6 +18,7 @@ import isBlank from '../../common/utility/isBlank.js';
 import DateRangeFieldset, {
   type ActionT as DateRangeFieldsetActionT,
   runReducer as runDateRangeFieldsetReducer,
+  setInitialStateOnForm as setInitialDateRangeFieldsetStateOnForm,
 } from '../../edit/components/DateRangeFieldset.js';
 import EnterEdit from '../../edit/components/EnterEdit.js';
 import EnterEditNote from '../../edit/components/EnterEditNote.js';
@@ -67,7 +68,7 @@ type StateT = {
 
 function createInitialState(form: EventFormT) {
   return {
-    form,
+    form: setInitialDateRangeFieldsetStateOnForm(form),
     guessCaseOptions: createGuessCaseOptionsState(),
     isGuessCaseOptionsOpen: false,
     showTypeBubble: false,