Skip to content

Iterating session creation prototypes #72

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

Iterating session creation prototypes #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
434d34f
First rough of adding and removing notes from a slot
Demotive Sep 16, 2026
f54e038
Change to an iffy <dialog>
Demotive Sep 16, 2026
2c232cd
COMMIT milestone: this and the last couple of commits encompass a mod…
Demotive Sep 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
10 changes: 9 additions & 1 deletion app/assets/sass/components/_template-preview-dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Import NHS.UK frontend library
@use "nhsuk-frontend/dist/nhsuk/core" as *;

.app-template-preview-dialog {
.app-dialog {
position: fixed;
inset: 0;
width: 90vw;
Expand Down Expand Up @@ -51,3 +51,11 @@
border: none;
}
}

.app-template-preview-dialog {

}

.app-dialog-nano {

}
8 changes: 4 additions & 4 deletions app/views/create-capacity-from-zero/_local-includes/template-preview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<dialog id="template-preview-standard" class="app-template-preview-dialog" popover>
<div class="app-template-preview-dialog__content">
<button type="button" class="app-template-preview-dialog__close" popovertarget="template-preview-standard" popovertargetaction="hide">
<dialog id="template-preview-standard" class="app-dialog" popover>
<div class="app-dialog__content">
<button type="button" class="app-dialog__close" popovertarget="template-preview-standard" popovertargetaction="hide">
<span aria-hidden="true">&times;</span>
<span class="nhsuk-u-visually-hidden">Close full template preview</span>
</button>
<iframe class="app-template-preview-dialog__frame" src="select-session-template-full-preview" title="Full template preview"></iframe>
<iframe class="app-dialog__frame" src="select-session-template-full-preview" title="Full template preview"></iframe>
</div>
</dialog>
8 changes: 4 additions & 4 deletions app/views/create-capacity-from-zero/select-session-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,13 +225,13 @@ <h2 class="nhsuk-heading-s">
</div>


<dialog id="template-preview-standard" class="app-template-preview-dialog" popover>
<div class="app-template-preview-dialog__content">
<button type="button" class="app-template-preview-dialog__close" popovertarget="template-preview-standard" popovertargetaction="hide">
<dialog id="template-preview-standard" class="app-dialog" popover>
<div class="app-dialog__content">
<button type="button" class="app-dialog__close" popovertarget="template-preview-standard" popovertargetaction="hide">
<span aria-hidden="true">&times;</span>
<span class="nhsuk-u-visually-hidden">Close full template preview</span>
</button>
<iframe class="app-template-preview-dialog__frame" src="select-session-template-full-preview" title="Full template preview"></iframe>
<iframe class="app-dialog__frame" src="select-session-template-full-preview" title="Full template preview"></iframe>
</div>
</dialog>
{% endblock %}
93 changes: 92 additions & 1 deletion app/views/sessions/02-organise-slots.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@

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

.slot.is-hold {}
.slot.is-staff-break {
Expand Down Expand Up @@ -64,6 +65,21 @@

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

#note-dialog {
position: absolute;
width: 100%;
max-width: 400px;
border: 1px solid #d8dde0;
border-radius: 4px;
padding: 24px;
}
#note-dialog::backdrop {
background: rgba(0, 0, 0, 0.48);
}
#note-dialog .nhsuk-button {
margin-right: 8px;
}
</style>

{% set tickSvg %}
Expand Down Expand Up @@ -182,6 +198,11 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
<li><a class="panel-item" id="panel-merge">Merge selected</a></li>
<li><a class="panel-item" id="panel-unmerge">Unmerge</a></li>
</ul>
<hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
<ul class="nhsuk-list">
<li><button type="button" class="panel-item nhsuk-link" id="panel-add-note" popovertarget="note-dialog">Add note</button></li>
<li><a class="panel-item" id="panel-remove-note">Remove note</a></li>
</ul>
</div>
<hr class="nhsuk-section-break nhsuk-section-break--m nhsuk-section-break--visible">
<p>
Expand All @@ -197,6 +218,25 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
</div>
</div>

<dialog id="note-dialog" class="app-dialog" popover>
<div class="app-dialog__content">
<button type="button" class="app-dialog__close" popovertarget="note-dialog" popovertargetaction="hide">
<span aria-hidden="true">&times;</span>
<span class="nhsuk-u-visually-hidden">Close</span>
</button>
<form method="dialog" id="note-form">
<div class="nhsuk-form-group">
<h2 class="nhsuk-label-wrapper">
<label class="nhsuk-label nhsuk-label--s" for="note-text">Note for selected slots</label>
</h2>
<input class="nhsuk-input" id="note-text" name="note-text" type="text" required>
</div>
<button class="nhsuk-button" type="submit" popovertarget="note-dialog" popovertargetaction="hide">Save</button>
<button class="nhsuk-button nhsuk-button--secondary" type="button" popovertarget="note-dialog" popovertargetaction="hide">Cancel</button>
</form>
</div>
</dialog>

