area search application form: sort applicant types

City-of-Helsinki · Dec 2, 2024 · 69a5f5e · 69a5f5e
1 parent ed5549b
commit 69a5f5e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/application/components/applicationRadioButtonFieldset.tsx b/src/application/components/applicationRadioButtonFieldset.tsx
@@ -3,12 +3,17 @@ import { FieldRendererProps, SupportedFieldTypes } from '../types';
 import ApplicationExtraTextField from './applicationExtraTextField';
 import ApplicationFieldsetHelperText from './applicationFieldsetHelperText';
 import classNames from 'classnames';
+import { getFieldChoicesSorted } from '../helpers';
 
 const ApplicationRadioButtonFieldset = (
   props: FieldRendererProps,
 ): JSX.Element => {
   const { id, input, meta, field, fieldType, setValues, displayError } = props;
 
+  const sortedFieldChoices = getFieldChoicesSorted({ ...field }, [
+    ...field.choices,
+  ]);
+
   const orientation =
     fieldType === SupportedFieldTypes.RadioButtonInline
       ? 'horizontal'
@@ -25,7 +30,7 @@ const ApplicationRadioButtonFieldset = (
         name={input.name}
         errorText={displayError && meta.error?.value}
       >
-        {field.choices.map((option, index) => (
+        {sortedFieldChoices.map((option, index) => (
           <div
             className="ApplicationRadioButtonFieldset__option"
             id={`ApplicationRadioButtonFieldset_${input.name}_${index}_div`}

diff --git a/src/application/helpers.ts b/src/application/helpers.ts
@@ -4,8 +4,10 @@ import { RootState } from '../root/rootReducer';
 import {
   APPLICANT_MAIN_IDENTIFIERS,
   APPLICANT_SECTION_IDENTIFIER,
+  APPLICANT_TYPE_FIELD_IDENTIFIER,
   ApplicantTypes,
   ApplicationField,
+  ApplicationFormFieldChoice,
   ApplicationFormFields,
   ApplicationFormNode,
   ApplicationFormRoot,
@@ -19,7 +21,7 @@ import {
   SupportedFieldTypes,
   TARGET_SECTION_IDENTIFIER,
 } from './types';
-import { FormField, FormSection } from '../plotSearch/types';
+import { FormField, FormFieldChoice, FormSection } from '../plotSearch/types';
 import { store } from '../index';
 import { getPlotSearchFromFavourites } from '../favourites/helpers';
 import { FavouriteTarget } from '../favourites/types';
@@ -530,3 +532,22 @@ export const set = (obj: unknown, path: string, value: unknown): void => {
     }
   }
 };
+
+/**
+ * Sorts the choices of a field based on the criteria specific to different field identifiers.
+ * @param {FormField} field
+ * @param {FormFieldChoice[]} choices
+ * @returns {FormFieldChoice[]}
+ */
+export const getFieldChoicesSorted = (
+  field: FormField,
+  choices: FormFieldChoice[],
+): FormFieldChoice[] => {
+  if (field.identifier === APPLICANT_TYPE_FIELD_IDENTIFIER) {
+    return choices.sort(
+      (a: FormFieldChoice, b: FormFieldChoice): number =>
+        parseInt(a.value) - parseInt(b.value) || 0,
+    );
+  }
+  return choices;
+};
diff --git a/src/application/types.ts b/src/application/types.ts
@@ -217,6 +217,14 @@ export type ApplicationFormSections = Record<
 
 export type ApplicationFormFields = Record<string, ApplicationField>;
 
+export type ApplicationFormFieldChoice = {
+  id: number;
+  text: string;
+  value: string;
+  action?: string | null;
+  has_text_input: boolean;
+};
+
 export type ApplicationFormNode = {
   fields: ApplicationFormFields;
   sections: ApplicationFormSections;