robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

passing a ref api through form and update progress

Browse Source
This commit is contained in:
robbond
2021-07-20 16:46:14 +01:00
parent ff9f2d87c9
commit 1e81f1c97e
13 changed files with 455 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/index.js
+53
View File
@@ -1,6 +1,10 @@
import useSWR from "swr";
import { Field, reduxForm } from "redux-form";
import router from "next/router";
import DatePicker from "react-datepicker";
import React, { useState } from "react";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
export function Textfield(props) {
const { name, label } = props;
@@ -51,6 +55,55 @@ export function MultiLinefield(props) {
);
}
const RenderDatePicker = ({
datafieldname,
name,
label,
input: { onChange, value },
meta: { touched, error },
...custom
}) => {
return (
<>
<DatePicker
{...custom}
autoOk={true}
dateFormat="dd/MM/yyyy"
onChange={onChange}
selected={value || null}
// value={!value ? null : new Date(value)}
/>
{touched && error && <span>{error}</span>}
</>
);
};
export function DateFieldPicker(props) {
const { name, label } = props;
return (
<div className="govuk-form-group">
<fieldset
className="govuk-fieldset"
role="group"
aria-describedby="dob-hint"
>
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
<label className="govuk-fieldset__heading">
{props.label}
</label>
</legend>
<Field
name={props.name}
id={props.name}
component={RenderDatePicker}
/>
</fieldset>
</div>
);
}
export function DateField(props) {
const { name, label } = props;
components/newappeal/buildCheckfield.js
+64
View File
@@ -0,0 +1,64 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import xpath from "xpath";
import {
Textfield,
DateField,
DateFieldPicker,
YesNofield,
PickList,
MultiLinefield,
NumericField,
ReadOnlyfield,
DecimalField,
} from "../elements";
import moment from "moment";
export default function BuildField(props) {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { fieldType, label, datafieldname, fieldValue } = props;
const parser = new DOMParser();
const whichFieldType = (classid) => {
switch (classid) {
case "{270BD3DB-D9AF-4782-9025-509E298DEC0A}":
return <>{fieldValue}</>;
break;
case "{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}":
return <>{fieldValue}</>;
break;
case "{67FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
return <>{fieldValue}</>;
break;
case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
return <>{fieldValue}</>;
break;
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
return (
<>
<span>hello</span>
</>
);
break;
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
return <>{fieldValue}</>;
break;
case "{C6D124CA-7EDA-4a60-AEA9-7FB8D318B68F}":
return <>{fieldValue}</>;
break;
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
return <>{fieldValue}</>;
break;
default:
return <>{fieldValue}</>;
}
};
return <>{whichFieldType(props.fieldType)}</>;
}
components/newappeal/buildcheckrow.js
+59 -10
View File
@@ -2,15 +2,27 @@ import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import xpath from "xpath";
import BuildField from "./buildfield";
import BuildCheckField from "./buildCheckfield";
import { useSelector, shallowEqual, connect } from "react-redux";
import {
setCaseReference,
setCurrentSection,
setFormComplete,
} from "../../store/appealType/action";
export default function BuildCheckRow(props) {
let BuildCheckRow = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { formXML, whichSection, sectionCount, onSubmit } = props;
const {
formXML,
whichSection,
sectionCount,
onSubmit,
updateCurrentSection,
} = props;
const parser = new DOMParser();
var doc = parser.parseFromString(props.formXML, "text/xml");
@@ -41,14 +53,36 @@ export default function BuildCheckRow(props) {
{rows[0].value}
</dt>
<dd className="govuk-summary-list__value">
{
props.props.form["appealForm"].values[
datafieldname[0].value
]
}
{fieldtype[0].value ==
"{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}"
? props.props.form["appealForm"].values[
datafieldname[0].value
] != null
? props.props.form["appealForm"].values[
datafieldname[0].value
].getDate() +
"/" +
(props.props.form["appealForm"].values[
datafieldname[0].value
].getMonth() +
1) +
"/" +
props.props.form["appealForm"].values[
datafieldname[0].value
].getFullYear()
: ""
: props.props.form["appealForm"].values[
datafieldname[0].value
]}
</dd>
<dd className="govuk-summary-list__actions">
<a className="govuk-link" href="#">
<a
className="govuk-link"
href="#"
onClick={() => {
updateCurrentSection(whichSection);
}}
>
Change
<span className="govuk-visually-hidden">
{" "}
@@ -61,4 +95,19 @@ export default function BuildCheckRow(props) {
})}
</>
);
}
};
const mapDispatchToProps = (dispatch) => {
return {
updateCurrentSection: (whichSection) => {
dispatch(setCurrentSection(whichSection));
dispatch(setFormComplete("true"));
},
};
};
const mapStateToProps = (state) => ({
count: state.count,
});
export default connect(mapStateToProps, mapDispatchToProps)(BuildCheckRow);
components/newappeal/buildchecksection.js
+7 -4
View File
@@ -6,12 +6,15 @@ import xpath from "xpath";
import BuildCheckRow from "./buildcheckrow";
import { reduxForm, formValueSelector } from "redux-form";
import { useDispatch, useSelector, shallowEqual, connect } from "react-redux";
import { setCurrentSection } from "../../store/appealType/action";
import {
setCurrentSection,
setFormComplete,
} from "../../store/appealType/action";
let BuildCheckSection = (props) => {
// useEffect(() => {
// window.scrollTo(0, 0);
// });
useEffect(() => {
setFormComplete();
}, []);
let { t } = useTranslation();
components/newappeal/buildfield.js
+5 -1
View File
@@ -5,6 +5,7 @@ import xpath from "xpath";
import {
Textfield,
DateField,
DateFieldPicker,
YesNofield,
PickList,
MultiLinefield,
@@ -58,7 +59,10 @@ export default function BuildField(props) {
break;
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
return (
<DateField name={props.datafieldname} label={props.label} />
<DateFieldPicker
name={props.datafieldname}
label={props.label}
/>
);
break;
case "{E0DECE4B-6FC8-4a8f-A065-082708572369}":
components/newappeal/buildsection.js
+24 -2
View File
@@ -30,6 +30,7 @@ let BuildSection = (props) => {
formTitle,
setCurrentSection,
refno,
gotoSection,
} = props;
const currentSection = props.appealType.currentSection;
@@ -134,11 +135,29 @@ let BuildSection = (props) => {
{Object.keys(titleList).map((key) =>
parseInt(key) + 1 == currentSection ? (
<li key={key}>
<b>{titleList[key].value}</b>
<b>{titleList[key].value} </b>
</li>
) : (
<li key={key}>
{titleList[key].value}
{props.appealType
.formComplete == "true" ||
parseInt(key) + 1 <
currentSection ? (
<a
className="govuk-link"
href="#"
onClick={() => {
gotoSection(
parseInt(key) +
1
);
}}
>
{titleList[key].value}
</a>
) : (
titleList[key].value
)}
</li>
)
)}
@@ -167,6 +186,9 @@ const mapDispatchToProps = (dispatch) => {
setCurrentSection: (currentSection) => {
dispatch(setCurrentSection(currentSection));
},
gotoSection: (thisSection) => {
dispatch(setCurrentSection(thisSection));
},
};
};