{% endblock %}

{% block pageScripts %}
Expand Down Expand Up @@ -371,7 +411,8 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
merged: prev.merged || false,
span: prev.span || 1,
isMergedInto: prev.isMergedInto ?? undefined,
mergedEnd: prev.mergedEnd || null
mergedEnd: prev.mergedEnd || null,
note: prev.note || null
});
}

Expand Down Expand Up @@ -424,6 +465,7 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
const isSelected = selectedIndices.has(i) || (isChild && selectedIndices.has(headIndex));
const isMerged = sd.merged || isChild;
const slotType = isChild ? headSlot?.type : sd.type;
const slotNote = isChild ? headSlot?.note : sd.note;
const isLastMergedChild = isChild && headSlot && i === headIndex + (headSlot.span || 1) - 1;

if (isSelected) classes.push('selected');
Expand Down Expand Up @@ -452,13 +494,19 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
typeHtml += `<span class="slot-tag"><span class="nhsuk-tag ${tagClass}">${typeLabel}</span></span>`;
}

let noteHtml = '';
if (slotNote && !isChild) {
noteHtml += `<span class="slot-note nhsuk-u-secondary-text-colour"><span class="nhsuk-u-visually-hidden">Note: </span>${slotNote.replace(/"/g, '&quot;')}</span>`;
}

div.innerHTML = `
<div class="nhsuk-checkboxes__item">
<input class="nhsuk-checkboxes__input" id="${slotId}" name="slots[]" type="checkbox" value="${i}">
<label class="nhsuk-label nhsuk-checkboxes__label" for="${slotId}">
<span class="slot-time">${formatTime(sd.start)}</span>
<span class="slot-end nhsuk-u-secondary-text-colour">to ${endTime}</span>
${typeHtml}
${noteHtml}
${mergedHtml}
</label>
</div>
Expand Down Expand Up @@ -536,6 +584,8 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
document.getElementById('panel-clear-type').classList.toggle('disabled', !sel.length || !anyType);
document.getElementById('panel-merge').classList.toggle('disabled', !canMerge);
document.getElementById('panel-unmerge').classList.toggle('disabled', !hasMerged);
document.getElementById('panel-add-note').classList.toggle('disabled', !sel.length);
document.getElementById('panel-remove-note').classList.toggle('disabled', !sel.length);
}

// ========== EVENT ATTACHMENTS ==========
Expand All @@ -546,6 +596,10 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
const panelClearType = document.getElementById('panel-clear-type');
const panelMerge = document.getElementById('panel-merge');
const panelUnmerge = document.getElementById('panel-unmerge');
const panelRemoveNote = document.getElementById('panel-remove-note');
const noteDialog = document.getElementById('note-dialog');
const noteForm = document.getElementById('note-form');
const noteTextInput = document.getElementById('note-text');

if (panelHold) {
panelHold.addEventListener('click', () => {
Expand Down Expand Up @@ -607,6 +661,43 @@ <h3 class="nhsuk-heading-s">With selected:</h3>
});
}

// Opening/closing the popover (trigger click, Cancel/close buttons, Escape, light-dismiss) is
// handled natively via popovertarget; JS only needs to sync app state around those events.
if (noteDialog) {
noteDialog.addEventListener('beforetoggle', event => {
if (event.newState !== 'open') return;
syncSelectedIndicesFromCheckboxes();
const notes = [...selectedIndices].map(i => slotData[i]?.note || '');
noteTextInput.value = new Set(notes).size === 1 ? notes[0] : '';
});
}

if (noteForm) {
noteForm.addEventListener('submit', () => {
const noteText = noteTextInput.value.trim();
[...selectedIndices].forEach(i => {
if (slotData[i]) slotData[i].note = noteText;
});
selectedIndices.clear();
renderGrid();
setStats();
// Firefox doesn't close a popover-dialog via the form's method="dialog" behaviour.
noteDialog.hidePopover();
});
}

if (panelRemoveNote) {
panelRemoveNote.addEventListener('click', () => {
syncSelectedIndicesFromCheckboxes();
[...selectedIndices].forEach(i => {
if (slotData[i]) slotData[i].note = null;
});
selectedIndices.clear();
renderGrid();
setStats();
});
}

// ========== INITIALIZATION ==========
render();
</script>
Expand Down