From 17a1f1f41477913815c4b4a92c6a00d1ab539de2 Mon Sep 17 00:00:00 2001
From: rdbsolutions <rob@rdbsolutions.co.uk>
Date: Tue, 27 Feb 2024 11:39:00 +0000
Subject: [PATCH] 10486 double click on dropdown

---
 components/newappeal/createCase.js | 707 ++++++++++++++---------------
 1 file changed, 345 insertions(+), 362 deletions(-)

diff --git a/components/newappeal/createCase.js b/components/newappeal/createCase.js
index d65ba695..75dab272 100644
--- a/components/newappeal/createCase.js
+++ b/components/newappeal/createCase.js
@@ -17,6 +17,351 @@ import Aboutyou from "./aboutyou";
 import { createNewCase, createNewCaseBlob, consoleLogger } from "../../actions";
 import { FieldsTranslations } from "../elements";
 
+const RenderLPAList = ({
+    name,
+    input,
+    optionsObj,
+    meta: { touched, error },
+    label,
+    errorMsg,
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                {" "}
+                <label className="govuk-label" htmlFor="lpatypes">
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={name + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+                <div>
+                    <select
+                        {...input}
+                        className="govuk-select govuk-input--error"
+                        id="lpatypes"
+                        name="lpatypes"
+                        //onChange={(e) => props.onChangeSelectLPA(e)}
+                    >
+                        <option value="" disabled defaultValue>
+                            {t("common:drop-down-select")}
+                        </option>
+                        {_.isEmpty(optionsObj)
+                            ? ""
+                            : Object.keys(optionsObj).map((key, index) => {
+                                  return (
+                                      <option
+                                          key={key}
+                                          value={optionsObj[key].accountid}
+                                      >
+                                          {router.locale == "cy"
+                                              ? jsonpath(
+                                                    '$..[?(@.value=="' +
+                                                        optionsObj[key].name +
+                                                        '")].value_cy',
+                                                    transLookup
+                                                )
+                                              : optionsObj[key].name}
+                                      </option>
+                                  );
+                              })}
+                    </select>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const RenderAppealTypeList = ({
+    name,
+    input,
+    optionsObj,
+    meta: { touched, error },
+    label,
+    errorMsg,
+}) => {
+    let { t } = useTranslation();
+    const router = useRouter();
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <label className="govuk-label" htmlFor="appealTypes">
+                    {label}
+                </label>
+                {touched && error && (
+                    <span id={name + "-error"} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {errorMsg}
+                    </span>
+                )}
+                <div>
+                    <select
+                        {...input}
+                        className="govuk-select"
+                        id="appealTypes"
+                        name={name}
+                        //onChange={(e) => props.onChangeSelectAppealType(e)}
+                    >
+                        <option value="" disabled defaultValue>
+                            {t("common:drop-down-select")}
+                        </option>
+                        {_.isEmpty(optionsObj)
+                            ? ""
+                            : Object.keys(optionsObj).map((key, index) => {
+                                  return (
+                                      <option
+                                          key={key}
+                                          value={
+                                              _.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(optionsObj[key])
+                                                  ? ""
+                                                  : _.isEmpty(
+                                                        optionsObj[key].value
+                                                    )
+                                                  ? ""
+                                                  : optionsObj[key]
+                                                        .attributevalue
+                                          }
+                                      >
+                                          {_.isEmpty(optionsObj[key])
+                                              ? ""
+                                              : _.isEmpty(optionsObj[key])
+                                              ? ""
+                                              : _.isEmpty(optionsObj[key].value)
+                                              ? ""
+                                              : router.locale == "cy"
+                                              ? jsonpath(
+                                                    '$..[?(@.value=="' +
+                                                        optionsObj[key].value +
+                                                        '")].value_cy',
+                                                    transLookup
+                                                )
+                                              : optionsObj[key].value}
+                                      </option>
+                                  );
+                              })}
+                    </select>
+                </div>
+            </div>
+        </>
+    );
+};
+
+const RenderRadio = ({
+    datafieldname,
+    name,
+    label,
+    id,
+    errorMsg,
+    options,
+    input: { onChange, value },
+    meta: { touched, error },
+    ...custom
+}) => {
+    let { t } = useTranslation();
+    const required = (value) => (value ? undefined : "Required");
+    return (
+        <>
+            <div
+                className={
+                    touched && error
+                        ? "govuk-form-group govuk-form-group--error"
+                        : "govuk-form-group "
+                }
+            >
+                <fieldset
+                    className="govuk-fieldset"
+                    aria-describedby={datafieldname + "-hint"}
+                >
+                    <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
+                        <label
+                            className="govuk-fieldset__heading govuk-body-m"
+                            id={id + "_label"}
+                        >
+                            {label}
+                        </label>
+                    </legend>
+                    {touched && error && (
+                        <span
+                            id={id + "-error"}
+                            className="govuk-error-message"
+                        >
+                            <span className="govuk-visually-hidden">
+                                Error:
+                            </span>{" "}
+                            {errorMsg}
+                        </span>
+                    )}
+                    <div
+                        className={
+                            custom.inline == false
+                                ? "govuk-radios govuk-radios--small"
+                                : "govuk-radios govuk-radios--inline govuk-radios--small"
+                        }
+                    >
+                        {" "}
+                        {custom.hint != undefined && (
+                            <div className="govuk-hint">{custom.hint}</div>
+                        )}
+                        {Object.keys(options).map((key, index) => (
+                            <div
+                                className="govuk-radios__item"
+                                data-children-count={key}
+                                key={key}
+                            >
+                                <Field
+                                    id={id + "_" + index}
+                                    name={id}
+                                    component="input"
+                                    type="radio"
+                                    hint={custom.hint}
+                                    className="govuk-radios__input"
+                                    value={options[key].split("|")[0]}
+                                    validate={[required]}
+                                    // checked={
+                                    //     value ==
+                                    //     parseInt(options[key].split("|")[0])
+                                    // }
+                                    onChange={(e) => {
+                                        let docListObj = custom.documentList;
+                                        if (
+                                            custom.requiredDocumentValue ==
+                                            "Yes"
+                                        ) {
+                                            e.target.value != "846040000"
+                                                ? (docListObj = Object.assign(
+                                                      docListObj,
+                                                      {
+                                                          ["documentCheckList_" +
+                                                          id]:
+                                                              custom.requiredDocumentLabel,
+                                                      }
+                                                  ))
+                                                : delete docListObj[
+                                                      "documentCheckList_" + id
+                                                  ];
+                                            custom.setDocumentsList(docListObj);
+                                        }
+                                    }}
+                                />
+                                <label
+                                    className="govuk-label govuk-radios__label"
+                                    htmlFor={id + "_" + index}
+                                >
+                                    {t(options[key].split("|")[1])}
+                                </label>
+                            </div>
+                        ))}
+                    </div>
+                </fieldset>
+            </div>
+        </>
+    );
+};
+
+function Radiofield(props) {
+    const {
+        name,
+        label,
+        datafieldname,
+        parentField,
+        form,
+        formProps,
+        parentFieldShowOnValue,
+        validation,
+    } = props;
+
+    const router = useRouter();
+    const required = (value) => (value ? undefined : "Required");
+    // console.log(props.options);
+
+    const fieldOptions = props.options
+        .slice(1, props.options.length - 1)
+        .split(",");
+
+    //parentFieldShowOnValue
+    var showIfHasParentShowValue = parentField != false;
+    //debugger;
+    // parentField != false &&
+    // !_.isEmpty(formProps[form]) &&
+    // _.has(formProps[form].values, parentField) &&
+    // parentFieldShowOnValue.indexOf(
+    //     formProps[form].values[parentField].toString()
+    // ) > -1;
+
+    (showIfHasParentShowValue == parentField) != false &&
+        showIfHasParentShowValue;
+
+    // console.log(
+    //     datafieldname,
+    //     showIfHasParentShowValue,
+    //     formProps[form].values[parentField]
+    // );
+
+    return (
+        <>
+            {parentField != false ? (
+                showIfHasParentShowValue && (
+                    <Field
+                        name={name}
+                        datafieldname={datafieldname}
+                        label={label}
+                        options={fieldOptions}
+                        id={name}
+                        validate={[required]}
+                        errorMsg={t("newappeal:select-an-option-label")}
+                        component={RenderRadio}
+                        inline={props.inline}
+                        hint={props.hint}
+                        //validate={eval(validation)}
+                        requiredDocumentLabel={props.requiredDocumentLabel}
+                        requiredDocumentValue={props.requiredDocumentValue}
+                        setDocumentsList={props.setDocumentsList}
+                        documentList={props.documentList}
+                    />
+                )
+            ) : (
+                <Field
+                    name={name}
+                    datafieldname={datafieldname}
+                    label={label}
+                    options={fieldOptions}
+                    id={name}
+                    validate={[required]}
+                    errorMsg={t("newappeal:select-an-option-label")}
+                    component={RenderRadio}
+                    inline={props.inline}
+                    hint={props.hint}
+                    //validate={eval(validation)}
+                    requiredDocumentLabel={props.requiredDocumentLabel}
+                    requiredDocumentValue={props.requiredDocumentValue}
+                    setDocumentsList={props.setDocumentsList}
+                    documentList={props.documentList}
+                />
+            )}
+        </>
+    );
+}
+
 let CreateCase = (props) => {
     // useEffect(() => {
     //     window.scrollTo(0, 0);
@@ -49,368 +394,6 @@ let CreateCase = (props) => {
         ? [{}]
         : props.LPAData.LPAData.value;
 
-    const RenderLPAList = ({
-        name,
-        input,
-        optionsObj,
-        meta: { touched, error },
-        label,
-        errorMsg,
-    }) => {
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    {" "}
-                    <label className="govuk-label" htmlFor="lpatypes">
-                        {label}
-                    </label>
-                    {touched && error && (
-                        <span
-                            id={name + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div>
-                        <select
-                            {...input}
-                            className="govuk-select govuk-input--error"
-                            id="lpatypes"
-                            name="lpatypes"
-                            //onChange={(e) => props.onChangeSelectLPA(e)}
-                        >
-                            <option value="" disabled defaultValue>
-                                {t("common:drop-down-select")}
-                            </option>
-                            {_.isEmpty(optionsObj)
-                                ? ""
-                                : Object.keys(optionsObj).map((key, index) => {
-                                      return (
-                                          <option
-                                              key={key}
-                                              value={optionsObj[key].accountid}
-                                          >
-                                              {router.locale == "cy"
-                                                  ? jsonpath(
-                                                        '$..[?(@.value=="' +
-                                                            optionsObj[key]
-                                                                .name +
-                                                            '")].value_cy',
-                                                        transLookup
-                                                    )
-                                                  : optionsObj[key].name}
-                                          </option>
-                                      );
-                                  })}
-                        </select>
-                    </div>
-                </div>
-            </>
-        );
-    };
-
-    const RenderAppealTypeList = ({
-        name,
-        input,
-        optionsObj,
-        meta: { touched, error },
-        label,
-        errorMsg,
-    }) => {
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    <label className="govuk-label" htmlFor="appealTypes">
-                        {label}
-                    </label>
-                    {touched && error && (
-                        <span
-                            id={name + "-error"}
-                            className="govuk-error-message"
-                        >
-                            <span className="govuk-visually-hidden">
-                                Error:
-                            </span>{" "}
-                            {errorMsg}
-                        </span>
-                    )}
-                    <div>
-                        <select
-                            {...input}
-                            className="govuk-select"
-                            id="appealTypes"
-                            name={name}
-                            //onChange={(e) => props.onChangeSelectAppealType(e)}
-                        >
-                            <option value="" disabled defaultValue>
-                                {t("common:drop-down-select")}
-                            </option>
-                            {_.isEmpty(optionsObj)
-                                ? ""
-                                : Object.keys(optionsObj).map((key, index) => {
-                                      return (
-                                          <option
-                                              key={key}
-                                              value={
-                                                  _.isEmpty(optionsObj[key])
-                                                      ? ""
-                                                      : _.isEmpty(
-                                                            optionsObj[key]
-                                                        )
-                                                      ? ""
-                                                      : _.isEmpty(
-                                                            optionsObj[key]
-                                                                .value
-                                                        )
-                                                      ? ""
-                                                      : optionsObj[key]
-                                                            .attributevalue
-                                              }
-                                          >
-                                              {_.isEmpty(optionsObj[key])
-                                                  ? ""
-                                                  : _.isEmpty(optionsObj[key])
-                                                  ? ""
-                                                  : _.isEmpty(
-                                                        optionsObj[key].value
-                                                    )
-                                                  ? ""
-                                                  : router.locale == "cy"
-                                                  ? jsonpath(
-                                                        '$..[?(@.value=="' +
-                                                            optionsObj[key]
-                                                                .value +
-                                                            '")].value_cy',
-                                                        transLookup
-                                                    )
-                                                  : optionsObj[key].value}
-                                          </option>
-                                      );
-                                  })}
-                        </select>
-                    </div>
-                </div>
-            </>
-        );
-    };
-
-    const RenderRadio = ({
-        datafieldname,
-        name,
-        label,
-        id,
-        errorMsg,
-        options,
-        input: { onChange, value },
-        meta: { touched, error },
-        ...custom
-    }) => {
-        let { t } = useTranslation();
-        const required = (value) => (value ? undefined : "Required");
-        return (
-            <>
-                <div
-                    className={
-                        touched && error
-                            ? "govuk-form-group govuk-form-group--error"
-                            : "govuk-form-group "
-                    }
-                >
-                    <fieldset
-                        className="govuk-fieldset"
-                        aria-describedby={datafieldname + "-hint"}
-                    >
-                        <legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
-                            <label
-                                className="govuk-fieldset__heading govuk-body-m"
-                                id={id + "_label"}
-                            >
-                                {label}
-                            </label>
-                        </legend>
-                        {touched && error && (
-                            <span
-                                id={id + "-error"}
-                                className="govuk-error-message"
-                            >
-                                <span className="govuk-visually-hidden">
-                                    Error:
-                                </span>{" "}
-                                {errorMsg}
-                            </span>
-                        )}
-                        <div
-                            className={
-                                custom.inline == false
-                                    ? "govuk-radios govuk-radios--small"
-                                    : "govuk-radios govuk-radios--inline govuk-radios--small"
-                            }
-                        >
-                            {" "}
-                            {custom.hint != undefined && (
-                                <div className="govuk-hint">{custom.hint}</div>
-                            )}
-                            {Object.keys(options).map((key, index) => (
-                                <div
-                                    className="govuk-radios__item"
-                                    data-children-count={key}
-                                    key={key}
-                                >
-                                    <Field
-                                        id={id + "_" + index}
-                                        name={id}
-                                        component="input"
-                                        type="radio"
-                                        hint={custom.hint}
-                                        className="govuk-radios__input"
-                                        value={options[key].split("|")[0]}
-                                        validate={[required]}
-                                        // checked={
-                                        //     value ==
-                                        //     parseInt(options[key].split("|")[0])
-                                        // }
-                                        onChange={(e) => {
-                                            let docListObj =
-                                                custom.documentList;
-                                            if (
-                                                custom.requiredDocumentValue ==
-                                                "Yes"
-                                            ) {
-                                                e.target.value != "846040000"
-                                                    ? (docListObj =
-                                                          Object.assign(
-                                                              docListObj,
-                                                              {
-                                                                  ["documentCheckList_" +
-                                                                  id]:
-                                                                      custom.requiredDocumentLabel,
-                                                              }
-                                                          ))
-                                                    : delete docListObj[
-                                                          "documentCheckList_" +
-                                                              id
-                                                      ];
-                                                custom.setDocumentsList(
-                                                    docListObj
-                                                );
-                                            }
-                                        }}
-                                    />
-                                    <label
-                                        className="govuk-label govuk-radios__label"
-                                        htmlFor={id + "_" + index}
-                                    >
-                                        {t(options[key].split("|")[1])}
-                                    </label>
-                                </div>
-                            ))}
-                        </div>
-                    </fieldset>
-                </div>
-            </>
-        );
-    };
-
-    function Radiofield(props) {
-        const {
-            name,
-            label,
-            datafieldname,
-            parentField,
-            form,
-            formProps,
-            parentFieldShowOnValue,
-            validation,
-        } = props;
-
-        const router = useRouter();
-        const required = (value) => (value ? undefined : "Required");
-        // console.log(props.options);
-
-        const fieldOptions = props.options
-            .slice(1, props.options.length - 1)
-            .split(",");
-
-        //parentFieldShowOnValue
-        var showIfHasParentShowValue = parentField != false;
-        //debugger;
-        // parentField != false &&
-        // !_.isEmpty(formProps[form]) &&
-        // _.has(formProps[form].values, parentField) &&
-        // parentFieldShowOnValue.indexOf(
-        //     formProps[form].values[parentField].toString()
-        // ) > -1;
-
-        (showIfHasParentShowValue == parentField) != false &&
-            showIfHasParentShowValue;
-
-        // console.log(
-        //     datafieldname,
-        //     showIfHasParentShowValue,
-        //     formProps[form].values[parentField]
-        // );
-
-        return (
-            <>
-                {parentField != false ? (
-                    showIfHasParentShowValue && (
-                        <Field
-                            name={name}
-                            datafieldname={datafieldname}
-                            label={label}
-                            options={fieldOptions}
-                            id={name}
-                            validate={[required]}
-                            errorMsg={t("newappeal:select-an-option-label")}
-                            component={RenderRadio}
-                            inline={props.inline}
-                            hint={props.hint}
-                            //validate={eval(validation)}
-                            requiredDocumentLabel={props.requiredDocumentLabel}
-                            requiredDocumentValue={props.requiredDocumentValue}
-                            setDocumentsList={props.setDocumentsList}
-                            documentList={props.documentList}
-                        />
-                    )
-                ) : (
-                    <Field
-                        name={name}
-                        datafieldname={datafieldname}
-                        label={label}
-                        options={fieldOptions}
-                        id={name}
-                        validate={[required]}
-                        errorMsg={t("newappeal:select-an-option-label")}
-                        component={RenderRadio}
-                        inline={props.inline}
-                        hint={props.hint}
-                        //validate={eval(validation)}
-                        requiredDocumentLabel={props.requiredDocumentLabel}
-                        requiredDocumentValue={props.requiredDocumentValue}
-                        setDocumentsList={props.setDocumentsList}
-                        documentList={props.documentList}
-                    />
-                )}
-            </>
-        );
-    }
-
     const required = (value) => (value ? undefined : "Required");
 
     const [formStep, setFormStep] = useState(0);