Skip to content

Commit d94ca00

Browse files
edwardhorsfordedwardhorsford
authored
Improve stuff around check-in (#146)
* Improve stuff around check-in * Remove address from clinic list * Focus row rather than using styles
1 parent 4b26b60 commit d94ca00

File tree

7 files changed

+107
-77
lines changed

7 files changed

+107
-77
lines changed

‎app/assets/javascript/main.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,19 @@ document.addEventListener('DOMContentLoaded', () => {
4040
}
4141
}
4242

43+
// Show the start appointment link by removing the hidden class
44+
const eventRow = document.getElementById(`event-row-${eventId}`)
45+
if (eventRow) {
46+
const startAppointmentLink = eventRow.querySelector('.js-start-appointment-link')
47+
if (startAppointmentLink) {
48+
startAppointmentLink.classList.remove('app-display-none')
49+
}
50+
51+
// Set focus on the row for accessibility
52+
eventRow.setAttribute('tabindex', '-1')
53+
eventRow.focus()
54+
}
55+
4356
// Remove the check-in link
4457
// Check if this is a modal button or a direct link
4558
const isModalButton = link.closest('.app-modal')

‎app/assets/sass/_misc.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@use 'nhsuk-frontend/dist/nhsuk/core/settings' as *;
2+
@use 'nhsuk-frontend/dist/nhsuk/core/styles/typography' as *;
23
@use 'nhsuk-frontend/dist/nhsuk/core/tools' as *;
34

45
.app-mammogram-image--placeholder {
@@ -62,4 +63,13 @@
6263

6364
.app-page-width--wide .nhsuk-width-container {
6465
max-width: 1200px;
66+
}
67+
68+
69+
.event-row:focus {
70+
outline: none;
71+
box-shadow:
72+
0 0 0 2px #f0f4f5,
73+
0 0 0 calc(2px + $nhsuk-focus-width) $nhsuk-focus-text-color,
74+
0 0 0 calc(2px + $nhsuk-focus-width + 4px) $nhsuk-focus-color;
6575
}

‎app/assets/sass/_utils.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use 'nhsuk-frontend/dist/nhsuk/core/settings' as *;
2+
@use 'nhsuk-frontend/dist/nhsuk/core/tools' as *;
3+
14
.app-nowrap {
25
white-space: nowrap;
36
}
@@ -12,3 +15,7 @@
1215
opacity: 1;
1316
transition: opacity 0.5s ease-in;
1417
}
18+
19+
.app-display-none {
20+
display: none;
21+
}

‎app/views/_components/check-in/template.njk‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,9 @@
1616

1717
{% if confirmIdentityEnabled %}
1818
{% set modalId = "check-in-modal-" + params.event.id %}
19-
{% set statusTagId = params.statusTagId %}
20-
{% set appointmentUrl = "/clinics/" + params.clinicId + "/events/" + params.event.id %}
19+
{% set statusTagId = params.statusTagId %}
20+
{% set appointmentUrl = "/clinics/" + params.clinicId + "/events/" + params.event.id %}
21+
{% set currentUser = params.currentUser %}
2122
{% include "_includes/confirm-identity-modal.njk" %}
2223
{% endif %}
2324

‎app/views/_components/modal/template.njk‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -27,37 +27,40 @@
2727
{% if params.actions %}
2828
<div class="app-modal__actions nhsuk-button-group">
2929
{% for action in params.actions %}
30-
{% if action.element == "link" %}
31-
<p>
32-
<a href="{{ action.href or '#' }}"
33-
class="nhsuk-link {{ action.classes }}"
34-
data-modal-action="{{ action.action or 'close' }}"
35-
{% if action.method %}data-method="{{ action.method }}"{% endif %}>
36-
{{ action.text }}
37-
</a>
38-
</p>
39-
{% else %}
40-
{% set buttonClasses = "" %}
41-
{% if action.classes %}
42-
{% set buttonClasses = action.classes %}
43-
{% endif %}
30+
{% if action %}
31+
{% if action.element == "link" %}
32+
<p>
33+
<a href="{{ action.href or '#' }}"
34+
class="nhsuk-link {{ action.classes }}"
35+
data-modal-action="{{ action.action or 'close' }}"
36+
{% if action.method %}data-method="{{ action.method }}"{% endif %}>
37+
{{ action.text }}
38+
</a>
39+
</p>
40+
{% else %}
41+
{% set buttonClasses = "" %}
42+
{% if action.classes %}
43+
{% set buttonClasses = action.classes %}
44+
{% endif %}
4445

45-
{{ button({
46-
text: action.text,
47-
classes: buttonClasses + ((" " + action.classes) if action.classes else ""),
48-
attributes: {
49-
'data-modal-action': action.action or 'close',
50-
'data-href': action.href,
51-
'data-method': action.method,
52-
'data-close-on-success': action.closeOnSuccess,
53-
'data-clinic-id': action.attributes['data-clinic-id'] if action.attributes,
54-
'data-event-id': action.attributes['data-event-id'] if action.attributes,
55-
'data-status-tag-id': action.attributes['data-status-tag-id'] if action.attributes,
56-
'data-show-appointment-link': action.attributes['data-show-appointment-link'] if action.attributes,
57-
'type': 'button'
58-
}
59-
}) }}
46+
{{ button({
47+
text: action.text,
48+
classes: buttonClasses + ((" " + action.classes) if action.classes else ""),
49+
attributes: {
50+
'data-modal-action': action.action or 'close',
51+
'data-href': action.href,
52+
'data-method': action.method,
53+
'data-close-on-success': action.closeOnSuccess,
54+
'data-clinic-id': action.attributes['data-clinic-id'] if action.attributes,
55+
'data-event-id': action.attributes['data-event-id'] if action.attributes,
56+
'data-status-tag-id': action.attributes['data-status-tag-id'] if action.attributes,
57+
'data-show-appointment-link': action.attributes['data-show-appointment-link'] if action.attributes,
58+
'type': 'button'
59+
}
60+
}) }}
61+
{% endif %}
6062
{% endif %}
63+
6164
{% endfor %}
6265
</div>
6366
{% endif %}

‎app/views/_includes/confirm-identity-modal.njk‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,22 +30,27 @@
3030
descriptionHtml: cardHtml
3131
}) }}
3232

