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

build fix and updated myportal layout

Browse Source
This commit is contained in:
robbond
2022-04-07 11:47:25 +01:00
parent d63d87aa3e
commit bc41924c85
35 changed files with 1308 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/myportal/awaitingsubmission.js
+1 -1
View File
@@ -13,7 +13,7 @@ const AwaitingSubmission = (props) => {
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:awatitingsubmission-card-title")}
components/myportal/dns.js
+56
View File
@@ -0,0 +1,56 @@
import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import LoadingOverlay from "react-loading-overlay";
export default function Dns() {
let { t } = useTranslation();
//const [showSpinnerState, setShowSpinnerState] = useState(false);
const router = useRouter();
const { locale } = router;
// let spinnerState = () => {
// showSpinnerState == true
// ? setShowSpinnerState(false)
// : setShowSpinnerState(true);
// };
return (
<div className="card" id="casesearch-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("home:dns-card-title")}
</h3>
<div className="govuk-form-group">
<p className="govuk-body-s">
{t("home:dns-card-paragraph")}
</p>
</div>
<div className="govuk-form-group">
<Link
href={
router.locale == "cy"
? "/fymhorth/ceisiadaudns"
: "/myportal/dnsapplications"
}
>
<a
className="govuk-button withChevron govuk-button-cta"
// onClick={() => {
// spinnerState();
// }}
>
{t("home:dns-card-button")}
</a>
</Link>
</div>
</div>
{/* <LoadingOverlay
active={showSpinnerState}
spinner
text={t("common:spinner-loading")}
/> */}
</div>
);
}
components/myportal/makenewappeal.js
+1 -1
View File
@@ -8,7 +8,7 @@ export default function MakeNewAppeal() {
const router = useRouter();
const { locale } = router;
return (
<div className="card card-3" id="casescomment-card">
<div className="card" id="casescomment-card">
<div className="card-body">
<h2 className="govuk-heading-s">
{t("myportal:makenewappeal-card-title")}
components/myportal/mycases.js
+1 -1
View File
@@ -12,7 +12,7 @@ const MyCases = (props) => {
const { locale } = router;
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:mycases-card-title")}
components/myportal/myrepresentations.js
+1 -1
View File
@@ -13,7 +13,7 @@ const MyRepresentations = (props) => {
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:myrepresentations-card-title")}
components/myportal/searchcases.js
+1 -1
View File
@@ -98,7 +98,7 @@ let CaseSearch = (props) => {
return (
<>
<div className="card card-3" id="casesearch-card">
<div className="card" id="casesearch-card">
<form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="card-body">
<h3 className="heading-small card-heading">
components/myportal/topthree.js
+10 -4
View File
@@ -212,11 +212,17 @@ const TopThree = (props) => {
]}
</a>
</Link>
{topThreeType == "awaitingSubmission" &&
showTopThreeArr[key][
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
]}
</div>
{(topThreeType == "awaitingSubmission" ||
topThreeType == "watchedCases") && (
<div>
{
showTopThreeArr[key][
"pinswg_appealcasetype@OData.Community.Display.V1.FormattedValue"
]
}
</div>
)}
{topThreeType != "awaitingSubmission" ? (
<div className="carModuleAddress">
<b>{t("myportal:case-address")}:</b>{" "}
components/myportal/uploadFile.js
+313
View File
@@ -0,0 +1,313 @@
import Link from "next/link";
import { useState, useMemo } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import LoadingOverlay from "react-loading-overlay";
import DropzoneComponent from "../newappeal/fileupload";
import { Field, reduxForm } from "redux-form";
import { connect } from "react-redux";
import Dropzone, { useDropzone } from "react-dropzone";
import { uploadFiles } from "../../actions";
const required = (errorMsg) => (value) =>
value || typeof value === "number" ? undefined : errorMsg;
export const minLength = (errorMsg) => (value) =>
value && value.length < 4
? errorMsg //`Must be ${min} characters or more`
: undefined;
const RenderTextfield = ({
id,
className,
rows,
datafieldname,
name,
label,
input,
hint1,
hint2,
hint3,
meta: { touched, error },
...custom
}) => {
return (
<>
<div className="govuk-form-group">
<div id="basicSearch-hint" className="govuk-hint ">
<label
className="govuk-label "
htmlFor={id}
id={id + "_label"}
>
<span className="govuk-body-s">{hint1}</span>
</label>
</div>
<div>
<input
{...input}
className={className}
name={name}
id={id}
/>
{touched && error && (
<span
id={id + "-error"}
className="govuk-error-message govuk-form-group--error"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
{error}
</span>
)}
</div>
</div>
</>
);
};
const baseStyle = {
display: "flex",
flexDirection: "column",
alignItems: "center",
padding: "20px",
borderWidth: 2,
borderRadius: 2,
borderColor: "#eeeeee",
borderStyle: "dashed",
backgroundColor: "#fafafa",
color: "#bdbdbd",
transition: "border .3s ease-in-out",
width: "80%",
margin: "20px auto 30px",
};
const activeStyle = {
borderColor: "#2196f3",
};
const acceptStyle = {
borderColor: "#00e676",
};
const rejectStyle = {
borderColor: "#ff1744",
};
const RenderFileUpload = (field) => {
const files = field.input.value;
const style = useMemo(
() => ({
...baseStyle,
// ...(isDragActive ? activeStyle : {}),
// ...(isDragAccept ? acceptStyle : {}),
// ...(isDragReject ? rejectStyle : {}),
}),
[]
// [isDragActive, isDragReject, isDragAccept]
);
const [filesList, setFilesList] = useState([]);
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">
{file.name} ({file.size / 1024}kb)
</span>
</div>
));
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>
<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>
);
};
let UploadFile = (props) => {
let { t } = useTranslation();
//const [showSpinnerState, setShowSpinnerState] = useState(false);
const { handleSubmit, pristine, reset, submitting } = props;
const router = useRouter();
const { locale } = router;
const onHandleSubmit = async (values) => {
//spinnerState();
console.log(values);
const uploadAction = await uploadFiles(values);
// router.push({
// pathname:
// router.locale == "cy"
// ? "/fymhorth/canlyniadauchwilio"
// : "/myportal/searchresults",
// query: { q: values.basicSearch },
// shallow: true,
// });
};
return (
<div className="card" id="casesearch-card">
<div className="card-body">
<h3 className="heading-small card-heading">Upload a file</h3>
<div className="govuk-form-group">
<p className="govuk-body-s">reqweqwe eqwe qwe qwe qwe</p>
</div>
<form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="govuk-form-group">
<Field
validate={[
required(
t(
"myportal:searchcases-validation-required"
)
),
minLength(
t(
"myportal:searchcases-validation-minlength"
)
),
]}
className="govuk-input"
component={RenderTextfield}
id="caseReference"
name="caseReference"
type="text"
aria-describedby="caseReference-hint"
hint1="Case Reference"
/>
</div>
<div className="govuk-grid-row">
<Field
name="fileList"
id="fileList"
component={RenderFileUpload}
className="govuk-input govuk-input--width-20"
//validate={[required]}
label={props.label}
errorMsg="Is required"
/>
</div>
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
Add Files
</button>
</div>
</form>
</div>
</div>
);
};
const mapStateToProps = (state) => {
return {
currentView: state.currentView,
search: state.search,
searchResultsObj: state.searchResultsObj,
formData: state.formData,
appealType: state.appealType,
//form: state.form,
myCases: state.myCases,
watchedCases: state.watchedCases,
myRepresentations: state.myRepresentations,
awaitingSubmission: state.awaitingSubmission,
};
};
const mapDispatchToProps = (dispatch) => {
return {};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(
reduxForm({
form: "uploadFileForm",
destroyOnUnmount: false,
})(UploadFile)
);
components/myportal/viewall.js
+2 -2
View File
@@ -121,7 +121,7 @@ const ViewAllResults = (props) => {
<span className="results-visually-hidden">
{t("search:searchresults-site-address-label")}:
</span>
{getFormCollectionByID(appealTypeID).PrimaryIdAttribute ==
{/* {getFormCollectionByID(appealTypeID).PrimaryIdAttribute ==
"pinswg_dnsid"
? detailsObj.pinswg_projectlocation != null
? detailsObj.pinswg_projectlocation.indexOf(";") < 0
@@ -134,7 +134,7 @@ const ViewAllResults = (props) => {
";"
)[0]
: ""
: ""}
: ""} */}
{_.has(detailsObj, "pinswg_siteaddressline1")
? detailsObj.pinswg_siteaddressline1
: ""}
components/myportal/watchedcases.js
+1 -1
View File
@@ -13,7 +13,7 @@ const WatchedCases = (props) => {
const { setCurrentView } = props;
return (
<div className="card card-3" id="casescomment-card">
<div className="card" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:watchedcases-card-title")}
components/myportal/youraccount.js
+1 -2
View File
@@ -26,8 +26,7 @@ export default function YourAccount() {
</Link>
</div>
</div>
</div>
<div className="card" id="casescomment-card">
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:changepassword-card-title")}