Skip to content

Commit cb5df84

Browse files
edwardhorsfordedwardhorsford
committed
Clean up styling on participant view
1 parent d9c4f0a commit cb5df84

File tree

4 files changed

+213
-126
lines changed

4 files changed

+213
-126
lines changed

‎app/lib/generators/event-generator.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,8 @@ const generateEvent = ({ slot, participant, clinic, outcomeWeights }) => {
7777

7878
// Adjust attendance probability for assessment clinics
7979
const attendanceWeights = clinic.clinicType === 'assessment' ?
80-
[0.9, 0.08, 0.02] : // [attended, dna, attended_not_screened]
81-
[0.65, 0.25, 0.1]; // Original weights for screening
80+
[0.9, 0.015, 0] : // [attended, dna, attended_not_screened]
81+
[0.70, 0.25, 0.05]; // Original weights for screening
8282

8383
// All future events and today's events start as scheduled
8484
if (!isPast) {

‎app/lib/utils/arrays.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,26 @@ const push = (array, item) => {
1919
return newArray
2020
}
2121

22+
/**
23+
* Remove empty items from arrays or strings
24+
* @param {Array|string} items - Items to filter
25+
* @returns {Array|string|undefined} Filtered items or undefined if empty
26+
*/
27+
const removeEmpty = (items) => {
28+
if (!items) return;
29+
30+
if (_.isString(items)) {
31+
return items.trim() || undefined;
32+
}
33+
34+
if (_.isArray(items)) {
35+
const filtered = items.filter(item => item && item !== "");
36+
return filtered.length ? filtered : undefined;
37+
}
38+
};
39+
2240
module.exports = {
2341
push,
42+
removeEmpty,
2443
findById
2544
};

‎app/lib/utils/dates.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const formatDate = (dateString, format = 'D MMMM YYYY') => {
3838
* @param {string} dateString - ISO date string
3939
* @param {string} format - Optional format string
4040
*/
41-
const formatTime = (dateString, format = 'HH:mm') => {
41+
const formatTime = (dateString, format = 'H:mm') => {
4242
if (!dateString) return '';
4343
return dayjs(dateString).format(format);
4444
};

‎app/views/participants/show.html‎

Lines changed: 191 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
{% set pageHeading = participant | getFullName %}
66

7+
{% set gridColumn = "nhsuk-grid-column-full" %}
8+
79

810

911
{% set back = {
@@ -22,135 +24,201 @@ <h1 class="nhsuk-heading-l">
2224
{{ pageHeading }}
2325
</h1>
2426

25-
<h2 class="nhsuk-heading-m">Current appointment</h2>
26-
27-
<dl class="nhsuk-summary-list">
28-
<div class="nhsuk-summary-list__row">
29-
<dt class="nhsuk-summary-list__key">Clinic type</dt>
30-
<dd class="nhsuk-summary-list__value">{{ clinic.clinicType | replace("_", " ") | capitalize }}</dd>
31-
</div>
32-
<div class="nhsuk-summary-list__row">
33-
<dt class="nhsuk-summary-list__key">Time</dt>
34-
<dd class="nhsuk-summary-list__value">
35-
{{ event.statusHistory[0].timestamp | formatTime }}
36-
</dd>
37-
</div>
38-
<div class="nhsuk-summary-list__row">
39-
<dt class="nhsuk-summary-list__key">Status</dt>
40-
<dd class="nhsuk-summary-list__value">
41-
{{ tag({
42-
text: event.status | formatWords | sentenceCase,
43-
classes: "nhsuk-tag--" + event.status | getStatusTagColour
44-
})}}
45-
</dd>
46-
</div>
47-
</dl>
48-
49-
<h2 class="nhsuk-heading-m">Personal details</h2>
50-
51-
<dl class="nhsuk-summary-list">
52-
<div class="nhsuk-summary-list__row">
53-
<dt class="nhsuk-summary-list__key">Full name</dt>
54-
<dd class="nhsuk-summary-list__value">
55-
{{ participant | getFullName }}
56-
</dd>
57-
</div>
58-
<div class="nhsuk-summary-list__row">
59-
<dt class="nhsuk-summary-list__key">Gender</dt>
60-
<dd class="nhsuk-summary-list__value">
61-
Female
62-
</dd>
63-
</div>
64-
<div class="nhsuk-summary-list__row">
65-
<dt class="nhsuk-summary-list__key">NHS number</dt>
66-
<dd class="nhsuk-summary-list__value">
67-
{{ participant.medicalInformation.nhsNumber | formatNhsNumber }}
68-
</dd>
69-
</div>
70-
<div class="nhsuk-summary-list__row">
71-
<dt class="nhsuk-summary-list__key">SX number</dt>
72-
<dd class="nhsuk-summary-list__value">{{ participant.sxNumber }}</dd>
73-
</div>
74-
<div class="nhsuk-summary-list__row">
75-
<dt class="nhsuk-summary-list__key">Date of birth</dt>
76-
<dd class="nhsuk-summary-list__value">
77-
{% set dob = participant.demographicInformation.dateOfBirth %}
78-
{% set age -%}
79-
({{dob | formatRelativeDate(true)}} old)
80-
{%- endset %}
81-
{{ dob | formatDate }}<br>
82-
{{ age | asHint}}
83-
</dd>
84-
</div>
85-
<div class="nhsuk-summary-list__row">
86-
<dt class="nhsuk-summary-list__key">Address</dt>
87-
<dd class="nhsuk-summary-list__value">
88-
{{ participant.demographicInformation.address.line1 }}<br>
89-
{% if participant.demographicInformation.address.line2 %}
90-
{{ participant.demographicInformation.address.line2 }}<br>
91-
{% endif %}
92-
{{ participant.demographicInformation.address.city }}<br>
93-
{{ participant.demographicInformation.address.postcode }}
94-
</dd>
95-
</div>
96-
<div class="nhsuk-summary-list__row">
97-
<dt class="nhsuk-summary-list__key">Phone</dt>
98-
<dd class="nhsuk-summary-list__value">
99-
{{ participant.demographicInformation.phone | formatPhoneNumber }}
100-
</dd>
101-
</div>
102-
<div class="nhsuk-summary-list__row">
103-
<dt class="nhsuk-summary-list__key">Email</dt>
104-
<dd class="nhsuk-summary-list__value">
105-
{{ participant.demographicInformation.email }}
106-
</dd>
107-
</div>
108-
</dl>
109-
110-
{% if participant.medicalInformation.riskFactors | length or participant.currentHealthInformation.medications | length %}
111-
<h2 class="nhsuk-heading-m">Medical information</h2>
112-
{% endif %}
27+
<h2 class="nhsuk-heading-m">Appointment</h2>
11328

29+
{% set statusHtml %}
30+
{{ tag({
31+
text: event.status | formatWords | sentenceCase,
32+
classes: "nhsuk-tag--" + event.status | getStatusTagColour
33+
}) }}
34+
{% if event.status === 'scheduled' %}
35+
{% set href -%}
36+
/clinics/{{ clinicId }}/check-in/{{ event.id }}?returnTo=/clinics/{{ clinicId }}/participants/{{ participantId }}
37+
{%- endset %}
38+
<p class="nhsuk-u-margin-top-2"><a href="{{href | trim}}">Check in participant</a></p>
11439

115-
<dl class="nhsuk-summary-list">
116-
{% if participant.medicalInformation.riskFactors.length > 0 %}
117-
<div class="nhsuk-summary-list__row">
118-
<dt class="nhsuk-summary-list__key">Risk factors</dt>
119-
<dd class="nhsuk-summary-list__value">
120-
<ul class="nhsuk-list nhsuk-list--bullet">
121-
{% for factor in participant.medicalInformation.riskFactors %}
122-
<li>{{ factor | replace("_", " ") | capitalize }}</li>
123-
{% endfor %}
124-
</ul>
125-
</dd>
126-
</div>
127-
{% endif %}
128-
129-
{% if participant.currentHealthInformation.medications.length > 0 %}
130-
<div class="nhsuk-summary-list__row">
131-
<dt class="nhsuk-summary-list__key">Current medications</dt>
132-
<dd class="nhsuk-summary-list__value">
133-
<ul class="nhsuk-list nhsuk-list--bullet">
134-
{% for medication in participant.currentHealthInformation.medications %}
135-
<li>{{ medication | replace("_", " ") | capitalize }}</li>
136-
{% endfor %}
137-
</ul>
138-
</dd>
139-
</div>
14040
{% endif %}
141-
</dl>
41+
{% endset %}
42+
43+
{% set appointmentHtml %}
44+
{{ summaryList({
45+
rows: [
46+
{
47+
key: {
48+
text: "Clinic type"
49+
},
50+
value: {
51+
text: clinic.clinicType | formatWords | sentenceCase
52+
}
53+
},
54+
{
55+
key: {
56+
text: "Appointment time"
57+
},
58+
value: {
59+
text: event.statusHistory[0].timestamp | formatTime
60+
}
61+
},
62+
{
63+
key: {
64+
text: "Status"
65+
},
66+
value: {
67+
html: statusHtml
68+
}
69+
}
70+
]
71+
}) }}
72+
{% endset %}
73+
74+
{{ card({
75+
heading: "Appointment",
76+
headingLevel: "2",
77+
descriptionHtml: appointmentHtml
78+
}) }}
79+
80+
{% set personalDetailsHtml %}
81+
{% set dob %}
82+
{{ participant.demographicInformation.dateOfBirth | formatDate }}<br>
83+
<span class="nhsuk-hint">({{ participant.demographicInformation.dateOfBirth | formatRelativeDate(true) }} old)</span>
84+
{% endset %}
85+
86+
{% set address %}
87+
{{ participant.demographicInformation.address.line1 }}<br>
88+
{% if participant.demographicInformation.address.line2 %}
89+
{{ participant.demographicInformation.address.line2 }}<br>
90+
{% endif %}
91+
{{ participant.demographicInformation.address.city }}<br>
92+
{{ participant.demographicInformation.address.postcode }}
93+
{% endset %}
94+
95+
{{ summaryList({
96+
rows: [
97+
{
98+
key: {
99+
text: "Full name"
100+
},
101+
value: {
102+
text: participant | getFullName
103+
}
104+
},
105+
{
106+
key: {
107+
text: "Gender"
108+
},
109+
value: {
110+
text: "Female"
111+
}
112+
},
113+
{
114+
key: {
115+
text: "NHS number"
116+
},
117+
value: {
118+
text: participant.medicalInformation.nhsNumber | formatNhsNumber
119+
}
120+
},
121+
{
122+
key: {
123+
text: "SX number"
124+
},
125+
value: {
126+
text: participant.sxNumber
127+
}
128+
},
129+
{
130+
key: {
131+
text: "Date of birth"
132+
},
133+
value: {
134+
html: dob
135+
}
136+
},
137+
{
138+
key: {
139+
text: "Address"
140+
},
141+
value: {
142+
html: address
143+
}
144+
},
145+
{
146+
key: {
147+
text: "Phone"
148+
},
149+
value: {
150+
text: participant.demographicInformation.phone | formatPhoneNumber
151+
}
152+
},
153+
{
154+
key: {
155+
text: "Email"
156+
},
157+
value: {
158+
text: participant.demographicInformation.email
159+
}
160+
}
161+
]
162+
}) }}
163+
{% endset %}
164+
142165

143-
{% if event.status === 'scheduled' %}
144-
{% set href %}
145-
/clinics/{{ clinicId }}/check-in/{{ event.id }}?returnTo=/clinics/{{ clinicId }}/participants/{{ participantId }}
166+
167+
{{ card({
168+
heading: "Personal details",
169+
headingLevel: "2",
170+
descriptionHtml: personalDetailsHtml
171+
}) }}
172+
173+
{% set medicalInformationHtml %}
174+
{% set riskFactorsList %}
175+
<ul class="nhsuk-list nhsuk-list--bullet">
176+
{% for factor in participant.medicalInformation.riskFactors %}
177+
<li>{{ factor | formatWords | sentenceCase }}</li>
178+
{% endfor %}
179+
</ul>
180+
{% endset %}
181+
182+
{% set medicationsList %}
183+
<ul class="nhsuk-list nhsuk-list--bullet">
184+
{% for medication in participant.currentHealthInformation.medications %}
185+
<li>{{ medication | formatWords | sentenceCase }}</li>
186+
{% endfor %}
187+
</ul>
188+
{% endset %}
189+
190+
{{ summaryList({
191+
rows: [
192+
{
193+
key: {
194+
text: "Risk factors"
195+
},
196+
value: {
197+
html: riskFactorsList
198+
}
199+
} if participant.medicalInformation.riskFactors.length > 0,
200+
{
201+
key: {
202+
text: "Current medications"
203+
},
204+
value: {
205+
html: medicationsList
206+
}
207+
} if participant.currentHealthInformation.medications.length > 0
208+
] | removeEmpty
209+
}) }}
146210
{% endset %}
147-
{{ button({
148-
text: "Check in participant",
149-
href: href | trim
211+
212+
213+
214+
215+
216+
{% if participant.medicalInformation.riskFactors | length or participant.currentHealthInformation.medications | length %}
217+
{{ card({
218+
heading: "Medical information",
219+
headingLevel: "2",
220+
descriptionHtml: medicalInformationHtml
150221
}) }}
151-
{# <a href="/clinics/{{ clinicId }}/check-in/{{ event.id }}" class="nhsuk-button">
152-
Check in participant
153-
</a> #}
154222
{% endif %}
155223

156224
{% endblock %}

0 commit comments

Comments
 (0)