Add participant list and details pages and add participant database

app/assets/javascript/calendar-table-actions.js

@@ -1,6 +1,3 @@
-  var lastSelectedCell = null;
-  var selectableCells = Array.from(document.querySelectorAll('.calendar-table td:not(.calendar-table-no-data)'));
-
   function clearSelectedDays() {
     document.querySelectorAll('.calendar-table td.--date-selected').forEach(function (cell) {
       cell.classList.remove('--date-selected');
@@ -59,7 +56,6 @@
           clickedScheduleName.textContent = isAlreadySelected ? 'Select schedule' : 'Deselect schedule';
         }
 
-        lastSelectedCell = clickedStartCell;
         return;
       }
 
@@ -71,25 +67,27 @@
         return;
       }
 
-      if (event.shiftKey && lastSelectedCell) {
-        var startIndex = selectableCells.indexOf(lastSelectedCell);
-        var endIndex = selectableCells.indexOf(cell);
-
-        if (startIndex !== -1 && endIndex !== -1) {
-          var rangeStart = Math.min(startIndex, endIndex);
-          var rangeEnd = Math.max(startIndex, endIndex);
-
-          for (var index = rangeStart; index <= rangeEnd; index++) {
-            selectableCells[index].classList.add('--date-selected');
-          }
-        }
-      } else {
-        cell.classList.toggle('--date-selected');
-      }
-
-      lastSelectedCell = cell;
+      cell.classList.toggle('--date-selected');
     });
 
     table.classList.add('--js-enabled');
   });
+
+  var selectDaysForm = document.getElementById('select-days-form');
+
+  if (selectDaysForm) {
+    selectDaysForm.addEventListener('submit', function () {
+      selectDaysForm.querySelectorAll('input[name="selectedDays"]').forEach(function (input) {
+        input.remove();
+      });
+
+      document.querySelectorAll('.calendar-table td.--date-selected[data-date]').forEach(function (cell) {
+        var input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'selectedDays';
+        input.value = cell.getAttribute('data-date');
+        selectDaysForm.appendChild(input);
+      });
+    });
+  }
 

app/assets/sass/components/_calendar-table.scss

@@ -82,6 +82,7 @@
       text-wrap: nowrap;
     }
   }
+
   .--schedule-end {
     position: relative;
     border-right-color: nhsuk-colour("grey-2");
@@ -109,6 +110,12 @@
   margin-bottom: nhsuk-spacing(2);
 }
 
+.--template-name {
+  display: block;
+  padding: nhsuk-spacing(1);
+  margin-top: nhsuk-spacing(2);
+}
+
 ///
 /// 
 /// 

app/assets/sass/components/_card.scss

@@ -0,0 +1,20 @@
+@use "sass:color";
+@use "nhsuk-frontend/dist/nhsuk/core" as *;
+
+.nhsuk-card--feature.app-card--feature-grey {
+  background-color: color.scale(nhsuk-colour("grey-4"), $alpha: -50%) !important;
+}
+.nhsuk-card--feature.app-card--feature-grey .nhsuk-card__heading {
+  background-color: nhsuk-colour("grey-1");
+  color: nhsuk-colour("white");
+}
+
+.nhsuk-card--feature.app-card--feature-orange .nhsuk-card__heading {
+  background-color: nhsuk-colour("orange");
+  color: nhsuk-colour("white");
+}
+
+.nhsuk-card--feature.app-card--feature-green .nhsuk-card__heading {
+  background-color: nhsuk-colour("green");
+  color: nhsuk-colour("white");
+}

app/assets/sass/components/_clinic-capacity-summary.scss

@@ -0,0 +1,18 @@
+@use "nhsuk-frontend/dist/nhsuk/core" as *;
+
+.app-clinic-capacity-summary {
+  @include nhsuk-responsive-margin(4, "bottom");
+
+  .nhsuk-table__body {
+    display: flex;
+  }
+    .nhsuk-table__header:not(:last-child) {
+      @include nhsuk-responsive-padding(1, "right");
+      border: 0;
+    }
+    .nhsuk-table__cell {
+      @include nhsuk-responsive-padding(5, "right");
+      border: 0;
+    }
+
+}

