upload fies to storage account for appeal

This commit is contained in:
2022-07-07 17:06:56 +01:00
parent b96f3bb916
commit f23ad2a300
28 changed files with 956 additions and 179 deletions
+119 -107
View File
@@ -14,6 +14,14 @@ import FileUpload from "../newappeal/fileupload";
import Dropzone, { useDropzone } from "react-dropzone";
import _ from "lodash";
import { connect, useDispatch } from "react-redux";
import {
getFilesFromBlob,
deleteBlob,
downloadBlob,
hashAPIPath,
} from "../../actions";
import { setFilesForAppeal } from "../../store/appealType/action";
import Link from "next/link";
import {
addYears,
@@ -1246,6 +1254,8 @@ export function FileUploadField(props) {
ticketnumber={props.ticketnumber}
documentTypeCode={props.documentTypeCode}
hint={props.hint}
fileList={props.fileList}
setFilesForAppeal={props.setFilesForAppeal}
/>
</>
);
@@ -1277,104 +1287,6 @@ const rejectStyle = {
borderColor: "#ff1744",
};
// const RenderFileUpload2 = ({
// id,
// className,
// rows,
// datafieldname,
// name,
// label,
// input,
// errorMsg,
// meta: { touched, errorStr },
// ...custom
// }) => {
// const [files, setFiles] = useState([]);
// 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 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;
let { t } = useTranslation();
@@ -1437,11 +1349,54 @@ const RenderFileUpload = (field) => {
case "image/png":
return URL.createObjectURL(fileObj);
break;
default:
return "/assets/images/documenttypes/txt.png";
break;
}
};
const getThumbnailIconByExtension = (blobName) => {
let fileType = blobName.slice(blobName.lastIndexOf(".") + 1);
switch (fileType) {
case "html":
return "/assets/images/documenttypes/html.png";
break;
case "txt":
return "/assets/images/documenttypes/txt.png";
break;
case "doc":
return "/assets/images/documenttypes/doc.png";
break;
case "pdf":
return "/assets/images/documenttypes/pdf.png";
break;
case "docx":
return "/assets/images/documenttypes/docx.png";
break;
case "csv":
return "/assets/images/documenttypes/csv.png";
break;
case "xlsx":
return "/assets/images/documenttypes/xlsx.png";
break;
case "zip":
return "/assets/images/documenttypes/zip.png";
break;
case "jpeg":
case "jpg":
return "/assets/images/documenttypes/jpg.png";
case "png":
return "/assets/images/documenttypes/png.png";
break;
default:
return "/assets/images/documenttypes/txt.png";
break;
}
};
const getDocumentType = (docCode) => {
console.log(docCode);
switch (docCode) {
case "000001":
return "000001";
@@ -1493,6 +1448,25 @@ const RenderFileUpload = (field) => {
return "000000";
}
};
const filelistObj = field.fileList || {};
const blobList = jsonpath.query(
filelistObj,
"$..[?(@.documentType=='" + field.documentTypeCode + "')]"
);
const deleteThisBlob = async (containerName, blobName) => {
console.log(containerName, blobName);
deleteBlob(containerName, blobName)
.then((data) => data)
.then(() => {
getFilesFromBlob(containerName).then((newfilelist) =>
field.setFilesForAppeal(newfilelist)
);
});
};
return (
<>
<Dropzone
@@ -1501,14 +1475,13 @@ const RenderFileUpload = (field) => {
// }
onDrop={(filesToUpload, e) => {
console.log(field.ticketnumber, field.documentTypeCode);
const renamedAcceptedFiles = filesToUpload.map(
(file) =>
new File(
[file],
`${field.ticketnumber}_${getDocumentType(
field.documentTypeCode
)}_${file.name}`,
`${getDocumentType(field.documentTypeCode)}_${
file.name
}`,
{
type: file.type,
}
@@ -1519,14 +1492,14 @@ const RenderFileUpload = (field) => {
>
{({ getRootProps, getInputProps }) => (
<>
{field.hint != false && (
<div className="govuk-hint">{t(field.hint)}</div>
{/* {field.hint != false && (
<div className="govuk-hint">ss{t(field.hint)}</div>
)}
<div className="govuk-form-group"></div>
<div className="govuk-form-group"></div> */}
<section className="container">
<div {...getRootProps({ style })}>
{" "}
<input {...getInputProps()} />
<input id={field.id} {...getInputProps()} />
<div>Drag and drop your files here.</div>
</div>
<aside>{thumbs}</aside>
@@ -1556,6 +1529,45 @@ const RenderFileUpload = (field) => {
))}
</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.ticketnumber, blob.name);
}}
title="Remove this file"
>
&minus;
</span>
</div>
<img
src={getThumbnailIconByExtension(blob.name)}
alt={blob.name}
width="50"
/>
<Link
key={i}
scroll={false}
href={
"/api/file/downloadblob?container=" +
field.ticketnumber.toLowerCase() +
"&blobname=" +
blob.name +
blob.hashedfilepath
}
>
<a className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5 govuk-link">
{blob.name} ({bytesToSize(blob.contentLength)})
</a>
</Link>
</div>
))}{" "}
</>
);
};
+144 -6
View File
@@ -8,6 +8,7 @@ import { Field, reduxForm } from "redux-form";
import { connect } from "react-redux";
import Dropzone, { useDropzone } from "react-dropzone";
import { uploadFiles } from "../../actions";
import { getContainers } from "../../actions/azurestorage";
const required = (errorMsg) => (value) =>
value || typeof value === "number" ? undefined : errorMsg;
@@ -158,6 +159,60 @@ const RenderFileUpload = (field) => {
break;
}
};
const getDocumentType = (docCode) => {
switch (docCode) {
case "000001":
return "000001";
break;
case "000002":
return "000002";
break;
case "000003":
return "000003";
break;
case "000004":
return "000004";
break;
case "000005":
return "000005";
break;
case "000006":
return "000006";
break;
case "000007":
return "000007";
break;
case "000008":
return "000008";
break;
case "000009":
return "000009";
break;
case "000010":
return "000010";
break;
case "000011":
return "000011";
break;
case "000012":
return "000012";
break;
case "000013":
return "000013";
break;
case "000014":
return "000014";
break;
case "000015":
return "000015";
break;
default:
return "000000";
}
};
return (
<div>
<Dropzone
@@ -166,14 +221,20 @@ const RenderFileUpload = (field) => {
// }
onDrop={(filesToUpload, e) => {
console.log(field.ticketnumber, field.documentTypeCode);
const renamedAcceptedFiles = filesToUpload.map(
(file) =>
new File([file], `${file.name}_${+new Date()}`, {
type: file.type,
})
new File(
[file],
`${field.ticketnumber}_${getDocumentType(
field.documentTypeCode
)}_${file.name}`,
{
type: file.type,
}
)
);
field.input.onChange(renamedAcceptedFiles);
console.log(renamedAcceptedFiles);
}}
>
{({ getRootProps, getInputProps }) => (
@@ -221,7 +282,7 @@ const RenderFileUpload = (field) => {
let UploadFile = (props) => {
let { t } = useTranslation();
//const [showSpinnerState, setShowSpinnerState] = useState(false);
const { handleSubmit, pristine, reset, submitting } = props;
const { handleSubmit, pristine, reset, submitting, formContent } = props;
const router = useRouter();
const { locale } = router;
@@ -229,8 +290,19 @@ let UploadFile = (props) => {
const onHandleSubmit = async (values) => {
//spinnerState();
console.log(values);
console.log(formContent);
// getContainers();
const uploadAction = await uploadFiles(values);
var dataObj = Object.assign(values, formContent);
var fileObj = dataObj.fileList;
delete dataObj.fileList;
const uploadAction = await uploadFiles(dataObj, fileObj).then(
(data) => {
console.log("hello", data);
}
);
// router.push({
// pathname:
// router.locale == "cy"
@@ -270,6 +342,7 @@ let UploadFile = (props) => {
type="text"
aria-describedby="caseReference-hint"
hint1="Case Reference"
value="CAS-00764-L0Q9W2"
/>
</div>
<div className="govuk-grid-row">
@@ -281,6 +354,7 @@ let UploadFile = (props) => {
//validate={[required]}
label={props.label}
errorMsg="Is required"
ticketnumber="CAS-00764-L0Q9W2"
/>
</div>
<div className="govuk-form-group">
@@ -306,6 +380,69 @@ const mapStateToProps = (state) => {
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
formContent: {
"pinswg_caserecovered": "No",
"pinswg_siteaddresspostcode": "Site Address Postcode",
"pinswg_inspectorneededonsite": "Yes",
"pinswg_sitewithingreenbelt": "No",
"pinswg_siteaddressline2": "Site Address Line 2",
"pinswg_siteaddressline1": "Site Address Line 1",
"pinswg_s106unilateralsubmitted": "No",
"modifiedon": "2022-06-28T13:11:34Z",
"pinswg_developmentaffectsettingofalisted": "No",
"pinswg_planningappeals78id":
"57b533aa-43f1-ec11-aade-00224800be9c",
"pinswg_name": "CAS-00764-L0Q9W2",
"pinswg_whyisinspectorneededonsite": "to be nosey",
"pinswg_sitewithinsssi": "No",
"pinswg_healthandsafetyissuesonsite": "No",
"pinswg_developmentdescriptionchanged": "Yes",
"_stageid_value": "126e9c46-d51c-4623-aabf-aa30b34bfa54",
"traversedpath": "126e9c46-d51c-4623-aabf-aa30b34bfa54",
"createdon": "2022-06-21T09:22:29Z",
"timezoneruleversionnumber": 0,
"processid": "e4f065a6-157e-42f9-963a-9292d5041509",
"pinswg_priornotificationpriorapproval": "No",
"pinswg_predeterminedindicator": "No",
"pinswg_protectedspecies": "No",
"versionnumber": 912609,
"pinswg_siteaddresscounty": "Site Address County",
"pinswg_procedure": 846040000,
"pinswg_dateoflpadecision": "2022-06-22T23:00:00Z",
"pinswg_eiarequired": "No",
"pinswg_costappliedforindicator": "No",
"pinswg_areaofsiteinhectaresdec": 22,
"pinswg_detailedeiascreeningrequired": "No",
"pinswg_casepublishflag": "No",
"pinswg_siteaddresstown": "Site Address Town",
"utcconversiontimezonecode": 85,
"pinswg_caseworkreason": 846040005,
"pinswg_ownershipcertificate": 846040002,
"pinswg_lpadecisiononapplicationmade": "Yes",
"pinswg_floorspaceinsquaremeters": 111,
"_modifiedby_value": "149b3e11-5206-ec11-aac8-00224800be9c",
"pinswg_dateofapplication": "2022-06-20T23:00:00Z",
"pinswg_incarelatestoca": "No",
"_createdby_value": "149b3e11-5206-ec11-aac8-00224800be9c",
"pinswg_additionalappealsmade": "No",
"statuscode": 1,
"pinswg_siteviewablefromroad": "Yes",
"_pinswg_localplanningauthority_value":
"744c69f4-48da-eb11-aac5-00224800be9c",
"pinswg_lpaapplicationreference": "11111weweqweqwe",
"pinswg_recovered": "No",
"statecode": 0,
"pinswg_isfloodingandissue": "No",
"pinswg_isthesitewithinanaonb": "No",
"_organizationid_value": "01191a4d-105f-eb11-aaba-00224800be9c",
"pinswg_developmentdescription": "something to go here",
"pinswg_agriculturalholding": 846040000,
"_pinswg_planningappeals78ids_value":
"50b533aa-43f1-ec11-aade-00224800be9c",
},
initialValues: {
caseReference: "CAS-00764-L0Q9W2",
},
};
};
@@ -320,5 +457,6 @@ export default connect(
reduxForm({
form: "uploadFileForm",
destroyOnUnmount: false,
enableReinitialize: true, // this is needed!!
})(UploadFile)
);
+6 -2
View File
@@ -39,7 +39,7 @@ export default function BuildField(props) {
case "{07FAC785-CD58-4f9f-ABB3-4B7DDC6ED5ED}":
return <>{fieldValue}</>;
break;
case "{ 4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
case "{4273EDBD-AC1D-40d3-9FB2-095C621B552D}":
return <>{fieldValue}</>;
break;
case "{5B773807-9FB2-42db-97C3-7A91EFF8ADFF}":
@@ -58,8 +58,12 @@ export default function BuildField(props) {
case "{C3EFE0C3-0EC6-42be-8349-CBD9079DFD8E}":
return <>{fieldValue}</>;
break;
case "{16D63FD6-119B-4353-BDCA-18358721C3FE}":
return <> docs {fieldValue}</>;
break;
default:
return <>{fieldValue}</>;
return <>ss{fieldValue}</>;
}
};
+18 -1
View File
@@ -55,6 +55,14 @@ let BuildCheckSection = (props) => {
// /searchresults
};
const onHandleSubmit = (values) => {
//alert(1);
//updateCaseProgress(values);
// setCurrentSection(9999);
alert(1);
};
return (
<div className="govuk-grid-row" key={1222}>
<div className="govuk-grid-column-full">
@@ -83,12 +91,21 @@ let BuildCheckSection = (props) => {
<dl className="govuk-summary-list govuk-!-margin-bottom-9 at-summary-list"></dl>
</div>
<div className="govuk-button-group">
<button
type="submit"
onClick={() => {
console.log(props.props.form.appealForm.values);
}}
className="govuk-button"
>
{t("newappeal:submit-appeal-button")}
</button>
<a
className="govuk-button"
data-module="govuk-button"
onClick={() => setCurrentSection(9999)}
>
{t("newappeal:submit-appeal-button")}
sss{t("newappeal:submit-appeal-button")}
</a>
</div>
</div>
+6
View File
@@ -183,6 +183,12 @@ export default function BuildField(props) {
}
documentTypeCode={props.documentTypeCode}
hint={props.hint}
fileList={
props.props.props.props.appealType.fileList
}
setFilesForAppeal={
props.props.props.setFilesForAppeal
}
/>
</div>
);
+3
View File
@@ -157,6 +157,9 @@ export default function BuildRow(props) {
props.props.appealType.documentList
}
documentTypeCode={documentTypeCode}
setFilesForAppeal={
props.props.setFilesForAppeal
}
/>
);
// } else {
+28 -1
View File
@@ -11,9 +11,10 @@ import {
setCaseReference,
setCurrentSection,
setDocumentsList,
setFilesForAppeal,
} from "../../store/appealType/action";
import { getFormCollectionByID } from "../utils";
import { updateCase, patchCase } from "../../actions";
import { updateCase, patchCase, uploadFiles } from "../../actions";
import { FieldsTranslations } from "../elements";
import jsonpath from "jsonpath";
@@ -69,10 +70,33 @@ let BuildSection = (props) => {
const handleParam = (setValue) => (e) => setValue(e.target.value);
const uploadAppealFiles = (values) => {
// get filelists from values object
let fileListObj = _.filter(values, function (v, key) {
return _.includes(key, "pinswg_fileUpload");
});
console.log(fileListObj);
var dataObj = values;
for (let key in dataObj) {
_.includes(key, "pinswg_fileUpload") == true && delete dataObj[key];
}
uploadFiles(dataObj, fileListObj).then((data) => {
console.log("hello", data);
return data;
});
};
const updateCaseProgress = (values) => {
let incidentId = props.appealType.caseReference.incidentid;
let updateBody = values || {};
uploadAppealFiles(values);
let appTypeCollection = getFormCollectionByID(
props.appealType.appealTypeID
);
@@ -402,6 +426,9 @@ const mapDispatchToProps = (dispatch) => {
setDocumentsList: (documentList) => {
dispatch(setDocumentsList(documentList));
},
setFilesForAppeal: (blobList) => {
dispatch(setFilesForAppeal(blobList));
},
};
};
-24
View File
@@ -1,24 +0,0 @@
import Link from "next/link";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
export default function MakeEnforcementNotice() {
let { t } = useTranslation();
const router = useRouter();
const { locale } = router;
return (
<div className="card" id="casescomment-card">
<div className="card-body appealModule">
<p className="govuk-body-s">
Including an enforcement listed building notice.
</p>
<div className="appealCTA">
<Link href="/newappeal/selectappeal">
<a className="govuk-button">A enforcement notice</a>
</Link>
</div>
</div>
</div>
);
}