added file upload element and icons for file types

components/elements/index.js

@@ -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 = ({
+// const RenderFileUpload2 = ({
-    id,
+//     id,
-    className,
+//     className,
-    rows,
+//     rows,
-    datafieldname,
+//     datafieldname,
-    name,
+//     name,
-    label,
+//     label,
-    input,
+//     input,
-    errorMsg,
+//     errorMsg,
-    meta: { touched, error },
+//     meta: { touched, errorStr },
-    ...custom
+//     ...custom
-}) => {
+// }) => {
-    const [files, setFiles] = useState([]);
+//     const [files, setFiles] = useState([]);
 
-    const onDrop = useCallback((acceptedFiles) => {
+//     const onDrop = useCallback((acceptedFiles, fileRejections, event) => {
-        setFiles(
+//         setFiles(
-            acceptedFiles.map((file) =>
+//             acceptedFiles.map((file) =>
-                Object.assign(file, {
+//                 Object.assign(file, {
-                    preview: URL.createObjectURL(file),
+//                     preview: URL.createObjectURL(file),
-                })
+//                 })
-            )
+//             )
-        );
+//         );
-    }, []);
+//         console.log(acceptedFiles);
+//         event.target[acceptedFiles];
+//         console.log(event.target.files);
+//     }, []);
 
-    const {
+//     const onChange = useCallback((acceptedFiles, fileRejections, event) => {
-        getRootProps,
+//         setFiles(
-        getInputProps,
+//             acceptedFiles.map((file) =>
-        isDragActive,
+//                 Object.assign(file, {
-        isDragAccept,
+//                     preview: URL.createObjectURL(file),
-        isDragReject,
+//                 })
-    } = useDropzone({
+//             )
-        onDrop,
+//         );
-    });
+//         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 : {}),
+            // ...(isDragActive ? activeStyle : {}),
-            ...(isDragAccept ? acceptStyle : {}),
+            // ...(isDragAccept ? acceptStyle : {}),
-            ...(isDragReject ? rejectStyle : {}),
+            // ...(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
+    function bytesToSize(bytes) {
-    useEffect(
+        var sizes = ["Bytes", "KB", "MB", "GB", "TB"];
-        () => () => {
+        if (bytes == 0) return "0 Byte";
-            files.forEach((file) => URL.revokeObjectURL(file.preview));
+        var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
-        },
+        return Math.round(bytes / Math.pow(1024, i), 2) + " " + sizes[i];
-        [files]
+    }
-    );
+
+    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>
+            <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, className: "dropzone" })}>
+                            <div {...getRootProps({ style })}>
+                                {" "}
                                 <input {...getInputProps()} />
-                    <p>Drag and drop files here or click to select files</p>
+                                <div>Drag and drop your files here.</div>
                             </div>
-            </section>{" "}
                             <aside>{thumbs}</aside>
-            {touched && errorStr && <span>{errorStr}</span>}
+                        </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

@@ -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/planning-casework-cy.svg

@@ -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">
+<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</title>
+    <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">
+        <text id="Gwaith-achos-cynllun" fill="#000000">
-            <tspan x="-1" y="18">Gwaith Achos</tspan>
+            <tspan x="-1" y="18">Gwaith achos cynllunio</tspan>
         </text>
     </g>
 </svg>

public/assets/images/planning-casework-en.svg

@@ -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">
+<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>Casework</title>
+    <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">
+        <text id="Planning-casework" fill="#000000">
-            <tspan x="-1" y="18">Casework</tspan>
+            <tspan x="0" y="18">Planning casework</tspan>
         </text>
     </g>
 </svg>

styles/sass/welshgov/_application.scss

@@ -1877,3 +1877,11 @@ fade {
         background-position: 90% 15px;
     }
 }
+
+//fileupload
+
+.fileThumb {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}