diff --git a/app/assets/sass/components/_workflow.scss b/app/assets/sass/components/_workflow.scss new file mode 100644 index 0000000..efa6183 --- /dev/null +++ b/app/assets/sass/components/_workflow.scss @@ -0,0 +1,201 @@ +// app/assets/sass/components/_workflow.scss + +@use "nhsuk-frontend/dist/nhsuk/core" as *; + +// Wider container for workflow mode +.nhsuk-width-container--wide { + @include nhsuk-width-container(1200px); +} + +.app-workflow-mode .nhsuk-width-container { + @include nhsuk-width-container(1200px); +} + +// Use flexbox for workflow layout to allow nav column to stretch for sticky positioning +.app-workflow-container__row { + @include nhsuk-media-query($from: desktop) { + display: flex; + } +} + +.app-workflow-container__sidebar, +.app-workflow-container__main { + @include nhsuk-media-query($from: desktop) { + float: none; + } +} + +// Wrapper needs to fill the column height for sticky to work +.app-workflow-side-nav-wrapper { + height: 100%; + position: sticky; + top: nhsuk-spacing(4); + padding-bottom: 15px; +} + +.app-workflow-side-nav { + position: static; +} + +.app-workflow-side-nav__heading { + margin-bottom: nhsuk-spacing(3); +} + +.app-workflow-side-nav__list { + list-style: none; + margin: 0; + padding: 0; +} + +.app-workflow-side-nav__item { + position: relative; + border-left: 4px solid transparent; + margin-left: -1px; +} + +.app-workflow-side-nav__link { + @include nhsuk-font($size: 16); + + display: flex; + align-items: center; + gap: nhsuk-spacing(2); + padding: nhsuk-spacing(2) 0 nhsuk-spacing(2) nhsuk-spacing(2); + text-decoration: none; + position: relative; +} + +// Only apply link styles to actual links +a.app-workflow-side-nav__link { + @include nhsuk-link-style-default; + @include nhsuk-link-style-no-visited-state; + + &:hover { + .app-workflow-side-nav__label { + text-decoration: underline; + text-decoration-thickness: max(3px, 0.1875rem, 0.12em); + } + } + + &:focus { + @include nhsuk-focused-text; + color: $nhsuk-focus-text-colour; + } +} + +.app-workflow-side-nav__link--disabled { + color: $nhsuk-secondary-text-colour; + cursor: not-allowed; + pointer-events: none; +} + +// Clickable links (not current, not completed, not disabled) have blue circles +.app-workflow-side-nav__link--clickable { + .app-workflow-side-nav__number { + background-color: nhsuk-colour("blue"); + color: nhsuk-colour("white"); + } +} + +.app-workflow-side-nav__number { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 24px; + width: 24px; + height: 24px; + background-color: nhsuk-colour("grey-3"); + color: nhsuk-colour("grey-1"); + border-radius: 50%; + font-weight: 600; + font-size: 14px; + text-align: center; + line-height: 1; + padding-left: 1px; // Nudge numbers slightly right + + .app-icon--tick { + width: 16px; + height: 16px; + + path { + fill: none; + stroke: nhsuk-colour("white"); + stroke-width: 4; + } + } +} + +.app-workflow-side-nav__label { + flex: 1; +} + +// Item states +.app-workflow-side-nav__item--current { + border-left-color: $nhsuk-brand-colour; + + .app-workflow-side-nav__link { + color: $nhsuk-text-colour; + } + + .app-workflow-side-nav__label { + font-weight: bold; + } + + .app-workflow-side-nav__number { + background-color: nhsuk-colour("blue"); + color: nhsuk-colour("white"); + } +} + +// Clickable links (not current, not completed, not disabled) have blue circles +.app-workflow-side-nav__link--clickable { + .app-workflow-side-nav__number { + background-color: nhsuk-colour("blue"); + color: nhsuk-colour("white"); + } +} + +.app-workflow-side-nav__item--completed { + .app-workflow-side-nav__link--clickable .app-workflow-side-nav__number, + .app-workflow-side-nav__number { + background-color: nhsuk-colour("green"); + color: nhsuk-colour("white"); + + .app-icon--tick path { + stroke: nhsuk-colour("white"); + } + } +} + +.app-workflow-side-nav__item--disabled { + .app-workflow-side-nav__link--clickable .app-workflow-side-nav__number, + .app-workflow-side-nav__number { + background-color: nhsuk-colour("grey-4"); + color: nhsuk-colour("grey-1"); + } +} + +// Responsive - use full width on mobile +@media (max-width: 768px) { + .app-workflow-side-nav { + position: static; + } +} + +// Status text shown after the NHS number in the appointment header (e.g. "Added to worklist") +.app-header-status { + margin-left: nhsuk-spacing(3); + + .app-header-status__icon { + height: 1em; + width: 1em; + vertical-align: -0.15em; + margin-right: -1px; + // Aiming for #48B788 + fill: nhsuk-tint(nhsuk-colour("green"), 40%); + } +} + +.app-header-status--fail .app-header-status__icon { + // Aiming for #E98881 + fill: nhsuk-tint(nhsuk-colour("red"), 44%); +} diff --git a/app/assets/sass/main.scss b/app/assets/sass/main.scss index 1b9b32a..b511c44 100755 --- a/app/assets/sass/main.scss +++ b/app/assets/sass/main.scss @@ -14,13 +14,14 @@ @forward "components/secondary-navigation"; @forward "components/participant-table"; //@forward "components/participant-search"; +@forward "components/workflow"; //{% set containerClasses = "nhsuk-width-container-fluid" %} - // Add your custom CSS/Sass styles below. .app-width-extended { width: 1280px; } + .app-card-editable { display: flex; justify-content: space-between; diff --git a/app/lib/utils/strings.js b/app/lib/utils/strings.js new file mode 100644 index 0000000..a166347 --- /dev/null +++ b/app/lib/utils/strings.js @@ -0,0 +1,25 @@ +// app/lib/utils/strings.js + +const padStart = (value, length = 2, char = '0') => { + if (value === null || value === undefined) { + return '' + } + + return String(value).padStart(length, char) +} + +const zeroPad = (value, length = 2) => padStart(value, length, '0') + +const toJSON = (value) => { + try { + return JSON.stringify(value) + } catch (err) { + return 'null' + } +} + +module.exports = { + padStart, + zeroPad, + toJSON +} diff --git a/app/views/september-iteration-2/macros/clinic-listing.html b/app/views/_macros/clinic-listing.html similarity index 100% rename from app/views/september-iteration-2/macros/clinic-listing.html rename to app/views/_macros/clinic-listing.html diff --git a/app/views/clinics/01-set-times.html b/app/views/clinics/01-set-times.html new file mode 100644 index 0000000..93d4523 --- /dev/null +++ b/app/views/clinics/01-set-times.html @@ -0,0 +1,301 @@ +{% extends 'layout.html' %} + +{% set pageName = "Clinics" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %} + +{{ breadcrumb({ + items: [ + { + href: "#", + text: "Clinics" + }, + { + href: "#", + text: "Templates" + }, + { + href: "#", + text: "Session templates" + } + ] +}) }} + +{% endblock %} + +{% block content %} + +{% set tickSvg %} + +{% endset %} + +
+
+ +
+ +
+ +
+
+
+ +

