Skip to content

Error states #46

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

Merged
Demotive merged 4 commits into from
Jul 17, 2026
+135 −37
Merged

Error states #46

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
8e690c3
Adding some potential example errors and removing as yet unused intro…
Demotive Jul 16, 2026
c023e1a
Amending copilot shift-click to include label clicks
Demotive Jul 16, 2026
690eaae
Little bit of tidying up
Demotive Jul 17, 2026
e445400
Error states to false, do page names quickly
Demotive Jul 17, 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
47 changes: 42 additions & 5 deletions app/views/clinics/00-create-day-clinic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{% extends 'layout.html' %}

{% set pageName = "Clinics" %}
{% set errorState = "false" %}

{% set pageName = "Create day clinic" %}

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
Expand Down Expand Up @@ -63,18 +65,43 @@ <h2 class="nhsuk-heading-m app-workflow-side-nav__heading">
<div class="nhsuk-grid-column-three-quarters">
<div class="nhsuk-u-reading-width">

{% if errorState === "true" %}
{{ errorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Clinic must be given a name",
href: "#"
},
{
text: "A unit must be chosen",
href: "#"
},
{
text: "A location must be chosen",
href: "#"
}
]
}) }}
{% endif %}

<h1 class="nhsuk-heading-l">Clinic details</h1>

<form action="01-set-date-and-time" method="post">

<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<label class="nhsuk-label nhsuk-label--m" for="clinic-name">
Clinic name
</label>
<div class="nhsuk-hint" id="naming-hint-text">
A memorable name for this clinic. This is the name you’ll see everywhere for it, as titles and links.
</div>
<input class="nhsuk-input" id="clinic-name" name="clinicName" type="text" aria-describedby="naming-hint-text">
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> Clinic must be given a name
</span>
{% endif %}
<input class="nhsuk-input {% if errorState === 'true' %}nhsuk-input--error{% endif %}" id="clinic-name" name="clinicName" type="text" aria-describedby="naming-hint-text">
</div>

<div class="nhsuk-form-group">
Expand All @@ -89,11 +116,16 @@ <h1 class="nhsuk-heading-l">Clinic details</h1>
<div class="nhsuk-grid-row">

<div class="nhsuk-grid-column-one-half">
<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<fieldset class="nhsuk-fieldset">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
Unit
</legend>
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> A unit must be chosen
</span>
{% endif %}
<div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="unit" name="unit" type="radio" value="West Sussex Breast Care Centre">
Expand Down Expand Up @@ -132,11 +164,16 @@ <h1 class="nhsuk-heading-l">Clinic details</h1>
</div>

<div class="nhsuk-grid-column-one-half">
<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<fieldset class="nhsuk-fieldset">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">
Location
</legend>
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> A location must be chosen
</span>
{% endif %}
<div class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="location-10" name="location" type="radio" value="Worthing hospital">
Expand Down
98 changes: 75 additions & 23 deletions app/views/clinics/01-set-date-and-time.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{% extends 'layout.html' %}

{% set pageName = "Clinics" %}
{% set errorState = "false" %}

{% set pageName = "Set date and time" %}

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
Expand Down Expand Up @@ -63,64 +65,109 @@ <h2 class="nhsuk-heading-m app-workflow-side-nav__heading">
<div class="nhsuk-grid-column-three-quarters">
<div class="nhsuk-u-reading-width">

{% if errorState === "true" %}
{{ errorSummary({
titleText: "There is a problem",
errorList: [
{
text: "Date of clinic must be given a day, month, and year",
href: "#"
},
{
text: "Date of clinic must be in the future",
href: "#"
},
{
text: "Start time must be entered, in 24 hour format",
href: "#"
},
{
text: "End time must be entered, in 24 hour format",
href: "#"
},
{
text: "End time must be later than start time",
href: "#"
},
{
text: "Start time must be earlier than end time",
href: "#"
},
{
text: "Slot length must be entered, in minutes",
href: "#"
}
]
}) }}
{% endif %}

<h1 class="nhsuk-heading-l">Set date and time</h1>
<p>Potentially some real brief help and scene setting. Mainly to point out you can punch holes in it as you go?</p>

<form action="02-organise-slots" method="post">

