Merged PR 850: document filter and sort by name
document filter and sort by name Related work items: #7612
This commit is contained in:
Robert Bond
+17
-2
@@ -418,13 +418,26 @@ export const getSearchDocumentDetails = (incidentID) => {
|
||||
});
|
||||
};
|
||||
|
||||
export const getSearchDocumentTypes = (incidentID) => {
|
||||
return axios
|
||||
.get(
|
||||
"/api/endpoint/getsearchdocumentTypes_api?incidentid=" + incidentID
|
||||
)
|
||||
.then((res) => res.data)
|
||||
.catch((error) => {
|
||||
console.log("API call error", error);
|
||||
});
|
||||
};
|
||||
|
||||
export const getSearchDocumentDetailsPaged = (
|
||||
incidentID,
|
||||
pageNumber,
|
||||
orderBy,
|
||||
fieldSort,
|
||||
showNumberOfRecords
|
||||
showNumberOfRecords,
|
||||
documentType
|
||||
) => {
|
||||
console.log("to api:", documentType);
|
||||
return axios
|
||||
.get(
|
||||
"/api/endpoint/getsearchdocumentdetailspaged_api?incidentid=" +
|
||||
@@ -436,7 +449,9 @@ export const getSearchDocumentDetailsPaged = (
|
||||
"&fieldSort=" +
|
||||
fieldSort +
|
||||
"&showNumberOfRecords=" +
|
||||
showNumberOfRecords
|
||||
showNumberOfRecords +
|
||||
"&documentType=" +
|
||||
documentType
|
||||
)
|
||||
.then((res) => res.data)
|
||||
.catch((error) => {
|
||||
|
||||
+101
-19
@@ -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 () => {
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import axios from "axios";
|
||||
import CryptoJS from "crypto-js";
|
||||
import _ from "lodash";
|
||||
import { getToken, azureHeaders } from "../../../actions";
|
||||
|
||||
const WORDKEY = process.env.HASHKEY;
|
||||
|
||||
const WEBAPI_URL =
|
||||
process.env.RELAY_ROOT ||
|
||||
"https://dev-pedw-ns.servicebus.windows.net/dev-pedw-hc/";
|
||||
|
||||
const hashAPIPath = (queryPath) => {
|
||||
var hashlink = CryptoJS.HmacSHA256(
|
||||
queryPath,
|
||||
CryptoJS.enc.Hex.parse(WORDKEY)
|
||||
);
|
||||
hashlink = hashlink.toString(CryptoJS.enc.Hex);
|
||||
|
||||
//return "&hash=" + hashlink;
|
||||
|
||||
return (queryPath.indexOf("?") > -1 ? "&hash=" : "?hash=") + hashlink;
|
||||
};
|
||||
|
||||
const groupArray = (arr = []) => {
|
||||
// create map
|
||||
let map = new Map();
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const s = JSON.stringify(arr[i]);
|
||||
if (!map.has(s)) {
|
||||
map.set(s, {
|
||||
pinswg_isharedocumentlocations:
|
||||
arr[i].pinswg_isharedocumentlocations,
|
||||
pinswg_isharedocumentlocationsLabel:
|
||||
arr[i][
|
||||
"pinswg_isharedocumentlocations@OData.Community.Display.V1.FormattedValue"
|
||||
],
|
||||
// count: 1,
|
||||
});
|
||||
} else {
|
||||
//map.get(s).count++;
|
||||
}
|
||||
}
|
||||
const res = Array.from(map.values());
|
||||
return res;
|
||||
};
|
||||
|
||||
export default async function ApiProxy(req, res) {
|
||||
var incidentID = req.query.incidentid;
|
||||
var token = await getToken();
|
||||
|
||||
var queryUrl =
|
||||
"pinswg_documents?$count=true&$filter=pinswg_publishtoweb eq true and _pinswg_documentids_value eq " +
|
||||
incidentID +
|
||||
" and pinswg_latestpublishedversion ne null and pinswg_latestpublisheddate ne null&$select=pinswg_isharedocumentlocations";
|
||||
|
||||
//console.log("docu: ", WEBAPI_URL + queryUrl + hashAPIPath(queryUrl));
|
||||
|
||||
return axios
|
||||
.get(
|
||||
WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),
|
||||
azureHeaders(token.access_token)
|
||||
)
|
||||
.then(({ data }) => {
|
||||
//delete data["pinswg_documentid"];
|
||||
data.value.forEach(function (element) {
|
||||
delete element["pinswg_documentid"];
|
||||
});
|
||||
|
||||
var dataArr = groupArray(data.value);
|
||||
|
||||
// var dataStr;
|
||||
// _.has(data, "@odata.nextLink") == true &&
|
||||
// ((dataStr = JSON.stringify(data["@odata.nextLink"])),
|
||||
// (data["@odata.nextLink"] = dataStr.split("/v8.2/")[1]));
|
||||
res.status(200).json(dataArr);
|
||||
})
|
||||
.catch(({ err }) => {
|
||||
res.status(400).json(err);
|
||||
});
|
||||
}
|
||||
@@ -43,7 +43,7 @@ export default async function ApiProxy(req, res) {
|
||||
incidentID +
|
||||
" and pinswg_latestpublishedversion ne null and pinswg_latestpublisheddate ne null&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference,pinswg_name,pinswg_latestpublishedversion,pinswg_latestpublisheddate";
|
||||
|
||||
console.log("docu: ", WEBAPI_URL + queryUrl + hashAPIPath(queryUrl));
|
||||
//console.log("docu: ", WEBAPI_URL + queryUrl + hashAPIPath(queryUrl));
|
||||
|
||||
return axios
|
||||
.get(
|
||||
|
||||
@@ -42,11 +42,19 @@ export default async function ApiProxy(req, res) {
|
||||
var orderby = req.query.orderby;
|
||||
var fieldSort = req.query.fieldSort;
|
||||
var showNumberOfRecords = req.query.showNumberOfRecords;
|
||||
var documentType = req.query.documentType || "all";
|
||||
|
||||
console.log("has this passed docuemntType:", documentType);
|
||||
//(documentType !="all" && " pinswg_pinswg_isharedocumentlocations eq " + )
|
||||
|
||||
var queryUrl =
|
||||
"pinswg_documents?$filter=pinswg_publishtoweb eq true and _pinswg_documentids_value eq " +
|
||||
incidentID +
|
||||
" and pinswg_latestpublishedversion ne null and pinswg_latestpublisheddate ne null&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference,pinswg_name,pinswg_latestpublishedversion,pinswg_latestpublisheddate&$orderby=" +
|
||||
" and pinswg_latestpublishedversion ne null and pinswg_latestpublisheddate ne null" +
|
||||
(documentType != "all"
|
||||
? " and pinswg_isharedocumentlocations eq " + documentType
|
||||
: "") +
|
||||
"&$select=pinswg_isharedocumentlocations,_pinswg_documentids_value,pinswg_isharelabelcasetype,pinswg_isharelabellpaname,pinswg_publishtoweb,pinswg_uploadstatus,pinswg_isharedocumentclassification,pinswg_isharedocumentreference,pinswg_name,pinswg_latestpublishedversion,pinswg_latestpublisheddate&$orderby=" +
|
||||
orderby +
|
||||
" " +
|
||||
fieldSort +
|
||||
|
||||
+1
-1
@@ -122,7 +122,7 @@ const makeStore = ({ isServer }) => {
|
||||
"govGateway",
|
||||
"form",
|
||||
],
|
||||
version: 1.1,
|
||||
version: 1.2,
|
||||
storage: storage,
|
||||
stateReconciler: autoMergeLevel2, // if needed, use a safer storage
|
||||
migrate: (state) => {
|
||||
|
||||
@@ -806,7 +806,6 @@ textarea,
|
||||
.govuk-summary-list__key,
|
||||
.govuk-summary-list__value,
|
||||
.govuk-summary-list__actions {
|
||||
border-bottom: 1px solid $lightgrey_semi;
|
||||
padding: 15px 10px 15px 0;
|
||||
a,
|
||||
a:active,
|
||||
@@ -823,6 +822,10 @@ textarea,
|
||||
border: $yellow solid 3px;
|
||||
outline: 3px solid transparent;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
border-bottom: 1px solid $lightgrey_semi;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.documentList {
|
||||
@@ -1938,6 +1941,27 @@ fade {
|
||||
|
||||
// record selection
|
||||
|
||||
.documentFilters{
|
||||
@media screen and (min-width: 768px) {
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#recordDocumentTypeSelect{
|
||||
text-align: left;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
text-align: right;
|
||||
}
|
||||
select {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
background-position: 98% 15px;
|
||||
}
|
||||
}
|
||||
|
||||
#recordCountSelect {
|
||||
text-align: left;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user