Set times

+

Potentially some real brief help and scene setting. Mainly to point out you can punch holes in it as you go?

+ +
+ +
+
+ + Start time + +
+ For example, 10:00 +
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+
+
+
+ +
+
+ + End time + +
+ For example, 17:00 +
+ +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + + +
+ + +
+ + +
+
+ +
+ Information: +

Capacity calculator

+

X total slots in the + session

+ + +
+ + + +
+ +
+ Time must be in 24 hour format
+ Start time must be before end time and vice versa
+ Slots dont have to divide equally into the times, but it'll be interesting to work that out? +
+
+
+ + + +{% endblock %} + +{% block pageScripts %} + +{% endblock %} \ No newline at end of file diff --git a/app/views/clinics/02-organise-slots.html b/app/views/clinics/02-organise-slots.html new file mode 100644 index 0000000..34a42a4 --- /dev/null +++ b/app/views/clinics/02-organise-slots.html @@ -0,0 +1,499 @@ +{% extends 'layout.html' %} + +{% set pageName = "Clinics" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %} + +{{ breadcrumb({ + items: [ + { + href: "#", + text: "Clinics" + }, + { + href: "#", + text: "Templates" + }, + { + href: "#", + text: "Session templates" + } + ] +}) }} + +{% endblock %} + +{% block content %} + + + +{% set tickSvg %} + +{% endset %} + +
+
+ +
+ +
+ +
+
+ +
+

