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

added searching by LPA application ref and criteria highlighting

Browse Source
This commit is contained in:
robbond
2026-01-09 13:37:40 +00:00
parent 062f64d157
commit 9b0f9acff9
16 changed files with 715 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/search/searchresults.js
+88 -19
View File
@@ -37,6 +37,32 @@ import {
import { sendGAEvent } from "@next/third-parties/google";
import RepsOnResults from "./repsonresults";
const escapeRegExp = (string) => string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
const highlightText = (text, query) => {
if (!text || !query) return text;
const terms = Array.isArray(query)
? query
: String(query).trim().split(/\s+/).filter(Boolean);
if (!terms.length) return text;
const regex = new RegExp(`(${terms.map(escapeRegExp).join("|")})`, "gi");
return String(text)
.split(regex)
.map((part, i) =>
regex.test(part) ? (
<mark key={i} className="search-highlight">
{part}
</mark>
) : (
part
)
);
};
const SearchResults = (props) => {
const {
searchString,
@@ -62,8 +88,17 @@ const SearchResults = (props) => {
var resultsArr = searchResultsObj.value || [];
const hasCount =
searchResultsObj &&
typeof searchResultsObj["@odata.count"] === "number";
const [searchLoaded, setSearchLoaded] = useState(false);
const [showSpinnerState, setShowSpinnerState] = useState(false);
// const [showSpinnerState, setShowSpinnerState] = useState(false);
const [showSpinnerState, setShowSpinnerState] = useState(
!(searchResultsObj && searchResultsObj["@odata.count"] != null)
);
const [selectedOption, setSelectedOption] = useState(10);
const [orderByState, setOrderbyState] = useState("createdon");
const [fieldSortState, setfieldSortState] = useState("desc");
@@ -220,6 +255,10 @@ const SearchResults = (props) => {
);
}
const highlightQuery = advancedSearch
? searchString.map(([key, val]) => val).filter(Boolean)
: searchString;
const ResultsView = (resultsArr) => {
return (
<>
@@ -402,7 +441,10 @@ const SearchResults = (props) => {
)}
:
</span>
{item.title}
{highlightText(
item.title,
highlightQuery
)}
</Link>
{item.hasOwnProperty(
@@ -575,6 +617,19 @@ const SearchResults = (props) => {
"_pinswg_associatedlpa_value@OData.Community.Display.V1.FormattedValue"
] || "N/A"
: ""}
{item?.pinswg_lpareference && (
<>
<span className="govuk-!-padding-top-2 govuk-!-font-size-14 ref-block">
<strong className="ref-label">
Ref:
</strong>{" "}
{highlightText(
item.pinswg_lpareference,
highlightQuery
)}
</span>
</>
)}
</dd>
<dd className="govuk-summary-list__value govuk-!-font-size-16">
<span className="results-visually-hidden">
@@ -996,29 +1051,43 @@ const SearchResults = (props) => {
: t("search:searchresults-title-label")}
</h1>
{!isLinkedCase && (
<p className="govuk-body">
{resultsArr.length > 200
? t("search:searchresults-max-count-label")
: t("search:searchresults-count-label", {
count: searchResultsObj["@odata.count"],
})}
.
{advancedSearch != true ? (
<>
{!isLinkedCase &&
(hasCount ? (
<p className="govuk-body">
{resultsArr.length > 200
? t("search:searchresults-max-count-label")
: t("search:searchresults-count-label", {
count: searchResultsObj[
"@odata.count"
],
})}
.
{advancedSearch != true ? (
<span>
{" "}
{t(
"search:searchresults-case-count-label"
)}{" "}
{" "}
<em>&quot;{searchString}&quot;</em>
</span>
</>
) : (
""
)}
</p>
)}
) : (
""
)}
</p>
) : (
<p className="govuk-body">
{t("common:spinner-fetching-data")}
<img
className="data-loading-icon"
src="/assets/images/loading.gif"
alt={
router.locale == "cy"
? "Nôl data"
: "Fetching data"
}
/>
</p>
))}
{searchResultsObj["@odata.count"] > 5 && (
<div id="recordCountSelect" className="">
<div className="govuk-form-group">