feat(application-system): Add clear on change (#17452)

* Add shared clearing handler * Add clearOnChange support to fieldbuilders and types * Add clearOnChange support to controllers * Add clearOnChange support to formfields * Cleanup * Add demonstration to example application * Add extra info
island-is · Jan 10, 2025 · 1364f19 · 1364f19
1 parent 1a3606f
commit 1364f19
Show file tree

Hide file tree

Showing 27 changed files with 260 additions and 4 deletions.
diff --git a/libs/application/core/src/lib/fieldBuilders.ts b/libs/application/core/src/lib/fieldBuilders.ts
@@ -76,6 +76,7 @@ const extractCommonFields = (
     nextButtonText,
     marginBottom,
     marginTop,
+    clearOnChange,
   } = data
 
   return {
@@ -91,6 +92,7 @@ const extractCommonFields = (
     nextButtonText,
     marginBottom,
     marginTop,
+    clearOnChange,
   }
 }
 

diff --git a/.../reference-template/src/forms/exampleForm/commonActionsSection/clearOnChangeSubsection.ts b/.../reference-template/src/forms/exampleForm/commonActionsSection/clearOnChangeSubsection.ts
@@ -0,0 +1,124 @@
+import {
+  buildAsyncSelectField,
+  buildCheckboxField,
+  buildDateField,
+  buildDescriptionField,
+  buildDividerField,
+  buildMultiField,
+  buildNationalIdWithNameField,
+  buildPhoneField,
+  buildRadioField,
+  buildSelectField,
+  buildSubSection,
+  buildTextField,
+} from '@island.is/application/core'
+import { FriggSchoolsByMunicipality } from '../../../utils/types'
+import { friggSchoolsByMunicipalityQuery } from '../../../graphql/sampleQuery'
+
+export const clearOnChangeSubsection = buildSubSection({
+  id: 'clearOnChangeSubsection',
+  title: 'Clear on change',
+  children: [
+    buildMultiField({
+      id: 'clearOnChangeMultiField',
+      title: 'Clear on change',
+      children: [
+        buildDescriptionField({
+          id: 'descriptionField',
+          title: '',
+          description: `Clear on change allows a field to clear other fields when its value or selection changes. 
+            Below are some examples of fields that will clear the bottom field when changed. 
+            Note that the fields that are cleared can be anywhere in the application, not just on the same screen.`,
+        }),
+        buildDescriptionField({
+          id: 'descriptionField2',
+          title: '',
+          description: `To try it out simply enter some text in the bottom text field 
+          and change the selections in any of the other fields.`,
+        }),
+        buildAsyncSelectField({
+          id: 'asyncSelectField',
+          title: 'Async Select',
+          loadingError: 'Loading error',
+          clearOnChange: ['clearableTextField'],
+          loadOptions: async ({ apolloClient }) => {
+            const { data } =
+              await apolloClient.query<FriggSchoolsByMunicipality>({
+                query: friggSchoolsByMunicipalityQuery,
+              })
+
+            return (
+              data?.friggSchoolsByMunicipality?.map((municipality) => ({
+                value: municipality.name,
+                label: municipality.name,
+              })) ?? []
+            )
+          },
+        }),
+
+        buildSelectField({
+          id: 'selectField',
+          title: 'Select',
+          clearOnChange: ['clearableTextField'],
+          options: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+          ],
+        }),
+
+        buildPhoneField({
+          id: 'phoneField',
+          title: 'Phone Field',
+          clearOnChange: ['clearableTextField'],
+        }),
+
+        buildDateField({
+          id: 'dateField',
+          title: 'Date Field',
+          clearOnChange: ['clearableTextField'],
+        }),
+
+        buildTextField({
+          id: 'textField',
+          title: 'Text Field',
+          clearOnChange: ['clearableTextField'],
+        }),
+
+        buildRadioField({
+          id: 'radioField',
+          title: 'Radio Field',
+          clearOnChange: ['clearableTextField'],
+          options: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+          ],
+        }),
+
+        buildCheckboxField({
+          id: 'checkboxField',
+          title: 'Checkbox Field',
+          marginTop: 2,
+          clearOnChange: ['clearableTextField'],
+          options: [
+            { value: 'option1', label: 'Option 1' },
+            { value: 'option2', label: 'Option 2' },
+          ],
+        }),
+
+        buildNationalIdWithNameField({
+          id: 'nationalIdWithNameField',
+          title: 'NationalId With Name Field',
+          clearOnChange: ['clearableTextField'],
+        }),
+
+        buildDividerField({}),
+
+        buildTextField({
+          id: 'clearableTextField',
+          title: 'Clearable TextField',
+          placeholder: 'Text entered here will be cleared',
+        }),
+      ],
+    }),
+  ],
+})
diff --git a/...lication/templates/reference-template/src/forms/exampleForm/commonActionsSection/index.ts b/...lication/templates/reference-template/src/forms/exampleForm/commonActionsSection/index.ts
@@ -3,13 +3,15 @@ import { conditionsSubsection } from './conditionsSubsection'
 import { conditions2Subsection } from './conditions2Subsection'
 import { getDataFromExternalDataSubsection } from './getDataFromExternalDataSection'
 import { validationSubsection } from './validadionSubsection'
