Add search feature for Manage users (#130)

This adds a search feature to enable users to search for active users
rather than having to browse for them.

It matches on either name or email address, and partial matches work
based on the start of names, for example "ali" will return "Alissa
Wells" and "lee" will return "Hayley Lee" but does not return "Jayleen
Robertson". "amber.roth@" returns Amber Roth based on email matching.
All searches are case-insensitive.

After the search term has been entered and the "Search" button pressed,
the table updates to show matching results, and the table `<caption>`
(which looks like a heading) includes the count of users and the search
term, eg:

> Showing 2 active users matching “hay”

If the search is empty or on the initial page load, the table caption is
"All active users".

There is no minimum number of characters to search on, so no need to
display any error messages.

If there are no matching results, then the table is completely removed
and replaced with a paragraph saying:

> No users matching “jason”.

Search results are displayed in alphabetical order by first name then
last name.

The search results should be paginated if there are more than the
per-page limit.

🗂️ [Jira card](https://nhsd-jira.digital.nhs.uk/browse/RAVS-959)

## Screenshots

![Screenshot 2024-11-01 at 13 06
43](https://github.com/user-attachments/assets/7386d570-63c3-4b9a-a766-2d2873087d0e)


![Screenshot 2024-11-01 at 13 09
37](https://github.com/user-attachments/assets/73f82947-1317-4ed4-bacc-85270aa17e8c)

Author: frankieroberto

app/assets/sass/components/_button.scss

@@ -0,0 +1,23 @@
+// Short button variant
+//
+// This button is slightly shorter than the usual one,
+// so that when it sits to the right of a text input
+// (eg a search box) it is the same height.
+.app-button--small {
+  @include nhsuk-typography-responsive(16);
+  padding: nhsuk-spacing(1) 12px;
+
+  &.app-button--secondary,
+  &.app-button--secondary-warning {
+    // Adjust padding to account for removal of 2px bottom border
+    padding-bottom: #{nhsuk-spacing(1) + 1px};
+    padding-top: #{nhsuk-spacing(1) + 1px};
+
+    &:active {
+      margin-bottom: -1px;
+      // Revert padding to account for reintroduction of 2px bottom border
+      padding-bottom: nhsuk-spacing(1);
+      padding-top: nhsuk-spacing(1);
+    }
+  }
+}

app/assets/sass/components/_filters.scss

@@ -0,0 +1,5 @@
+// This component is used for filtering a list, eg using search
+.app-filters {
+  padding: nhsuk-spacing(3) nhsuk-spacing(3) nhsuk-spacing(4) nhsuk-spacing(3);
+  background-color: $color_nhsuk-grey-4;
+}

app/assets/sass/components/_table.scss

@@ -1,4 +1,23 @@
 
+table {
+  max-width: 100%;
+}
+
+table td {
+  word-break: break-all;
+}
+
+
+.app-table__header--min-width-100 {
+  min-width: 100px;
+}
+
+.app-table__header--min-width-200 {
+  min-width: 100px;
+  @include mq($from: desktop) {
+    min-width: 200px;
+  }
+}
 
 .app-table__cell--border-right,
 .app-table__header--border-right {

app/assets/sass/main.scss

@@ -26,6 +26,8 @@ $govuk-brand-colour: $nhsuk-link-color;
 @import 'components/header';
 @import 'components/summary-list';
 @import 'components/table';
+@import 'components/button';
+@import 'components/filters';
 
 
 @import '../../components/pagination/_pagination';

app/data/session-data-defaults.js

@@ -424,6 +424,15 @@ module.exports = {
       status: "Active",
       clinician: "no"
     },
+    {
+      id: "34643643",
+      email: "[email protected]",
+      firstName: "Sam",
+      lastName: "Jones",
+      role: "Recorder",
+      status: "Active",
+      clinician: "no"
+    },
     {
       id: "1006456",
       email: "[email protected]",
@@ -547,7 +556,7 @@ module.exports = {
       firstName: "Jaelynn",
       lastName: "Chase",
       role: "Recorder",
-      status: "Active",
+      status: "Deactivated",
       clinician: "no"
     },
     {
@@ -930,7 +939,7 @@ module.exports = {
     },
     {
       id: "7199138",
-      email: "aaden[email protected]",
+      email: "aadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaadenaaden[email protected]",
       firstName: "Aaden",
       lastName: "Shah",
       role: "Recorder",

app/routes/user-admin.js

@@ -5,9 +5,10 @@ module.exports = (router) => {
     const perPage = 20; // Max number of users to show per page
     const page = parseInt(req.query.page) || 1  ;  // Current page, default to 1
 
+    const q = req.query.q;
     const data = req.session.data;
     const statusesToInclude = ['Invited', 'Active'];
-    const allUsers = data.users
+    let allUsers = data.users
       .filter((user) => statusesToInclude.includes(user.status))
       .sort((a, b) => {
         const nameA = a.firstName.toUpperCase(); // ignore upper and lowercase
@@ -21,6 +22,17 @@ module.exports = (router) => {
         return 0;
       })
 
+    if (q) {
+      allUsers = allUsers.filter(function(user) {
+        return (
+          user.firstName.toLowerCase().startsWith(q.toLowerCase()) ||
+          user.lastName.toLowerCase().startsWith(q.toLowerCase()) ||
+          (user.firstName + " " + user.lastName).toLowerCase().startsWith(q.toLowerCase()) ||
+          user.email.toLowerCase().startsWith(q.toLowerCase())
+        )
+      })
+    }
+
 
     const totalUsers = allUsers.length
 
@@ -37,7 +49,8 @@ module.exports = (router) => {
       totalPages,
       page,
       users,
-      deactivatedUsers
+      deactivatedUsers,
+      q
     })
   })
 

app/views/user-admin/index.html

@@ -19,11 +19,37 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
         "href": "/user-admin/add-user"
       }) }}
 
-      <table class="nhsuk-table">
-        <caption class="nhsuk-table__caption nhsuk-table__caption--m">Users</caption>
+
+      <div class="app-filters nhsuk-u-margin-top-5">
+        <form action="/user-admin" method="get" novalidate>
+          <div class="nhsuk-form-group nhsuk-u-margin-bottom-0">
+            <label class="nhsuk-label" for="q">
+              Search active users by name or email
+            </label>
+            <input class="nhsuk-input nhsuk-input--width-20" id="q" name="q" type="search" value="{{ q }}">
+
+            {{ button({
+              text: "Search",
+              classes: "nhsuk-button--secondary nhsuk-u-margin-left-2 app-button--small nhsuk-u-margin-bottom-0"
+            })}}
+          </div>
+        </form>
+      </div>
+
+
+      {% if totalUsers > 0 %}
+
+      <table class="nhsuk-table nhsuk-u-margin-top-4">
+        <caption class="nhsuk-table__caption nhsuk-table__caption--m">
+          {% if q %}
+            Showing {{ totalUsers | plural("active user") }} matching {{ q }}
+          {% else %}
+            All active users
+          {% endif %}
+        </caption>
         <thead role="rowgroup" class="nhsuk-table__head">
           <tr role="row">
-            <th role="columnheader" class="" scope="col">
+            <th role="columnheader" class="app-table__header--min-width-200" scope="col">
               Name
             </th>
             <th role="columnheader" class="" scope="col">
@@ -35,7 +61,7 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
             <th role="columnheader" class="" scope="col">
               Status
             </th>
-            <th role="columnheader" class="" scope="col">
+            <th role="columnheader" class="app-table__header--min-width-100" scope="col">
 
             </th>
           </tr>
@@ -53,35 +79,43 @@ <h1 class="nhsuk-heading-xl">Manage users</h1>
               <td class="nhsuk-table__cell ">{{ user.email }}</td>
               <td class="nhsuk-table__cell ">{{ user.role }}</td>
               <td class="nhsuk-table__cell ">{{ user.status }}</td>
-              <td class="nhsuk-table__cell">
+              <td class="nhsuk-table__cell app-table__cell--right-aligned">
                 <a href="/user-admin/users/{{ user.id }}/change-role" class="nhsuk-link">Change <span class="nhsuk-u-visually-hidden">details for {{ user.firstName }} </span></a>
               </td>
             </tr>
           {% endfor %}
         </tbody>
       </table>
 
+      {% else %}
+
+        <div class="nhsuk-u-margin-top-6 nhsuk-u-margin-bottom-6">
+          <p>No users matching {{ q }}.</p>
+        </div>
+
+      {% endif %}
+
       {% set items = [] %}
 
       {% for i in range(1, totalPages + 1) -%}
          {% set items = (items.push({
           number: i,
-          href: "/user-admin?page=" + i,
+          href: "/user-admin?page=" + i + "&q=" + (q if q else ""),
           current: (i === page)
         }), items) %}
       {%- endfor %}
 
 
-      {% if totalPages > 0 %}
+      {% if totalPages > 1 %}
         {{ appPagination({
-          previousUrl:  "/user-admin?page=" + (page - 1) if page != 1,
-          nextUrl: "/user-admin?page=" + (page + 1)  if page != totalPages,
+          previousUrl:  "/user-admin?page=" + (page - 1) + "&q=" + (q if q else "") if page != 1,
+          nextUrl: "/user-admin?page=" + (page + 1) + "&q=" + (q if q else "")  if page != totalPages,
           items: items
         }) }}
       {% endif %}
 
 
-      {% if deactivatedUsers | length > 0 %}
+      {% if (not q and q != "") and (deactivatedUsers | length > 0) %}
         <p><a href="/user-admin/deactivated">View {{ deactivatedUsers | length | plural ("deactivated user") }}</a> </p>
       {% endif %}