Skip to content

Rebooking for individuals #77

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 1 commit into
base: main
Choose a base branch
from
Draft

Rebooking for individuals #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 53 additions & 0 deletions app/assets/sass/components/_session-slots.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@use "nhsuk-frontend/dist/nhsuk/core" as *;

.slot {
background-color: #fff;
border: 1px solid #212b32;
padding-left: 8px;
user-select: none;
margin-bottom: 12px;
min-height: 2.75rem;
}

.slot-end { font-size: 16px; margin-right: 1rem; }
.slot-tag { font-size: 16px; margin-left: 1rem; }

.slot.is-hold {}
.slot.is-staff-break {
background: transparent;
border-style: dashed;
}
.slot.is-special-appointment {}

.slot.is-merged {
border-bottom: none;
margin-bottom: 0;
}
.slot.is-merged-child {
border-top: 1px dashed #212b32;
height: 42px;
}
.slot.is-merged-child > .nhsuk-checkboxes__item,
.slot.is-merged-child > div {
display: none;
}
.slot.is-merged-last-child {
border-bottom: 1px solid #212b32;
margin-bottom: 12px;
}

.slot.is-staff-break.is-merged-last-child {
border-bottom-style: dashed;
}

.slot.is-merged-child > .slot-time,
.slot.is-merged-child > .slot-end {
display: none;
}

.slot .nhsuk-checkboxes__label {
width: 100%;
}

.panel-item { display: block; cursor: pointer; }
.panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
1 change: 1 addition & 0 deletions app/assets/sass/main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@
@forward "components/participant-table";
//@forward "components/participant-search";
@forward "components/progress-bar";
@forward "components/session-slots";
@forward "components/template-card";
@forward "components/template-preview-dialog";
@forward "components/workflow";
Expand Down
172 changes: 172 additions & 0 deletions app/views/rebook-individual/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,172 @@
{% extends 'layout.html' %}
{% set pageName = "" %}

{% block beforeContent %}
{% endblock %}

{% block content %}

<h1 class="nhsuk-heading-m">Sketchpad</h1>

<div class="nhsuk-grid-row">
<div class="nhsuk-grid-column-one-quarter">
<div class="nhsuk-form-group">
<fieldset class="nhsuk-fieldset">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--s">
<h3 class="nhsuk-fieldset__heading">
Slot type
</h3>
</legend>
<div class="nhsuk-checkboxes nhsuk-checkboxes--small" data-module="nhsuk-checkboxes">
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="available" name="slot-type" type="checkbox" value="available">
<label class="nhsuk-label nhsuk-checkboxes__label" for="available">
<strong class="nhsuk-tag nhsuk-tag--green">Available</strong>
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="held-rebooking" name="slot-type" type="checkbox" value="held-rebooking">
<label class="nhsuk-label nhsuk-checkboxes__label" for="held-rebooking">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">Held</span><span class="nhsuk-tag nhsuk-tag--white">rebooking</span>
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="held-web-rebooking" name="slot-type" type="checkbox" value="held-web-rebooking">
<label class="nhsuk-label nhsuk-checkboxes__label" for="held-web-rebooking">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">Held</span><span class="nhsuk-tag nhsuk-tag--white">web rebooking</span>
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="held-technical-recall" name="slot-type" type="checkbox" value="held-technical-recall">
<label class="nhsuk-label nhsuk-checkboxes__label" for="held-technical-recall">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">Held</span><span class="nhsuk-tag nhsuk-tag--white">technical recall</span>
</label>
</div>
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="special-appointment" name="slot-type" type="checkbox" value="special-appointment">
<label class="nhsuk-label nhsuk-checkboxes__label" for="special-appointment">
<span class="nhsuk-tag nhsuk-tag--yellow app-tag--attached">Special appointment</span>
</label>
</div>
</div>
</fieldset>
</div>
</div>

<div class="nhsuk-grid-column-one-half">

<p><a href="#">Earlier clinic sessions (days)</a></p>

<div id="slots-container" class="nhsuk-radios nhsuk-radios--small" data-module="nhsuk-radios" data-nhsuk-radios-init="">

<h3 class="nhsuk-heading-m">
<span class="nhsuk-caption-m">Tuesday</span>
1 September 2026
</h3>

<div class="slot is-hold">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-0" name="slots[]" type="radio" value="0">
<label class="nhsuk-label nhsuk-radios__label" for="slot-0">
<span class="slot-time">10:00</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 10:08</span>
<span class="slot-tag">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">Held</span><span class="nhsuk-tag nhsuk-tag--white">rebooking</span>
</span>
</label>
</div>
</div>

<div class="slot"></div>

<div class="slot is-special-appointment">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-2" name="slots[]" type="radio" value="2">
<label class="nhsuk-label nhsuk-radios__label" for="slot-2">
<span class="slot-time">10:16</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 10:24</span>
<span class="slot-tag"><span class="nhsuk-tag nhsuk-tag--yellow">Special appointment</span></span>
</label>
</div>
</div>

<div class="slot is-merged">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-3" name="slots[]" type="radio" value="3">
<label class="nhsuk-label nhsuk-radios__label" for="slot-3">
<span class="slot-time">10:24</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 10:48</span>
<span class="slot-tag">
<strong class="nhsuk-tag nhsuk-tag--green app-tag--attached">Available</strong><span class="nhsuk-tag nhsuk-tag--white">3 slots</span>
</span>
</label>
</div>
</div>
<div class="slot is-merged is-merged-child">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-4" name="slots[]" type="radio" value="4">
<label class="nhsuk-label nhsuk-radios__label" for="slot-4">
<span class="slot-time">10:32</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 10:40</span>
<span class="slot-tag">Merged (1)</span>
</label>
</div>
</div>
<div class="slot is-merged is-merged-child is-merged-last-child">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-5" name="slots[]" type="radio" value="5">
<label class="nhsuk-label nhsuk-radios__label" for="slot-5">
<span class="slot-time">10:40</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 10:48</span>
<span class="slot-tag">Merged (1)</span>
</label>
</div>
</div>

