sw-5967 fix all sorts #minor (#307)

* sw-5967 fix all sorts #minor * Revert "sw-5967 fix all sorts #minor" This reverts commit 2d05c2e. * sw-5967 changed the tag back to an a link * sw-5967 fixing the cypress
ministryofjustice · May 24, 2023 · 9855a64 · 9855a64
1 parent b400957
commit 9855a64
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 132 deletions.
diff --git a/cypress/e2e/client.cy.js b/cypress/e2e/client.cy.js
@@ -65,7 +65,7 @@ describe("Clients tab", () => {
         });
 
         it("Clients surname have been sorted in order of descending", () => {
-            cy.get('[label="sort-name-column-ascending"] > button').click();
+            cy.get('[label="sort-name-column-ascending"] > a').click();
             cy.get(":nth-child(1) > .client_name_ref > .govuk-link").should(
                 "contain",
                 "Here"
@@ -81,30 +81,30 @@ describe("Clients tab", () => {
         });
 
         it("Clients report due dates have been sorted in order of ascending", () => {
-            cy.get('[label="sort-due-date-column-none"] > button').click();
+            cy.get('[label="sort-due-date-column-none"] > a').click();
             cy.get(":nth-child(1) > .reports").should("contain", "21/12/2015");
             cy.get(":nth-child(2) > .reports").should("contain", "01/10/2018");
             cy.get(":nth-child(3) > .reports").should("contain", "-");
         });
 
         it("Clients report due dates have been sorted in order of descending", () => {
-            cy.get('[label="sort-due-date-column-none"] > button').click();
-            cy.get('[label="sort-due-date-column-ascending"] > button').click();
+            cy.get('[label="sort-due-date-column-none"] > a').click();
+            cy.get('[label="sort-due-date-column-ascending"] > a').click();
             cy.get(":nth-child(1) > .reports").should("contain", "-");
             cy.get(":nth-child(2) > .reports").should("contain", "01/10/2018");
             cy.get(":nth-child(3) > .reports").should("contain", "21/12/2015");
         });
 
         it("Clients risk have been sorted in order of ascending", () => {
-            cy.get('[label="sort-aria-column-none"] > button').click();
+            cy.get('[label="sort-aria-column-none"] > a').click();
             cy.get(":nth-child(1) > .data-crec").should("contain", "2");
             cy.get(":nth-child(2) > .data-crec").should("contain", "3");
             cy.get(":nth-child(3) > .data-crec").should("contain", "4");
         });
 
         it("Clients risk have been sorted in order of descending", () => {
-            cy.get('[label="sort-aria-column-none"] > button').click();
-            cy.get('[label="sort-aria-column-ascending"] > button').click();
+            cy.get('[label="sort-aria-column-none"] > a').click();
+            cy.get('[label="sort-aria-column-ascending"] > a').click();
             cy.get(":nth-child(1) > .data-crec").should("contain", "4");
             cy.get(":nth-child(2) > .data-crec").should("contain", "3");
             cy.get(":nth-child(3) > .data-crec").should("contain", "2");

diff --git a/cypress/e2e/pro-hub/pro_client.cy.js b/cypress/e2e/pro-hub/pro_client.cy.js
@@ -52,7 +52,7 @@ describe("Clients tab", () => {
     });
 
     it("Clients surname have been sorted in order of descending", () => {
-        cy.get('[label="sort-name-column-ascending"] > button').click();
+        cy.get('[label="sort-name-column-ascending"] > a').click();
         cy.get(":nth-child(1) > .client_name_ref > .govuk-link").should(
             "contain",
             "Here"
@@ -68,30 +68,30 @@ describe("Clients tab", () => {
     });
 
     it("Clients report due dates have been sorted in order of ascending", () => {
-        cy.get('[label="sort-due-date-column-none"] > button').click();
+        cy.get('[label="sort-due-date-column-none"] > a').click();
         cy.get(":nth-child(1) > .reports").should("contain", "21/12/2015");
         cy.get(":nth-child(2) > .reports").should("contain", "01/10/2018");
         cy.get(":nth-child(3) > .reports").should("contain", "-");
     });
 
     it("Clients report due dates have been sorted in order of descending", () => {
-        cy.get('[label="sort-due-date-column-none"] > button').click();
-        cy.get('[label="sort-due-date-column-ascending"] > button').click();
+        cy.get('[label="sort-due-date-column-none"] > a').click();
+        cy.get('[label="sort-due-date-column-ascending"] > a').click();
         cy.get(":nth-child(1) > .reports").should("contain", "-");
         cy.get(":nth-child(2) > .reports").should("contain", "01/10/2018");
         cy.get(":nth-child(3) > .reports").should("contain", "21/12/2015");
     });
 
     it("Clients risk have been sorted in order of ascending", () => {
-        cy.get('[label="sort-aria-column-none"] > button').click();
+        cy.get('[label="sort-aria-column-none"] > a').click();
         cy.get(":nth-child(1) > .data-crec").should("contain", "2");
         cy.get(":nth-child(2) > .data-crec").should("contain", "3");
         cy.get(":nth-child(3) > .data-crec").should("contain", "4");
     });
 
     it("Clients risk have been sorted in order of descending", () => {
-        cy.get('[label="sort-aria-column-none"] > button').click();
-        cy.get('[label="sort-aria-column-ascending"] > button').click();
+        cy.get('[label="sort-aria-column-none"] > a').click();
+        cy.get('[label="sort-aria-column-ascending"] > a').click();
         cy.get(":nth-child(1) > .data-crec").should("contain", "4");
         cy.get(":nth-child(2) > .data-crec").should("contain", "3");
         cy.get(":nth-child(3) > .data-crec").should("contain", "2");

diff --git a/internal/server/list_clients.go b/internal/server/list_clients.go
@@ -15,7 +15,7 @@ type DeputyHubClientInformation interface {
 	GetPageDetails(sirius.Context, sirius.ClientList, int, int) sirius.PageDetails
 }
 
-type listClientsVars struct {
+type ListClientsVars struct {
 	Path                 string
 	XSRFToken            string
 	AriaSorting          sirius.AriaSorting
@@ -53,7 +53,7 @@ func renderTemplateForClientTab(client DeputyHubClientInformation, tmpl Template
 
 		pageDetails := client.GetPageDetails(ctx, clientList, search, displayClientLimit)
 
-		vars := listClientsVars{
+		vars := ListClientsVars{
 			Path:                 r.URL.Path,
 			XSRFToken:            ctx.XSRFToken,
 			DeputyClientsDetails: clientList.Clients,

diff --git a/internal/sirius/get_deputy_clients.go b/internal/sirius/get_deputy_clients.go
@@ -338,3 +338,10 @@ func reformatCompletedDate(unformattedDate string) string {
 	}
 	return ""
 }
+
+func (s AriaSorting) GetHTMLSortDirection(direction string) string {
+	if direction == "ascending" {
+		return "desc"
+	}
+	return "asc"
+}
diff --git a/internal/sirius/get_deputy_clients_test.go b/internal/sirius/get_deputy_clients_test.go
@@ -725,3 +725,10 @@ func TestRestructureOrdersReturnsEmptyStringForNilSupervisionLevel(t *testing.T)
 	}
 	assert.Equal(t, expectedResponse, restructureOrders(unformattedData))
 }
+
+func TestAriaSorting_GetHTMLSortDirection(t *testing.T) {
+	s := AriaSorting{}
+	assert.Equal(t, "desc", s.GetHTMLSortDirection("ascending"))
+	assert.Equal(t, "asc", s.GetHTMLSortDirection("descending"))
+	assert.Equal(t, "asc", s.GetHTMLSortDirection("none"))
+}
diff --git a/web/assets/main.scss b/web/assets/main.scss
@@ -9,6 +9,7 @@ $govuk-assets-path: "/supervision/deputies/assets/";
 @import "./scss/pa-hub";
 @import "./scss/pro-hub";
 @import "./scss/_moj-pagination";
+@import "./scss/sorting";
 
 .moj-header__container {
   max-width: 98%;

diff --git a/web/assets/scss/sorting.scss b/web/assets/scss/sorting.scss
@@ -0,0 +1,5 @@
+a.sorting-arrows {
+  @extend button;
+  text-decoration: none !important;
+}
+
diff --git a/web/template/clients.gotmpl b/web/template/clients.gotmpl
@@ -1,3 +1,4 @@
+{{- /*gotype: github.com/ministryofjustice/opg-sirius-supervision-deputy-hub/internal/server.ListClientsVars*/ -}}
 {{ template "page" . }}
 {{ define "main" }}
     {{ template "content-header" . }}
@@ -43,125 +44,45 @@
         <table id="pa-clients-3" class="govuk-table sortable">
             <thead class="govuk-table__head">
             <tr class="govuk-table__row">
-                {{ if eq .AriaSorting.SurnameAriaSort "none" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-name-column-none"
-                        aria-sort="{{ .AriaSorting.SurnameAriaSort }}">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=surname:asc" .DeputyDetails.ID) }}">
-                            Client
-                        </button>
-                    </th>
-                {{ else if eq .AriaSorting.SurnameAriaSort "ascending" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-name-column-ascending"
-                        aria-sort="{{ .AriaSorting.SurnameAriaSort }}">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=surname:desc" .DeputyDetails.ID) }}">
-                            Client
-                        </button>
-                    </th>
-                {{ else if eq .AriaSorting.SurnameAriaSort "descending" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-name-column-descending"
-                        aria-sort="{{ .AriaSorting.SurnameAriaSort }}">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=surname:asc" .DeputyDetails.ID) }}">
-                            Client
-                        </button>
-                    </th>
-                {{ end }}
-                <th scope="col" class="govuk-table__header">
-                    Accommodation type
+                <th
+                    scope="col"
+                    class="govuk-table__header"
+                    label="sort-name-column-{{ .AriaSorting.SurnameAriaSort }}"
+                    aria-sort="{{ .AriaSorting.SurnameAriaSort }}">
+                    {{ $direction := (.AriaSorting.GetHTMLSortDirection .AriaSorting.SurnameAriaSort) }}
+                    <a class="sorting-arrows button"
+                       href="{{ prefix (printf "/%d/clients?sort=surname:%s" .DeputyDetails.ID $direction ) }}">
+                        Client
+                    </a>
                 </th>
+                <th scope="col" class="govuk-table__header">Accommodation type</th>
                 <th scope="col" class="govuk-table__header">Status</th>
-                <th scope="col" class="govuk-table__header">
-                    Supervision level
-                </th>
+                <th scope="col" class="govuk-table__header">Supervision level</th>
                 <th scope="col" class="govuk-table__header">Visits</th>
-                {{ if eq .AriaSorting.ReportDueAriaSort "none" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-due-date-column-none"
-                        aria-sort="none">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=reportdue:asc" .DeputyDetails.ID) }}">
-                            Report due
-                        </button>
-                    </th>
-                {{ else if eq .AriaSorting.ReportDueAriaSort "ascending" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-due-date-column-ascending"
-                        aria-sort="ascending">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=reportdue:desc" .DeputyDetails.ID) }}">
-                            Report due
-                        </button>
-                    </th>
-                {{ else if eq .AriaSorting.ReportDueAriaSort "descending" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-due-date-column-descending"
-                        aria-sort="descending">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=reportdue:asc" .DeputyDetails.ID) }}">
-                            Report due
-                        </button>
-                    </th>
-                {{ end }}
-                {{ if eq .AriaSorting.CRECAriaSort "none" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-aria-column-none"
-                        aria-sort="none">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=crec:asc" .DeputyDetails.ID) }}">
-                            Risk
-                        </button>
-                    </th>
-                {{ else if eq .AriaSorting.CRECAriaSort "ascending" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-aria-column-ascending"
-                        aria-sort="ascending">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=crec:desc" .DeputyDetails.ID) }}">
-                            Risk
-                        </button>
-                    </th>
-                {{ else if eq .AriaSorting.CRECAriaSort "descending" }}
-                    <th
-                        scope="col"
-                        class="govuk-table__header"
-                        label="sort-aria-column-descending"
-                        aria-sort="descending">
-                        <button
-                            type="button"
-                            onclick="window.location.href={{ prefix (printf "/%d/clients?sort=crec:asc" .DeputyDetails.ID) }}">
-                            Risk
-                        </button>
-                    </th>
-                {{ end }}
+                <th
+                    scope="col"
+                    class="govuk-table__header"
+                    label="sort-due-date-column-{{ .AriaSorting.ReportDueAriaSort }}"
+                    aria-sort="{{ .AriaSorting.ReportDueAriaSort }}">
+                    {{ $direction = (.AriaSorting.GetHTMLSortDirection .AriaSorting.ReportDueAriaSort) }}
+                    <a
+                        class="sorting-arrows button"
+                        href="{{ prefix (printf "/%d/clients?sort=reportdue:%s" .DeputyDetails.ID $direction) }}">
+                        Report due
+                    </a>
+                </th>
+                <th
+                    scope="col"
+                    class="govuk-table__header"
+                    label="sort-aria-column-{{ .AriaSorting.CRECAriaSort }}"
+                    aria-sort="{{ .AriaSorting.CRECAriaSort }}">
+                    {{ $direction = (.AriaSorting.GetHTMLSortDirection .AriaSorting.CRECAriaSort) }}
+                    <a
+                        class="sorting-arrows button"
+                        href="{{ prefix (printf "/%d/clients?sort=crec:%s" .DeputyDetails.ID $direction) }}">
+                        Risk
+                    </a>
+                </th>
             </tr>
             </thead>