app/assets/sass/components/_progress-bar.scss

@@ -55,34 +55,44 @@
     min-width: 0;
   }
 }
-.app-progress-bar::-webkit-progress-bar {
+::-webkit-progress-bar {
   background: #fff;
 }
 .app-progress-bar::-moz-progress-bar {
   background: #fff;
 }
 
-.app-progress-bar.--generic::-webkit-progress-value,
+.app-progress-bar.--generic::-webkit-progress-value {
+  background: var(--generic-chart-hatch);
+}
 .app-progress-bar.--generic::-moz-progress-bar {
   background: var(--generic-chart-hatch);
 }
 
-.app-progress-bar.--standard::-webkit-progress-value,
+.app-progress-bar.--standard::-webkit-progress-value {
+  background: var(--standard-chart-hatch);
+}
 .app-progress-bar.--standard::-moz-progress-bar {
   background: var(--standard-chart-hatch);
 }
 
-.app-progress-bar.--special::-webkit-progress-value,
+.app-progress-bar.--special::-webkit-progress-value {
+  background: var(--special-chart-hatch);
+}
 .app-progress-bar.--special::-moz-progress-bar {
   background: var(--special-chart-hatch);
 }
 
-.app-progress-bar.--ceased::-webkit-progress-value,
+.app-progress-bar.--ceased::-webkit-progress-value {
+  background: var(--ceased-chart-hatch);
+}
 .app-progress-bar.--ceased::-moz-progress-bar {
   background: var(--ceased-chart-hatch);
 }
 
-.app-progress-bar.--vhr::-webkit-progress-value,
+.app-progress-bar.--vhr::-webkit-progress-value {
+  background: var(--vhr-chart-hatch);
+}
 .app-progress-bar.--vhr::-moz-progress-bar {
   background: var(--vhr-chart-hatch);
-}
+}

app/assets/sass/main.scss

@@ -85,6 +85,8 @@
 // https://github.com/NHSDigital/manage-breast-screening-prototype
 
 @forward "components/calendar-table";
+@forward "components/clinic-capacity-summary";
+@forward "components/card";
 @forward "components/clinic-level-breadcrumbs";
 @forward "components/grid-extensions";
 @forward "components/inline-detailed-search";
@@ -106,6 +108,24 @@ a {
   @extend .nhsuk-link--no-visited-state;
 }
 
+// Makes a <button> look and behave like the .panel-item links it sits alongside
+.app-link-button {
+  display: block;
+  width: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: $nhsuk-link-colour;
+  cursor: pointer;
+
+  &:hover {
+    color: nhsuk-shade($nhsuk-link-colour, 20%);
+    text-decoration: underline;
+  }
+}
+
 .app-card-editable {
   display: flex;
   justify-content: space-between;
@@ -170,6 +190,36 @@ a {
   width: 100%;
 }
 
+.app-participants-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 24px;
+  margin-bottom: 24px;
+
+  > p {
+    margin-bottom: 0;
+  }
+}
+
+.app-participants-sort-form {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin-bottom: 0;
+
+  .nhsuk-label {
+    margin-bottom: 0;
+    white-space: nowrap;
+  }
+}
+
+@include nhsuk-media-query($from: tablet) {
+  .app-participants-sort-form {
+    flex-shrink: 0;
+  }
+}
+
 
 .nhsuk-grid-column-four-fifths {
   @include nhsuk-grid-column(four-fifths);
@@ -178,3 +228,6 @@ a {
 .nhsuk-grid-column-one-fifth {
   @include nhsuk-grid-column(one-fifth);
 }
+.app-tag--attached {
+  margin-right: -1px;
+}

app/config.js

@@ -3,7 +3,6 @@
 module.exports = {
   // Service name
   serviceName: 'Run breast screening in England',
-
   // Port to run the prototype on locally
   port: 3000
 }