<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<fieldset class="nhsuk-fieldset" role="group" aria-describedby="clinic-date-hint">
<legend class="nhsuk-fieldset__legend nhsuk-label--m">
Date of clinic
</legend>
<div class="nhsuk-hint" id="clinic-date-hint">
For example, 18 6 2026
</div>
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> Date of clinic must be given a day, month, and year
</span>
{% endif %}
<div class="nhsuk-date-input" id="appointment-date">
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-date-input__label" for="clinic-date-day">
Day
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="clinic-date-day" name="clinicDate[day]" type="text" inputmode="numeric">
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-2" id="clinic-date-day" name="clinicDate[day]" type="text" inputmode="numeric">
</div>
</div>
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-date-input__label" for="clinic-date-month">
Month
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="clinic-date-month" name="clinicDate[month]" type="text" inputmode="numeric">
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-2" id="clinic-date-month" name="clinicDate[month]" type="text" inputmode="numeric">
</div>
</div>
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-date-input__label" for="clinic-date-year">
Year
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-4" id="clinic-date-year" name="clinicDate[year]" type="text" inputmode="numeric">
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-4" id="clinic-date-year" name="clinicDate[year]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>

<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<fieldset class="nhsuk-fieldset" role="group" aria-describedby="start-time-hint">
<legend class="nhsuk-fieldset__legend nhsuk-label--m">
Session start time
</legend>
<div id="start-time-hint" class="nhsuk-hint">
For example, 10:00
Use 24 hour format, for example, 10:00
</div>
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> Start time must be entered, in 24 hour format
</span>
{% endif %}

<div id="start-time" class="nhsuk-date-input">
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-date-input__label" for="start-time-hour">
Hour
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="start-time-hour"
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-2" id="start-time-hour"
name="newSession[startTime][hour]" type="text" inputmode="numeric">
</div>
</div>
Expand All @@ -130,30 +177,35 @@ <h1 class="nhsuk-heading-l">Set date and time</h1>
<label class="nhsuk-label nhsuk-date-input__label" for="start-time-minute">
Minute
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="start-time-minute"
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-2" id="start-time-minute"
name="newSession[startTime][minute]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>

<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<fieldset class="nhsuk-fieldset" role="group" aria-describedby="end-time-hint">
<legend class="nhsuk-fieldset__legend nhsuk-label--m">
Session end time
</legend>
<div id="end-time-hint" class="nhsuk-hint">
For example, 17:00
Use 24 hour format, for example, 17:00
</div>
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> End time must be entered, in 24 hour format
</span>
{% endif %}

<div id="end-time" class="nhsuk-date-input">
<div class="nhsuk-date-input__item">
<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-date-input__label" for="end-time-hour">
Hour
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="end-time-hour"
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-2" id="end-time-hour"
name="newSession[endTime][hour]" type="text" inputmode="numeric">
</div>
</div>
Expand All @@ -162,20 +214,25 @@ <h1 class="nhsuk-heading-l">Set date and time</h1>
<label class="nhsuk-label nhsuk-date-input__label" for="end-time-minute">
Minute
</label>
<input class="nhsuk-input nhsuk-date-input__input nhsuk-input--width-2" id="end-time-minute"
<input class="nhsuk-input nhsuk-date-input__input {% if errorState === 'true' %}nhsuk-input--error{% endif %} nhsuk-input--width-2" id="end-time-minute"
name="newSession[endTime][minute]" type="text" inputmode="numeric">
</div>
</div>
</div>
</fieldset>
</div>

<div class="nhsuk-form-group">
<div class="nhsuk-form-group {% if errorState === 'true' %}nhsuk-form-group--error{% endif %}">
<label class="nhsuk-label nhsuk-label--m" for="duration">
Slot length
</label>
{% if errorState === "true" %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> Slot length must be entered, in minutes
</span>
{% endif %}
<div class="nhsuk-input-wrapper">
<input class="nhsuk-input nhsuk-input--width-2" id="duration" name="newSession[duration]" type="text"
<input class="nhsuk-input nhsuk-input--width-2 {% if errorState === 'true' %}nhsuk-input--error{% endif %}" id="duration" name="newSession[duration]" type="text"
spellcheck="false" value="" aria-describedby="duration-hint" inputmode="numeric">
<div class="nhsuk-input-wrapper__suffix" aria-hidden="true">minutes</div>
</div>
Expand All @@ -187,18 +244,12 @@ <h1 class="nhsuk-heading-l">Set date and time</h1>
<p class="nhsuk-body nhsuk-u-margin-bottom-1"><span data-capacity-calculator-total>X</span> total slots in the
session</p>
<input type="hidden" id="totalSlots" name="newSession[totalSlots]">
<p class="nhsuk-error-message nhsuk-u-margin-bottom-0" data-capacity-calculator-error hidden aria-live="polite"></p>
<!-- <p class="nhsuk-error-message nhsuk-u-margin-bottom-0" data-capacity-calculator-error hidden aria-live="polite"></p> -->
</div>

<button class="nhsuk-button" type="submit">Continue</button>

</form>

<div style="border: 2px dotted red">
Time must be in 24 hour format<br>
Start time must be before end time and vice versa<br>
Slots dont have to divide equally into the times, but it'll be interesting to work that out?
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -269,6 +320,7 @@ <h1 class="nhsuk-heading-l">Set date and time</h1>
totalElement.textContent = String(totalSlots);
totalInput.value = String(totalSlots);


if (!errorElement) {
return;
}
Expand Down
24 changes: 17 additions & 7 deletions app/views/clinics/02-organise-slots.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% extends 'layout.html' %}

