22500 Phase 1: extract pure helpers from elements index
This commit is contained in:
@@ -0,0 +1,110 @@
|
||||
export const getThumbnailIconByMimeType = (fileType) => {
|
||||
switch (fileType) {
|
||||
case "text/html":
|
||||
return "/assets/images/documenttypes/html.png";
|
||||
case "text/plain":
|
||||
return "/assets/images/documenttypes/txt.png";
|
||||
case "application/msword":
|
||||
return "/assets/images/documenttypes/doc.png";
|
||||
case "application/pdf":
|
||||
return "/assets/images/documenttypes/pdf.png";
|
||||
case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
|
||||
return "/assets/images/documenttypes/docx.png";
|
||||
case "text/csv":
|
||||
return "/assets/images/documenttypes/csv.png";
|
||||
case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
|
||||
return "/assets/images/documenttypes/xlsx.png";
|
||||
case "image/jpeg":
|
||||
return "/assets/images/documenttypes/jpg.png";
|
||||
case "image/png":
|
||||
return "/assets/images/documenttypes/png.png";
|
||||
default:
|
||||
return "/assets/images/documenttypes/default.png";
|
||||
}
|
||||
};
|
||||
|
||||
export const getDocumentTypePrefix = (docCode) => {
|
||||
const repDate = new Date();
|
||||
|
||||
let day = repDate.getDate();
|
||||
let month = repDate.getMonth() + 1;
|
||||
let year = repDate.getFullYear();
|
||||
|
||||
const pdfFileNameDateStamp =
|
||||
year + "-" + ("0" + month).slice(-2) + "-" + ("0" + day).slice(-2);
|
||||
|
||||
switch (docCode) {
|
||||
case "000000":
|
||||
return pdfFileNameDateStamp + "_-_Statement_of_Case";
|
||||
case "000001":
|
||||
return pdfFileNameDateStamp + "_-_Application_Form";
|
||||
case "000002":
|
||||
return pdfFileNameDateStamp + "_-_Site_Ownership_Certificate";
|
||||
case "000003":
|
||||
return pdfFileNameDateStamp + "_-_Decision_Notice";
|
||||
case "000004":
|
||||
return pdfFileNameDateStamp + "_-_Site_Location_Plan";
|
||||
case "000005":
|
||||
return pdfFileNameDateStamp + "_-_Plans_Drawing_Documents";
|
||||
case "000006":
|
||||
return (
|
||||
pdfFileNameDateStamp + "_-_Additional_Plans_Drawings_Documents"
|
||||
);
|
||||
case "000007":
|
||||
return pdfFileNameDateStamp + "_-_Design_and_Access_Statement";
|
||||
case "000008":
|
||||
return pdfFileNameDateStamp + "_-_NSB_LPA_Additional_Documents";
|
||||
case "000009":
|
||||
return pdfFileNameDateStamp + "_-_LPA_Correspondence";
|
||||
case "000010":
|
||||
return pdfFileNameDateStamp + "_-_LPA_Original_Permission";
|
||||
case "000011":
|
||||
return pdfFileNameDateStamp + "_-_LPA's_Registration_Letter";
|
||||
case "000012":
|
||||
return pdfFileNameDateStamp + "_-_Environmental_Statement";
|
||||
case "000013":
|
||||
return pdfFileNameDateStamp + "_-_Cost_of_Application";
|
||||
case "000014":
|
||||
return pdfFileNameDateStamp + "_-_Other_Relevant_Material";
|
||||
case "000015":
|
||||
return (
|
||||
pdfFileNameDateStamp +
|
||||
"_-_S106_Agreement_or_Unilateral_Undertaking"
|
||||
);
|
||||
default:
|
||||
return pdfFileNameDateStamp + "_-_000000_-_";
|
||||
}
|
||||
};
|
||||
|
||||
const FILENAME_ALLOWED = /^[A-Za-z0-9 ._\-:()—']+$/;
|
||||
|
||||
export const validateUploadFilename = (
|
||||
file,
|
||||
t,
|
||||
invalidFilenameLabelKey = "newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
|
||||
) => {
|
||||
const name = file.name;
|
||||
|
||||
if (name.includes("#")) {
|
||||
return {
|
||||
code: "filename-invalid-chars",
|
||||
message: `${name} ${t(invalidFilenameLabelKey)}`
|
||||
};
|
||||
}
|
||||
|
||||
if (!FILENAME_ALLOWED.test(name)) {
|
||||
return {
|
||||
code: "filename-invalid-chars",
|
||||
message: `${name} ${t(invalidFilenameLabelKey)}`
|
||||
};
|
||||
}
|
||||
|
||||
if (/[<>"/\\|?*]/.test(name)) {
|
||||
return {
|
||||
code: "filename-invalid-chars",
|
||||
message: `${name} ${t(invalidFilenameLabelKey)}`
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
@@ -0,0 +1,36 @@
|
||||
import { JSONPath as jsonpath } from "jsonpath-plus";
|
||||
|
||||
export const getFieldTranslation = ({
|
||||
label,
|
||||
locale,
|
||||
appealtypes,
|
||||
fieldLookup
|
||||
}) => {
|
||||
let formObj = jsonpath({
|
||||
path: "$['" + appealtypes + "']",
|
||||
json: fieldLookup,
|
||||
eval: true
|
||||
});
|
||||
|
||||
return locale == "cy"
|
||||
? jsonpath({
|
||||
path: '$..[?(@ && @.value=="' + label + '")].value_cy',
|
||||
json: formObj,
|
||||
eval: true
|
||||
})[0]
|
||||
: label;
|
||||
};
|
||||
|
||||
export const getPickListTranslation = ({
|
||||
optionValue,
|
||||
locale,
|
||||
pickListLookup
|
||||
}) => {
|
||||
return locale == "cy"
|
||||
? jsonpath({
|
||||
path: '$..[?(@ && @.value=="' + optionValue + '")].value_cy',
|
||||
json: pickListLookup,
|
||||
eval: true
|
||||
})
|
||||
: optionValue;
|
||||
};
|
||||
+19
-174
@@ -42,6 +42,15 @@ const ReactQuill = dynamic(() => import("react-quill-new"), { ssr: false });
|
||||
import { useStore as store, useSelector } from "react-redux";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { validateField } from "./validationUtils"; // Import the validation function
|
||||
import {
|
||||
getDocumentTypePrefix,
|
||||
getThumbnailIconByMimeType,
|
||||
validateUploadFilename
|
||||
} from "./helpers/fileUploadHelpers";
|
||||
import {
|
||||
getFieldTranslation,
|
||||
getPickListTranslation
|
||||
} from "./helpers/translationHelpers";
|
||||
|
||||
const RenderTextfield = ({
|
||||
id,
|
||||
@@ -1876,41 +1885,20 @@ export const FieldsTranslations = (label) => {
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
|
||||
let formObj = jsonpath({
|
||||
path: "$['" + appealtypes + "']",
|
||||
json: fieldLookup,
|
||||
eval: true
|
||||
return getFieldTranslation({
|
||||
label,
|
||||
locale,
|
||||
appealtypes,
|
||||
fieldLookup
|
||||
});
|
||||
|
||||
let labelTrans =
|
||||
router.locale == "cy"
|
||||
? jsonpath({
|
||||
path: '$..[?(@ && @.value=="' + label + '")].value_cy',
|
||||
json: formObj,
|
||||
eval: true
|
||||
})[0]
|
||||
: label;
|
||||
|
||||
//labelTrans = labelTrans.length > 1 ? labelTrans[0] : labelTrans;
|
||||
|
||||
return labelTrans;
|
||||
};
|
||||
|
||||
const PickListTranslations = (optionValue) => {
|
||||
const router = useRouter();
|
||||
const { locale } = router;
|
||||
const { appealtypes } = router.query;
|
||||
//console.log(optionValue);
|
||||
let optionTrans =
|
||||
router.locale == "cy"
|
||||
? jsonpath({
|
||||
path: '$..[?(@ && @.value=="' + optionValue + '")].value_cy',
|
||||
json: pickListLookup,
|
||||
eval: true
|
||||
})
|
||||
: optionValue;
|
||||
//console.log(optionTrans, optionValue);
|
||||
return optionTrans;
|
||||
|
||||
return getPickListTranslation({ optionValue, locale, pickListLookup });
|
||||
};
|
||||
|
||||
export function FileUploadField(props) {
|
||||
@@ -1999,111 +1987,6 @@ const RenderFileUpload = (field) => {
|
||||
</div>
|
||||
));
|
||||
|
||||
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 "image/jpeg":
|
||||
return "/assets/images/documenttypes/jpg.png";
|
||||
case "image/png":
|
||||
return "/assets/images/documenttypes/png.png";
|
||||
//return URL.createObjectURL(fileObj);
|
||||
break;
|
||||
default:
|
||||
return "/assets/images/documenttypes/default.png";
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const getDocumentType = (docCode) => {
|
||||
const repDate = new Date();
|
||||
|
||||
let day = repDate.getDate();
|
||||
let month = repDate.getMonth() + 1;
|
||||
let year = repDate.getFullYear();
|
||||
|
||||
const pdfFileNameDateStamp =
|
||||
year + "-" + ("0" + month).slice(-2) + "-" + ("0" + day).slice(-2);
|
||||
|
||||
switch (docCode) {
|
||||
case "000000":
|
||||
return pdfFileNameDateStamp + "_-_Statement_of_Case";
|
||||
case "000001":
|
||||
return pdfFileNameDateStamp + "_-_Application_Form";
|
||||
break;
|
||||
case "000002":
|
||||
return pdfFileNameDateStamp + "_-_Site_Ownership_Certificate";
|
||||
break;
|
||||
case "000003":
|
||||
return pdfFileNameDateStamp + "_-_Decision_Notice";
|
||||
break;
|
||||
case "000004":
|
||||
return pdfFileNameDateStamp + "_-_Site_Location_Plan";
|
||||
break;
|
||||
case "000005":
|
||||
return pdfFileNameDateStamp + "_-_Plans_Drawing_Documents";
|
||||
break;
|
||||
case "000006":
|
||||
return (
|
||||
pdfFileNameDateStamp +
|
||||
"_-_Additional_Plans_Drawings_Documents"
|
||||
);
|
||||
break;
|
||||
case "000007":
|
||||
return pdfFileNameDateStamp + "_-_Design_and_Access_Statement";
|
||||
break;
|
||||
case "000008":
|
||||
return pdfFileNameDateStamp + "_-_NSB_LPA_Additional_Documents";
|
||||
break;
|
||||
case "000009":
|
||||
return pdfFileNameDateStamp + "_-_LPA_Correspondence";
|
||||
break;
|
||||
case "000010":
|
||||
return pdfFileNameDateStamp + "_-_LPA_Original_Permission";
|
||||
break;
|
||||
case "000011":
|
||||
return pdfFileNameDateStamp + "_-_LPA's_Registration_Letter";
|
||||
break;
|
||||
case "000012":
|
||||
return pdfFileNameDateStamp + "_-_Environmental_Statement";
|
||||
break;
|
||||
case "000013":
|
||||
return pdfFileNameDateStamp + "_-_Cost_of_Application";
|
||||
break;
|
||||
case "000014":
|
||||
return pdfFileNameDateStamp + "_-_Other_Relevant_Material";
|
||||
break;
|
||||
case "000015":
|
||||
return (
|
||||
pdfFileNameDateStamp +
|
||||
"_-_S106_Agreement_or_Unilateral_Undertaking"
|
||||
);
|
||||
break;
|
||||
|
||||
default:
|
||||
return pdfFileNameDateStamp + "_-_000000_-_";
|
||||
}
|
||||
};
|
||||
|
||||
const filelistObj = field.fileList || {};
|
||||
|
||||
const blobList = jsonpath({
|
||||
@@ -2187,43 +2070,6 @@ const RenderFileUpload = (field) => {
|
||||
setRejectedFiles([]); // Clear any previously rejected file errorsss
|
||||
};
|
||||
|
||||
const FILENAME_ALLOWED = /^[A-Za-z0-9 ._\-:()—']+$/;
|
||||
|
||||
const validateFilename = (file, t) => {
|
||||
const name = file.name;
|
||||
|
||||
// block #
|
||||
if (name.includes("#")) {
|
||||
return {
|
||||
code: "filename-invalid-chars",
|
||||
message: `${name} ${t(
|
||||
"newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
|
||||
)}`
|
||||
};
|
||||
}
|
||||
|
||||
if (!FILENAME_ALLOWED.test(name)) {
|
||||
return {
|
||||
code: "filename-invalid-chars",
|
||||
message: `${name} ${t(
|
||||
"newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
|
||||
)}`
|
||||
};
|
||||
}
|
||||
|
||||
// block characters < > " / \ | ? *
|
||||
if (/[<>"/\\|?*]/.test(name)) {
|
||||
return {
|
||||
code: "filename-invalid-chars",
|
||||
message: `${name} ${t(
|
||||
"newappeal:new-appeal-fileupload-file-error-invalid-filename-label"
|
||||
)}`
|
||||
};
|
||||
}
|
||||
|
||||
return null; // valid
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropzone
|
||||
@@ -2240,7 +2086,7 @@ const RenderFileUpload = (field) => {
|
||||
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
|
||||
[".xlsx"]
|
||||
}}
|
||||
validator={(file) => validateFilename(file, t)}
|
||||
validator={(file) => validateUploadFilename(file, t)}
|
||||
onDrop={(acceptedFiles, fileRejections, e) => {
|
||||
// build + display rejected messages (ALWAYS, even if some accepted)
|
||||
if (fileRejections?.length) {
|
||||
@@ -2266,7 +2112,7 @@ const RenderFileUpload = (field) => {
|
||||
(file) =>
|
||||
new File(
|
||||
[file],
|
||||
`${getDocumentType(field.documentTypeCode)}_-_${
|
||||
`${getDocumentTypePrefix(field.documentTypeCode)}_-_${
|
||||
file.name
|
||||
}`,
|
||||
{ type: file.type }
|
||||
@@ -2434,8 +2280,7 @@ const RenderFileUpload = (field) => {
|
||||
−
|
||||
</span> */}
|
||||
<img
|
||||
src={getThumbnailIcon(
|
||||
file,
|
||||
src={getThumbnailIconByMimeType(
|
||||
file.type
|
||||
)}
|
||||
alt={file.name}
|
||||
|
||||
Reference in New Issue
Block a user