+import { clearOnChangeSubsection } from './clearOnChangeSubsection'
 
 export const commonActionsSection = buildSection({
   id: 'commonActions',
   title: 'Common actions',
   children: [
     getDataFromExternalDataSubsection,
     validationSubsection,
+    clearOnChangeSubsection,
     conditionsSubsection,
     conditions2Subsection,
   ],

diff --git a/libs/application/types/src/lib/Fields.ts b/libs/application/types/src/lib/Fields.ts
@@ -222,6 +222,7 @@ export interface BaseField extends FormItem {
   doesNotRequireAnswer?: boolean
   marginBottom?: BoxProps['marginBottom']
   marginTop?: BoxProps['marginTop']
+  clearOnChange?: string[]
 
   // TODO use something like this for non-schema validation?
   // validate?: (formValue: FormValue, context?: object) => boolean

diff --git a/libs/application/types/src/lib/Form.ts b/libs/application/types/src/lib/Form.ts
@@ -186,6 +186,7 @@ export interface FieldBaseProps<TAnswers = FormValue> {
   field: Field
   application: Application<TAnswers>
   showFieldName?: boolean
+  clearOnChange?: string[]
   goToScreen?: (id: string) => void
   answerQuestions?: (answers: FormValue) => void
   refetch?: () => void

diff --git a/libs/application/ui-components/src/components/NationalIdWithName/NationalIdWithName.tsx b/libs/application/ui-components/src/components/NationalIdWithName/NationalIdWithName.tsx
@@ -43,6 +43,7 @@ interface NationalIdWithNameProps {
   showPhoneField?: boolean
   showEmailField?: boolean
   error?: string
+  clearOnChange?: string[]
 }
 
 export const NationalIdWithName: FC<
@@ -72,6 +73,7 @@ export const NationalIdWithName: FC<
   showPhoneField = false,
   showEmailField = false,
   error,
+  clearOnChange,
 }) => {
   const fieldId = customId.length > 0 ? customId : id
   const nameField = `${fieldId}.name`
@@ -233,6 +235,7 @@ export const NationalIdWithName: FC<
             loading={searchPersons ? queryLoading : companyQueryLoading}
             error={nationalIdFieldErrors}
             disabled={disabled}
+            clearOnChange={clearOnChange}
           />
         </GridColumn>
         <GridColumn span={['1/1', '1/1', '1/1', '1/2']} paddingTop={2}>

diff --git a/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx b/libs/application/ui-fields/src/lib/AsyncSelectFormField/AsyncSelectFormField.tsx
@@ -40,6 +40,7 @@ export const AsyncSelectFormField: FC<React.PropsWithChildren<Props>> = ({
     isSearchable,
     isMulti,
     required = false,
+    clearOnChange,
   } = field
   const { formatMessage, lang: locale } = useLocale()
   const apolloClient = useApolloClient()
@@ -111,6 +112,7 @@ export const AsyncSelectFormField: FC<React.PropsWithChildren<Props>> = ({
           backgroundColor={backgroundColor}
           isSearchable={isSearchable}
           isMulti={isMulti}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx b/libs/application/ui-fields/src/lib/BankAccountFormField/BankAccountFormField.tsx
@@ -13,7 +13,8 @@ interface Props extends FieldBaseProps {
 }
 export const BankAccountFormField = ({ field, application }: Props) => {
   const { formatMessage, lang: locale } = useLocale()
-  const { marginBottom, marginTop, title, titleVariant, id } = field
+  const { marginBottom, marginTop, title, titleVariant, id, clearOnChange } =
+    field
   const bankNumber = formatText(
     coreDefaultFieldMessages.defaultBankAccountBankNumber,
     application,
@@ -49,6 +50,7 @@ export const BankAccountFormField = ({ field, application }: Props) => {
               format="####"
               backgroundColor="blue"
               autoFocus
+              clearOnChange={clearOnChange}
             />
           </Box>
         </GridColumn>
@@ -61,6 +63,7 @@ export const BankAccountFormField = ({ field, application }: Props) => {
               placeholder="00"
               format="##"
               backgroundColor="blue"
+              clearOnChange={clearOnChange}
             />
           </Box>
         </GridColumn>
@@ -73,6 +76,7 @@ export const BankAccountFormField = ({ field, application }: Props) => {
               placeholder="000000"
               format="######"
               backgroundColor="blue"
+              clearOnChange={clearOnChange}
             />
           </Box>
         </GridColumn>

diff --git a/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx b/libs/application/ui-fields/src/lib/CheckboxFormField/CheckboxFormField.tsx
@@ -43,6 +43,7 @@ export const CheckboxFormField = ({
     spacing,
     marginTop,
     marginBottom,
+    clearOnChange,
   } = field
   const { formatMessage, lang: locale } = useLocale()
 
@@ -107,6 +108,7 @@ export const CheckboxFormField = ({
               }),
             }),
           )}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx b/libs/application/ui-fields/src/lib/DateFormField/DateFormField.tsx
@@ -47,6 +47,7 @@ export const DateFormField: FC<React.PropsWithChildren<Props>> = ({
     readOnly,
     marginTop,
     marginBottom,
+    clearOnChange,
   } = field
   const { formatMessage, lang } = useLocale()
 
@@ -155,6 +156,7 @@ export const DateFormField: FC<React.PropsWithChildren<Props>> = ({
           }
           error={error}
           onChange={onChange}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/DisplayFormField/DisplayFormField.tsx b/libs/application/ui-fields/src/lib/DisplayFormField/DisplayFormField.tsx
@@ -22,6 +22,7 @@ export const DisplayFormField = ({ field, application }: Props) => {
     suffix,
     rightAlign = false,
     halfWidthOwnline = false,
+    clearOnChange,
   } = field
   const { watch, setValue } = useFormContext()
   const allValues = watch()
@@ -90,6 +91,7 @@ export const DisplayFormField = ({ field, application }: Props) => {
               ? undefined
               : variant
           }
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx b/libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx
@@ -161,6 +161,7 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
     energyFundsMessages,
     marginTop,
     marginBottom,
+    clearOnChange,
   } = field
 
   const [plate, setPlate] = useState<string>(
@@ -388,6 +389,7 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
               },
             }}
             maxLength={isMachine ? 7 : 5}
+            clearOnChange={clearOnChange}
           />
         </Box>
         <Button onClick={findVehicleByPlate} disabled={buttonDisabled}>

diff --git a/...application/ui-fields/src/lib/NationalIdWithNameFormField/NationalIdWithNameFormField.tsx b/...application/ui-fields/src/lib/NationalIdWithNameFormField/NationalIdWithNameFormField.tsx
@@ -66,6 +66,7 @@ export const NationalIdWithNameFormField: FC<
         phoneLabel={field.phoneLabel}
         emailLabel={field.emailLabel}
         error={error}
+        clearOnChange={field.clearOnChange}
       />
     </Box>
   )

diff --git a/libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx b/libs/application/ui-fields/src/lib/PhoneFormField/PhoneFormField.tsx
@@ -41,6 +41,7 @@ export const PhoneFormField: FC<React.PropsWithChildren<Props>> = ({
     marginTop,
     marginBottom,
     onChange = () => undefined,
+    clearOnChange,
   } = field
   const { control, clearErrors } = useFormContext()
   const { formatMessage, lang: locale } = useLocale()
@@ -94,6 +95,7 @@ export const PhoneFormField: FC<React.PropsWithChildren<Props>> = ({
           defaultValue={getDefaultValue(field, application)}
           backgroundColor={backgroundColor}
           required={buildFieldRequired(application, required)}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx b/libs/application/ui-fields/src/lib/RadioFormField/RadioFormField.tsx
@@ -42,6 +42,7 @@ export const RadioFormField: FC<React.PropsWithChildren<Props>> = ({
     widthWithIllustration,
     marginTop,
     marginBottom,
+    clearOnChange,
   } = field
   const { formatMessage, lang: locale } = useLocale()
 
@@ -118,6 +119,7 @@ export const RadioFormField: FC<React.PropsWithChildren<Props>> = ({
           hasIllustration={hasIllustration}
           paddingBottom={0}
           paddingTop={2}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx b/libs/application/ui-fields/src/lib/SelectFormField/SelectFormField.tsx
@@ -39,6 +39,7 @@ export const SelectFormField: FC<React.PropsWithChildren<Props>> = ({
     isMulti,
     marginTop,
     marginBottom,
+    clearOnChange,
   } = field
   const { formatMessage, lang: locale } = useLocale()
 
@@ -96,6 +97,7 @@ export const SelectFormField: FC<React.PropsWithChildren<Props>> = ({
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore make web strict
           onSelect={onSelect}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx b/libs/application/ui-fields/src/lib/TextFormField/TextFormField.tsx
@@ -50,6 +50,7 @@ export const TextFormField: FC<React.PropsWithChildren<Props>> = ({
     marginBottom,
     marginTop,
     onChange = () => undefined,
+    clearOnChange,
   } = field
   const { clearErrors } = useFormContext()
   const { formatMessage, lang: locale } = useLocale()
@@ -113,6 +114,7 @@ export const TextFormField: FC<React.PropsWithChildren<Props>> = ({
           max={max}
           min={min}
           step={step}
+          clearOnChange={clearOnChange}
         />
       </Box>
     </Box>

diff --git a/libs/application/ui-fields/src/lib/VehicleRadioFormField/VehicleRadioFormField.tsx b/libs/application/ui-fields/src/lib/VehicleRadioFormField/VehicleRadioFormField.tsx
@@ -30,6 +30,7 @@ export const VehicleRadioFormField: FC<React.PropsWithChildren<Props>> = ({
   application,
   field,
   errors,
+  clearOnChange,
 }) => {
   const { formatMessage, formatDateFns } = useLocale()
   const { setValue } = useFormContext()
@@ -269,6 +270,7 @@ export const VehicleRadioFormField: FC<React.PropsWithChildren<Props>> = ({
         backgroundColor="blue"
         onSelect={onRadioControllerSelect}
         options={options}
+        clearOnChange={clearOnChange}
       />
 
       {!selectedValue?.length && !!errors?.[field.id] && (