{% set pageName = "Clinics" %}
{% set pageName = "Organise slots" %}

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
Expand Down Expand Up @@ -126,7 +126,6 @@ <h2 class="nhsuk-heading-m app-workflow-side-nav__heading">

<div class="nhsuk-u-reading-width">
<h1 class="nhsuk-heading-l">Organise slots</h1>
<p>Potentially some real brief help and scene setting. Selection and controls</p>
<h2 class="nhsuk-heading-m">
<span class="nhsuk-caption-m">Session time</span>
{{ data.newSession.startTime.hour | zeroPad }}:{{ data.newSession.startTime.minute | zeroPad }} to {{ data.newSession.endTime.hour | zeroPad }}:{{ data.newSession.endTime.minute | zeroPad }}
Expand All @@ -139,10 +138,9 @@ <h2 class="nhsuk-heading-m">
<input type="hidden" name="slotsSpecialAvailableCount">
<input type="hidden" name="slotsHeldCount">

<!-- <p class="nhsuk-body-s nhsuk-u-secondary-text-colour">
Click to select a slot.<br>
Press shift and click to select a range.
</p> -->
<p class="nhsuk-body-s nhsuk-u-secondary-text-colour">
Click to select a slot. Press shift and click to select a range.
</p>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-three-quarters">
Expand All @@ -155,8 +153,9 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
<li><a class="panel-item" id="panel-hold">Hold</a></li>
<li><a class="panel-item" id="panel-staff-break">Staff break</a></li>
<li><a class="panel-item" id="panel-special-appointment">Special appointment</a></li>
<li><a class="panel-item" id="panel-clear-type">Clear slot type</a></li>
<li class="nhsuk-u-margin-top-4"><a class="panel-item" id="panel-clear-type">Clear slot type</a></li>
</ul>
<hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
<ul class="nhsuk-list">
<li><a class="panel-item" id="panel-merge">Merge selected</a></li>
<li><a class="panel-item" id="panel-unmerge">Unmerge</a></li>
Expand Down Expand Up @@ -444,6 +443,7 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
`;

const checkbox = div.querySelector('input[type="checkbox"]');
const label = div.querySelector('label');

function handleCheckboxSelection(e, checked) {
const head = resolveToMergeHead(i);
Expand Down Expand Up @@ -475,6 +475,16 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
checkbox.addEventListener('click', e => {
handleCheckboxSelection(e, checkbox.checked);
});

if (label) {
label.addEventListener('click', e => {
// Handle label clicks explicitly so shift-click range selection works from the label text too.
e.preventDefault();
const nextChecked = !checkbox.checked;
checkbox.checked = nextChecked;
handleCheckboxSelection(e, nextChecked);
});
}
}

container.appendChild(div);
Expand Down
3 changes: 1 addition & 2 deletions app/views/clinics/03-publish-clinic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{% extends 'layout.html' %}

{% set pageName = "Clinics" %}
{% set pageName = "Publish clinic" %}

{% from "_includes/primary-navigation.html" import primaryNavigation %}
{% block header %}
Expand Down Expand Up @@ -64,7 +64,6 @@ <h2 class="nhsuk-heading-m app-workflow-side-nav__heading">
<div class="nhsuk-u-reading-width">

<h1 class="nhsuk-heading-l">Publish clinic</h1>
<p>Potentially some real brief help and scene setting. Mainly to point out you can punch holes in it as you go?</p>

<dl class="nhsuk-summary-list">
<div class="nhsuk-summary-list__row">
Expand Down