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

upodated rep file upload

Browse Source
This commit is contained in:
robbond
2024-12-18 12:39:17 +00:00
parent 54728d9565
commit 97cfeb562a
13 changed files with 433 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/representation/index.js
+9
View File
@@ -59,6 +59,7 @@ let MakeRepresentation = (props) => {
setShowQuestionnaireSection,
showQuestionnaireSection,
initialValues,
setCurrentReference,
} = props;
const formObj = props.props.form;
let setCaseQueryObj = props[currentType] || {};
@@ -413,6 +414,7 @@ let MakeRepresentation = (props) => {
updateRepresentation={updateRepresentation}
setSavingStatus={setSavingStatus}
savingStatus={savingStatus}
setCurrentReference={setCurrentReference}
/>
);
} else {
@@ -442,6 +444,7 @@ let MakeRepresentation = (props) => {
updateRepresentation={updateRepresentation}
setSavingStatus={setSavingStatus}
savingStatus={savingStatus}
setCurrentReference={setCurrentReference}
/>;
break;
case "appellant":
@@ -467,6 +470,7 @@ let MakeRepresentation = (props) => {
updateRepresentation={updateRepresentation}
setSavingStatus={setSavingStatus}
savingStatus={savingStatus}
setCurrentReference={setCurrentReference}
/>
);
break;
@@ -502,6 +506,7 @@ let MakeRepresentation = (props) => {
updateRepresentation={updateRepresentation}
setSavingStatus={setSavingStatus}
savingStatus={savingStatus}
setCurrentReference={setCurrentReference}
/>
);
break;
@@ -528,6 +533,7 @@ let MakeRepresentation = (props) => {
updateRepresentation={updateRepresentation}
setSavingStatus={setSavingStatus}
savingStatus={savingStatus}
setCurrentReference={setCurrentReference}
/>
);
break;
@@ -554,6 +560,7 @@ let MakeRepresentation = (props) => {
updateRepresentation={updateRepresentation}
setSavingStatus={setSavingStatus}
savingStatus={savingStatus}
setCurrentReference={setCurrentReference}
/>
);
break;
@@ -575,6 +582,7 @@ let MakeRepresentation = (props) => {
props={props}
setRepFileName={setRepFileName}
updateRepresentation={updateRepresentation}
setCurrentReference={setCurrentReference}
/>
);
break;
@@ -596,6 +604,7 @@ let MakeRepresentation = (props) => {
caseReference={caseReference}
setRepFileName={setRepFileName}
updateRepresentation={updateRepresentation}
setCurrentReference={setCurrentReference}
/>
);
}
components/case/representation/representationAppellant.js
+39 -46
View File
@@ -12,10 +12,11 @@ import {
} from "./representationElements";
import { useDropzone } from "react-dropzone";
// import {
// setRepresentationCapacity,
// setRepresentationSubmit,
// } from "../../../store/currentView/action";
import {
setRepresentationCapacity,
setRepresentationSubmit,
setFilesForRepresentations,
} from "../../../store/currentView/action";
const RepAppellant = (props) => {
let { t } = useTranslation();
@@ -32,6 +33,7 @@ const RepAppellant = (props) => {
updateRepresentation,
setSavingStatus,
savingStatus,
setFilesForRepresentations,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
@@ -170,51 +172,36 @@ const RepAppellant = (props) => {
)}
ticketnumber={props.props.caseReference}
hint={"sdsd"}
fileList={[]}
setFilesForRepresentation={[]}
fileList={
props.currentView.caseReference.hasOwnProperty(
"repDetails"
)
? props.currentView.caseReference.repDetails.hasOwnProperty(
"filesList"
) &&
props.currentView
.caseReference.repDetails
.filesList.length > 0
? props.currentView
.caseReference
.repDetails.filesList
: []
: []
}
setFilesForRepresentations={
setFilesForRepresentations
}
containerID={
props.props.props.accountDetails
.containerID
}
filenamePrefix={props.formObj}
props={props.props.props}
setCurrentReference={
props.setCurrentReference
}
/>
</div>
{props.currentView.caseReference.hasOwnProperty(
"repDetails"
) ? (
props.currentView.caseReference.repDetails.hasOwnProperty(
"filesList"
) &&
props.currentView.caseReference.repDetails
.filesList.length > 0 ? (
<div className="govuk-form-group govuk-!-margin-bottom-9">
{filterFilesList.map((blob, i) => (
<div
key={blob.name + "_" + i}
className="govuk-!-margin-bottom-5 fileThumb "
>
<img
src={getThumbnailIconByExtension(
blob.name
)}
alt={blob.name}
width="50"
/>
<span className="govuk-body govuk-!-font-size-14 govuk-!-padding-left-5">
{blob.name} (
{bytesToSize(blob.size)}
)
</span>
</div>
))}
</div>
) : (
""
)
) : (
""
)}
</fieldset>
</div>{" "}
</div>
@@ -296,10 +283,16 @@ const RepAppellant = (props) => {
//const mapStateToProps = (state, props) => {};
const mapDispatchToProps = (dispatch) => ({
updateField: (form, field, newValue) =>
dispatch(change(form, field, newValue)),
});
const mapDispatchToProps = (dispatch) => {
return {
updateField: (form, field, newValue) =>
dispatch(change(form, field, newValue)),
setFilesForRepresentations: (fileList) => {
dispatch(setFilesForRepresentations(fileList));
},
};
};
export default connect(
null,
components/case/representation/representationCapacitySelection.js
+2
View File
@@ -17,6 +17,7 @@ let RepCapacitySelection = (props) => {
casesObj,
validate,
handleSubmit,
setCurrentReference,
} = props;
const { acceptedFiles, getRootProps, getInputProps } = useDropzone();
const files = acceptedFiles.map((file) => (
@@ -37,6 +38,7 @@ let RepCapacitySelection = (props) => {
searchResultsObj={props.props.searchResultsObj}
myRepresentations={props.props.myRepresentations}
props={props}
setCurrentReference={setCurrentReference}
/>{" "}
<div id="rep-details" className="">
<div className="govuk-grid-column-full">
components/case/representation/representationCompleteSubmit.js
+5 -8
View File
@@ -141,14 +141,15 @@ const RepCompleteSubmit = (props) => {
let buildAppealFilesArray = [];
let filesUploadObj =
formObj.representationForm.values.representationDocuments;
let filesUploadObj = props.currentView.fileList;
// formObj.representationForm.values.representationDocuments;
for (let key in filesUploadObj) {
typeof filesUploadObj[key].name != "undefined" &&
buildAppealFilesArray.push({
"name": filesUploadObj[key].name,
"size": filesUploadObj[key].size,
"size": filesUploadObj[key].contentLength,
});
}
@@ -163,8 +164,6 @@ const RepCompleteSubmit = (props) => {
// ? formObj.representationForm.values.filesList
// : [];
console.log(buildAppealFilesArray);
let arrUniq = [
...new Map(buildAppealFilesArray.map((v) => [v.name, v])).values(),
];
@@ -177,9 +176,7 @@ const RepCompleteSubmit = (props) => {
// (obj1, i, arr) => arr.findIndex((obj2) => obj2.name === obj1.name) === i
// );
console.log(arrUniq, buildAppealFilesArray);
arrUniq = arrUniq.concat(filesUploadObj);
//arrUniq = arrUniq.concat(filesUploadObj);
function removeNullObjects(arr) {
if (arr.length === 0) {
components/case/representation/representationElements.js
+213 -49
View File
@@ -8,6 +8,14 @@ import "react-datepicker/dist/react-datepicker.css";
import Dropzone from "react-dropzone";
import "react-quill-new/dist/quill.snow.css";
import { Field } from "redux-form";
import {
uploadSingleFile,
deleteBlob,
deleteRepBlob,
getFilesFromBlobHashed,
getFilesFromBlobproxy,
} from "../../../actions";
const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
import {
@@ -911,9 +919,9 @@ export const RenderFileUpload = (field) => {
const filelistObj = field.fileList || {};
console.log("----", filelistObj.length);
//let blobList = filelistObj;
let blobList = filelistObj;
let blobList = field.props.currentView.fileList;
function removeNullObjects(arr) {
if (arr.length === 0) {
@@ -939,9 +947,9 @@ export const RenderFileUpload = (field) => {
);
}
blobList = removeEmptyObjects(blobList);
blobList = removeObjectsWithUndefinedKey(blobList, "name");
blobList = removeNullObjects(blobList);
//blobList = removeEmptyObjects(blobList);
//blobList = removeObjectsWithUndefinedKey(blobList, "name");
//blobList = removeNullObjects(blobList);
let buildAppealFilesArray = [];
@@ -978,22 +986,60 @@ export const RenderFileUpload = (field) => {
blobName,
deleteblobhash,
getblobshash,
casefolderID
casefolderID,
filenamePrefix
) => {
deleteBlob(containerName, blobName, deleteblobhash, casefolderID)
deleteRepBlob(
containerName,
blobName,
deleteblobhash,
casefolderID,
filenamePrefix
)
.then((data) => data)
.then(() => {
getFilesFromBlobHashed(
containerName,
getblobshash,
casefolderID
).then((newfilelist) => field.setFilesForAppeal(newfilelist));
casefolderID + "/" + filenamePrefix
).then((newfilelist) =>
field.setFilesForRepresentations(newfilelist.value[0])
);
});
};
const [rejectedFiles, setRejectedFiles] = useState([]); // Store rejected files
const [completedUploadFiles, setCompletedUploadFiles] = useState(false);
const [uploadCountMessage, setUploadCountMessage] = useState("");
const handleDropRejected = (fileRejections) => {
const errors = fileRejections
.map(({ file, errors }) => {
return errors.map((error) => {
if (error.code === "file-too-large") {
return `${file.name} is too large. Please upload a smaller file.`;
}
if (error.code === "file-invalid-type") {
return `${file.name} has an invalid type. Please upload an image.`;
}
return `${file.name} is invalid.`;
});
})
.flat(); // Flatten the errors array
setRejectedFiles(errors); // Store the error messages for rejected files
};
// Handle accepted files (clear error message when files are accepted)
const handleDropAccepted = () => {
setErrorMessage(null); // Clear any previous error messages when files are accepted
setRejectedFiles([]); // Clear any previously rejected file errorsss
};
return (
<>
<Dropzone
maxSize={10 * 1024 * 1024}
accept={{
"application/pdf": [".pdf"],
"application/msword": [".doc"],
@@ -1011,14 +1057,94 @@ export const RenderFileUpload = (field) => {
(file) =>
new File(
[file],
`${field.filenamePrefix}_-_Attachment_-_${file.name}`,
`${
field.filenamePrefix.hasOwnProperty(
"representationForm"
) &&
field.filenamePrefix.representationForm.hasOwnProperty(
"values"
) &&
field.filenamePrefix.representationForm.values.hasOwnProperty(
"repfile_name"
) &&
field.filenamePrefix.representationForm
.values.repfile_name
}_-_Attachment_-_${file.name}`,
{
type: file.type,
}
)
);
field.input.onChange(renamedAcceptedFiles);
setUploadCountMessage(renamedAcceptedFiles.length);
uploadSingleFile(
renamedAcceptedFiles,
field.containerID,
field.ticketnumber +
"/" +
field.filenamePrefix.representationForm.values
.repfile_name
).then((data) => {
console.log(data);
let buildAppealFilesArray = [];
let values = field;
let filesUploadObj = renamedAcceptedFiles;
for (let key in filesUploadObj) {
typeof filesUploadObj[key].name != "undefined" &&
buildAppealFilesArray.push({
"name": filesUploadObj[key].name,
"size": filesUploadObj[key].size,
});
}
//console.log(buildAppealFilesArray);
function removeDuplicates(arr, key) {
const seen = new Set();
return arr.filter((item) => {
const value = item[key];
if (seen.has(value)) {
return false; // Duplicate found
} else {
seen.add(value); // Add value to the set
return true; // Keep the item
}
});
}
buildAppealFilesArray = values.hasOwnProperty(
"fileList"
)
? buildAppealFilesArray.concat(values.fileList)
: buildAppealFilesArray;
buildAppealFilesArray = removeDuplicates(
buildAppealFilesArray,
"name"
);
// Object.assign(values, {
// "fileList": buildAppealFilesArray,
// });
getFilesFromBlobproxy(
field.containerID,
field.ticketnumber +
"/" +
(typeof field.filenamePrefix != "object"
? field.filenamePrefix
: field.filenamePrefix.representationForm
.values.repfile_name)
).then((data) => {
data = data.value || {};
field.input.value == null;
field.setFilesForRepresentations(data[0]);
setCompletedUploadFiles(true);
});
});
}}
onDropRejected={handleDropRejected}
onDropAccepted={handleDropAccepted}
>
{({ getRootProps, getInputProps }) => (
<>
@@ -1030,6 +1156,7 @@ export const RenderFileUpload = (field) => {
{t(
"myrepresentations:fileupload-drop-label"
)}
(Max 500MB)
</div>
<em>
(
@@ -1040,57 +1167,93 @@ export const RenderFileUpload = (field) => {
</em>
</div>
<aside>{thumbs}</aside>
{uploadCountMessage > 0 &&
completedUploadFiles == false && (
<div className="govuk-body govuk-!-font-size-14">
Uploading {uploadCountMessage} files{" "}
</div>
)}
{completedUploadFiles > 0 &&
uploadCountMessage > 0 && (
<div className="govuk-body govuk-!-font-size-14">
{uploadCountMessage} files uploaded{" "}
</div>
)}
</section>
</>
)}
</Dropzone>
{rejectedFiles.length > 0 && (
<div style={{ color: "red", marginTop: "10px" }}>
<ul>
{rejectedFiles.map((error, index) => (
<li key={index}>{error}</li>
))}
</ul>
</div>
)}
{field.meta.touched && field.meta.error && (
<span className="error">{field.meta.error}</span>
)}
{filesUploadObj && Array.isArray(filesUploadObj) && (
<ul>
{filesUploadObj.map(
(file, i) =>
typeof file.name != "undefined" && (
<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} ({bytesToSize(file.size)})
</span>
</div>
)
)}
</ul>
{!completedUploadFiles &&
filesUploadObj &&
Array.isArray(filesUploadObj) &&
filesUploadObj.map(
(file, i) =>
typeof file.name != "undefined" && (
<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} ({bytesToSize(file.size)}
)<br />
<div id={file.name + "_" + i}>
{completedUploadFiles ? (
<p className="govuk-body govuk-!-font-size-14">
Upload complete
</p>
) : (
<p className="govuk-body textloading govuk-!-font-size-14">
Uploading...
</p>
)}
</div>
</span>
</div>
)
)}
{blobList.length > 0 && (
<h4>{t("myrepresentations:previously-added-files")}</h4>
)}
{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"
>
&minus;
</span>
</div>
<span
className="govuk-summary-list__actionLink watched_link govuk-!-margin-right-5 govuk-!-text-align-left"
onClick={() => {
setUploadCountMessage(uploadCountMessage - 1);
deleteThisBlob(
field.containerID,
blob.name,
blob.hasheddeletepath,
blob.hashgetblobs,
field.ticketnumber,
blob.path.split("/")[1]
);
}}
title="Remove this file"
>
&minus;
</span>
<img
src={getThumbnailIconByExtension(blob.name)}
alt={blob.name}
@@ -1134,7 +1297,7 @@ export function FileUploadField(props) {
ticketnumber={props.ticketnumber}
hint={props.hint}
fileList={props.fileList}
setFilesForAppeal={props.setFilesForAppeal}
setFilesForRepresentations={props.setFilesForRepresentations}
containerID={props.containerID}
filenamePrefix={
props.filenamePrefix.hasOwnProperty("representationForm") &&
@@ -1151,6 +1314,7 @@ export function FileUploadField(props) {
.values.repfile_name
: ""
}
props={props}
/>
</>
);
components/representation.js
+1
View File
@@ -33,6 +33,7 @@ const CaseRepresentation = (props) => {
setShowQuestionnaireSection={
props.setShowQuestionnaireSection
}
setCurrentReference={props.setCurrentReference}
/>
</div>
</div>