rich text field and pdf create for appeal
This commit is contained in:
+277
-109
@@ -25,6 +25,7 @@ import {
|
||||
getThumbnailIconByExtension,
|
||||
bytesToSize,
|
||||
} from "../utils";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
import {
|
||||
addYears,
|
||||
@@ -35,6 +36,8 @@ import {
|
||||
subDays,
|
||||
parseISO,
|
||||
} from "date-fns";
|
||||
const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
|
||||
import "react-quill/dist/quill.snow.css";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -66,7 +69,16 @@ const RenderTextfield = ({
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
<input {...input} className={className} name={name} id={id} />
|
||||
<input
|
||||
{...input}
|
||||
className={className}
|
||||
name={name}
|
||||
id={id}
|
||||
maxLength={
|
||||
custom.hasOwnProperty("maxFieldLength") &&
|
||||
custom.maxFieldLength
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -82,6 +94,7 @@ export function Textfield(props) {
|
||||
formProps,
|
||||
parentField,
|
||||
parentFieldShowOnValue,
|
||||
maxFieldLength,
|
||||
hint,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
@@ -134,6 +147,7 @@ export function Textfield(props) {
|
||||
validate={eval(validation)}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
@@ -146,6 +160,7 @@ export function Textfield(props) {
|
||||
validate={eval(validation)}
|
||||
label={props.label}
|
||||
errorMsg="Is required"
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
@@ -193,6 +208,11 @@ const RenderMultiline = ({
|
||||
rows={rows}
|
||||
className={className}
|
||||
{...input}
|
||||
maxLength={
|
||||
custom.hasOwnProperty("maxFieldLength")
|
||||
? custom.maxFieldLength
|
||||
: ""
|
||||
}
|
||||
></textarea>
|
||||
</div>
|
||||
</>
|
||||
@@ -208,6 +228,7 @@ export function MultiLinefield(props) {
|
||||
parentField,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
maxFieldLength,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
@@ -249,6 +270,7 @@ export function MultiLinefield(props) {
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@@ -275,6 +297,146 @@ export function MultiLinefield(props) {
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
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] }],
|
||||
["bold", "italic", "underline", "blockquote"],
|
||||
[{ "list": "ordered" }, { "list": "bullet" }],
|
||||
["clean"],
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<label className="govuk-label" htmlFor={name}>
|
||||
{label}
|
||||
</label>
|
||||
<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 function RichMultiLinefield(props) {
|
||||
const {
|
||||
name,
|
||||
label,
|
||||
form,
|
||||
formProps,
|
||||
parentField,
|
||||
parentFieldShowOnValue,
|
||||
validation,
|
||||
maxFieldLength,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Is required");
|
||||
|
||||
var showIfHasParentShowValue =
|
||||
parentField != false &&
|
||||
!_.isEmpty(formProps[form]) &&
|
||||
_.has(formProps[form].values, parentField) &&
|
||||
parentFieldShowOnValue.indexOf(
|
||||
formProps[form].values[parentField].toString()
|
||||
) > -1;
|
||||
|
||||
(showIfHasParentShowValue == parentField) != false &&
|
||||
showIfHasParentShowValue;
|
||||
|
||||
//console.log(showIfHasParentShowValue, formProps[form].values[parentField]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{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={RenderRichMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</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={RenderRichMultiline}
|
||||
type="text"
|
||||
rows="5"
|
||||
className="govuk-textarea govuk-input--width-30"
|
||||
aria-describedby={props.name + "-hint"}
|
||||
validate={eval(validation)}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -1087,6 +1249,7 @@ export function NumericField(props) {
|
||||
validate={eval(validation)}
|
||||
component={RenderTextfield}
|
||||
label={label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@@ -1121,6 +1284,7 @@ export function DecimalField(props) {
|
||||
formProps,
|
||||
parentFieldShowOnValue,
|
||||
parentField,
|
||||
maxFieldLength,
|
||||
} = props;
|
||||
const required = (value) => (value ? undefined : "Required");
|
||||
|
||||
@@ -1157,6 +1321,7 @@ export function DecimalField(props) {
|
||||
validate={eval(validation)}
|
||||
component={RenderTextfield}
|
||||
label={props.label}
|
||||
maxFieldLength={props.maxFieldLength}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
@@ -1431,121 +1596,124 @@ const RenderFileUpload = (field) => {
|
||||
});
|
||||
};
|
||||
|
||||
return <>
|
||||
<Dropzone
|
||||
accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/tiff,image/jpeg,application/zip"
|
||||
onDrop={(filesToUpload, e) => {
|
||||
const renamedAcceptedFiles = filesToUpload.map(
|
||||
(file) =>
|
||||
new File(
|
||||
[file],
|
||||
`${getDocumentType(field.documentTypeCode)}_${
|
||||
file.name
|
||||
}`,
|
||||
{
|
||||
type: file.type,
|
||||
}
|
||||
)
|
||||
);
|
||||
field.input.onChange(renamedAcceptedFiles);
|
||||
}}
|
||||
>
|
||||
{({ getRootProps, getInputProps }) => (
|
||||
<>
|
||||
{/* {field.hint != false && (
|
||||
return (
|
||||
<>
|
||||
<Dropzone
|
||||
accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,image/tiff,image/jpeg,application/zip"
|
||||
onDrop={(filesToUpload, e) => {
|
||||
const renamedAcceptedFiles = filesToUpload.map(
|
||||
(file) =>
|
||||
new File(
|
||||
[file],
|
||||
`${getDocumentType(field.documentTypeCode)}_${
|
||||
file.name
|
||||
}`,
|
||||
{
|
||||
type: file.type,
|
||||
}
|
||||
)
|
||||
);
|
||||
field.input.onChange(renamedAcceptedFiles);
|
||||
}}
|
||||
>
|
||||
{({ getRootProps, getInputProps }) => (
|
||||
<>
|
||||
{/* {field.hint != false && (
|
||||
<div className="govuk-hint">ss{t(field.hint)}</div>
|
||||
)}
|
||||
<div className="govuk-form-group"></div> */}
|
||||
<section className="container">
|
||||
<div {...getRootProps({ style })}>
|
||||
{" "}
|
||||
<input id={field.id} {...getInputProps()} />
|
||||
<div>
|
||||
{t(
|
||||
"newappeal:new-appeal-fileupload-drop-label"
|
||||
)}
|
||||
<section className="container">
|
||||
<div {...getRootProps({ style })}>
|
||||
{" "}
|
||||
<input id={field.id} {...getInputProps()} />
|
||||
<div>
|
||||
{t(
|
||||
"newappeal:new-appeal-fileupload-drop-label"
|
||||
)}
|
||||
</div>
|
||||
<em>
|
||||
(
|
||||
{t(
|
||||
"newappeal:new-appeal-fileupload-file-list-label"
|
||||
)}
|
||||
)
|
||||
</em>
|
||||
</div>
|
||||
<em>
|
||||
(
|
||||
{t(
|
||||
"newappeal:new-appeal-fileupload-file-list-label"
|
||||
)}
|
||||
)
|
||||
</em>
|
||||
</div>
|
||||
<aside>{thumbs}</aside>
|
||||
</section>
|
||||
</>
|
||||
<aside>{thumbs}</aside>
|
||||
</section>
|
||||
</>
|
||||
)}
|
||||
</Dropzone>
|
||||
{field.meta.touched && field.meta.error && (
|
||||
<span className="error">{field.meta.error}</span>
|
||||
)}
|
||||
</Dropzone>
|
||||
{field.meta.touched && field.meta.error && (
|
||||
<span className="error">{field.meta.error}</span>
|
||||
)}
|
||||
{files && Array.isArray(files) && (
|
||||
<ul>
|
||||
{files.map((file, i) => (
|
||||
<div
|
||||
key={file.name}
|
||||
className="govuk-!-margin-bottom-5 fileThumb"
|
||||
>
|
||||
<img
|
||||
src={getThumbnailIcon(file, file.type)}
|
||||
alt={file.name}
|
||||
width="50"
|
||||
/>
|
||||
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
|
||||
{/* {file.name.slice(file.name.indexOf("_") + 1)} ( */}{" "}
|
||||
{file.name}( ({bytesToSize(file.size)})
|
||||
{files && Array.isArray(files) && (
|
||||
<ul>
|
||||
{files.map((file, i) => (
|
||||
<div
|
||||
key={file.name}
|
||||
className="govuk-!-margin-bottom-5 fileThumb"
|
||||
>
|
||||
<img
|
||||
src={getThumbnailIcon(file, file.type)}
|
||||
alt={file.name}
|
||||
width="50"
|
||||
/>
|
||||
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
|
||||
{/* {file.name.slice(file.name.indexOf("_") + 1)} ( */}{" "}
|
||||
{file.name}( ({bytesToSize(file.size)})
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{blobList.map((blob, i) => (
|
||||
<div
|
||||
key={blob.name + "_" + i}
|
||||
className="govuk-!-margin-bottom-5 fileThumb govuk-!-margin-top-5"
|
||||
>
|
||||
<div className="">
|
||||
<span
|
||||
className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
|
||||
onClick={() => {
|
||||
deleteThisBlob(
|
||||
field.containerID,
|
||||
blob.name,
|
||||
blob.hasheddeletepath,
|
||||
blob.hashgetblobs,
|
||||
field.ticketnumber
|
||||
);
|
||||
}}
|
||||
title="Remove this file"
|
||||
>
|
||||
−
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{blobList.map((blob, i) => (
|
||||
<div
|
||||
key={blob.name + "_" + i}
|
||||
className="govuk-!-margin-bottom-5 fileThumb govuk-!-margin-top-5"
|
||||
>
|
||||
<div className="">
|
||||
<span
|
||||
className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
|
||||
onClick={() => {
|
||||
deleteThisBlob(
|
||||
field.containerID,
|
||||
blob.name,
|
||||
blob.hasheddeletepath,
|
||||
blob.hashgetblobs,
|
||||
field.ticketnumber
|
||||
);
|
||||
}}
|
||||
title="Remove this file"
|
||||
<img
|
||||
src={getThumbnailIconByExtension(blob.name)}
|
||||
alt={blob.name}
|
||||
width="50"
|
||||
/>
|
||||
|
||||
<Link
|
||||
key={i}
|
||||
scroll={false}
|
||||
href={
|
||||
"/api/file/downloadblob?container=" +
|
||||
field.containerID +
|
||||
"&casefolderID=" +
|
||||
field.ticketnumber +
|
||||
"&blobname=" +
|
||||
blob.name +
|
||||
blob.hashedfilepath
|
||||
}
|
||||
className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link"
|
||||
>
|
||||
−
|
||||
</span>
|
||||
{blob.name.slice(blob.name.indexOf("_") + 1)}(
|
||||
{bytesToSize(blob.contentLength)})
|
||||
</Link>
|
||||
</div>
|
||||
<img
|
||||
src={getThumbnailIconByExtension(blob.name)}
|
||||
alt={blob.name}
|
||||
width="50"
|
||||
/>
|
||||
|
||||
<Link
|
||||
key={i}
|
||||
scroll={false}
|
||||
href={
|
||||
"/api/file/downloadblob?container=" +
|
||||
field.containerID +
|
||||
"&casefolderID=" +
|
||||
field.ticketnumber +
|
||||
"&blobname=" +
|
||||
blob.name +
|
||||
blob.hashedfilepath
|
||||
}
|
||||
className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link">
|
||||
|
||||
{blob.name.slice(blob.name.indexOf("_") + 1)}({bytesToSize(blob.contentLength)})
|
||||
</Link>
|
||||
</div>
|
||||
))}{" "}
|
||||
</>;
|
||||
))}{" "}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user