Merged PR 850: document filter and sort by name

document filter and sort by name

Related work items: #7612

actions/index.js

@@ -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) => {

components/case/documents.js

@@ -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 className="documentFilters govuk-!-margin-top-5">
-                    <div id="recordCountSelect" className="govuk-grid-row">
+                    <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"
+                                    id="showDocumentType"
-                                    name="showNumberOfRecords"
+                                    name="showDocumentType"
                                 >
-                                    <option value="5">5</option>
+                                    <option value="all">All</option>
-                                    <option value="10">10</option>
+                                    {documentTypes.map((item, key) => {
-                                    <option value="20">20</option>
+                                        return (
-                                    <option value="30">30</option>
+                                            <option
-                                    <option value="50">50</option>
+                                                key={key}
-                                </select>{" "}
+                                                value={
-                                {t("search:searchresults-show-records-label-b")}
+                                                    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 () => {

pages/api/endpoint/getsearchdocumentTypes_api.js

@@ -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);
+        });
+}

pages/api/endpoint/getsearchdocumentdetails_api.js

@@ -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(

pages/api/endpoint/getsearchdocumentdetailspaged_api.js

@@ -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 +

store/store.js

@@ -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) => {

styles/sass/welshgov/_application.scss

@@ -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;