create pdf reps for lpa
This commit is contained in:
@@ -8,6 +8,20 @@ import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
import DatePicker, { registerLocale, setDefaultLocale } from "react-datepicker";
|
||||
import "react-datepicker/dist/react-datepicker.css";
|
||||
|
||||
import {
|
||||
addYears,
|
||||
addMonths,
|
||||
addDays,
|
||||
subYears,
|
||||
subMonths,
|
||||
subDays,
|
||||
parseISO,
|
||||
} from "date-fns";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export const RenderRadioList = ({
|
||||
datafieldname,
|
||||
@@ -54,7 +68,13 @@ export const RenderRadioList = ({
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<div className="govuk-radios govuk-radios--small">
|
||||
<div
|
||||
className={
|
||||
custom.inline == true
|
||||
? "govuk-radios govuk-radios--inline govuk-radios--small"
|
||||
: "govuk-radios govuk-radios--small"
|
||||
}
|
||||
>
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div
|
||||
className="govuk-radios__item"
|
||||
@@ -204,6 +224,121 @@ export const RenderCondtionalRadioList = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderLPACondtionalRadioList = ({
|
||||
datafieldname,
|
||||
legend,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
options,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
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={id + "-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>
|
||||
)}
|
||||
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
|
||||
<label
|
||||
className=" govuk-body-m"
|
||||
id="representationCapacity_label"
|
||||
>
|
||||
{legend}
|
||||
</label>
|
||||
</legend>
|
||||
|
||||
<div id={id + "-hint"} className="govuk-hint"></div>
|
||||
<div className="govuk-radios govuk-radios--small">
|
||||
{Object.keys(options).map((key, index) => (
|
||||
<div key={key} className="govuk-!-margin-bottom-3">
|
||||
<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]}
|
||||
validate={[required]}
|
||||
/>
|
||||
<label
|
||||
className="govuk-label govuk-radios__label"
|
||||
htmlFor={id + "_" + index}
|
||||
>
|
||||
{options[key]}
|
||||
</label>
|
||||
</div>
|
||||
{value == custom.optionSelect &&
|
||||
options[key] == custom.optionSelect && (
|
||||
<div
|
||||
className="govuk-radios__conditional "
|
||||
id={id}
|
||||
>
|
||||
<div
|
||||
className="govuk-form-group"
|
||||
key={"yes_group_" + key}
|
||||
>
|
||||
<label
|
||||
className="govuk-label"
|
||||
htmlFor={id + "_details"}
|
||||
>
|
||||
{custom.conditionalLabel}
|
||||
</label>
|
||||
<Field
|
||||
className="govuk-input govuk-!-width-one-half"
|
||||
id={id + "Evidence"}
|
||||
name={id + "Evidence"}
|
||||
component={RenderMultiline}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderPickList = ({
|
||||
datafieldname,
|
||||
name,
|
||||
@@ -294,6 +429,118 @@ export const RenderTextfield = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderDatePicker = ({
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
id,
|
||||
errorMsg,
|
||||
input: { onChange, value },
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
|
||||
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
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group "
|
||||
}
|
||||
>
|
||||
<fieldset
|
||||
className="govuk-fieldset"
|
||||
role="group"
|
||||
aria-describedby={id + "_label"}
|
||||
>
|
||||
<legend className="govuk-fieldset__legend govuk-fieldset__legend--s govuk-!-font-weight-regular">
|
||||
<label
|
||||
className="govuk-fieldset__heading"
|
||||
id={id + "_label"}
|
||||
htmlFor={id}
|
||||
>
|
||||
{label}
|
||||
</label>
|
||||
</legend>
|
||||
{touched && error && (
|
||||
<span
|
||||
id={id + "-error"}
|
||||
className="govuk-error-message"
|
||||
>
|
||||
<span className="govuk-visually-hidden">
|
||||
Error:
|
||||
</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{/* {value}
|
||||
<br />
|
||||
{moment(value).format("DD/MM/YY")}
|
||||
<br /> */}
|
||||
|
||||
<DatePicker
|
||||
{...custom}
|
||||
locale={router.locale}
|
||||
autoOk={true}
|
||||
id={id}
|
||||
dateFormat="dd/MM/yyyy"
|
||||
onChange={onChange}
|
||||
selected={
|
||||
value
|
||||
? typeof value != "object"
|
||||
? parseISO(value)
|
||||
: value
|
||||
: null
|
||||
} //{parseISO(value) || null}
|
||||
className="govuk-input govuk-input--width-10"
|
||||
minDate={minDate}
|
||||
maxDate={maxDate}
|
||||
//value={!value ? null : moment(value, "DD/MM/yyyy")}
|
||||
/>
|
||||
</fieldset>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderMultiline = ({
|
||||
id,
|
||||
className,
|
||||
@@ -314,6 +561,69 @@ export const RenderMultiline = ({
|
||||
input.onChange(valStr);
|
||||
};
|
||||
|
||||
var modules = {
|
||||
toolbar: [
|
||||
[{ "header": [1, 2, false] }],
|
||||
["bold", "italic", "underline", "blockquote"],
|
||||
[{ "list": "ordered" }, { "list": "bullet" }, "link"],
|
||||
["clean"],
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className="govuk-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
{"hint" in custom}
|
||||
|
||||
{"hint" in custom && (
|
||||
<div
|
||||
id={name + "-hint"}
|
||||
className="govuk-hint govuk-!-font-size-14"
|
||||
>
|
||||
{custom.hint}
|
||||
</div>
|
||||
)}
|
||||
<ReactQuill
|
||||
modules={modules}
|
||||
theme="snow"
|
||||
value={editValue}
|
||||
onChange={changeEdit}
|
||||
/>
|
||||
<textarea
|
||||
{...input}
|
||||
id={id}
|
||||
name={name}
|
||||
rows={rows}
|
||||
className={className}
|
||||
value={editValue}
|
||||
style={{ display: "none" }}
|
||||
></textarea>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const RenderRichMultiline = ({
|
||||
id,
|
||||
className,
|
||||
rows,
|
||||
datafieldname,
|
||||
name,
|
||||
label,
|
||||
input,
|
||||
meta: { touched, error },
|
||||
...custom
|
||||
}) => {
|
||||
const [editValue, setEditValue] = useState(
|
||||
input.value != null ? input.value : ""
|
||||
);
|
||||
|
||||
const changeEdit = (valStr) => {
|
||||
setEditValue(valStr);
|
||||
input.onChange(valStr);
|
||||
};
|
||||
|
||||
var modules = {
|
||||
toolbar: [
|
||||
[{ "header": [1, 2, false] }],
|
||||
@@ -325,6 +635,9 @@ export const RenderMultiline = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className="govuk-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<ReactQuill
|
||||
modules={modules}
|
||||
theme="snow"
|
||||
|
||||
Reference in New Issue
Block a user