diff --git a/app/assets/sass/components/_template-preview-dialog.scss b/app/assets/sass/components/_template-preview-dialog.scss index 9d9b9a91..3b110370 100644 --- a/app/assets/sass/components/_template-preview-dialog.scss +++ b/app/assets/sass/components/_template-preview-dialog.scss @@ -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; @@ -51,3 +51,11 @@ border: none; } } + +.app-template-preview-dialog { + +} + +.app-dialog-nano { + +} diff --git a/app/views/create-capacity-from-zero/_local-includes/template-preview.html b/app/views/create-capacity-from-zero/_local-includes/template-preview.html index 5dc43fc5..f5825d60 100644 --- a/app/views/create-capacity-from-zero/_local-includes/template-preview.html +++ b/app/views/create-capacity-from-zero/_local-includes/template-preview.html @@ -1,9 +1,9 @@ - -
- - +
\ No newline at end of file diff --git a/app/views/create-capacity-from-zero/select-session-template.html b/app/views/create-capacity-from-zero/select-session-template.html index 91f28b8d..1c297bc3 100644 --- a/app/views/create-capacity-from-zero/select-session-template.html +++ b/app/views/create-capacity-from-zero/select-session-template.html @@ -225,13 +225,13 @@

- -
- - +
{% endblock %} \ No newline at end of file diff --git a/app/views/sessions/02-organise-slots.html b/app/views/sessions/02-organise-slots.html index b90868a1..d08b7072 100644 --- a/app/views/sessions/02-organise-slots.html +++ b/app/views/sessions/02-organise-slots.html @@ -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 { @@ -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; + } {% set tickSvg %} @@ -182,6 +198,11 @@

With selected:

  • Merge selected
  • Unmerge
    • +
    +

    @@ -197,6 +218,25 @@

    With selected:

    + +
    + +
    +
    +

    + +

    + +
    + + +
    +
    +     + {% endblock %} {% block pageScripts %} @@ -371,7 +411,8 @@

    With selected:

    merged: prev.merged || false, span: prev.span || 1, isMergedInto: prev.isMergedInto ?? undefined, - mergedEnd: prev.mergedEnd || null + mergedEnd: prev.mergedEnd || null, + note: prev.note || null }); } @@ -424,6 +465,7 @@

    With selected:

    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'); @@ -452,6 +494,11 @@

    With selected:

    typeHtml += `${typeLabel}`; } + let noteHtml = ''; + if (slotNote && !isChild) { + noteHtml += `Note: ${slotNote.replace(/"/g, '"')}`; + } + div.innerHTML = `
    @@ -459,6 +506,7 @@

    With selected:

    ${formatTime(sd.start)} to ${endTime} ${typeHtml} + ${noteHtml} ${mergedHtml}
    @@ -536,6 +584,8 @@

    With selected:

    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 ========== @@ -546,6 +596,10 @@

    With selected:

    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', () => { @@ -607,6 +661,43 @@

    With selected:

    }); } + // 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();