added form ordering and validation for s78
This commit is contained in:
@@ -230,6 +230,53 @@ const Breadcrumbs = (props) => {
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/newappeal/[appealtypes]" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
? router.locale + "/myportal"
|
||||
: "/myportal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("newappeal:parent-page-title")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/myportal/[appealtypes]" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
<Link
|
||||
href={
|
||||
router.locale != "en"
|
||||
? router.locale + "/myportal"
|
||||
: "/myportal"
|
||||
}
|
||||
>
|
||||
<a className="govuk-breadcrumbs__link">
|
||||
{t("newappeal:parent-page-title")}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{t("newappeal:page-title")}
|
||||
</li>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
{props.formTitle}
|
||||
</li>
|
||||
</>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
{router.pathname == "/newappeal/selectappeal" ? (
|
||||
<>
|
||||
<li className="govuk-breadcrumbs__list-item">
|
||||
|
||||
+604
-82
@@ -12,6 +12,17 @@ import pickListLookup from "../../data/picklistLookups.json";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import FileUpload from "../newappeal/fileupload";
|
||||
import Dropzone, { useDropzone } from "react-dropzone";
|
||||
import _ from "lodash";
|
||||
import { connect, useDispatch } from "react-redux";
|
||||
|
||||
import {
|
||||
addYears,
|
||||
addMonths,
|
||||
addDays,
|
||||
subYears,
|
||||
subMonths,
|
||||
subDays,
|
||||
} from "date-fns";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -50,86 +61,204 @@ const RenderTextfield = ({
|
||||
};
|
||||
|
||||
export function Textfield(props) {
|
||||
const { name, label, validate, ticketnumber } = props;
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
validation,
|
||||
ticketnumber,
|
||||
form,
|
||||
formProps,
|
||||
parentField,
|
||||
parentFieldShowOnValue,
|
||||
hint,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
if (name == "pinswg_name") {
|
||||
let { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={ticketnumber}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={ticketnumber}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div className="govuk-body">{t(hint)}</div>
|
||||
</>
|
||||
);
|
||||
} else {
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
// console.log(parentField, showIfHasParentShowValue);
|
||||
// console.log(parentField, formProps, form);
|
||||
|
||||
//console.log("validation props:", validation);
|
||||
|
||||
return (
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
//validate={[required]}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={eval(validation)}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={eval(validation)}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const RenderMultiline = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
errorMsg,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<textarea {...input} rows={rows} className={className}></textarea>
|
||||
<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>{" "}
|
||||
{touched &&
|
||||
((error && (
|
||||
<span>{errorMsg ? errorMsg : error}</span>
|
||||
)) ||
|
||||
(warning && <span>{warning}</span>))}
|
||||
</span>
|
||||
)}
|
||||
<textarea
|
||||
{...input}
|
||||
rows={rows}
|
||||
className={className}
|
||||
></textarea>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export function MultiLinefield(props) {
|
||||
const { name, label } = props;
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
// console.log(parentField, showIfHasParentShowValue);
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id={props.name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
Do not include personal or financial information, like your
|
||||
National Insurance number or credit card details.
|
||||
</div>
|
||||
<>
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<div>
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id={props.name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
Do not include personal or financial information.
|
||||
</div>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="govuk-form-group">
|
||||
<h1 className="govuk-label-wrapper">
|
||||
<label className="govuk-label" htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
</h1>
|
||||
<div
|
||||
id={props.name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
Do not include personal or financial information.
|
||||
</div>
|
||||
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
/>
|
||||
</div>
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -145,6 +274,42 @@ const RenderDatePicker = ({
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
registerLocale("cy", cy);
|
||||
|
||||
var startDateArr =
|
||||
custom.dateStart != "0" ? custom.dateStart.split("") : custom.dateStart;
|
||||
var endDateArr =
|
||||
custom.dateEnd != "0" ? custom.dateEnd.split("") : custom.dateEnd;
|
||||
|
||||
var minDate =
|
||||
startDateArr == 0
|
||||
? new Date()
|
||||
: startDateArr[0] == "-"
|
||||
? startDateArr[2] == "y"
|
||||
? subYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? subMonths(new Date(), startDateArr[1])
|
||||
: subDays(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "y"
|
||||
? addYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? addMonths(new Date(), startDateArr[1])
|
||||
: addDays(new Date(), startDateArr[1]);
|
||||
|
||||
var maxDate =
|
||||
endDateArr == 0
|
||||
? new Date()
|
||||
: startDateArr[0] == "-"
|
||||
? startDateArr[2] == "y"
|
||||
? subYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? subMonths(new Date(), startDateArr[1])
|
||||
: subDays(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "y"
|
||||
? addYears(new Date(), startDateArr[1])
|
||||
: startDateArr[2] == "m"
|
||||
? addMonths(new Date(), startDateArr[1])
|
||||
: addDays(new Date(), startDateArr[1]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
@@ -185,6 +350,9 @@ const RenderDatePicker = ({
|
||||
dateFormat="dd/MM/yyyy"
|
||||
onChange={onChange}
|
||||
selected={value || null}
|
||||
className="govuk-input govuk-input--width-10"
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
|
||||
// value={!value ? null : new Date(value)}
|
||||
/>
|
||||
@@ -195,18 +363,53 @@ const RenderDatePicker = ({
|
||||
};
|
||||
|
||||
export function DateFieldPicker(props) {
|
||||
const { name, label } = props;
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
parentField,
|
||||
form,
|
||||
formProps,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
dateStart,
|
||||
dateEnd,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
(parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
formProps[form].values[parentField]) == parentFieldShowOnValue;
|
||||
|
||||
return (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
//validate={[required]}
|
||||
errorMsg="Select a date"
|
||||
/>
|
||||
<div className="govuk-form-group">
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
validate={eval(validation)}
|
||||
errorMsg="Select a date"
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Field
|
||||
name={name}
|
||||
id={name}
|
||||
label={label}
|
||||
component={RenderDatePicker}
|
||||
validate={eval(validation)}
|
||||
errorMsg="Select a date"
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -332,7 +535,13 @@ const RenderYesNo = ({
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div className="govuk-radios govuk-radios--inline govuk-radios--small">
|
||||
<div
|
||||
className={
|
||||
custom.inline == false
|
||||
? "govuk-radios govuk-radios--small"
|
||||
: "govuk-radios govuk-radios--inline govuk-radios--small"
|
||||
}
|
||||
>
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div
|
||||
className="govuk-radios__item"
|
||||
@@ -346,6 +555,31 @@ const RenderYesNo = ({
|
||||
type="radio"
|
||||
className="govuk-radios__input"
|
||||
value={options[key]}
|
||||
onChange={(e) => {
|
||||
let docListObj = custom.documentList;
|
||||
if (
|
||||
custom.requiredDocumentValue ==
|
||||
"Yes" ||
|
||||
custom.requiredDocumentValue ==
|
||||
"Ydw"
|
||||
) {
|
||||
e.target.value == "Ydw" ||
|
||||
e.target.value == "Yes"
|
||||
? (docListObj = Object.assign(
|
||||
docListObj,
|
||||
{
|
||||
["documentCheckList_" +
|
||||
id]:
|
||||
custom.requiredDocumentLabel,
|
||||
}
|
||||
))
|
||||
: delete docListObj[
|
||||
"documentCheckList_" + id
|
||||
];
|
||||
console.log(docListObj);
|
||||
custom.setDocumentsList(docListObj);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
@@ -365,7 +599,7 @@ const RenderYesNo = ({
|
||||
export function YesNofield(props) {
|
||||
const router = useRouter();
|
||||
|
||||
const { name, label } = props;
|
||||
const { name, label, inline, validation } = props;
|
||||
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
@@ -376,10 +610,291 @@ export function YesNofield(props) {
|
||||
label={props.label}
|
||||
options={yesNo}
|
||||
id={props.name}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
className={"govuk-radios__input"}
|
||||
validate={eval(validation)}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
inline={_.has(props, "inline") ? props.inline : "true"}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const RenderRadio = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
let { t } = useTranslation();
|
||||
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={
|
||||
custom.inline == false
|
||||
? "govuk-radios govuk-radios--small"
|
||||
: "govuk-radios govuk-radios--inline govuk-radios--small"
|
||||
}
|
||||
>
|
||||
{" "}
|
||||
{custom.hint != false && (
|
||||
<div class="govuk-hint">{t(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"
|
||||
className="govuk-radios__input"
|
||||
value={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>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export 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 &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
|
||||
// console.log(showIfHasParentShowValue);
|
||||
|
||||
return (
|
||||
<>
|
||||
{parentField != false ? (
|
||||
showIfHasParentShowValue && (
|
||||
<Field
|
||||
name={name}
|
||||
datafieldname={datafieldname}
|
||||
label={label}
|
||||
options={fieldOptions}
|
||||
id={name}
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
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="Select an option"
|
||||
component={RenderRadio}
|
||||
inline={props.inline}
|
||||
hint={props.hint}
|
||||
validate={eval(validation)}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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) {
|
||||
const router = useRouter();
|
||||
|
||||
console.log(props);
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
const fieldOptions =
|
||||
router.locale == "cy" ? ["Ydw", "Na", "2323"] : ["Yes", "No", "23232"];
|
||||
return (
|
||||
<Field
|
||||
name={props.name}
|
||||
datafieldname={props.datafieldname}
|
||||
label={props.label}
|
||||
options={fieldOptions}
|
||||
id={props.id}
|
||||
className={props.className}
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderCheckBox}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -438,7 +953,8 @@ export function PickList(props) {
|
||||
}
|
||||
|
||||
export function NumericField(props) {
|
||||
const { name, label } = props;
|
||||
const { name, label, validation } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
@@ -448,7 +964,6 @@ export function NumericField(props) {
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
spellCheck="false"
|
||||
@@ -456,13 +971,16 @@ export function NumericField(props) {
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={eval(validation)}
|
||||
component={RenderTextfield}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function DecimalField(props) {
|
||||
const { name, label } = props;
|
||||
const { name, label, validation } = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
@@ -472,7 +990,7 @@ export function DecimalField(props) {
|
||||
<Field
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component="input"
|
||||
// component="input"
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-10"
|
||||
spellCheck="false"
|
||||
@@ -480,6 +998,8 @@ export function DecimalField(props) {
|
||||
pattern="[0-9]*"
|
||||
inputMode="numeric"
|
||||
parse={Number}
|
||||
validate={eval(validation)}
|
||||
component={RenderTextfield}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -491,24 +1011,26 @@ export function ReadOnlyfield(props) {
|
||||
const { name, label, value } = props;
|
||||
//console.log(props.value.refno);
|
||||
return (
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={value}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div className="govuk-form-group">
|
||||
<label className="govuk-label " htmlFor={props.name}>
|
||||
{FieldsTranslations(props.label)}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name={props.name}
|
||||
id={props.name}
|
||||
component={RenderCaseID}
|
||||
value={value}
|
||||
className="govuk-input govuk-input--width-20"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const FieldsTranslations = (label) => {
|
||||
export const FieldsTranslations = (label) => {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
@@ -207,7 +207,7 @@ let Login = (props) => {
|
||||
<h3 className="heading-small card-heading">
|
||||
{t("home:login-card-title")}
|
||||
</h3>{" "}
|
||||
{/* <form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{validLoginID == false && (
|
||||
<div className="govuk-error-message govuk-form-group--error">
|
||||
Incorrect username or password
|
||||
@@ -254,7 +254,7 @@ let Login = (props) => {
|
||||
{t("home:login-card-button")}
|
||||
</button>
|
||||
</div>
|
||||
</form> */}
|
||||
</form>
|
||||
<div className="govuk-form-group govuk-!-margin-top-4">
|
||||
<p className="govuk-body-xs">
|
||||
<a
|
||||
|
||||
@@ -0,0 +1,448 @@
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { useRouter } from "next/router";
|
||||
import { connect } from "react-redux";
|
||||
import { Field, formValueSelector, reduxForm } from "redux-form";
|
||||
|
||||
let AboutYou = (props) => {
|
||||
let { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
|
||||
const { onSubmit, handleSubmit, appellantAgentValue } = props;
|
||||
|
||||
const yesNo = router.locale == "cy" ? ["Ydw", "Na"] : ["Yes", "No"];
|
||||
const appellantAgent =
|
||||
router.locale == "cy" ? ["Apelydd", "Asiant"] : ["Appellant", "Agent"];
|
||||
const contactPref =
|
||||
router.locale == "cy" ? ["Ebost", "Post"] : ["Email", "Post"];
|
||||
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
const emailRegex =
|
||||
/(?:[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/gi;
|
||||
|
||||
const email = (value) =>
|
||||
value && !emailRegex.test(value) ? "Invalid email address" : undefined;
|
||||
const phoneNumber = (value) =>
|
||||
value &&
|
||||
!/^(?:(?:\(?(?:0(?:0|11)\)?[\s-]?\(?|\+)44\)?[\s-]?(?:\(?0\)?[\s-]?)?)|(?:\(?0))(?:(?:\d{5}\)?[\s-]?\d{4,5})|(?:\d{4}\)?[\s-]?(?:\d{5}|\d{3}[\s-]?\d{3}))|(?:\d{3}\)?[\s-]?\d{3}[\s-]?\d{3,4})|(?:\d{2}\)?[\s-]?\d{4}[\s-]?\d{4}))(?:[\s-]?(?:x|ext\.?|\#)\d{3,4})?$/i.test(
|
||||
value
|
||||
)
|
||||
? "Invalid phone number"
|
||||
: undefined;
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
type,
|
||||
errorMsg,
|
||||
disabled,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<label
|
||||
className="govuk-label "
|
||||
htmlFor={id}
|
||||
id={id + "_label"}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{touched &&
|
||||
((error && (
|
||||
<span>{errorMsg ? errorMsg : error}</span>
|
||||
)) ||
|
||||
(warning && <span>{warning}</span>))}
|
||||
</span>
|
||||
)}
|
||||
<input
|
||||
{...input}
|
||||
className={className}
|
||||
name={id}
|
||||
id={id}
|
||||
type={type}
|
||||
disabled={disabled ? true : false}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const RenderYesNo = ({
|
||||
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"}
|
||||
>
|
||||
{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-radios govuk-radios--inline govuk-radios--small">
|
||||
{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"
|
||||
className="govuk-radios__input"
|
||||
value={options[key]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{options[key]}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const onHandleSubmit = (values) => {
|
||||
event.preventDefault();
|
||||
|
||||
console.log(values);
|
||||
router.replace("/newappeal");
|
||||
};
|
||||
return (
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
<Field
|
||||
name={"onbehalfof"}
|
||||
id={"onbehalfof"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t("newappeal:about-you-on-behalf-label")}
|
||||
/>
|
||||
<div className="govuk-form-group">
|
||||
<details class="govuk-details" data-module="govuk-details">
|
||||
<summary class="govuk-details__summary">
|
||||
<span class="govuk-details__summary-text">
|
||||
Who can appeal?
|
||||
</span>
|
||||
</summary>
|
||||
<div class="govuk-details__text">
|
||||
Only those named as an applicant on the original
|
||||
application form can submit an appeal. if you are
|
||||
submitting an appeal on behalf of a company state the
|
||||
name of the company you are representing,
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<Field
|
||||
name={"appellantAgent"}
|
||||
datafieldname={"appellantAgent"}
|
||||
label={t("newappeal:about-you-who-are-you-label")}
|
||||
options={appellantAgent}
|
||||
id={"appellantAgent"}
|
||||
className="govuk-radios__input"
|
||||
validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
{(appellantAgentValue == "Appellant" ||
|
||||
appellantAgentValue == "Apelydd") && (
|
||||
<>
|
||||
<h2 className="govuk-heading-s">
|
||||
{t("newappeal:about-you-appellant-contact-details")}
|
||||
</h2>
|
||||
<Field
|
||||
name={"appellantfirstname"}
|
||||
id={"appellantfirstname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-firstname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantlastname"}
|
||||
id={"appellantlastname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-lastname-label"
|
||||
)}
|
||||
/>{" "}
|
||||
<Field
|
||||
name={"appellantemailaddress"}
|
||||
id={"appellantemailaddress"}
|
||||
component={RenderTextfield}
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-email-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantphonenumber"}
|
||||
id={"appellantphonenumber"}
|
||||
component={RenderTextfield}
|
||||
type="numberz"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-phone-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"contactPrefs"}
|
||||
datafieldname={"contactPrefs"}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-preferences-label"
|
||||
)}
|
||||
options={contactPref}
|
||||
id={"contactPrefs"}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{(appellantAgentValue == "Agent" ||
|
||||
appellantAgentValue == "Asiant") && (
|
||||
<>
|
||||
<h2 className="govuk-heading-s">
|
||||
{t("newappeal:about-you-appellant-contact-details")}
|
||||
</h2>
|
||||
<Field
|
||||
name={"appellantfirstname"}
|
||||
id={"appellantfirstname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-firstname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantlastname"}
|
||||
id={"appellantlastname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-lastname-label"
|
||||
)}
|
||||
/>{" "}
|
||||
<Field
|
||||
name={"appellantemailaddress"}
|
||||
id={"appellantemailaddress"}
|
||||
component={RenderTextfield}
|
||||
type="email"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-email-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"appellantphonenumber"}
|
||||
id={"appellantphonenumber"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-appellant-contact-details-phone-label"
|
||||
)}
|
||||
/>
|
||||
<h2 className="govuk-heading-s">
|
||||
{t("newappeal:about-you-agent-contact-details")}
|
||||
</h2>{" "}
|
||||
<Field
|
||||
name={"agentcompanyname"}
|
||||
id={"agentcompanyname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-companyname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"agentfirstname"}
|
||||
id={"agentfirstname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-firstname-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"agentlastname"}
|
||||
id={"agentlastname"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-lastname-label"
|
||||
)}
|
||||
/>{" "}
|
||||
<Field
|
||||
name={"agentemailaddress"}
|
||||
id={"agentemailaddress"}
|
||||
component={RenderTextfield}
|
||||
type="text"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, email]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-email-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"agentphonenumber"}
|
||||
id={"agentphonenumber"}
|
||||
component={RenderTextfield}
|
||||
type="number"
|
||||
className="govuk-input govuk-input--width-20"
|
||||
validate={[required, phoneNumber]}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-details-phone-label"
|
||||
)}
|
||||
/>
|
||||
<Field
|
||||
name={"contactPrefs"}
|
||||
datafieldname={"contactPrefs"}
|
||||
label={t(
|
||||
"newappeal:about-you-agent-contact-preferences-label"
|
||||
)}
|
||||
options={contactPref}
|
||||
id={"contactPrefs"}
|
||||
className="govuk-radios__input"
|
||||
//validate={[required]}
|
||||
errorMsg="Select an option"
|
||||
component={RenderYesNo}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
>
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
const mapStateToProps = (state) => {
|
||||
return {
|
||||
search: state.search,
|
||||
searchResultsObj: state.searchResultsObj,
|
||||
formData: state.formData,
|
||||
appealType: state.appealType,
|
||||
//form: state.form,
|
||||
};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {};
|
||||
};
|
||||
|
||||
AboutYou = reduxForm({
|
||||
form: "caseForm", // a unique identifier for this form
|
||||
destroyOnUnmount: false,
|
||||
})(AboutYou);
|
||||
|
||||
const selector = formValueSelector("caseForm"); // <-- same as form name
|
||||
|
||||
AboutYou = connect((state) => {
|
||||
// can select values individually
|
||||
const appellantAgentValue = selector(state, "appellantAgent");
|
||||
|
||||
return {
|
||||
appellantAgentValue,
|
||||
};
|
||||
})(AboutYou);
|
||||
|
||||
export default AboutYou;
|
||||
|
||||
// export default connect(
|
||||
// mapStateToProps,
|
||||
// mapDispatchToProps
|
||||
// )(
|
||||
// reduxForm({
|
||||
// form: "caseForm",
|
||||
// destroyOnUnmount: false,
|
||||
// })(AboutYou)
|
||||
// );
|
||||
@@ -5,7 +5,6 @@ import xpath from "xpath";
|
||||
|
||||
import {
|
||||
Textfield,
|
||||
DateField,
|
||||
DateFieldPicker,
|
||||
YesNofield,
|
||||
PickList,
|
||||
@@ -14,6 +13,8 @@ import {
|
||||
ReadOnlyfield,
|
||||
DecimalField,
|
||||
FileUploadField,
|
||||
CheckBoxfield,
|
||||
Radiofield,
|
||||
} from "../elements";
|
||||
|
||||
export default function BuildField(props) {
|
||||
@@ -26,9 +27,11 @@ export default function BuildField(props) {
|
||||
|
||||
const parser = new DOMParser();
|
||||
|
||||
console.log(props);
|
||||
//console.log(props);
|
||||
|
||||
const whichFieldType = (classid) => {
|
||||
//console.log(props.datafieldname, classid);
|
||||
|
||||
switch (classid) {
|
||||
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
|
||||
return (
|
||||
@@ -54,6 +57,7 @@ export default function BuildField(props) {
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
picklistData={props.picklistData}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -62,10 +66,38 @@ export default function BuildField(props) {
|
||||
<YesNofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
validation={props.validation}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
|
||||
return (
|
||||
<Radiofield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
datafieldname={props.datafieldname}
|
||||
options={props.datafieldcontent}
|
||||
inline={false}
|
||||
hint={props.hint}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
setDocumentsList={props.setDocumentsList}
|
||||
documentList={props.documentList}
|
||||
requiredDocumentValue={props.requiredDocumentValue}
|
||||
requiredDocumentLabel={props.requiredDocumentLabel}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
return (
|
||||
<Textfield
|
||||
name={props.datafieldname}
|
||||
@@ -75,6 +107,12 @@ export default function BuildField(props) {
|
||||
props.props.props.appealType.caseReference
|
||||
.ticketnumber
|
||||
}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
hint={props.hint}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -83,6 +121,13 @@ export default function BuildField(props) {
|
||||
<DateFieldPicker
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
dateStart={props.dateStart}
|
||||
dateEnd={props.dateEnd}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -91,6 +136,11 @@ export default function BuildField(props) {
|
||||
<MultiLinefield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -99,6 +149,7 @@ export default function BuildField(props) {
|
||||
<NumericField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -107,6 +158,7 @@ export default function BuildField(props) {
|
||||
<DecimalField
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
@@ -118,6 +170,21 @@ export default function BuildField(props) {
|
||||
/>
|
||||
);
|
||||
break;
|
||||
|
||||
case "{9EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
|
||||
return (
|
||||
<CheckBoxfield
|
||||
name={props.datafieldname}
|
||||
label={props.label}
|
||||
props={props}
|
||||
form={props.props.props.form}
|
||||
formProps={props.props.props.props.form}
|
||||
parentField={props.parentField}
|
||||
parentFieldShowOnValue={props.parentFieldShowOnValue}
|
||||
validation={props.validation}
|
||||
/>
|
||||
);
|
||||
break;
|
||||
default:
|
||||
return (
|
||||
<Textfield name={props.datafieldname} label={props.label} />
|
||||
|
||||
@@ -35,9 +35,61 @@ export default function BuildRow(props) {
|
||||
} else {
|
||||
var rows = xpath.select("//label/@description", doc);
|
||||
var fieldtype = xpath.select("//@classid", doc);
|
||||
var validation = xpath.select("//@validation", doc);
|
||||
var datafieldname = xpath.select("//@datafieldname", doc);
|
||||
var datafieldcontent = xpath.select(
|
||||
"//@datafieldcontent",
|
||||
doc
|
||||
);
|
||||
var parentField = xpath.select("//@parentField", doc);
|
||||
|
||||
console.log(doc, datafieldname[0].value);
|
||||
var parentFieldShowOnValue = xpath.select(
|
||||
"//@parentFieldShowOnValue",
|
||||
doc
|
||||
);
|
||||
|
||||
var requiredDocumentValue = xpath.select(
|
||||
"//@requiredDocumentValue",
|
||||
doc
|
||||
);
|
||||
|
||||
var requiredDocumentLabel = xpath.select(
|
||||
"//@requiredDocumentLabel",
|
||||
doc
|
||||
);
|
||||
|
||||
var hint = xpath.select("//label/@hint", doc);
|
||||
var dateStart = xpath.select("//@dateStart", doc);
|
||||
var dateEnd = xpath.select("//@dateEnd", doc);
|
||||
|
||||
hint = !_.isEmpty(hint) && hint[0].value;
|
||||
|
||||
validation = !_.isEmpty(validation)
|
||||
? validation[0].value
|
||||
: [];
|
||||
|
||||
parentField =
|
||||
!_.isEmpty(parentField) && parentField[0].value;
|
||||
|
||||
parentFieldShowOnValue =
|
||||
!_.isEmpty(parentFieldShowOnValue) &&
|
||||
parentFieldShowOnValue[0].value;
|
||||
|
||||
datafieldcontent =
|
||||
!_.isEmpty(datafieldcontent) &&
|
||||
datafieldcontent[0].value;
|
||||
|
||||
requiredDocumentValue =
|
||||
!_.isEmpty(requiredDocumentValue) &&
|
||||
requiredDocumentValue[0].value;
|
||||
|
||||
requiredDocumentLabel =
|
||||
!_.isEmpty(requiredDocumentLabel) &&
|
||||
requiredDocumentLabel[0].value;
|
||||
|
||||
dateStart = !_.isEmpty(dateStart) && dateStart[0].value;
|
||||
|
||||
dateEnd = !_.isEmpty(dateEnd) && dateEnd[0].value;
|
||||
|
||||
const isRequiredField = jsonpath.query(
|
||||
mandatoryFieldsData,
|
||||
@@ -61,15 +113,25 @@ export default function BuildRow(props) {
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
// console.log(
|
||||
// datafieldname[0].value,
|
||||
// isRequiredField[0].RequiredLevel.Value
|
||||
// );
|
||||
if (typeof isRequiredField[0] != "undefined") {
|
||||
if (
|
||||
isRequiredField[0].RequiredLevel.Value != "None"
|
||||
) {
|
||||
//console.log(datafieldname[0].value, validation);
|
||||
return (
|
||||
<BuildField
|
||||
fieldType={fieldtype[0].value}
|
||||
label={rows[0].value}
|
||||
datafieldname={datafieldname[0].value}
|
||||
datafieldcontent={datafieldcontent}
|
||||
parentField={parentField}
|
||||
parentFieldShowOnValue={
|
||||
parentFieldShowOnValue
|
||||
}
|
||||
key={key}
|
||||
props={props}
|
||||
picklistData={
|
||||
@@ -79,6 +141,22 @@ export default function BuildRow(props) {
|
||||
mandatoryFieldsData={
|
||||
mandatoryFieldsData
|
||||
}
|
||||
hint={hint}
|
||||
requiredDocumentLabel={
|
||||
requiredDocumentLabel
|
||||
}
|
||||
requiredDocumentValue={
|
||||
requiredDocumentValue
|
||||
}
|
||||
validation={validation}
|
||||
dateStart={dateStart}
|
||||
dateEnd={dateEnd}
|
||||
setDocumentsList={
|
||||
props.props.setDocumentsList
|
||||
}
|
||||
documentList={
|
||||
props.props.appealType.documentList
|
||||
}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
|
||||
@@ -10,7 +10,11 @@ import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
|
||||
import {
|
||||
setCaseReference,
|
||||
setCurrentSection,
|
||||
setDocumentsList,
|
||||
} from "../../store/appealType/action";
|
||||
|
||||
import { FieldsTranslations } from "../elements";
|
||||
|
||||
import { query } from "jsonpath";
|
||||
|
||||
let BuildSection = (props) => {
|
||||
@@ -35,6 +39,7 @@ let BuildSection = (props) => {
|
||||
mandatoryFieldsData,
|
||||
} = props;
|
||||
|
||||
const documentListObj = props.appealType.documentList;
|
||||
const currentSection = props.appealType.currentSection;
|
||||
const parser = new DOMParser();
|
||||
var doc = parser.parseFromString(props.formXML, "text/xml");
|
||||
@@ -131,8 +136,7 @@ let BuildSection = (props) => {
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-grid-column-two-thirds">
|
||||
<h1 className="govuk-heading-m govuk-!-margin-top-5">
|
||||
{/* {titles[0].value}{" "} */}
|
||||
Enter your appeal information
|
||||
{titles[0].value}
|
||||
</h1>
|
||||
<form onSubmit={handleSubmit(onHandleSubmit)}>
|
||||
{hasErrors == true ? (
|
||||
@@ -200,7 +204,7 @@ let BuildSection = (props) => {
|
||||
className="at-nav"
|
||||
>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
Progress:
|
||||
{t("newappeal:new-appeal-progress-nav-label")}:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
|
||||
@@ -211,7 +215,11 @@ let BuildSection = (props) => {
|
||||
{Object.keys(titleList).map((key) =>
|
||||
parseInt(key) + 1 == currentSection ? (
|
||||
<li key={key}>
|
||||
<b>{titleList[key].value} </b>
|
||||
<b>
|
||||
{FieldsTranslations(
|
||||
titleList[key].value
|
||||
)}{" "}
|
||||
</b>
|
||||
</li>
|
||||
) : (
|
||||
<li key={key}>
|
||||
@@ -229,10 +237,14 @@ let BuildSection = (props) => {
|
||||
);
|
||||
}}
|
||||
>
|
||||
{titleList[key].value}
|
||||
{FieldsTranslations(
|
||||
titleList[key].value
|
||||
)}
|
||||
</a>
|
||||
) : (
|
||||
titleList[key].value
|
||||
FieldsTranslations(
|
||||
titleList[key].value
|
||||
)
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
@@ -242,6 +254,28 @@ let BuildSection = (props) => {
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
|
||||
{Object.keys(documentListObj).length > 0 && (
|
||||
<div>
|
||||
<h3 className="govuk-heading-s govuk-!-font-weight-bold gov-font-dark-grey">
|
||||
{t("newappeal:new-appeal-documentlist-nav")}:
|
||||
</h3>
|
||||
<hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
|
||||
<ol className="govuk-list document-list">
|
||||
<ul className="govuk-list ">
|
||||
<li className="at-nav__page">
|
||||
<ol className="govuk-list govuk-list--bullet">
|
||||
{Object.entries(documentListObj).map(
|
||||
([key, value]) => {
|
||||
return <li>{value}</li>;
|
||||
}
|
||||
)}
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
</ol>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -265,6 +299,9 @@ const mapDispatchToProps = (dispatch) => {
|
||||
gotoSection: (thisSection) => {
|
||||
dispatch(setCurrentSection(thisSection));
|
||||
},
|
||||
setDocumentsList: (documentList) => {
|
||||
dispatch(setDocumentsList(documentList));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@@ -27,7 +27,7 @@ let CompleteAppeal = (props) => {
|
||||
Object.assign(updateBody, {
|
||||
"pinswg_Appellant@odata.bind":
|
||||
"/contacts(" + props.props.accountDetails.loggedinUserId + ")",
|
||||
"pinswg_AssociatedLPA@odata.bind":
|
||||
"pinswg_LocalPlanningAuthority@odata.bind":
|
||||
"/accounts(" + props.appealType.appealLPA + ")",
|
||||
"pinswg_name": props.appealType.caseReference.ticketnumber,
|
||||
[updateBindAppealTypeToIncident + "@odata.bind"]:
|
||||
@@ -35,6 +35,7 @@ let CompleteAppeal = (props) => {
|
||||
});
|
||||
|
||||
updateBody = JSON.stringify(updateBody);
|
||||
console.log("werwe");
|
||||
|
||||
updateBody = updateBody.replace(/:"Yes"/gm, `:true`);
|
||||
updateBody = updateBody.replace(/:"No"/gm, `:false`);
|
||||
|
||||
@@ -52,7 +52,7 @@ const TimeOut = (props) => {
|
||||
}}
|
||||
element={document}
|
||||
stopOnIdle={true}
|
||||
onActive={console.log(" bbis active", idleTimer)}
|
||||
//onActive={console.log(" bbis active", idleTimer)}
|
||||
onIdle={onIdle}
|
||||
timeout={1000 * inactiveTimeOut * 1}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user