Organise slots

+

Potentially some real brief help and scene setting. Selection and controls

+

+ Session time + {{ data.newSession.startTime.hour | zeroPad }}:{{ data.newSession.startTime.minute | zeroPad }} to {{ data.newSession.endTime.hour | zeroPad }}:{{ data.newSession.endTime.minute | zeroPad }} +

+
+ +
+
+
+
+
+

+ {{ data.newSession.totalSlots }} slots available to book of {{ data.newSession.totalSlots }} total +

+

Click to select · Shift+click for a range · ⌘/Ctrl+click for multiple

+
+

With selected:

+ +
+
+
+ +
+
+
+ + + + +{% endblock %} + +{% block pageScripts %} + +{% endblock %} \ No newline at end of file diff --git a/app/views/clinics/day-slot-view.html b/app/views/clinics/day-slot-view.html index f62178b..81e01c9 100644 --- a/app/views/clinics/day-slot-view.html +++ b/app/views/clinics/day-slot-view.html @@ -45,35 +45,248 @@

Tuesday 1 September 2026

- {% set secondaryNavItems = [] %} - {% for item in [ - { href: '#', label: 'One modality name (42 slots available)', selected: 'true' }, - { href: '#', label: 'Another modality name (0 slots available)' } - ] %} - {% set secondaryNavItems = secondaryNavItems | push({ - text: item.label | safe, - href: item.href | trim, - current: true if item.selected == 'true' - }) %} - {% endfor %} - - {{ appSecondaryNavigation({ - visuallyHiddenTitle: "Secondary menu", - items: secondaryNavItems - }) }} -
-

- Morning session - 08:30 to 12:30 -

+
+

Whole day size controls:

+
-
- - - 18 slots available of 21 - - -
+

+ [num] slots available of [total] +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Time + + Participant details + + Date of birth + + Appointment details + + Actions +
+ 08:30 + + Joanne Marquardt +
NHS: 999 054 3666
+ 		+ 15 March 1960 +
(66 years)
+ 		+ + Special appointment + +
View appointment or a tiny note
+ 		+ Rebook participant + + Secondary actions +
08:40Held: why? + Release slot + + Secondary actions +
+ 08:50 + +09:00 + + Daphne Hart +
NHS: 821 374 0952
+ 		+ 22 July 1958 +
(67 years)
+ 		+ + Special appointment x 2 + +
View appointment or a tiny note
+ 		+ Rebook participant + + Secondary actions +
+ 09:10 + + Marta O'Neill +
NHS: 702 195 4836
+ 		+ 3 May 1971 +
(55 years)
+ 		+ View appointment or a tiny note + + Rebook participant + + Secondary actions +
09:10614 287 9305Susan Carter19 September 1967
09:20505 463 1129Olivia Barnes12 January 1975
09:30336 774 2201Rachel Price27 April 1962
09:40223 546 8870Hannah Wallace6 October 1959
09:50410 559 3322Fiona Lambert14 December 1973
10:00196 804 7753Georgia Mills30 June 1968
10:10378 290 4601Elaine Fox11 February 1976
10:20957 613 2084Tessa King25 August 1963
10:30604 118 9756Nadia Singh7 April 1957
10:40842 039 6617Jane Reed18 November 1970
10:50731 259 1148Laura White29 May 1965
11:00665 880 3320Marissa Young9 March 1961
11:10548 901 7732Naomi Bell21 September 1974
11:20439 216 5087Paige Long4 July 1969
11:30329 487 9901Catherine Wood16 January 1956
11:40214 603 1774Victoria Hale13 October 1966
11:50188 905 6423Imogen Frost31 December 1972
12:00977 332 1108Dara Moss24 June 1960
12:10861 427 5930Sophie Hartley2 August 1962
12:20750 218 3446Emma Cole17 April 1975
+
  • @@ -291,246 +504,7 @@

