Refactor checkbox, picklist, and decimal renderers into field components
This commit is contained in:
@@ -0,0 +1,89 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Field } from "redux-form";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
|
||||||
|
import { getFieldTranslation } from "../helpers/translationHelpers";
|
||||||
|
|
||||||
|
export const RenderCheckBox = ({
|
||||||
|
datafieldname,
|
||||||
|
name,
|
||||||
|
label,
|
||||||
|
id,
|
||||||
|
errorMsg,
|
||||||
|
options,
|
||||||
|
input: { onChange, value },
|
||||||
|
meta: { touched, error },
|
||||||
|
...custom
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { locale } = router;
|
||||||
|
const { appealtypes } = router.query;
|
||||||
|
|
||||||
|
const translatedLabel = getFieldTranslation({
|
||||||
|
label,
|
||||||
|
locale,
|
||||||
|
appealtypes,
|
||||||
|
fieldLookup
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
touched && error
|
||||||
|
? "govuk-form-group govuk-form-group--error"
|
||||||
|
: "govuk-form-group "
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<fieldset
|
||||||
|
className="govuk-fieldset"
|
||||||
|
aria-describedby={name + "-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"}
|
||||||
|
>
|
||||||
|
{translatedLabel}
|
||||||
|
</label>
|
||||||
|
</legend>
|
||||||
|
{touched && error && (
|
||||||
|
<span
|
||||||
|
id={id + "-error"}
|
||||||
|
className="govuk-error-message"
|
||||||
|
>
|
||||||
|
<span className="govuk-visually-hidden">
|
||||||
|
Error:
|
||||||
|
</span>{" "}
|
||||||
|
{errorMsg}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<div className="govuk-checkboxes ">
|
||||||
|
{Object.keys(options).map((key, index) => (
|
||||||
|
<div
|
||||||
|
className="govuk-checkboxes__item"
|
||||||
|
data-children-count={key}
|
||||||
|
key={key}
|
||||||
|
>
|
||||||
|
<Field
|
||||||
|
id={id + "_" + index}
|
||||||
|
name={id + "_" + index}
|
||||||
|
component="input"
|
||||||
|
type="checkbox"
|
||||||
|
className="govuk-checkboxes__input"
|
||||||
|
value={options[key]}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
className="govuk-label govuk-checkboxes__label"
|
||||||
|
htmlFor={id + "_" + index}
|
||||||
|
>
|
||||||
|
{options[key]}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import fieldLookup from "../../../data/crmfieldlookuptranslations.json";
|
||||||
|
import { getFieldTranslation } from "../helpers/translationHelpers";
|
||||||
|
|
||||||
|
export const RenderDecimalField = ({
|
||||||
|
name,
|
||||||
|
id,
|
||||||
|
label,
|
||||||
|
datafieldname,
|
||||||
|
className,
|
||||||
|
input,
|
||||||
|
errorMsg,
|
||||||
|
meta: { touched, error },
|
||||||
|
...custom
|
||||||
|
}) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { locale } = router;
|
||||||
|
const { appealtypes } = router.query;
|
||||||
|
|
||||||
|
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>
|
||||||
|
)}
|
||||||
|
<input
|
||||||
|
{...input}
|
||||||
|
className={className}
|
||||||
|
name={name}
|
||||||
|
id={id}
|
||||||
|
maxLength={
|
||||||
|
custom.hasOwnProperty("maxFieldLength")
|
||||||
|
? custom.maxFieldLength
|
||||||
|
? custom.maxFieldLength
|
||||||
|
: 100
|
||||||
|
: 200
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -31,16 +31,16 @@ import {
|
|||||||
getThumbnailIconByMimeType,
|
getThumbnailIconByMimeType,
|
||||||
validateUploadFilename
|
validateUploadFilename
|
||||||
} from "./helpers/fileUploadHelpers";
|
} from "./helpers/fileUploadHelpers";
|
||||||
import {
|
import { getFieldTranslation } from "./helpers/translationHelpers";
|
||||||
getFieldTranslation,
|
|
||||||
getPickListTranslation
|
|
||||||
} from "./helpers/translationHelpers";
|
|
||||||
import { RenderRichMultiline } from "./fields/renderRichMultiline";
|
import { RenderRichMultiline } from "./fields/renderRichMultiline";
|
||||||
import { RenderTextfield } from "./fields/renderTextfield";
|
import { RenderTextfield } from "./fields/renderTextfield";
|
||||||
import { RenderMultiline } from "./fields/renderMultiline";
|
import { RenderMultiline } from "./fields/renderMultiline";
|
||||||
import { RenderDatePicker } from "./fields/renderDatePicker";
|
import { RenderDatePicker } from "./fields/renderDatePicker";
|
||||||
import { RenderYesNo } from "./fields/renderYesNo";
|
import { RenderYesNo } from "./fields/renderYesNo";
|
||||||
import { RenderRadio } from "./fields/renderRadio";
|
import { RenderRadio } from "./fields/renderRadio";
|
||||||
|
import { RenderCheckBox } from "./fields/renderCheckBox";
|
||||||
|
import { RenderPickList } from "./fields/renderPickList";
|
||||||
|
import { RenderDecimalField } from "./fields/renderDecimalField";
|
||||||
|
|
||||||
export function Textfield(props) {
|
export function Textfield(props) {
|
||||||
const {
|
const {
|
||||||
@@ -784,79 +784,6 @@ export function Radiofield(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const RenderCheckBox = ({
|
|
||||||
datafieldname,
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
id,
|
|
||||||
errorMsg,
|
|
||||||
options,
|
|
||||||
input: { onChange, value },
|
|
||||||
meta: { touched, error },
|
|
||||||
...custom
|
|
||||||
}) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
touched && error
|
|
||||||
? "govuk-form-group govuk-form-group--error"
|
|
||||||
: "govuk-form-group "
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<fieldset
|
|
||||||
className="govuk-fieldset"
|
|
||||||
aria-describedby={name + "-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"}
|
|
||||||
>
|
|
||||||
{FieldsTranslations(label)}
|
|
||||||
</label>
|
|
||||||
</legend>
|
|
||||||
{touched && error && (
|
|
||||||
<span
|
|
||||||
id={id + "-error"}
|
|
||||||
className="govuk-error-message"
|
|
||||||
>
|
|
||||||
<span className="govuk-visually-hidden">
|
|
||||||
Error:
|
|
||||||
</span>{" "}
|
|
||||||
{errorMsg}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<div className="govuk-checkboxes ">
|
|
||||||
{Object.keys(options).map((key, index) => (
|
|
||||||
<div
|
|
||||||
className="govuk-checkboxes__item"
|
|
||||||
data-children-count={key}
|
|
||||||
key={key}
|
|
||||||
>
|
|
||||||
<Field
|
|
||||||
id={id + "_" + index}
|
|
||||||
name={id + "_" + index}
|
|
||||||
component="input"
|
|
||||||
type="checkbox"
|
|
||||||
className="govuk-checkboxes__input"
|
|
||||||
value={options[key]}
|
|
||||||
/>
|
|
||||||
<label
|
|
||||||
className="govuk-label govuk-checkboxes__label"
|
|
||||||
htmlFor={id + "_" + index}
|
|
||||||
>
|
|
||||||
{options[key]}
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</fieldset>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function CheckBoxfield(props) {
|
export function CheckBoxfield(props) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
@@ -879,70 +806,6 @@ export function CheckBoxfield(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const RenderPickList = ({
|
|
||||||
datafieldname,
|
|
||||||
picklistData,
|
|
||||||
id,
|
|
||||||
name,
|
|
||||||
label,
|
|
||||||
input,
|
|
||||||
errorMsg,
|
|
||||||
meta: { touched, error }
|
|
||||||
}) => {
|
|
||||||
let { t } = useTranslation();
|
|
||||||
|
|
||||||
var dropdownObj = jsonpath({
|
|
||||||
path:
|
|
||||||
"$..value[?(@ && @.LogicalName=='" + datafieldname + "')]..Options",
|
|
||||||
json: picklistData,
|
|
||||||
eval: true
|
|
||||||
});
|
|
||||||
dropdownObj = dropdownObj[0];
|
|
||||||
|
|
||||||
const required = (value) => {
|
|
||||||
return value || value == 0
|
|
||||||
? undefined
|
|
||||||
: t("newappeal:is-required-label");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
touched && error
|
|
||||||
? "govuk-form-group govuk-form-group--error"
|
|
||||||
: "govuk-form-group "
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
|
||||||
{FieldsTranslations(label)}
|
|
||||||
</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) => {
|
|
||||||
return (
|
|
||||||
<option key={key} value={dropdownObj[key].Value}>
|
|
||||||
{PickListTranslations(
|
|
||||||
dropdownObj[key].Label.LocalizedLabels[0]
|
|
||||||
.Label
|
|
||||||
)}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export function PickList(props) {
|
export function PickList(props) {
|
||||||
const { name, label, datafieldname, hint } = props;
|
const { name, label, datafieldname, hint } = props;
|
||||||
let { t } = useTranslation();
|
let { t } = useTranslation();
|
||||||
@@ -1207,60 +1070,6 @@ export function DecimalField(props) {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const RenderDecimalField = ({
|
|
||||||
name,
|
|
||||||
id,
|
|
||||||
label,
|
|
||||||
datafieldname,
|
|
||||||
className,
|
|
||||||
input,
|
|
||||||
errorMsg,
|
|
||||||
meta: { touched, error },
|
|
||||||
...custom
|
|
||||||
}) => {
|
|
||||||
// <div>
|
|
||||||
// <label>{label}</label>
|
|
||||||
// <input {...input} type="text" />
|
|
||||||
// {touched && error && <span>{error}</span>}
|
|
||||||
// </div>;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
className={
|
|
||||||
touched && error
|
|
||||||
? "govuk-form-group govuk-form-group--error"
|
|
||||||
: "govuk-form-group "
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
|
|
||||||
{FieldsTranslations(label)}
|
|
||||||
</label>
|
|
||||||
{touched && error && (
|
|
||||||
<span id={id + "-error"} className="govuk-error-message">
|
|
||||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
|
||||||
{error}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<input
|
|
||||||
{...input}
|
|
||||||
// type={custom.type}
|
|
||||||
className={className}
|
|
||||||
name={name}
|
|
||||||
id={id}
|
|
||||||
maxLength={
|
|
||||||
custom.hasOwnProperty("maxFieldLength")
|
|
||||||
? custom.maxFieldLength
|
|
||||||
? custom.maxFieldLength
|
|
||||||
: 100
|
|
||||||
: 200
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const RenderCaseID = {};
|
const RenderCaseID = {};
|
||||||
|
|
||||||
export function ReadOnlyfield(props) {
|
export function ReadOnlyfield(props) {
|
||||||
@@ -1299,14 +1108,6 @@ export const FieldsTranslations = (label) => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const PickListTranslations = (optionValue) => {
|
|
||||||
const router = useRouter();
|
|
||||||
const { locale } = router;
|
|
||||||
const { appealtypes } = router.query;
|
|
||||||
|
|
||||||
return getPickListTranslation({ optionValue, locale, pickListLookup });
|
|
||||||
};
|
|
||||||
|
|
||||||
export function FileUploadField(props) {
|
export function FileUploadField(props) {
|
||||||
const uploadCount =
|
const uploadCount =
|
||||||
typeof props.uploadCount === "number" ? props.uploadCount : 0;
|
typeof props.uploadCount === "number" ? props.uploadCount : 0;
|
||||||
|
|||||||
Reference in New Issue
Block a user