added column sort and arrows

.env.local

@@ -37,11 +37,11 @@ RELAYPATH = "pp-pedw-hc"
 
 
 //Prod Oauth WGO
-CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
+//CLIENT_ID = 3e4141a3-1fbd-454e-98f0-7f3a4f14a3cc
-CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
+//CLIENT_SECRET = mJN7Q~lFu.xFGa5KCc.zwIm_fJAWxajyQaFo~
-RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
+//RELAY_ROOT = https://prod-pedw-ns.servicebus.windows.net/prod-pedw-hc/
-RELAYURI = "prod-pedw-ns.servicebus.windows.net"
+//RELAYURI = "prod-pedw-ns.servicebus.windows.net"
-RELAYPATH = "prod-pedw-hc"
+//RELAYPATH = "prod-pedw-hc"
 
 
 GOOGLE_TAG_MANAGER = GTM-T78CBC3

actions/index.js

@@ -131,14 +131,23 @@ export const getBasicSearch = (searchString) => {
         });
 };
 
-export const getBasicSearchPaged = (searchString, pageNumber) => {
+export const getBasicSearchPaged = (
+    searchString,
+    pageNumber,
+    orderBy,
+    fieldSort
+) => {
     //console.log(queryUrl);
     return axios
         .get(
             "/api/endpoint/getbasicsearchpaged_api?searchString=" +
                 searchString +
                 "&pageNumber=" +
-                pageNumber
+                pageNumber +
+                "&orderby=" +
+                orderBy +
+                "&fieldSort=" +
+                fieldSort
         )
         .then((res) => {
             return res.data;

components/search/pagination.js

@@ -4,6 +4,8 @@ import useTranslation from "next-translate/useTranslation";
 
 const PaginationControl = (props) => {
     const {
+        orderBy,
+        fieldSort,
         searchString,
         searchResultsObj,
         currentPage,
@@ -82,7 +84,11 @@ const PaginationControl = (props) => {
                                 className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
                                 onClick={() => {
                                     // spinnerState(),
-                                    getSearchPageResults(currentPage - 1);
+                                    getSearchPageResults(
+                                        currentPage - 1,
+                                        orderBy,
+                                        fieldSort
+                                    );
                                 }}
                             >
                                 {t("common:previous-link-button")}
@@ -116,7 +122,11 @@ const PaginationControl = (props) => {
                                     onClick={() => {
                                         // spinnerState();
                                         console.log(i + 1);
-                                        getSearchPageResults(i + 1);
+                                        getSearchPageResults(
+                                            i + 1,
+                                            orderBy,
+                                            fieldSort
+                                        );
                                     }}
                                 >
                                     {e}
@@ -130,7 +140,11 @@ const PaginationControl = (props) => {
                                 className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
                                 onClick={() => {
                                     // spinnerState(),
-                                    getSearchPageResults(currentPage + 1);
+                                    getSearchPageResults(
+                                        currentPage + 1,
+                                        orderBy,
+                                        fieldSort
+                                    );
                                 }}
                             >
                                 {t("common:next-link-button")}

components/search/searchresults.js

@@ -166,13 +166,57 @@ const SearchResults = (props) => {
                             {t("search:searchresults-applicant-label")}
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("search:searchresults-authority-label")}
+                            {/* {t("search:searchresults-authority-label")} */}
+                            <button
+                                type="button"
+                                onClick={() =>
+                                    sortDataBy("_pinswg_associatedlpa_value")
+                                }
+                                className={
+                                    orderByState ==
+                                    "_pinswg_associatedlpa_value"
+                                        ? 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("search:searchresults-authority-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("search:searchresults-case-type-label")}
+                            {/* {t("search:searchresults-case-type-label")} */}
+                            <button
+                                type="button"
+                                onClick={() =>
+                                    sortDataBy("pinswg_appealcasetype")
+                                }
+                                className={
+                                    orderByState == "pinswg_appealcasetype"
+                                        ? 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("search:searchresults-case-type-label")}
+                            </button>
                         </dd>
                         <dd className="govuk-summary-list__key govuk-!-font-size-16">
-                            {t("search:searchresults-status-label")}
+                            {/* {t("search:searchresults-status-label")} */}
+                            <button
+                                type="button"
+                                onClick={() => sortDataBy("statuscode")}
+                                className={
+                                    orderByState == "statuscode"
+                                        ? 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("search:searchresults-status-label")}
+                            </button>
                         </dd>
                         {myportal == true && (
                             <dd className="govuk-summary-list__key govuk-!-font-size-16 govuk-summary-list__action"></dd>
@@ -420,6 +464,8 @@ const SearchResults = (props) => {
                 <PaginationControl
                     currentPage={currentPage}
                     searchResultsObj={searchResultsObj}
+                    orderBy={orderByState}
+                    fieldSort={fieldSortState}
                     //  spinnerState={spinnerState}
                     getSearchPageResults={getSearchPageResults}
                 />
@@ -448,9 +494,11 @@ const SearchResults = (props) => {
               )
             : pagesCount;
 
-    const getSearchPageResults = (pageNumber) => {
+    const getSearchPageResults = (pageNumber, orderBy, fieldSort) => {
         //console.log(advancedSearch, searchString, pageNumber);
 
+        console.log("got this ", fieldSortState + " " + orderByState);
+
         if (advancedSearch) {
             var searchoObj = Object.assign(
                 ...searchString.map(([key, val]) => ({ [key]: val }))
@@ -470,7 +518,7 @@ const SearchResults = (props) => {
                     });
                 });
         } else {
-            getBasicSearchPaged(searchString, pageNumber)
+            getBasicSearchPaged(searchString, pageNumber, orderBy, fieldSort)
                 .then((data) => {
                     //console.log(data);
                     setSearchResults(data);
@@ -486,6 +534,29 @@ const SearchResults = (props) => {
         }
     };
 
+    const [orderByState, setOrderbyState] = useState("createdon");
+    const [fieldSortState, setfieldSortState] = useState("desc");
+
+    const sortDataBy = (whichField) => {
+        console.log(whichField);
+        orderByState == "createdon"
+            ? setOrderbyState(whichField)
+            : setOrderbyState(whichField);
+
+        fieldSortState == "desc"
+            ? setfieldSortState("asc")
+            : setfieldSortState("desc");
+
+        console.log(currentPage, orderByState + " " + fieldSortState);
+        getSearchPageResults(currentPage, orderByState, fieldSortState);
+    };
+
+    console.log(
+        "page is here ",
+        currentPage,
+        orderByState + " " + fieldSortState
+    );
+
     return (
         <>
             <div className="govuk-grid-row">

pages/api/documents/download/[id].js

@@ -42,27 +42,36 @@ export default async function ApiProxy(req, res) {
 
     var docRef = req.query;
 
-    console.log(docRef.id);
-
     var queryUrl = "documents/download/" + docRef.id + "?hash=" + docRef.hash;
 
-    console.log(WEBAPI_URL + queryUrl);
+    const configDocument = (access_token) => {
+        return {
+            headers: {
+                "OData-MaxVersion": "4.0",
+                "OData-Version": "4.0",
+                "Accept": "application/json",
+                "Prefer": 'odata.include-annotations="*",return=representation',
+                "Content-Type": "application/json",
+                "Authorization": "Bearer " + access_token,
+            },
+            responseType: "arraybuffer",
+        };
+    };
+
     return axios
         .get(
             WEBAPI_URL + queryUrl, // + hashAPIPath(queryUrl),
-            azureHeadersPaged(token.access_token)
+            configDocument(token.access_token)
         )
         .then((response) => {
-            console.log(response.headers);
-            res.status(200);
             res.setHeader(
-                "Content-disposition",
+                "content-disposition",
                 "attachment; filename=" +
                     response.headers["content-disposition"].split(
                         "filename="
                     )[1]
             );
-            res.end(response.data);
+            res.status(200).send(response.data);
         })
         .catch(({ err }) => {
             res.status(400).json(err);

pages/api/endpoint/getbasicdnssearch_api.js

@@ -27,6 +27,8 @@ export default async function ApiProxy(req, res) {
     var queryUrl =
         "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=pinswg_appealcasetype eq 846040011 and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true";
 
+    console.log(queryUrl);
+
     return axios
         .get(
             WEBAPI_URL + queryUrl + hashAPIPath(queryUrl),

pages/api/endpoint/getbasicsearch_api.js

@@ -32,6 +32,8 @@ export default async function ApiProxy(req, res) {
         searchString +
         "')) and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true";
 
+    console.log("basic query ", queryUrl);
+
     var apiResponse = _.isEmpty(req.query)
         ? res.status(400).json()
         : searchString.length > 0

pages/api/endpoint/getbasicsearchpaged_api.js

@@ -24,16 +24,25 @@ export default async function ApiProxy(req, res) {
     var pageNumber = req.query.pageNumber;
     var token = await getToken();
 
+    var orderby = req.query.orderby;
+    var fieldSort = req.query.fieldSort;
+
     var queryUrl =
         "incidents?$select=description,numberofchildincidents,_accountid_value,_customerid_value,_pinswg_associatedlpa_value,_ownerid_value,pinswg_appealcasetype,statuscode,ticketnumber,title, _primarycontactid_value&$expand=primarycontactid($select=fullname)&$filter=(contains(title, '" +
         searchString +
         "') or contains(ticketnumber, '" +
         searchString +
-        "')) and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=createdon desc&$count=true" +
+        "')) and pinswg_appealcasetype ne null and pinswg_publishtoweb eq true&$orderby=" +
+        orderby +
+        " " +
+        fieldSort +
+        "&$count=true" +
         (typeof pageNumber != "undefined"
             ? "&$skiptoken=" + '<cookie pagenumber="' + pageNumber + '" />'
             : "");
 
+    console.log(queryUrl);
+
     var apiResponse =
         searchString.length > 0
             ? axios

styles/sass/welshgov/_application.scss

@@ -829,6 +829,39 @@ textarea,
             }
         }
     }
+    button {
+        border: none;
+        background: none;
+        padding-left: 0;
+
+        &.sortDesc:after {
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 13.9px 8px 0 8px;
+            border-color: #31373d transparent transparent transparent;
+            content: "";
+            top: 15px;
+            position: relative;
+            left: 10px;
+        }
+        &.sortAsc:after {
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 8px 13.9px 8px;
+            border-color: transparent transparent #31373d transparent;
+            content: "";
+            top: -15px;
+            position: relative;
+            left: 10px;
+        }
+
+        &:focus {
+            border: none;
+            box-shadow: none;
+        }
+    }
 }
 
 .results_wider {