-
-
-
- - -
-
-
-

- Afternoon session - 13:30 to 17:30 -

-
-
- - - 24 slots available of 24 - - -
- -
-
+
{% endblock %} diff --git a/app/views/clinics/z-older-versions/2026-06-day-slot-view.html b/app/views/clinics/z-older-versions/2026-06-day-slot-view.html new file mode 100644 index 0000000..f62178b --- /dev/null +++ b/app/views/clinics/z-older-versions/2026-06-day-slot-view.html @@ -0,0 +1,536 @@ +{% extends 'layout.html' %} + +{% set pageName = "Day clinic view" %} + +{% from "_includes/primary-navigation.html" import primaryNavigation %} +{% block header %} + {{ primaryNavigation("Clinics", serviceName) }} +{% endblock %} + +{% block beforeContent %} +{{ breadcrumb({ + items: [ + { + href: "#", + text: "Home" + }, + { + href: "/clinics/", + text: "Clinics" + }, + { + href: "clinic-detail", + text: "Worthing C2C test 1" + } + ] +}) }} +{% endblock %} + +{% block content %} + +
+
+

+ HWO-NNN-standard-20260501 + Worthing C2C test 1 +

+
+
+ +
+ +
+
+

+ Tuesday + 1 September 2026 +

+ {% set secondaryNavItems = [] %} + {% for item in [ + { href: '#', label: 'One modality name (42 slots available)', selected: 'true' }, + { href: '#', label: 'Another modality name (0 slots available)' } + ] %} + {% set secondaryNavItems = secondaryNavItems | push({ + text: item.label | safe, + href: item.href | trim, + current: true if item.selected == 'true' + }) %} + {% endfor %} + + {{ appSecondaryNavigation({ + visuallyHiddenTitle: "Secondary menu", + items: secondaryNavItems + }) }} +
+

+ Morning session + 08:30 to 12:30 +

+
+
+ + + 18 slots available of 21 + + +
+ +
+
+
+
+ +
+
+
+

+ Afternoon session + 13:30 to 17:30 +

+
+
+ + + 24 slots available of 24 + + +
+ +
+
+
+
+{% endblock %} diff --git a/app/views/september-iteration-2/clickthru/03-select-clinic.html b/app/views/september-iteration-2/clickthru/03-select-clinic.html index 78a1aa2..257a582 100644 --- a/app/views/september-iteration-2/clickthru/03-select-clinic.html +++ b/app/views/september-iteration-2/clickthru/03-select-clinic.html @@ -19,7 +19,7 @@

- {% from "september-iteration-2/macros/clinic-listing.html" import clinic_listing %} + {% from "_macros/clinic-listing.html" import clinic_listing %} {{ clinic_listing({ controls: true, clinics: [ diff --git a/app/views/september-iteration-2/clickthru/05-review.html b/app/views/september-iteration-2/clickthru/05-review.html index 5e04f16..1df5e4b 100644 --- a/app/views/september-iteration-2/clickthru/05-review.html +++ b/app/views/september-iteration-2/clickthru/05-review.html @@ -72,7 +72,7 @@

into {{ data.clinicName }}

- {% from "september-iteration-2/macros/clinic-listing.html" import clinic_listing %} + {% from "_macros/clinic-listing.html" import clinic_listing %} {{ clinic_listing({ controls: false, clinics: [