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

reps wip

Browse Source
This commit is contained in:
robbond
2022-12-16 11:36:01 +00:00
parent f6d934d951
commit 98aefdd867
36 changed files with 1258 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/representationElements.js
+190 -23
View File
@@ -84,29 +84,176 @@ export const RenderRadioList = ({
);
};
export const RenderCondtionalRadioList = ({
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-fieldset__heading govuk-body-m"
id="representationCapacity_label"
>
{legend}
</label>
</legend>
<div id={id + "-hint"} className="govuk-hint">
e.g. &lsquo;Owners of Numbers 1-5 High Street&lsquo;, or
&lsquo;Mr and Mrs Smith&lsquo; or &lsquo;The executors
of Mr Evans&lsquo; estate&lsquo;
</div>
<div className="govuk-radios">
{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 == "Yes" && options[key] == "Yes" && (
<div
className="govuk-radios__conditional "
id={"conditional-" + id}
>
<div
className="govuk-form-group"
key={"yes_group_" + key}
>
<label
className="govuk-label"
htmlFor={id + "_details"}
>
Enter the name of the
company/group/organisation *
</label>
<Field
className="govuk-input govuk-!-width-one-half"
id={id + "_details"}
name={id + "_details"}
component="input"
type="text"
/>
</div>
</div>
)}
</div>
))}
</div>
</fieldset>
</div>
</>
);
};
export const RenderPickList = ({
datafieldname,
name,
label,
input,
optionsArr,
meta: { touched, errorStr },
meta: { touched, error },
errorMsg,
}) => {
return (
<div>
<select {...input} className="govuk-select " id={name} name={name}>
<option>Select...</option>
{Object.keys(optionsArr).map((key, index) => {
return (
<option key={key} value={optionsArr[key]}>
{optionsArr[key]}
</option>
);
})}
</select>
<>
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<label className="govuk-label" htmlFor="sort">
{label}
</label>
{touched && error && (
<span
id="passport-issued-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">Error:</span>{" "}
{errorMsg}
</span>
)}
{touched && errorStr && <span>{errorStr}</span>}
</div>
<div>
<select
{...input}
className="govuk-select "
id={name}
name={name}
>
<option>Select...</option>
{Object.keys(optionsArr).map((key, index) => {
return (
<option key={key} value={optionsArr[key]}>
{optionsArr[key]}
</option>
);
})}
</select>
</div>
</div>
</>
);
};
@@ -123,6 +270,8 @@ export const RenderTextfield = ({
meta: { touched, error },
...custom
}) => {
const required = (value) => (value ? undefined : "Required");
return (
<>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
@@ -140,6 +289,7 @@ export const RenderTextfield = ({
name={name}
id={id}
type={type}
validate={[required]}
/>
</>
);
@@ -219,6 +369,7 @@ export function MultiLinefield(props) {
component={RenderMultiline}
type="text"
rows="5"
validate={[required]}
className="govuk-textarea govuk-input--width-30"
aria-describedby={props.name + "-hint"}
/>
@@ -448,15 +599,9 @@ export const RenderFileUpload = (field) => {
onDrop={(filesToUpload, e) => {
const renamedAcceptedFiles = filesToUpload.map(
(file) =>
new File(
[file],
`${getDocumentType(field.documentTypeCode)}_${
file.name
}`,
{
type: file.type,
}
)
new File([file], `${file.name}`, {
type: file.type,
})
);
field.input.onChange(renamedAcceptedFiles);
}}
@@ -561,3 +706,25 @@ export const RenderFileUpload = (field) => {
</>
);
};
export function FileUploadField(props) {
return (
<>
<h2 className="govuk-heading-s">{props.label} </h2>
<Field
name={props.name}
id={props.name}
component={RenderFileUpload}
className="govuk-input govuk-input--width-20"
//validate={[required]}
label={props.label}
errorMsg="Is required"
ticketnumber={props.ticketnumber}
hint={props.hint}
fileList={props.fileList}
setFilesForAppeal={props.setFilesForAppeal}
containerID={props.containerID}
/>
</>
);
}