<div class="slot">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-6" name="slots[]" type="radio" value="6">
<label class="nhsuk-label nhsuk-radios__label" for="slot-6">
<span class="slot-time">10:48</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 10:56</span>
<span class="slot-tag">
<strong class="nhsuk-tag nhsuk-tag--green">Available</strong>
</span>
</label>
</div>
</div>

<div class="slot">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-7" name="slots[]" type="radio" value="7">
<label class="nhsuk-label nhsuk-radios__label" for="slot-7">
<span class="slot-time">10:56</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 11:04</span>
<span class="slot-tag">
<strong class="nhsuk-tag nhsuk-tag--green">Available</strong>
</span>
</label>
</div>
</div>

<div class="slot">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="slot-8" name="slots[]" type="radio" value="8">
<label class="nhsuk-label nhsuk-radios__label" for="slot-8">
<span class="slot-time">11:04</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to 11:12</span>
<span class="slot-tag">
<strong class="nhsuk-tag nhsuk-tag--green">Available</strong>
</span>
</label>
</div>
</div>

</div>

<p><a href="#">Later clinic sessions (days)</a></p>

</div>
</div>

{% endblock %}
55 changes: 1 addition & 54 deletions app/views/sessions/02-organise-slots.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,59 +13,6 @@

{% block content %}

<style>

.slot {
background-color: #fff;
border: 1px solid #212b32;
padding-left: 8px;
user-select: none;
margin-bottom: 12px;
}

.slot-end { font-size: 16px; margin-right: 1rem; }
.slot-tag { font-size: 16px; margin-left: 1rem; }

.slot.is-hold {}
.slot.is-staff-break {
background: transparent;
border-style: dashed;
}
.slot.is-special-appointment {}

.slot.is-merged {
border-bottom: none;
margin-bottom: 0;
}
.slot.is-merged-child {
border-top: 1px dashed #212b32;
height: 42px;
}
.slot.is-merged-child > .nhsuk-checkboxes__item {
display: none;
}
.slot.is-merged-last-child {
border-bottom: 1px solid #212b32;
margin-bottom: 12px;
}

.slot.is-staff-break.is-merged-last-child {
border-bottom-style: dashed;
}

.slot.is-merged-child > .slot-time,
.slot.is-merged-child > .slot-end {
display: none;
}

.slot .nhsuk-checkboxes__label {
width: 100%;
}

.panel-item { display: block; cursor: pointer; }
.panel-item.disabled { opacity: 0.38; cursor: default; pointer-events: none; }
</style>

{% set tickSvg %}
<svg class="app-icon app-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
Expand Down Expand Up @@ -448,7 +395,7 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
let typeHtml = '';
if (slotType && !isChild) {
const typeLabel = slotType === 'hold' ? 'Held' : slotType === 'staff-break' ? 'Staff break' : 'Special appointment';
const tagClass = slotType === 'hold' ? 'nhsuk-tag--grey' : slotType === 'staff-break' ? 'nhsuk-tag--grey' : 'nhsuk-tag--yellow';
const tagClass = slotType === 'hold' ? 'nhsuk-tag--orange' : slotType === 'staff-break' ? 'nhsuk-tag--grey' : 'nhsuk-tag--yellow';
typeHtml += `<span class="slot-tag"><span class="nhsuk-tag ${tagClass}">${typeLabel}</span></span>`;
}

Expand Down
10 changes: 5 additions & 5 deletions app/views/sessions/day-slot-view.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ <h1 class="nhsuk-heading-l">
<td class="nhsuk-table__cell">
<a href="#">Daphne Hart</a>
<div class="nhsuk-u-secondary-text-colour">NHS: 999 374 0952</div>
<span class="nhsuk-tag nhsuk-tag--yellow">
<span class="nhsuk-tag nhsuk-tag--yellow app-tag--attached">
Special appointment
</span><span class="nhsuk-tag nhsuk-tag--white">
2 slots
Expand Down Expand Up @@ -596,9 +596,9 @@ <h1 class="nhsuk-heading-l">
13:50 <span class="nhsuk-u-secondary-text-colour nhsuk-u-font-size-16">to 14:00</span>
</td>
<td colspan="2" class="nhsuk-table__cell">
<span class="nhsuk-tag nhsuk-tag--orange">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">
Held
</span><span class="nhsuk-tag nhsuk-tag--white">
</span><span class="nhsuk-tag nhsuk-tag--white app-tag--attached">
hold type
</span><span class="nhsuk-tag nhsuk-tag--white">
x slots
Expand Down Expand Up @@ -635,7 +635,7 @@ <h1 class="nhsuk-heading-l">
</div>
</td>
<td colspan="2" class="nhsuk-table__cell">
<span class="nhsuk-tag nhsuk-tag--orange">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">
Held
</span><span class="nhsuk-tag nhsuk-tag--white">
hold type
Expand Down Expand Up @@ -688,7 +688,7 @@ <h1 class="nhsuk-heading-l">
</div>
</td>
<td colspan="2" class="nhsuk-table__cell">
<span class="nhsuk-tag nhsuk-tag--orange">
<span class="nhsuk-tag nhsuk-tag--orange app-tag--attached">
Held
</span><span class="nhsuk-tag nhsuk-tag--white">
hold type
Expand Down
Loading
Loading