Skip to content

Commit 648fda3

Browse files
frankierobertofrankieroberto
authored
Design Sprint 2: New flow for recording vaccinations (#144)
This adds a first version of a new 'record vaccinations' flow within the service.
1 parent 7b7041a commit 648fda3

20 files changed

+1874
-3
lines changed

‎app/assets/sass/components/_panel.scss‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
// ==========================================================================
2+
// COMPONENTS / #PANEL
3+
// ==========================================================================
4+
5+
/**
6+
* Original code taken from GDS (Government Digital Service)
7+
* https://github.com/alphagov/govuk-frontend
8+
*
9+
* 1. This is an if-all-else-fails attempt to stop long words from overflowing the container
10+
on very narrow viewports by forcing them to break and wrap instead. This
11+
overflowing is more likely to happen when user increases text size on a mobile eg. using
12+
iOS Safari text resize controls.
13+
14+
The overflowing is a particular problem with the panel component since it uses white
15+
text: when the text overflows the container, it is invisible on the white (page)
16+
background. When the text in our other components overflow, the user might have to scroll
17+
horizontally to view it but the the text remains legible.
18+
* 2. Support IE (autoprefixer doesn't add this as it's not a prefix)
19+
*/
20+
21+
$nhsuk-border-width-panel: nhsuk-spacing(1);
22+
23+
.nhsuk-panel {
24+
@include nhsuk-typography-responsive(24);
25+
@include nhsuk-responsive-margin(4, "bottom");
26+
27+
background: $color_nhsuk-green;
28+
border: $nhsuk-border-width-panel solid transparent;
29+
box-sizing: border-box;
30+
color: $color_nhsuk-white;
31+
padding: nhsuk-spacing(6) - $nhsuk-border-width-panel;
32+
33+
@include mq($until: tablet) {
34+
padding: nhsuk-spacing(4) - $nhsuk-border-width-panel;
35+
overflow-wrap: break-word; /* [1] */
36+
word-wrap: break-word; /* [2] */
37+
}
38+
39+
@include mq($media-type: print) {
40+
border-color: currentcolor;
41+
color: $nhsuk-print-text-color;
42+
background: none;
43+
}
44+
}
45+
46+
.nhsuk-panel__title {
47+
@include nhsuk-typography-responsive(48);
48+
@include nhsuk-responsive-margin(5, "bottom");
49+
50+
margin-top: 0;
51+
}
52+
53+
.nhsuk-panel__title:last-child {
54+
margin-bottom: 0;
55+
}

‎app/assets/sass/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
@import 'components/list-border';
66
@import 'components/related-nav';
77
@import 'components/indent-list';
8+
@import 'components/panel';
89

910
// Import GOVUK-frontend
1011
//

‎app/routes.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const express = require('express');
33

44
const router = express.Router();
55

6+
require('./routes/vaccinate')(router)
67
require('./routes/regions')(router)
78
require('./routes/user-admin')(router)
89
require('./routes/user-onboarding')(router)
@@ -14,4 +15,5 @@ require('./routes/support')(router)
1415
require('./routes/auth')(router)
1516
require('./routes/home')(router)
1617

18+
1719
module.exports = router;

‎app/routes/vaccinate.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
module.exports = router => {
2+
3+
router.post('/vaccinate/answer-patient-nhs-number-known', (req, res) => {
4+
5+
const nhsNumberKnown = req.session.data.nhsNumberKnown;
6+
7+
if (nhsNumberKnown === "yes") {
8+
9+
req.session.data.patientName = "Jodie Brown"
10+
req.session.data.dateOfBirth = {day: "4", month: "7", year: "1964"}
11+
req.session.data.postcode = "GD3 I83"
12+
13+
res.redirect('/vaccinate/patient-history')
14+
} else if (nhsNumberKnown === "no") {
15+
res.redirect('/vaccinate/patient-search')
16+
} else {
17+
res.redirect('/vaccinate/patient?showError=yes')
18+
}
19+
20+
})
21+
22+
23+
router.post('/vaccinate/patient-search', (req, res) => {
24+
25+
const firstName = req.session.data.firstName;
26+
const lastName = req.session.data.lastName;
27+
const dateOfBirth = req.session.data.dateOfBirth;
28+
const postcode = req.session.data.postcode;
29+
let errors = []
30+
let firstNameError, lastNameError, dateOfBirthError, postcodeError
31+
32+
if (firstName === "") {
33+
firstNameError = "Enter first name"
34+
errors.push({
35+
text: firstNameError,
36+
href: "#firstName"
37+
})
38+
}
39+
40+
if (lastName === "") {
41+
lastNameError = "Enter last name"
42+
errors.push({
43+
text: lastNameError,
44+
href: "#lastName"
45+
})
46+
}
47+
48+
if (dateOfBirth.day === "" || dateOfBirth.month === "" || dateOfBirth.year === "") {
49+
dateOfBirthError = "Enter date of birth"
50+
errors.push({
51+
text: dateOfBirthError,
52+
href: "#dateOfBirth"
53+
})
54+
}
55+
56+
if (postcode === "") {
57+
postcodeError = "Enter postcode"
58+
errors.push({
59+
text: postcodeError,
60+
href: "#postcode"
61+
})
62+
}
63+
64+
if (errors.length === 0) {
65+
66+
if (Number(dateOfBirth.day) %2) {
67+
res.redirect('/vaccinate/no-search-result')
68+
} else {
69+
res.redirect('/vaccinate/search-result')
70+
}
71+
} else {
72+
res.render('vaccinate/patient-search', {
73+
errors,
74+
firstNameError,
75+
lastNameError,
76+
dateOfBirthError,
77+
postcodeError
78+
})
79+
}
80+
81+
})
82+
83+
// Routing page after DONE
84+
router.post('/vaccinate/what-next', (req, res) => {
85+
86+
const answer = req.session.data.nextStep;
87+
88+
req.session.data.injectionSite = ""
89+
90+
if (answer === 'same-vaccination-another-patient') {
91+
92+
req.session.data.patientName = ""
93+
req.session.data.nhsNumber = ""
94+
95+
res.redirect('/vaccinate/patient?repeatVaccination=yes&repeatPatient=no')
96+
97+
} else if (answer === 'same-patient-another-vaccination') {
98+
99+
req.session.data.vaccine = ""
100+
req.session.data.vaccineProduct = ""
101+
req.session.data.vaccineBatch = ""
102+
103+
res.redirect('/vaccinate/vaccine?repeatPatient=yes&repeatVaccination=no')
104+
105+
} else {
106+
107+
res.redirect('/home')
108+
}
109+
110+
})
111+
112+
}

‎app/views/includes/header-logged-in-organisation.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@
1313
classes: ("app-header__navigation-item--current" if currentSection == "home")
1414
},
1515
{
16-
url : "/find-a-patient",
17-
label : "Find a patient",
18-
classes: ("app-header__navigation-item--current" if currentSection == "find-a-patient")
16+
url : "/vaccinate",
17+
label : "Record vaccinations",
18+
classes: ("app-header__navigation-item--current" if currentSection == "vaccinate")
1919
},
2020
{
2121
url: "/vaccines",

‎app/views/vaccinate/batch.html‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
{% extends 'layout.html' %}
2+
3+
{% block pageTitle %}
4+
Vaccines
5+
{% endblock %}
6+
7+
{% set currentSection = "vaccinate" %}
8+
9+
{% block beforeContent %}
10+
{{ backLink({ href: "/vaccinate/vaccine" }) }}
11+
{% endblock %}
12+
13+
{% block content %}
14+
<div class="nhsuk-grid-row">
15+
<div class="nhsuk-grid-column-two-thirds">
16+
17+
{% if data.vaccine == "Pertussis" %}
18+
{% set nextPage = "/vaccinate/patient" %}
19+
{% else %}
20+
{% set nextPage = "/vaccinate/eligibility" %}
21+
{% endif %}
22+
23+
<form action="{{ nextPage }}" method="post" novalidate>
24+
25+
{{ radios({
26+
"idPrefix": "vaccineBatch",
27+
"name": "vaccineBatch",
28+
"fieldset": {
29+
"legend": {
30+
"text": ("Which batch are you using?" if data.vaccinationToday == 'yes' else "Which batch was it?"),
31+
"classes": "nhsuk-fieldset__legend--l",
32+
"isPageHeading": true
33+
}
34+
},
35+
"items": [
36+
{
37+
"value": "AB2345",
38+
"text": "AB2345",
39+
hint: {
40+
text: "Expires 14 December 2024"
41+
},
42+
checked: (data.vaccineBatch == "AB2345")
43+
},
44+
{
45+
"value": "DE8342",
46+
"text": "DE8342",
47+
hint: {
48+
text: "Expires 19 December 2024"
49+
},
50+
checked: (data.vaccineBatch == "DE8342")
51+
},
52+
{
53+
"value": "LF842",
54+
"text": "LF842",
55+
hint: {
56+
text: "Expires 28 December 2024"
57+
},
58+
checked: (data.vaccineBatch == "LF842")
59+
},
60+
{
61+
"value": "JD8352",
62+
"text": "JD8352",
63+
hint: {
64+
text: "Expires 3 January 2025"
65+
},
66+
checked: (data.vaccineBatch == "JD8352")
67+
}
68+
]
69+
}) }}
70+
71+
{{ button({
72+
text: "Continue"
73+
})}}
74+
</form>
75+
76+
</div>
77+
</div>
78+
79+
{% endblock %}
80+

0 commit comments

Comments
 (0)