Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add tooltip to patient list #436

Merged
merged 3 commits into from
Dec 14, 2024
Merged

add tooltip to patient list #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1432057
add tooltip to patient list
eatyourpeas Dec 14, 2024
322c19b
add deprivation decile to patient table with filter
eatyourpeas Dec 14, 2024
54d89b0
change fontawesome filter icons to numbers
eatyourpeas Dec 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion project/npda/general_functions/quarter_for_date.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

def retrieve_quarter_for_date(date_instance: date) -> int:
"""
Returns the quarter number of the patient for a given submission date (today)
Returns which quarter the date instance lies in

A quarter simply is defined as the quarter of the audit year the submission date lies in

Expand All @@ -13,6 +13,13 @@ def retrieve_quarter_for_date(date_instance: date) -> int:
quarter 3: 1st October - 31st December
quarter 4: 1st January - 31st March
"""
if date_instance is None:
return None
if not isinstance(date_instance, date):
raise ValueError("date_instance must be of type date")
if date_instance > date.today():
return None

# Audit start date is on the 1st April every year
audit_start_date = date(date_instance.year, 4, 1)
if date_instance < audit_start_date:
Expand Down
73 changes: 64 additions & 9 deletions project/npda/templates/partials/patient_table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
hx-target="#patient_table"
hx-swap="innerHTML swap:100ms"
class="swap-on">
<i class="fa-arrow-up-z-a fa-solid mr-2"> </i>
<i class="fa-arrow-up-9-1 fa-solid mr-2"> </i>
</button>
<button hx-preserve
hx-get="{{ desc_url }}?sort_by=pk&page={{ current_page }}&sort=desc"
Expand All @@ -80,7 +80,7 @@
hx-target="#patient_table"
hx-swap="innerHTML swap:100ms"
class="swap-off">
<i class="fa-arrow-down-a-z fa-solid mr-2"></i>
<i class="fa-arrow-down-1-9 fa-solid mr-2"></i>
</button>
</div>
NPDA Patient ID
Expand All @@ -96,7 +96,7 @@
hx-target="#patient_table"
hx-swap="innerHTML swap:100ms"
class="swap-on">
<i class="fa-arrow-up-z-a fa-solid mr-2"> </i>
<i class="fa-arrow-up-9-1 fa-solid mr-2"> </i>
</button>
<button hx-preserve
hx-get="{{ desc_url }}?sort_by=nhs_number&page={{ current_page }}&sort=desc"
Expand All @@ -105,7 +105,7 @@
hx-target="#patient_table"
hx-swap="innerHTML swap:100ms"
class="swap-off">
<i class="fa-arrow-down-a-z fa-solid mr-2"></i>
<i class="fa-arrow-down-1-9 fa-solid mr-2"></i>
</button>
</div>
NHS Number
Expand All @@ -114,12 +114,41 @@
<th scope="col" class="px-2 py-3 text-center">Sex</th>
<th scope="col" class="px-2 py-3 text-center">Date of Birth</th>
<th scope="col" class="px-2 py-3 text-center">Postcode</th>
<th scope="col" class="nhs-number-column px-2 py-3 text-center">
<span class="flex flex-row">
<div id="deprivation_sort_label" hx-preserve class="swap swap-rotate">
<button hx-preserve
hx-get="{{ asc_url }}?sort_by=index_of_multiple_deprivation_quintile&page={{ current_page }}&sort=asc"
hx-on:htmx:after-request="document.getElementById('deprivation_sort_label').classList.toggle('swap-active');"
hx-trigger="click throttle:1s"
hx-target="#patient_table"
hx-swap="innerHTML swap:100ms"
class="swap-on">
<i class="fa-arrow-up-9-1 fa-solid mr-2"> </i>
</button>
<button hx-preserve
hx-get="{{ desc_url }}?sort_by=index_of_multiple_deprivation_quintile&page={{ current_page }}&sort=desc"
hx-on:htmx:after-request="document.getElementById('deprivation_sort_label').classList.toggle('swap-active');"
hx-trigger="click throttle:1s"
hx-target="#patient_table"
hx-swap="innerHTML swap:100ms"
class="swap-off">
<i class="fa-arrow-down-1-9 fa-solid mr-2"></i>
</button>
</div>
Deprivation Decile
</span>
</th>
<th scope="col" class="px-2 py-3 text-center">Ethnicity</th>
<th scope="col" class="px-2 py-3 text-center">Diabetes Type</th>
<th scope="col" class="px-2 py-3 text-center">Diagnosis Date</th>
<th scope="col" class="px-2 py-3 text-center">Date Uploaded</th>
<th scope="col" class="px-2 py-3 text-center">Audit Year</th>
<th scope="col" class="px-2 py-3 text-center">Latest Quarter</th>
<th scope="col"
class="px-2 py-3 text-center tooltip tooltip-bottom"
data-tip="The most recent quarter for which data has been uploaded.">
Latest Quarter <i class="fa-question-circle fas"></i>
</th>
<th scope="col"></th>
</tr>
</thead>
Expand All @@ -128,7 +157,7 @@
{% if patient.is_valid and patient.visit_error_count < 1 and forloop.counter0 == 0 %}
<thead class="bg-rcpch_strong_blue text-xs text-white text-gray-700 uppercase bg-gray-50">
<tr>
<th colspan="12" class="px-6 py-3">
<th colspan="13" class="px-6 py-3">
Patients where all records have been validated: {{ total_valid_patients }}
</th>
</tr>
Expand All @@ -137,7 +166,7 @@
{% if forloop.counter == index_of_first_invalid_patient %}
<thead class="bg-rcpch_strong_blue text-xs text-white text-gray-700 uppercase bg-gray-50">
<tr>
<th colspan="12" class="px-6 py-3">
<th colspan="13" class="px-6 py-3">
Patients with records failing validation: {{ total_invalid_patients }}
</th>
</tr>
Expand Down Expand Up @@ -287,6 +316,32 @@
{% endif %}
{{ patient.postcode }}
</td>
<td class="px-6 py-4 text-center {% if patient.errors|error_for_field:'postcode' %}text-rcpch_red{% endif %}">
{% if patient.errors|error_for_field:"index_of_multiple_deprivation_quintile" %}
<div class="tooltip tooltip-top"
data-tip="{{ patient.errors|error_for_field:'index_of_multiple_deprivation_quintile' }}">
<svg height="16"
style="overflow:visible;
enable-background:new 0 0 32 32"
viewBox="0 0 32 32"
width="16"
xml:space="preserve"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g>
<g id="Error_1_">
<g id="Error">
<circle cx="16" cy="16" id="BG" r="16" style="fill:#D72828;" />
<path d="M14.5,25h3v-3h-3V25z M14.5,6v13h3V6H14.5z" id="Exclamatory_x5F_Sign" style="fill:#E6E6E6;" />
</g>
</g>
</g>
</svg>
</div>
&nbsp;
{% endif %}
{{ patient.index_of_multiple_deprivation_quintile }}
</td>
<td class="px-6 py-4 text-center {% if patient.errors|error_for_field:'ethnicity' %}text-rcpch_red{% endif %}">
{% if patient.errors|error_for_field:"ethnicity" %}
<div class="tooltip tooltip-top"
Expand Down Expand Up @@ -370,7 +425,7 @@
</td>
<td class="px-6 py-4 text-center">{{ patient.audit_year }}</td>
<td class="px-6 py-4 text-center">{{ patient.latest_quarter|default:'-' }}</td>
<td class="w-80 relative px-2 text-right group">
<td class="w-60 relative px-2 text-right group">
<a href="{% url 'patient_visits' patient.pk %}"
{% if patient.is_valid and patient.visit_error_count < 1 %} class="align-center text-rcpch_pink flex justify-end px-2 hover:text-white" {% else %} class="text-rcpch_red flex justify-end hover:text-white" {% endif %}>
{% if patient.visit_error_count > 0 %}
Expand Down Expand Up @@ -421,7 +476,7 @@
</tbody>
<tfoot>
<tr class="bg-rcpch_dark_blue py-5 text-xs text-white text-gray-700 uppercase bg-gray-50">
<th colspan="10" class="px-2">
<th colspan="11" class="px-2">
<strong>Total: {{ patient_list.count }} patients</strong>
</th>
<th colspan="2">
Expand Down
4 changes: 3 additions & 1 deletion project/npda/views/patient.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,9 @@ def get_context_data(self, **kwargs):
.count()
)
context["pz_code"] = self.request.session.get("pz_code")
context["selected_audit_year"] = self.request.session.get("selected_audit_year", "None")
context["selected_audit_year"] = self.request.session.get(
"selected_audit_year", "None"
)
context["total_valid_patients"] = total_valid_patients
context["total_invalid_patients"] = (
Patient.objects.filter(submissions__submission_active=True).count()
Expand Down
3 changes: 1 addition & 2 deletions static/css/styles.css
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 19 additions & 13 deletions static/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,23 @@
/* DaisyUI components */

@layer components {
.rcpch-light-blue-btn {
@apply bg-rcpch_light_blue text-white font-semibold hover:text-white py-2 px-3 border border-rcpch_light_blue hover:bg-rcpch_strong_blue hover:border-rcpch_strong_blue rounded-none;
}
.rcpch-btn {
@apply text-white font-semibold hover:text-white py-2.5 px-3 border border-rcpch_yellow_light_tint1 hover:bg-rcpch_yellow hover:border-rcpch_yellow rounded-none;
}
.rcpch-input-text {
@apply shadow appearance-none border border-rcpch_light_blue border-4 focus:border-rcpch_pink hover:border-rcpch_pink w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none rounded-none bg-white;
}
.rcpch-select {
@apply block appearance-none w-full bg-white border border-rcpch_light_blue border-4 focus:border-rcpch_pink hover:border-rcpch_pink hover:border-gray-500 px-4 py-2 pr-8 shadow leading-tight focus:outline-none rounded-none;
}
.rcpch-light-blue-btn {
@apply bg-rcpch_light_blue text-white font-semibold hover:text-white py-2 px-3 border border-rcpch_light_blue hover:bg-rcpch_strong_blue hover:border-rcpch_strong_blue rounded-none;
}

.rcpch-btn {
@apply text-white font-semibold hover:text-white py-2.5 px-3 border border-rcpch_yellow_light_tint1 hover:bg-rcpch_yellow hover:border-rcpch_yellow rounded-none;
}
.rcpch-input-text {
@apply shadow appearance-none border border-rcpch_light_blue border-4 focus:border-rcpch_pink hover:border-rcpch_pink w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none rounded-none bg-white;
}
.rcpch-select {
@apply block appearance-none w-full bg-white border border-rcpch_light_blue border-4 focus:border-rcpch_pink hover:border-rcpch_pink hover:border-gray-500 px-4 py-2 pr-8 shadow leading-tight focus:outline-none rounded-none;
}
.tooltip[data-tip]:before {
@apply italic text-white text-sm font-montserrat absolute z-50 text-base leading-6 p-2; /* Tailwind classes for tooltip text */
white-space: normal;
max-width: 200px;
text-transform: lowercase;
font-weight: 300;
}
}
29 changes: 13 additions & 16 deletions static/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,21 @@


* {
border-radius: 0 !important; /* completely remove rounded corners */
}

.dropdown:hover .dropdown-menu {
display: block;
background-color: white;
z-index: 1;
margin: 10 10 10 10;
padding: 10 10 10 10;
border-color: white;
border-width: 5px;
}
.dropdown:hover .dropdown-menu {
display: block;
background-color: white;
z-index: 1;
margin: 10 10 10 10;
padding: 10 10 10 10;
border-color: white;
border-width: 5px;
}

input[type="radio"]:checked {
background-color: #e00087 !important;
color: white !important;
border-color: #e00087 !important;
input[type="radio"]:checked {
background-color: #e00087 !important;
color: white !important;
border-color: #e00087 !important;
}

/* htmx animation */
Expand All @@ -31,7 +29,6 @@
display: inline;
}


.fade-out.htmx-swapping {
opacity: 0;
transition: opacity 500ms ease-out;
Expand Down
Loading