33-
{% if participantUrl %}
33+
{# {% if participantUrl %}
3434
<p>
3535
<a href="{{ participantUrl }}"
3636
class="nhsuk-link nhsuk-link--no-visited-state">
3737
View their participant record
3838
</a>
3939
</p>
40-
{% endif %}
40+
{% endif %} #}
4141

4242
{% if appointmentUrl %}
43-
<p>
44-
<a href="{{ appointmentUrl }}"
45-
class="nhsuk-link nhsuk-link--no-visited-state">
46-
View their appointment
47-
</a>
48-
</p>
43+
<div class="nhsuk-button-group">
44+
<a href="{{ appointmentUrl }}"
45+
class="nhsuk-link nhsuk-link--no-visited-state">
46+
View their appointment
47+
</a>
48+
<a href="{{ appointmentUrl }}/participant"
49+
class="nhsuk-link nhsuk-link--no-visited-state">
50+
View participant details
51+
</a>
52+
</div>
53+
4954
{% endif %}
5055

5156
{% endset %}
@@ -82,6 +87,14 @@
8287
href: checkInHref,
8388
attributes: buttonAttributes
8489
},
90+
{
91+
text: "Confirm identity and start appointment",
92+
element: "button",
93+
classes: "js-check-in-link nhsuk-button--secondary",
94+
action: "custom",
95+
href: checkInHref,
96+
attributes: buttonAttributes
97+
} if currentUser | isClinician and false,
8598
{
8699
text: "Identity in doubt",
87100
element: "button",

‎app/views/clinics/show.html‎

Lines changed: 21 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ <h1 class="nhsuk-heading-l">
3838

3939
</div>
4040

41-
{{ currentUser | log("Currenet user")}}
41+
{{ currentUser | log("Current user")}}
4242
{{ currentUser | isClinician | log("is clinician")}}
4343

4444
{# Clinic time and date #}
@@ -106,7 +106,7 @@ <h1 class="nhsuk-heading-l">
106106
{% set eventBaseUrl = "/clinics/" + clinicId + "/events/" + event.id %}
107107
{% set statusTagId = "status-tag-" + event.id %}
108108

109-
<tr id="event-row-{{event.id}}">
109+
<tr class="event-row" id="event-row-{{event.id}}">
110110

111111
{# Appointment time #}
112112
<td class="nhsuk-table__cell">{{ event.statusHistory[0].timestamp | formatTimeString }}
@@ -229,12 +229,28 @@ <h1 class="nhsuk-heading-l">
229229
event: event,
230230
participant: participant,
231231
confirmIdentityOnCheckIn: true if data.settings.screening.confirmIdentityOnCheckIn == 'true' else false,
232-
statusTagId: statusTagId
232+
statusTagId: statusTagId,
233+
currentUser: currentUser
233234
}) }}
234235

