Skip to content

Tweaks to clinic creation prototypes #100

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 7 commits into from
Oct 28, 2026
Merged

Tweaks to clinic creation prototypes #100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1435c42
Tweaks to clinic prototypes, in particular calendar page
Demotive Oct 27, 2026
5198d22
hinting at controls
Demotive Oct 27, 2026
9cc433a
Rename tabs and relink
Demotive Oct 27, 2026
7fdb6f8
Roll in template creation to clinics
Demotive Oct 27, 2026
b31f401
Poking at the Clinics base page / tabs
Demotive Oct 27, 2026
2c50180
clinic sessions
Demotive Oct 27, 2026
3bef94c
Tweak names
Demotive Oct 28, 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
13 changes: 9 additions & 4 deletions app/assets/sass/components/_calendar-table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@
background-color: nhsuk-colour("pale-yellow");
}

.calendar-table-td-header {
display: flex;
justify-content: space-between;
}

// the number that is the date
.calendar-table-date {
display: flex;
Expand All @@ -47,7 +52,7 @@
height: 2rem;
border-radius: 50%;
background-color: nhsuk-colour("grey-5");
margin-bottom: nhsuk-spacing(3);
margin-bottom: nhsuk-spacing(2);
}

.--date-selected .calendar-table-date {
Expand All @@ -74,11 +79,11 @@
.--schedule-name {
display: block;
border-radius: 4px;
background-color: nhsuk-colour("grey-2");
color: nhsuk-colour("white");
border: 2px solid $nhsuk-input-border-colour;
padding: nhsuk-spacing(1);
margin-top: nhsuk-spacing(2);
font-size: nhsuk-px-to-rem(14);
color: $nhsuk-input-border-colour;
text-wrap: nowrap;
}
}
Expand Down Expand Up @@ -106,7 +111,7 @@
display: flex;
align-items: center;
@include nhsuk-font-size(16);
color: nhsuk-colour("grey-2");
color: $nhsuk-secondary-text-colour;
margin-bottom: nhsuk-spacing(2);
}

Expand Down
13 changes: 11 additions & 2 deletions app/routes/clinic-sessions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,12 +119,20 @@ router.post('/sessions/save-template', function (req, res) {
delete req.session.data.editingTemplateId
req.session.data.sessionTemplateSaved = existing ? 'updated' : 'created'

res.redirect('/sessions/00-template-listing')
res.redirect(takeTemplateReturnPath(req))
})

// Where to go after saving or cancelling, set when the flow is started from another journey
const takeTemplateReturnPath = (req) => {
const returnPath = req.session.data.sessionTemplateReturnTo || '/sessions/00-template-listing'
delete req.session.data.sessionTemplateReturnTo
return returnPath
}

router.get('/sessions/new-template', function (req, res) {
req.session.data.createSessionTemplate = {}
delete req.session.data.editingTemplateId
delete req.session.data.sessionTemplateReturnTo

res.redirect('/sessions/01-template-name')
})
Expand All @@ -138,6 +146,7 @@ router.get('/sessions/edit-template/:id', function (req, res) {

req.session.data.createSessionTemplate = JSON.parse(JSON.stringify(template.source))
req.session.data.editingTemplateId = template.id
delete req.session.data.sessionTemplateReturnTo

res.redirect('/sessions/04-check-template')
})
Expand All @@ -146,7 +155,7 @@ router.get('/sessions/cancel-edit', function (req, res) {
req.session.data.createSessionTemplate = {}
delete req.session.data.editingTemplateId

res.redirect('/sessions/00-template-listing')
res.redirect(takeTemplateReturnPath(req))
})

// Shows the success banner once, straight after a template is saved
Expand Down
34 changes: 31 additions & 3 deletions app/routes/create-capacity-from-zero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const router = express.Router()

// Slot/held totals per session template, matching select-session-template.html
const sessionTemplates = {
'Standard': { totalSlots: 42, heldSlots: 8 },
'Standard day': { totalSlots: 42, heldSlots: 8 },
'Special appointments': { totalSlots: 42, heldSlots: 42 }
}

