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

added file upload element and icons for file types

Browse Source
This commit is contained in:
robbond
2022-02-07 15:18:17 +00:00
parent 049483ef46
commit a78c45ce24
13 changed files with 218 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/elements/index.js
+189 -56
View File
@@ -11,7 +11,7 @@ import fieldLookup from "../../data/crmfieldlookuptranslations.json";
import pickListLookup from "../../data/picklistLookups.json";
import useTranslation from "next-translate/useTranslation";
import FileUpload from "../newappeal/fileupload";
import { useDropzone } from "react-dropzone";
import Dropzone, { useDropzone } from "react-dropzone";
const RenderTextfield = ({
id,
@@ -548,13 +548,11 @@ export function FileUploadField(props) {
name={props.name}
id={props.name}
component={RenderFileUpload}
type="text"
className="govuk-input govuk-input--width-20"
//validate={[required]}
label={props.label}
errorMsg="Is required"
/>
helllo
</div>
);
}
@@ -585,51 +583,119 @@ const rejectStyle = {
borderColor: "#ff1744",
};
const RenderFileUpload = ({
id,
className,
rows,
datafieldname,
name,
label,
input,
errorMsg,
meta: { touched, error },
...custom
}) => {
const [files, setFiles] = useState([]);
// const RenderFileUpload2 = ({
// id,
// className,
// rows,
// datafieldname,
// name,
// label,
// input,
// errorMsg,
// meta: { touched, errorStr },
// ...custom
// }) => {
// const [files, setFiles] = useState([]);
const onDrop = useCallback((acceptedFiles) => {
setFiles(
acceptedFiles.map((file) =>
Object.assign(file, {
preview: URL.createObjectURL(file),
})
)
);
}, []);
// const onDrop = useCallback((acceptedFiles, fileRejections, event) => {
// setFiles(
// acceptedFiles.map((file) =>
// Object.assign(file, {
// preview: URL.createObjectURL(file),
// })
// )
// );
// console.log(acceptedFiles);
// event.target[acceptedFiles];
// console.log(event.target.files);
// }, []);
const {
getRootProps,
getInputProps,
isDragActive,
isDragAccept,
isDragReject,
} = useDropzone({
onDrop,
});
// const onChange = useCallback((acceptedFiles, fileRejections, event) => {
// setFiles(
// acceptedFiles.map((file) =>
// Object.assign(file, {
// preview: URL.createObjectURL(file),
// })
// )
// );
// event.target.files[acceptedFiles];
// console.log(event.target.files);
// }, []);
// const {
// getRootProps,
// getInputProps,
// isDragActive,
// isDragAccept,
// isDragReject,
// } = useDropzone({
// onDrop,
// onChange,
// });
// const style = useMemo(
// () => ({
// ...baseStyle,
// ...(isDragActive ? activeStyle : {}),
// ...(isDragAccept ? acceptStyle : {}),
// ...(isDragReject ? rejectStyle : {}),
// }),
// [isDragActive, isDragReject, isDragAccept]
// );
// const thumbs = files.map((file) => (
// <div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
// <img src={file.preview} alt={file.name} width="50" /> -{" "}
// <span className="govuk-body">
// {file.name} ({file.size / 1024}kb)
// </span>
// </div>
// ));
// // clean up
// useEffect(
// () => () => {
// files.forEach((file) => URL.revokeObjectURL(file.preview));
// },
// [files]
// );
// const onChangeFile = (e) => {
// const {
// input: { onChange },
// } = props;
// onChange(e.target.files[0]);
// };
// return (
// <div className="govuk-grid-row">
// <div className="govuk-form-group"></div>
// <section className="container">
// <div {...getRootProps({ style })}>
// <input {...getInputProps()} />
// <div>Drag and drop your images here.</div>
// </div>
// </section>{" "}
// <aside>{thumbs}</aside>
// {touched && errorStr && <span>{errorStr}</span>}
// </div>
// );
// };
const RenderFileUpload = (field) => {
const files = field.input.value;
const style = useMemo(
() => ({
...baseStyle,
...(isDragActive ? activeStyle : {}),
...(isDragAccept ? acceptStyle : {}),
...(isDragReject ? rejectStyle : {}),
// ...(isDragActive ? activeStyle : {}),
// ...(isDragAccept ? acceptStyle : {}),
// ...(isDragReject ? rejectStyle : {}),
}),
[isDragActive, isDragReject, isDragAccept]
[]
// [isDragActive, isDragReject, isDragAccept]
);
const [filesList, setFilesList] = useState([]);
const thumbs = files.map((file) => (
const thumbs = filesList.map((file) => (
<div key={file.name} className="govuk-!-margin-bottom-5 fileThumb">
<img src={file.preview} alt={file.name} width="50" /> -{" "}
<span className="govuk-body">
@@ -638,24 +704,91 @@ const RenderFileUpload = ({
</div>
));
// clean up
useEffect(
() => () => {
files.forEach((file) => URL.revokeObjectURL(file.preview));
},
[files]
);
function bytesToSize(bytes) {
var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
if (bytes == 0) return "0 Byte";
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
}
const getThumbnailIcon = (fileObj, fileType) => {
switch (fileType) {
case "text/html":
return "/assets/images/documentTypes/html.png";
break;
case "text/plain":
return "/assets/images/documentTypes/txt.png";
break;
case "application/msword":
return "/assets/images/documentTypes/doc.png";
break;
case "application/pdf":
return "/assets/images/documentTypes/pdf.png";
break;
case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
return "/assets/images/documentTypes/docx.png";
break;
case "text/csv":
return "/assets/images/documentTypes/csv.png";
break;
case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
return "/assets/images/documentTypes/xlsx.png";
break;
case "application/zip":
return "/assets/images/documentTypes/zip.png";
break;
case "image/jpeg":
case "image/png":
return URL.createObjectURL(fileObj);
break;
}
};
return (
<div className="govuk-grid-row">
<div className="govuk-form-group"></div>
<section className="container">
<div {...getRootProps({ style, className: "dropzone" })}>
<input {...getInputProps()} />
<p>Drag and drop files here or click to select files</p>
</div>
</section>{" "}
<aside>{thumbs}</aside>
{touched && errorStr && <span>{errorStr}</span>}
<div>
<Dropzone
onDrop={(filesToUpload, e) =>
field.input.onChange(filesToUpload)
}
>
{({ getRootProps, getInputProps }) => (
<div className="govuk-grid-row">
<div className="govuk-form-group"></div>
<section className="container">
<div {...getRootProps({ style })}>
{" "}
<input {...getInputProps()} />
<div>Drag and drop your files here.</div>
</div>
<aside>{thumbs}</aside>
</section>
</div>
)}
</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-!-padding-left-5">
{file.name} ({bytesToSize(file.size)})
</span>
</div>
))}
</ul>
)}
</div>
);
};
components/search/advancedsearch.js
+13 -1
View File
@@ -17,13 +17,24 @@ export const minLength = (errorMsg) => (value) =>
? errorMsg //`Must be ${min} characters or more`
: undefined;
export const leastOneValue = (errorMsg) => {};
let AdvancedSearch = (props) => {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
const { LPAData, onSubmit, handleSubmit, myportal } = props;
const {
LPAData,
onSubmit,
handleSubmit,
myportal,
error,
pristine,
reset,
submitting,
} = props;
const appealOptionsObj = _.isEmpty(props)
? [{}]
@@ -461,6 +472,7 @@ let AdvancedSearch = (props) => {
type="submit"
name="search"
className="govuk-button"
disabled={pristine}
>
{t("common:search-button")}
</button>
public/assets/images/documenttypes/csv.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/assets/images/documenttypes/doc.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

public/assets/images/documenttypes/docx.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

public/assets/images/documenttypes/html.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

public/assets/images/documenttypes/pdf.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

public/assets/images/documenttypes/txt.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 979 B

public/assets/images/documenttypes/xlsx.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

public/assets/images/documenttypes/zip.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 932 B

public/assets/images/planning-casework-cy.svg
+4 -4
View File
@@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="163px" height="19px" viewBox="0 0 163 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Gwaith Achos</title>
<svg width="279px" height="24px" viewBox="0 0 279 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Gwaith achos cynllun</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rockwell-Bold, Rockwell" font-size="24" font-weight="bold" letter-spacing="-0.75">
<text id="Gwaith-Achos" fill="#000000">
<tspan x="-1" y="18">Gwaith Achos</tspan>
<text id="Gwaith-achos-cynllun" fill="#000000">
<tspan x="-1" y="18">Gwaith achos cynllunio</tspan>
</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 529 B

After

Width:  |  Height:  |  Size: 555 B

public/assets/images/planning-casework-en.svg
+4 -4
View File
@@ -1,9 +1,9 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="118px" height="19px" viewBox="0 0 118 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Casework</title>
<svg width="227px" height="24px" viewBox="0 0 227 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Planning casework</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Rockwell-Bold, Rockwell" font-size="24" font-weight="bold" letter-spacing="-0.75">
<text id="Casework" fill="#000000">
<tspan x="-1" y="18">Casework</tspan>
<text id="Planning-casework" fill="#000000">
<tspan x="0" y="18">Planning casework</tspan>
</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 517 B

After

Width:  |  Height:  |  Size: 543 B

styles/sass/welshgov/_application.scss
+8
View File
@@ -1877,3 +1877,11 @@ fade {
background-position: 90% 15px;
}
}
//fileupload
.fileThumb {
display: flex;
flex-direction: row;
align-items: center;
}