235236
{% endif %}
236237

237-
{% if not (event | isFinal) and (currentUser | isClinician) %}
238+
{% if currentUser | isClinician %}
239+
{% if event | hasNotStarted %}
240+
{# Start appointment link gets rendered hidden if the appointment is not checked in - js can later remove this class to make the link visible #}
241+
<a href="{{ eventBaseUrl }}/start?event[workflowStatus][appointment]=started" class="app-nowrap {{ 'app-display-none' if event.status == 'event_scheduled' }} js-start-appointment-link">
242+
Start appointment
243+
</a>
244+
245+
{% elseif event | startedByCurrentUser %}
246+
<a href="{{ eventBaseUrl }}/identity">
247+
Resume appointment {{- ((" for " + (participant | getShortName)) | asVisuallyHiddenText) | safe }}
248+
</a>
249+
{% endif %}
250+
251+
{% endif %}
252+
253+
{# {% if not (event | isFinal) and (currentUser | isClinician) %}
238254
<p class="nhsuk-u-margin-bottom-0">
239255
{% if event | hasNotStarted %}
240256
<a href="{{ eventBaseUrl }}/start?event[workflowStatus][appointment]=started" class="app-nowrap">
@@ -246,7 +262,7 @@ <h1 class="nhsuk-heading-l">
246262
</a>
247263
{% endif %}
248264
</p>
249-
{% endif %}
265+
{% endif %} #}
250266

251267
</td>
252268
</tr>
@@ -255,38 +271,5 @@ <h1 class="nhsuk-heading-l">
255271
</table>
256272
{% endif %}
257273

258-
<h2 class="nhsuk-heading-m">Details</h2>
259-
260-
<dl class="nhsuk-summary-list">
261-
<div class="nhsuk-summary-list__row">
262-
<dt class="nhsuk-summary-list__key">Location</dt>
263-
<dd class="nhsuk-summary-list__value">
264-
{{ unit.name }}<br>
265-
{% for item, line in unit.address %}
266-
{{ line }}{% if not loop.last %}<br>{% endif %}
267-
{% endfor %}
268-
</dd>
269-
</div>
270-
271-
<div class="nhsuk-summary-list__row">
272-
<dt class="nhsuk-summary-list__key">Phone</dt>
273-
<dd class="nhsuk-summary-list__value">{{ unit.phoneNumber }}</dd>
274-
</div>
275-
276-
<div class="nhsuk-summary-list__row">
277-
<dt class="nhsuk-summary-list__key">Date</dt>
278-
<dd class="nhsuk-summary-list__value">{{ clinic.date | formatDate }}</dd>
279-
</div>
280-
281-
<div class="nhsuk-summary-list__row">
282-
<dt class="nhsuk-summary-list__key">Location</dt>
283-
<dd class="nhsuk-summary-list__value">{{ clinic.locationType | formatWords | sentenceCase }}</dd>
284-
</div>
285-
286-
<div class="nhsuk-summary-list__row">
287-
<dt class="nhsuk-summary-list__key">Type</dt>
288-
<dd class="nhsuk-summary-list__value">{{ clinic.clinicType | sentenceCase }}</dd>
289-
</div>
290-
</dl>
291274

292275
{% endblock %}

0 commit comments

Comments
 (0)