Expand Down Expand Up @@ -187,7 +187,9 @@ router.get('/create-capacity-from-zero/clinic-summary', function (req, res) {
templateName,
templateId: matchedTemplate && matchedTemplate.id,
totalSlots: template.totalSlots,
heldSlots: template.heldSlots
heldSlots: template.heldSlots,
startTime: matchedTemplate && matchedTemplate.sessionStartLabel,
endTime: matchedTemplate && matchedTemplate.sessionEndLabel
})
}))

Expand All @@ -213,8 +215,25 @@ router.post('/create-capacity-from-zero/select-days', function (req, res) {
res.redirect('/create-capacity-from-zero/select-session-template')
})

// Starts the session template flow, returning to the template picker once saved or cancelled
router.get('/create-capacity-from-zero/new-session-template', function (req, res) {
req.session.data.createSessionTemplate = {}
delete req.session.data.editingTemplateId
req.session.data.sessionTemplateReturnTo = '/create-capacity-from-zero/select-session-template'

res.redirect('/sessions/01-template-name')
})

// Shows the success banner and "New" tag once, straight after a template is saved
router.get('/create-capacity-from-zero/select-session-template', function (req, res) {
const templateSaved = req.session.data.sessionTemplateSaved
delete req.session.data.sessionTemplateSaved

res.render('create-capacity-from-zero/select-session-template', { templateSaved })
})

const exampleTemplateSlugs = {
'standard': 'Standard',
'standard': 'Standard day',
'special-appointments': 'Special appointments'
}

Expand Down Expand Up @@ -364,4 +383,13 @@ router.post('/create-capacity-from-zero/create-schedule', function (req, res) {
})


router.get('/create-capacity-from-zero/index-manage', function (req, res) {
const today = new Intl.DateTimeFormat('en-GB', {
day: 'numeric',
month: 'long',
year: 'numeric'
}).format(new Date())
res.render('create-capacity-from-zero/index-manage', { today })
});

module.exports = router
82 changes: 62 additions & 20 deletions app/views/create-capacity-from-zero/clinic-summary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,15 @@
{% block content %}

{% set padlockSvg %}
<div class="--session-locked">
<span class="--session-locked">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
<path d="M5.5 8V5.75C5.5 3.67893 7.17893 2 9.25 2C11.3211 2 13 3.67893 13 5.75V8" stroke="#4C6272" stroke-width="1.75" stroke-linecap="round"/>
<rect x="3" y="7" width="12.5" height="10" rx="1.5" fill="#4C6272"/>
<path d="M5.5 8V5.75C5.5 3.67893 7.17893 2 9.25 2C11.3211 2 13 3.67893 13 5.75V8" stroke="#768692" stroke-width="1.75" stroke-linecap="round"/>
<rect x="3" y="7" width="12.5" height="10" rx="1.5" fill="#768692"/>
<circle cx="9.25" cy="11.75" r="1.25" fill="white"/>
<path d="M9.25 13V14.5" stroke="white" stroke-width="1.25" stroke-linecap="round"/>
</svg>
Locked
</div>
<span>Locked</span>
</span>
{% endset %}

{% include "create-capacity-from-zero/_local-includes/clinic-summary.html" %}
Expand Down Expand Up @@ -54,13 +54,17 @@
{% for dayItem in week %}
{% if dayItem %}
<td class="nhsuk-table__cell{% if dayItem.isScheduleStart %} --schedule-start{% endif %}{% if dayItem.isScheduleEnd %} --schedule-end{% endif %}" data-date="{{ dayItem.dateKey }}">
<span class="calendar-table-date">{{ dayItem.date }}</span>
<div class="calendar-table-td-header">
<span class="calendar-table-date">{{ dayItem.date }}</span>
{% if dayItem.templateName %}
{{ padlockSvg | safe }}
{% endif %}
</div>
{% if dayItem.templateName %}
{{ padlockSvg | safe }}
Template:<br>
<button type="button" class="nhsuk-link" popovertarget="template-preview-{{ dayItem.templateId }}">{{ dayItem.templateName }}</button><br>
{{ dayItem.totalSlots }} slots<br>
0 booked<br>
{{ dayItem.heldSlots }} held<br>
{{ dayItem.startTime }} to {{ dayItem.endTime }}<br>
{{ dayItem.totalSlots }} total slots
{% endif %}
{% if dayItem.isScheduleStart %}
<span class="--schedule-name">Select schedule</span>
Expand All @@ -79,18 +83,56 @@
{% endfor %}
</div>

