Skip to content

Tweaks to september flow #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Demotive wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Tweaks to september flow #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ddaf51d
search and results but after a git add lol
Demotive Jun 25, 2026
73359a1
Tweaks to group views
Demotive Jun 25, 2026
73f83c2
Error around a table
Demotive Jun 25, 2026
c403f4c
Tweaks and more tweaks. Revisited confirmation page
Demotive Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 7 additions & 11 deletions app/assets/sass/components/_participant-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,12 @@
.app-participant-table {

/*thead tr {
position: sticky;
top: 0;
background-color: #f0f4f5;
}*/

tbody tr:nth-child(odd) {
background-color: #f8fafa;
}
tbody tr:nth-child(even) {
background-color: #f0f4f5;
.nhsuk-table__body {
tr:nth-child(odd) {
background-color: #f8fafa;
}
tr:nth-child(even) {
background-color: #f0f4f5;
}
}

th:first-child,
Expand Down
72 changes: 37 additions & 35 deletions app/views/z-september-transactional-journey/_includes/participant-search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
Find participants in Test batch 1
Find participants
</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">Use one or more fields</span>
</div>
Expand Down Expand Up @@ -64,52 +64,54 @@ <h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
</div>
</search>

<hr>

<h1><code style="color: red;">Error states</code></h1>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
<div role="alert">
<h2 class="nhsuk-error-summary__title">
There is a problem
</h2>
<div class="nhsuk-error-summary__body">
<p>
Is an empty submission an error or a "no results" return?
</p>
<p>
Bad formatting on NHS number. Non-numeric entry on NHS number. Anything else?
</p>
<p>
Missing date element (day, month or year). Non-numeric entry on dates. DOB mnust be in the past. Anything else?
</p>
<ul class="nhsuk-list nhsuk-error-summary__list">
<li>
<a href="#empty-search-error">Empty error</a>
</li>
<li>
<a href="#nhs-number-error">NHS number error</a>
</li>
<li>
<a href="#dob-error">Date of birth error</a>
</li>
</ul>
</div>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
<div role="alert">
<h2 class="nhsuk-error-summary__title">
There is a problem
</h2>
<div class="nhsuk-error-summary__body">
<p>
Is an empty submission an error or a "no results" return?
</p>
<p>
Bad formatting on NHS number. Non-numeric entry on NHS number. Anything else?
</p>
<p>
Missing date element (day, month or year). Non-numeric entry on dates. DOB mnust be in the past. Anything else?
</p>
<p>
Select one or more participants
</p>
<ul class="nhsuk-list nhsuk-error-summary__list">
<li>
<a href="#empty-search-error">Empty error</a>
</li>
<li>
<a href="#nhs-number-error">NHS number error</a>
</li>
<li>
<a href="#dob-error">Date of birth error</a>
</li>
<li>
<a href="#search-results">Unselected error</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

<search>
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-m nhsuk-u-margin-bottom-2">
Find participants in Test batch 1
Find participants
</h1>
<span class="nhsuk-caption-m nhsuk-caption--bottom">Use one or more fields</span>
<!-- replaces the hint text on error -->
<span class="nhsuk-caption-m nhsuk-caption--bottom nhsuk-error-message" id="empty-search-error">
<span class="nhsuk-u-visually-hidden">Error:</span> Use one or more fields
</span>
Expand Down
2 changes: 1 addition & 1 deletion app/views/z-september-transactional-journey/batch-detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ <h2 class="nhsuk-card__heading nhsuk-u-font-size-36 nhsuk-u-margin-bottom-1">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<a class="nhsuk-button" href="search">
Select participants to book
Find participants to book
</a>
</div>
</div>
Expand Down
34 changes: 28 additions & 6 deletions app/views/z-september-transactional-journey/group.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<div class="nhsuk-grid-column-full">
{% set html %}
<p class="nhsuk-notification-banner__heading">
Participant[s] successfully added to group
1 participant added to group
</p>
{% endset %}
{{ notificationBanner({
Expand All @@ -25,12 +25,24 @@

{% set html %}
<p class="nhsuk-notification-banner__heading">
Participant removed from group
Billie Joanne Marquardt removed from group
</p>
<a href="#">Undo</a>
{% endset %}
{{ notificationBanner({
html: html
html: html,
titleText: "Participant removed"
}) }}

{% set html %}
<p class="nhsuk-notification-banner__heading">
Billie Joanne Marquardt returned to group
</p>
{% endset %}
{{ notificationBanner({
html: html,
titleText: "Participant reinstated",
type: "success"
}) }}
</div>
</div>
Expand Down Expand Up @@ -71,7 +83,12 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-2">Test clinic group</h1>
<tbody class="nhsuk-table__body">
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell nhsuk-table__cell--numeric">999 054 3666</td>
<td class="nhsuk-table__cell">Billie Joanne Marquardt</td>
<td class="nhsuk-table__cell">
Billie Joanne Marquardt
<strong class="nhsuk-tag nhsuk-tag--blue nhsuk-u-margin-left-2">
Just added
</strong>
</td>
<td class="nhsuk-table__cell">15 March 1960</td>
<td class="nhsuk-table__cell"><a href="#">Remove</a></td>
</tr>
Expand Down Expand Up @@ -203,15 +220,20 @@ <h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-2">Test clinic group</h1>
</tr>
<tr class="nhsuk-table__row">
<td class="nhsuk-table__cell nhsuk-table__cell--numeric">631 776 9904</td>
<td class="nhsuk-table__cell">Nora Blake</td>
<td class="nhsuk-table__cell">
Nora Blake
<!-- <strong class="nhsuk-tag nhsuk-tag--blue nhsuk-u-margin-left-2">
Just added
</strong> -->
</td>
<td class="nhsuk-table__cell">30 December 1966</td>
<td class="nhsuk-table__cell"><a href="#">Remove</a></td>
</tr>
</tbody>
</table>

<a href="pre-appoint-confirm" class="nhsuk-button">
Book into slots
Book this group
</a>
</div>
</div>
Expand Down
137 changes: 30 additions & 107 deletions app/views/z-september-transactional-journey/pre-appoint-confirm.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,57 +8,14 @@
{% endblock %}

{% block beforeContent %}
<a class="nhsuk-back-link" href="group">
Back
</a>
{% endblock %}

{% block content %}

<style type="text/css">
.app-flow-flex {
display: flex;
gap: 2rem;
align-items: stretch; /* allow children to match heights */
}

.app-flow-arrow {
position: relative;
transform: translateX(calc(-50% + 14px));
color: #fff;
background: #4c6272;
font-weight: bold;
padding: 0.3rem 0 0.3rem 0.75rem;
z-index: 1;
border-radius: 4px 0 0 4px;
}

.app-flow-arrow::after {
content: "";
position: absolute;
right: -28px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 28px solid transparent;
border-bottom: 28px solid transparent;
border-left: 28px solid #4c6272;
}

/* Make the cards fill the flex item's cross size and allow their content to stretch */
.app-flow-flex > .nhsuk-card {
display: flex;
flex-direction: column;
align-self: stretch;
}

.app-flow-flex > .nhsuk-card .nhsuk-card__content {
flex: 1 1 auto;
}
.app-flow-flex > .app-flow-arrow {
align-self: center;
}
</style>

<!-- <div class="nhsuk-grid-row">
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<div class="nhsuk-error-summary" data-module="nhsuk-error-summary">
<div role="alert">
Expand All @@ -67,80 +24,46 @@ <h2 class="nhsuk-error-summary__title">
</h2>
<div class="nhsuk-error-summary__body">
<p>
During this test, the number of available slots must be greater than or identical to the number of participants
During this test, the number of participants must be less than or the same as the number of available slots
</p>
<ul class="nhsuk-list nhsuk-error-summary__list">
<li>
<a href="group">Cancel and go back</a>
<a href="group">Back</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> -->

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<h1 class="nhsuk-heading-l">
Book participants into slots
</h1>
</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">

<div class="app-flow-flex nhsuk-u-margin-bottom-6">

<div class="nhsuk-card nhsuk-u-margin-bottom-0">
<div class="nhsuk-card__content">
<div class="nhsuk-u-font-size-36 nhsuk-u-margin-bottom-2">
48 participants
</div>
<div class="nhsuk-body">
from Test Clinic group
</div>
</div>
</div>

<div class="nhsuk-body-s app-flow-arrow">
into
</div>

<div class="nhsuk-card nhsuk-u-margin-bottom-0">
<div class="nhsuk-card__content">
<div class="nhsuk-u-font-size-36 nhsuk-u-margin-bottom-2">
48 available slots
</div>
<div class="nhsuk-body nhsuk-u-margin-bottom-2">
in Test Clinic 1<br>
Tuesday 1 September 2026
</div>
<div class="nhsuk-body-s nhsuk-u-secondary-text-colour">
Unit name at location name
</div>
</div>
</div>

</div>

</div>
</div>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">

<a href="appointing-complete" class="nhsuk-button">
Book
</a>
<!-- <button class="nhsuk-button" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
Book
</button> -->
<p>
or
<a href="group">cancel and go back</a>
</p>
<div class="nhsuk-u-reading-width">
<h1 class="nhsuk-heading-l">
Book participants
</h1>

<p>You are booking 48 participants from Test Clinic group into:</p>

<h2 class="nhsuk-heading-m">
Test Clinic 1
<span class="nhsuk-caption-m">Tuesday 1 September</span>
</h2>
<p>
Waverley Breast Unit<br>
Waverley Hospital
</p>
<p>48 slots available</p>

<a href="appointing-complete" class="nhsuk-button">
Book
</a>
<button class="nhsuk-button" data-module="nhsuk-button" type="submit" disabled aria-disabled="true">
Book
</button>
</div>
</div>
</div>

Expand Down
Loading