Refactor checkbox, picklist, and decimal renderers into field components

2026-04-07 11:42:11 +01:00
parent b022c0a0d9
commit 7ae5f80f26
4 changed files with 237 additions and 203 deletions
@@ -0,0 +1,82 @@
+import React from "react";
+import { JSONPath as jsonpath } from "jsonpath-plus";
+import { useRouter } from "next/router";
+import useTranslation from "next-translate/useTranslation";
+import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
+import pickListLookup from "../../../data/picklistLookups.json";
+import {
+    getFieldTranslation,
+    getPickListTranslation
+} from "../helpers/translationHelpers";
+
+export const RenderPickList = ({
+    datafieldname,
+    picklistData,
+    id,
+    name,
+    label,
+    input,
+    errorMsg,
+    meta: { touched, error }
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    const { locale } = router;
+    const { appealtypes } = router.query;
+
+    var dropdownObj = jsonpath({
+        path:
+            "$..value[?(@ && @.LogicalName=='" + datafieldname + "')]..Options",
+        json: picklistData,
+        eval: true
+    });
+    dropdownObj = dropdownObj[0];
+
+    const translatedLabel = getFieldTranslation({
+        label,
+        locale,
+        appealtypes,
+        fieldLookup
+    });
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
+                    {translatedLabel}
+                </label>
+                {touched && error && (
+                    <span id={id + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </span>
+                )}
+                <select {...input} className="govuk-select " id={id} name={id}>
+                    <option value="" disabled defaultValue>
+                        {t("newappeal:select-default")}
+                    </option>
+                    {Object.keys(dropdownObj).map((key, index) => {
+                        const translatedOption = getPickListTranslation({
+                            optionValue:
+                                dropdownObj[key].Label.LocalizedLabels[0].Label,
+                            locale,
+                            pickListLookup
+                        });
+
+                        return (
+                            <option key={key} value={dropdownObj[key].Value}>
+                                {translatedOption}
+                            </option>
+                        );
+                    })}
+                </select>
+            </div>
+        </>
+    );
+};