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

Merge from git

Browse Source
This commit is contained in:
robbond
2021-11-01 11:21:39 +00:00
parent adcff32d73
commit d94b3b3e5a
210 changed files with 69742 additions and 3359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/myportal/searchcases.js
+157 -75
View File
@@ -2,95 +2,177 @@ import Link from "next/link";
import { useState } from "react";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { connect } from "react-redux";
import { Field, reduxForm } from "redux-form";
import LoadingOverlay from "react-loading-overlay";
export default function SearchCases() {
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,
meta: { touched, error },
...custom
}) => {
return (
<>
<div
className={
touched && error
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<div id="basicSearch-hint" className="govuk-hint ">
<span className="govuk-body-m">{hint1}</span>
<br />
<span className="govuk-body-s">
{hint2} CAS-00009-W8N6W4
</span>
</div>
<label className="govuk-label " htmlFor={id} id={id + "_label"}>
{label}
</label>
{touched && error && (
<span id={id + "-error"} className="govuk-error-message">
<span className="govuk-visually-hidden">Error:</span>{" "}
{error}
</span>
)}
<input {...input} className={className} name={name} id={id} />
</div>
</>
);
};
let CaseSearch = (props) => {
let { t } = useTranslation();
const { handleSubmit, pristine, reset, submitting } = props;
const router = useRouter();
const { locale } = router;
const [query, setQuery] = useState("");
const [validationError, setValidationError] = useState("");
const handleParam = (setValue) => (e) => setValue(e.target.value);
const basicSearch = (event) => {
event.preventDefault();
const [showSpinnerState, setShowSpinnerState] = useState(false);
if (query == "" || query == null) {
setValidationError(true);
} else {
setValidationError(false);
console.log(query);
// /searchresults
let spinnerState = () => {
showSpinnerState == true
? setShowSpinnerState(false)
: setShowSpinnerState(true);
};
router.push({
pathname: "/searchresults",
query: { q: query },
});
}
const onHandleSubmit = (values) => {
spinnerState();
router.replace({
pathname:
router.locale == "cy"
? "/fymhorth/canlyniadauchwilio"
: "/myportal/searchresults",
query: { q: values.basicSearch },
shallow: true,
});
};
return (
<div className="card card-3" id="casescomment-card">
<form onSubmit={basicSearch}>
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:searchcases-card-title")}
</h3>
<div
className={
validationError
? "govuk-form-group govuk-form-group--error"
: "govuk-form-group "
}
>
<div id="event-name-hint" className="govuk-hint ">
{t("myportal:searchcases-card-search-hint")}:
<br />
<span className="govuk-body-s">
{" "}
<span className="govuk-!-font-weight-bold">
{t(
"myportal:searchcases-card-search-example-label"
)}
:
</span>{" "}
CAS-00009-W8N6W4
</span>
</div>
{validationError && (
<span
id="basicSearch-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">
Error:
</span>{" "}
Case reference is required
</span>
)}
<input
<>
<div className="card card-3" id="casesearch-card">
<form onSubmit={handleSubmit(onHandleSubmit)}>
<div className="card-body">
<h3 className="heading-small card-heading">
{t("myportal:searchcases-card-title")}
</h3>
<Field
validate={[
required(
t(
"myportal:searchcases-validation-required"
)
),
minLength(
t(
"myportal:searchcases-validation-minlength"
)
),
]}
className="govuk-input"
id="event-name"
name="event-name"
component={RenderTextfield}
id="basicSearch"
name="basicSearch"
type="text"
aria-describedby="event-name-hint"
onChange={handleParam(setQuery)}
aria-describedby="basicSearch-hint"
hint1={t("myportal:searchcases-card-search-hint")}
hint2={t(
"myportal:searchcases-card-search-example-label"
)}
/>
</div>
<div className="govuk-form-group">
<button
type="submit"
name="search"
className="govuk-button"
<div className="govuk-form-group">
<button type="submit" className="govuk-button">
{t("myportal:searchcases-card-button")}
</button>
</div>
<Link
href={
router.locale == "cy"
? "/fymhorth/chwiliouwch"
: "/myportal/advancedsearch"
}
>
{t("myportal:searchcases-card-button")}
</button>
<a>
{t("myportal:searchcases-card-advanced-link")}
</a>
</Link>
</div>
<Link href="/advancedsearch">
<a>{t("myportal:searchcases-card-advanced-link")}</a>
</Link>
</div>
</form>
</div>
</form>
<LoadingOverlay
active={showSpinnerState}
spinner
text={t("common:spinner-searching")}
/>
</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: "basicSearchForm",
destroyOnUnmount: false,
})(CaseSearch)
);