refactor: DF-380 - Add component dot getDisplayStringFromFormValue & …

src/server/plugins/engine/components/CheckboxesField.ts

@@ -65,22 +65,19 @@ export class CheckboxesField extends SelectionControlField {
     return this.isValue(value) ? value : undefined
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
+  getDisplayStringFromFormValue(selected: (string | number | boolean)[]) {
     const { items } = this
 
-    // Selected checkbox values
-    const selected = this.getFormValueFromState(state) ?? []
-
     // Map selected values to text
     return items
       .filter((item) => selected.includes(item.value))
       .map((item) => item.text)
       .join(', ')
   }
 
-  getContextValueFromState(state: FormSubmissionState) {
-    const values = this.getFormValueFromState(state)
-
+  getContextValueFromFormValue(
+    values: (string | number | boolean)[] | undefined
+  ): (string | number | boolean)[] {
     /**
      * For evaluation context purposes, optional {@link CheckboxesField}
      * with an undefined value (i.e. nothing selected) should default to [].
@@ -95,6 +92,20 @@ export class CheckboxesField extends SelectionControlField {
     return values ?? []
   }
 
+  getDisplayStringFromState(state: FormSubmissionState) {
+    // Selected checkbox values
+    const selected = this.getFormValueFromState(state) ?? []
+
+    // Map selected values to text
+    return this.getDisplayStringFromFormValue(selected)
+  }
+
+  getContextValueFromState(state: FormSubmissionState) {
+    const values = this.getFormValueFromState(state)
+
+    return this.getContextValueFromFormValue(values)
+  }
+
   isValue(value?: FormStateValue | FormState): value is Item['value'][] {
     if (!Array.isArray(value)) {
       return false

src/server/plugins/engine/components/DatePartsField.ts

@@ -109,19 +109,24 @@ export class DatePartsField extends FormComponent {
     return this.isState(value) ? value : undefined
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
-    const value = this.getFormValueFromState(state)
-
-    if (!value) {
+  getDisplayStringFromFormValue(formValue: DatePartsState | undefined) {
+    if (!formValue) {
       return ''
     }
 
-    return format(`${value.year}-${value.month}-${value.day}`, 'd MMMM yyyy')
+    return format(
+      `${formValue.year}-${formValue.month}-${formValue.day}`,
+      'd MMMM yyyy'
+    )
   }
 
-  getContextValueFromState(state: FormSubmissionState) {
+  getDisplayStringFromState(state: FormSubmissionState) {
     const value = this.getFormValueFromState(state)
 
+    return this.getDisplayStringFromFormValue(value)
+  }
+
+  getContextValueFromFormValue(value: DatePartsState | undefined) {
     if (
       !value ||
       !isValid(
@@ -139,6 +144,12 @@ export class DatePartsField extends FormComponent {
     return format(`${value.year}-${value.month}-${value.day}`, 'yyyy-MM-dd')
   }
 
+  getContextValueFromState(state: FormSubmissionState) {
+    const value = this.getFormValueFromState(state)
+
+    return this.getContextValueFromFormValue(value)
+  }
+
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
     const { collection, name } = this
 

src/server/plugins/engine/components/FileUploadField.ts

@@ -149,8 +149,7 @@ export class FileUploadField extends FormComponent {
     return this.isValue(value) ? value : undefined
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
-    const files = this.getFormValueFromState(state)
+  getDisplayStringFromFormValue(files: FileState[] | undefined): string {
     if (!files?.length) {
       return ''
     }
@@ -159,11 +158,23 @@ export class FileUploadField extends FormComponent {
     return `Uploaded ${files.length} ${unit}`
   }
 
-  getContextValueFromState(state: FormSubmissionState) {
+  getDisplayStringFromState(state: FormSubmissionState) {
     const files = this.getFormValueFromState(state)
+
+    return this.getDisplayStringFromFormValue(files)
+  }
+
+  getContextValueFromFormValue(
+    files: UploadState | undefined
+  ): string[] | null {
     return files?.map(({ status }) => status.form.file.fileId) ?? null
   }
 
+  getContextValueFromState(state: FormSubmissionState) {
+    const files = this.getFormValueFromState(state)
+    return this.getContextValueFromFormValue(files)
+  }
+
   getViewModel(
     payload: FormPayload,
     errors?: FormSubmissionError[],

src/server/plugins/engine/components/FormComponent.ts

@@ -157,17 +157,21 @@ export class FormComponent extends ComponentBase {
     }
   }
 
-  getDisplayStringFromState(state: FormSubmissionState): string {
-    const value = this.getFormValueFromState(state)
+  getDisplayStringFromFormValue(value: FormValue | FormPayload): string {
+    // Map selected values to text
     // eslint-disable-next-line @typescript-eslint/no-base-to-string
     return this.isValue(value) ? value.toString() : ''
   }
 
-  getContextValueFromState(
-    state: FormSubmissionState
-  ): Item['value'] | Item['value'][] | null {
+  getDisplayStringFromState(state: FormSubmissionState): string {
     const value = this.getFormValueFromState(state)
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    return this.getDisplayStringFromFormValue(value)
+  }
 
+  getContextValueFromFormValue(
+    value: FormValue | FormPayload
+  ): Item['value'] | Item['value'][] | null {
     // Filter object field values
     if (this.isState(value)) {
       const values = Object.values(value).filter(isFormValue)
@@ -182,6 +186,14 @@ export class FormComponent extends ComponentBase {
     return this.isValue(value) ? value : null
   }
 
+  getContextValueFromState(
+    state: FormSubmissionState
+  ): Item['value'] | Item['value'][] | null {
+    const value = this.getFormValueFromState(state)
+
+    return this.getContextValueFromFormValue(value)
+  }
+
   isValue(
     value?: FormStateValue | FormState
   ): value is NonNullable<FormStateValue> {

src/server/plugins/engine/components/ListFormComponent.ts

@@ -99,11 +99,11 @@ export class ListFormComponent extends FormComponent {
     return selected.at(0)?.value
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
+  getDisplayStringFromFormValue(
+    value: string | number | boolean | Item['value'][] | undefined
+  ): string {
     const { items } = this
 
-    // Allow for array values via subclass
-    const value = this.getFormValueFromState(state)
     const values = [value ?? []].flat()
 
     return items
@@ -112,6 +112,13 @@ export class ListFormComponent extends FormComponent {
       .join(', ')
   }
 
+  getDisplayStringFromState(state: FormSubmissionState) {
+    // Allow for array values via subclass
+    const value = this.getFormValueFromState(state)
+
+    return this.getDisplayStringFromFormValue(value)
+  }
+
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
     const { items: listItems } = this
 

src/server/plugins/engine/components/MonthYearField.ts

@@ -103,9 +103,7 @@ export class MonthYearField extends FormComponent {
     return MonthYearField.isMonthYear(value) ? value : undefined
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
-    const value = this.getFormValueFromState(state)
-
+  getDisplayStringFromFormValue(value: MonthYearState | undefined): string {
     if (!value) {
       return ''
     }
@@ -117,9 +115,15 @@ export class MonthYearField extends FormComponent {
     return `${monthString} ${value.year}`
   }
 
-  getContextValueFromState(state: FormSubmissionState) {
+  getDisplayStringFromState(state: FormSubmissionState) {
     const value = this.getFormValueFromState(state)
 
+    return this.getDisplayStringFromFormValue(value)
+  }
+
+  getContextValueFromFormValue(
+    value: MonthYearState | undefined
+  ): string | null {
     if (
       !value ||
       !isValid(
@@ -137,6 +141,12 @@ export class MonthYearField extends FormComponent {
     return format(`${value.year}-${value.month}-01`, 'yyyy-MM')
   }
 
+  getContextValueFromState(state: FormSubmissionState) {
+    const value = this.getFormValueFromState(state)
+
+    return this.getContextValueFromFormValue(value)
+  }
+
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
     const { collection, name } = this
 

src/server/plugins/engine/components/UkAddressField.ts

@@ -110,18 +110,28 @@ export class UkAddressField extends FormComponent {
     return this.isState(value) ? value : undefined
   }
 
-  getDisplayStringFromState(state: FormSubmissionState) {
-    return this.getContextValueFromState(state)?.join(', ') ?? ''
+  getContextValueFromFormValue(value: UkAddressState | undefined) {
+    if (!value) {
+      return null
+    }
+
+    return Object.values(value).filter(Boolean)
   }
 
   getContextValueFromState(state: FormSubmissionState) {
     const value = this.getFormValueFromState(state)
 
-    if (!value) {
-      return null
-    }
+    return this.getContextValueFromFormValue(value)
+  }
 
-    return Object.values(value).filter(Boolean)
+  getDisplayStringFromFormValue(value: UkAddressState | undefined): string {
+    return this.getContextValueFromFormValue(value)?.join(', ') ?? ''
+  }
+
+  getDisplayStringFromState(state: FormSubmissionState) {
+    const value = this.getFormValueFromState(state)
+
+    return this.getDisplayStringFromFormValue(value)
   }
 
   /**