<div class="nhsuk-grid-column-one-fifth" style="position: sticky; top: 0;">
<div class="app-side-panel" id="side-panel">
<h3 class="nhsuk-heading-s">With selected days:</h3>
<form method="post" action="/create-capacity-from-zero/select-days" id="select-days-form">
<div class="nhsuk-grid-column-one-fifth app-side-panel">
<div class="nhsuk-card nhsuk-card--feature app-card--feature-light-grey nhsuk-u-margin-top-8">
<div class="nhsuk-card__content">
<h3 class="nhsuk-card__heading nhsuk-u-font-size-19">
Availability
</h3>
<ul class="nhsuk-list">
<li><button type="submit" class="panel-item nhsuk-link">Assign session template</button></li>
<li><button type="submit" formaction="/create-capacity-from-zero/remove-template" class="panel-item nhsuk-link">Remove template</button></li>
<li><a class="panel-item">Unlock for booking</a></li>
<li><a class="panel-item">Lock to booking</a></li>
<li><a class="panel-item">Release all held slots</a></li>
<li>
<button type="submit" class="nhsuk-link">Unlock selected</button>
</li>
<li>
<button type="submit" class="nhsuk-link">Lock selected</button>
</li>
</ul>
</form>
<!-- <hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
<button type="submit" class="nhsuk-link nhsuk-u-font-size-19">Release held slots</button> -->
</div>
</div>
<div class="nhsuk-card nhsuk-card--feature app-card--feature-light-grey">
<div class="nhsuk-card__content">
<h3 class="nhsuk-card__heading nhsuk-u-font-size-19">
Clinic sessions
</h3>
<form method="post" id="select-days-form">
<ul class="nhsuk-list">
<li>
<button type="submit" class="nhsuk-link" formaction="/create-capacity-from-zero/select-days">Assign template</button>
</li>
<li>
<button type="submit" class="nhsuk-link" formaction="/create-capacity-from-zero/remove-template">Remove template</button>
</li>
</ul>
<hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
<button type="submit" class="nhsuk-link nhsuk-u-font-size-19">Create one-off session</button>
</form>
</div>
</div>
<div class="nhsuk-card nhsuk-card--feature app-card--feature-light-grey">
<div class="nhsuk-card__content">
<h3 class="nhsuk-card__heading nhsuk-u-font-size-19">
Schedule
</h3>
<ul class="nhsuk-list">
<li>
<button type="submit" class="nhsuk-link">Edit</button>
</li>
<li>
<button type="submit" class="nhsuk-link">Add new</button>
</li>
</div>
</div>
</div>
</div>
Expand Down
92 changes: 45 additions & 47 deletions app/views/create-capacity-from-zero/create-clinic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,51 +18,46 @@
{% block content %}

<form method="post">
<div class="nhsuk-u-reading-width">

{% if errorState === "true" %}
{% set errorList = [] %}
{% if errors.clinicName %}
{% set errorList = errorList.concat([{ text: errors.clinicName, href: "#clinic-name" }]) %}
{% endif %}
{% if errors.unit %}
{% set errorList = errorList.concat([{ text: errors.unit, href: "#unit" }]) %}
{% endif %}
{% if errors.location %}
{% set errorList = errorList.concat([{ text: errors.location, href: "#location-0" }]) %}
{% endif %}
{{ errorSummary({
titleText: "There is a problem",
errorList: errorList
}) }}
{% endif %}

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

