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

document filter and sort by name

Browse Source
This commit is contained in:
robbond
2022-05-09 11:09:54 +01:00
parent 05c6844cc1
commit 8c99516213
7 changed files with 234 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/case/documents.js
+101 -19
View File
@@ -15,6 +15,7 @@ import {
getBasicSearchDetails,
getSearchDocumentDetails,
getSearchDocumentDetailsPaged,
getSearchDocumentTypes,
} from "../../actions";
import {
@@ -43,6 +44,8 @@ const DocumentDetails = (props) => {
var documentDetailsArr = documentDetailsObj || [];
const [selectedOption, setSelectedOption] = useState(10);
const [documentTypes, setDocumentTypes] = useState([{}]);
const [selectedDocumentType, setSelectedDocumentType] = useState("all");
const DocumentView = (documentDetailsArr) => {
documentDetailsArr = documentDetailsArr.value;
@@ -58,37 +61,97 @@ const DocumentDetails = (props) => {
? t("case:documents-count-label-2")
: t("case:documents-count-label-2a")}
</p>
{documentDetailsObj["@odata.count"] > 5 && (
<div id="recordCountSelect" className="govuk-grid-row">
<div className="documentFilters govuk-!-margin-top-5">
<div
id="recordDocumentTypeSelect"
className="govuk-grid-row govuk-!-margin-left-0"
>
<div className="govuk-form-group">
<label className="govuk-label-s " htmlFor="sort">
{t("search:searchresults-show-records-label-a")}
Show
<select
onChange={(e) => {
setSelectedOption(e.target.value);
setSelectedDocumentType(e.target.value);
setCurrentPage(1);
}}
value={selectedOption}
value={selectedDocumentType}
className="govuk-select"
id="showNumberOfRecords"
name="showNumberOfRecords"
id="showDocumentType"
name="showDocumentType"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>{" "}
{t("search:searchresults-show-records-label-b")}
<option value="all">All</option>
{documentTypes.map((item, key) => {
return (
<option
key={key}
value={
item.pinswg_isharedocumentlocations
}
>
{
item.pinswg_isharedocumentlocationsLabel
}
</option>
);
})}
</select>
documents
</label>
</div>
</div>
)}
{documentDetailsObj["@odata.count"] > 5 && (
<div
id="recordCountSelect"
className="govuk-grid-row govuk-!-margin-left-0"
>
<div className="govuk-form-group">
<label
className="govuk-label-s "
htmlFor="sort"
>
{t(
"search:searchresults-show-records-label-a"
)}
<select
onChange={(e) => {
setSelectedOption(e.target.value);
setCurrentPage(1);
}}
value={selectedOption}
className="govuk-select"
id="showNumberOfRecords"
name="showNumberOfRecords"
>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="50">50</option>
</select>{" "}
{t(
"search:searchresults-show-records-label-b"
)}
</label>
</div>
</div>
)}
</div>
<dl className="documentList govuk-summary-list govuk-!-margin-bottom-9 results">
<div className="govuk-summary-list__row results-headings">
<dd className="govuk-summary-list__key govuk-!-font-size-16 ">
{t("case:documents-name-label")}
<button
type="button"
onClick={() => sortDataBy("pinswg_name")}
className={
orderByState == "pinswg_name"
? fieldSortState == "asc"
? `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortAsc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16 sortDesc`
: `govuk-link govuk-link--no-underline govuk-!-font-weight-bold govuk-!-font-size-16`
}
>
{t("case:documents-name-label")}
</button>
</dd>
<dd className="govuk-summary-list__key govuk-!-font-size-16">
{/* {t("case:documents-doc-type-label")} */}
@@ -263,11 +326,22 @@ const DocumentDetails = (props) => {
};
useEffect(() => {
getDocumentTypes();
if (selectedOption) {
setShowSpinnerState(true);
getDocumentResults(1, orderByState, fieldSortState);
}
if (selectedDocumentType) {
setShowSpinnerState(true);
getDocumentResults(
1,
orderByState,
fieldSortState,
selectedDocumentType
);
}
const docDetailsObj = async () => {
let docObj = await getSearchDocumentDetails(incidentid).then(
(data) => {
@@ -287,11 +361,18 @@ const DocumentDetails = (props) => {
incidentid,
setDocumentDetails,
selectedOption,
selectedDocumentType,
fieldSortState,
orderByState,
getDocumentResults,
]);
const getDocumentTypes = useCallback(() => {
getSearchDocumentTypes(props.incidentid).then((data) => {
setDocumentTypes(data);
});
});
const getDocumentResults = useCallback(
(pageNumber, orderBy, fieldSort) => {
getSearchDocumentDetailsPaged(
@@ -299,7 +380,8 @@ const DocumentDetails = (props) => {
pageNumber,
orderBy,
fieldSort,
selectedOption
selectedOption,
selectedDocumentType
)
.then((data) => data)
.then((data) => {
@@ -308,7 +390,7 @@ const DocumentDetails = (props) => {
setShowSpinnerState(false);
});
},
[props.incidentid, selectedOption, setDocumentDetails]
[props.incidentid, selectedOption, selectedDocumentType]
);
const getDocumentDetails = async () => {