<div class="nhsuk-form-group nhsuk-u-margin-bottom-3 {% if errors and errors.clinicName %}nhsuk-form-group--error{% endif %}">
<label class="nhsuk-label" for="clinic-name">
Clinic name
</label>
{% if errors and errors.clinicName %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> {{ errors.clinicName }}
</span>
{% endif %}
<input class="nhsuk-input {% if errors and errors.clinicName %}nhsuk-input--error{% endif %}" id="clinic-name" name="clinicName" type="text" value="{{ data.createCapacityFromZero.clinicName if data.createCapacityFromZero.clinicName else '' }}">
</div>

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

{% if errorState === "true" %}
{% set errorList = [] %}
{% if errors.clinicName %}
{% set errorList = errorList.concat([{ text: errors.clinicName, href: "#clinic-name" }]) %}
{% endif %}
{% if errors.unit %}
{% set errorList = errorList.concat([{ text: errors.unit, href: "#unit" }]) %}
{% endif %}
{% if errors.location %}
{% set errorList = errorList.concat([{ text: errors.location, href: "#location-0" }]) %}
{% endif %}
{{ errorSummary({
titleText: "There is a problem",
errorList: errorList
}) }}
{% endif %}

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

<div class="nhsuk-form-group nhsuk-u-margin-bottom-3 {% if errors and errors.clinicName %}nhsuk-form-group--error{% endif %}">
<label class="nhsuk-label" for="clinic-name">
Clinic name
</label>
{% if errors and errors.clinicName %}
<span class="nhsuk-error-message">
<span class="nhsuk-u-visually-hidden">Error:</span> {{ errors.clinicName }}
</span>
{% endif %}
<input class="nhsuk-input {% if errors and errors.clinicName %}nhsuk-input--error{% endif %}" id="clinic-name" name="clinicName" type="text" value="{{ data.createCapacityFromZero.clinicName if data.createCapacityFromZero.clinicName else '' }}">
</div>

<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-u-secondary-text-colour" for="clinic-id">
System generated clinic ID
</label>
<input class="nhsuk-input nhsuk-input--width-20" id="clinic-id" name="clinicIdDisplay" type="text" aria-describedby="id-hint-text" value="NNN-NNN-systemid-20260501" disabled>
</div>

</div>
<div class="nhsuk-form-group">
<label class="nhsuk-label nhsuk-u-secondary-text-colour" for="clinic-id">
System generated clinic ID
</label>
<input class="nhsuk-input nhsuk-input--width-20" id="clinic-id" name="clinicIdDisplay" type="text" aria-describedby="id-hint-text" value="NNN-NNN-systemid-20260501" disabled>
</div>

</div>

<div class="nhsuk-grid-row">
Expand Down Expand Up @@ -133,10 +128,13 @@ <h1 class="nhsuk-heading-l">Clinic details</h1>

</div>
</div>

<hr class="nhsuk-u-margin-top-0 nhsuk-u-margin-bottom-4">

<button class="nhsuk-button" type="submit">Create clinic</button>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-two-thirds">
<hr class="nhsuk-section-break--m">
<button class="nhsuk-button" type="submit">Create clinic</button>
</div>
</div>

</form>

Expand Down
8 changes: 4 additions & 4 deletions app/views/create-capacity-from-zero/index-all-clinics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,10 @@
<nav class="app-secondary-navigation" aria-label="Secondary menu">
<ul class="app-secondary-navigation__list">
<li class="app-secondary-navigation__list-item">
<a class="app-secondary-navigation__link" href="/create-capacity-from-zero/index-manage">Today’s sessions</a>
<a class="app-secondary-navigation__link" href="/create-capacity-from-zero/index-manage">Today’s clinic sessions</a>
</li>
<li class="app-secondary-navigation__list-item">
<a class="app-secondary-navigation__link" href="/create-capacity-from-zero/">Current clinics</a>
<a class="app-secondary-navigation__link" href="/create-capacity-from-zero/">Active clinics</a>
</li>
<li class="app-secondary-navigation__list-item">
<a class="app-secondary-navigation__link" href="/create-capacity-from-zero/index-all-clinics" aria-current="page"><strong class="app-secondary-navigation__current">All clinics</strong></a>
Expand All @@ -120,7 +120,7 @@
<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-full">
<div class="app-card-editable">
<h1 class="nhsuk-heading-l">Current clinics</h1>
<h1 class="nhsuk-heading-l">All clinics</h1>
{{ button({
text: "Create a new clinic",
href: "/create-capacity-from-zero/create-clinic",
Expand Down Expand Up @@ -202,7 +202,7 @@ <h2 class="nhsuk-card__heading nhsuk-heading-m">
<path d="M12 2a10 10 0 0 0-10 9h11.7l-4-4a1 1 0 0 1 1.5-1.4l5.6 5.7a1 1 0 0 1 0 1.4l-5.6 5.7a1 1 0 0 1-1.5 0 1 1 0 0 1 0-1.4l4-4H2A10 10 0 1 0 12 2z" />
</svg>
<span class="nhsuk-action-link__text">
Today’s sessions
Today’s clinic sessions
</span>
</a>
</div>
Expand Down
Loading
Loading