loading state disable pt level report

Signed-off-by: anchit-chandran <[email protected]>

project/npda/templates/dashboard/components/cards/imd_map_card.html

@@ -7,15 +7,15 @@
        hx-trigger="load"
        hx-swap="innerHTML"
        hx-target="#organisation_cases_map"
-       hx-indicator="#loading-spinner"
-       _="on htmx:afterSwap remove #loading-spinner">
+       hx-indicator="#loading-spinner-imd-map"
+       _="on htmx:afterSwap remove #loading-spinner-imd-map">
     <figure>
       <div id="organisation_cases_map" style="width: 100%">
         {% include 'dashboard/map_chart_partial.html' with chart_html=chart_html %}
       </div>
     </figure>
   </div>
-  <div id="loading-spinner"
+  <div id="loading-spinner-imd-map"
        class="loading loading-spinner text-rcpch_dark_blue flex flex-grow-1 justify-center items-center w-1/5 mx-auto bg-center">
   </div>
 {% endblock %}

project/npda/templates/dashboard/pt_level_menu_tab_button.html

@@ -1,6 +1,9 @@
 <button class="{% if selected %} bg-rcpch_pink text-white {% else %} bg-rcpch_lightest_grey {% endif %}  p-5"
         hx-get="/get_patient_level_report_partial"
         hx-vals='{"selected": "{{ key }}"}'
-        hx-target="#pt_level_report">
+        hx-target="#pt_level_report"
+        hx-swap="outerHTML"
+        {% if selected %}disabled{% endif %}
+        _="on click toggle @disabled on #pt_level_report until htmx:afterOnLoad">
         {{ button_text }}
 </button>

project/npda/templates/dashboard/pt_level_report_table_partial.html

@@ -37,9 +37,9 @@
     </div>
   </div>
 
-  <div class="flex overflow-y-auto h-[60vh] w-full">
-    <table class="table-auto table-fixed w-full text-xs  text-center text-gray-500 mb-5 font-montserrat overflow-x-auto">
-      <thead class=" text-gray-700 uppercase bg-rcpch_dark_blue text-white sticky top-0 z-10">
+  <div class="flex overflow-y-auto h-[60vh] w-full" id="pt_level_report_table">
+    <table class="table-auto w-full text-xs  text-center text-gray-500 mb-5 font-montserrat overflow-x-auto">
+      <thead class="uppercase bg-rcpch_dark_blue text-white sticky top-0 z-10">
         <tr>
           {% comment %} TODO: ONCE ALL DATA ADDED, REMOVE THIS CHECK {% endcomment %}
           {% if text.headers %}
@@ -96,4 +96,21 @@
       </tbody>
     </table>
   </div>
+  <style>
+    {% comment %} Don't opacify the selected button {% endcomment %}
+    button[disabled] {
+      opacity: 1;
+    }
+
+    [disabled] {
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: progress;
+    }
+
+    {% comment %} Ensure all child elems in table styled the same {% endcomment %}
+    [disabled] * {
+      cursor: progress;
+    }
+  </style>
 </div>

project/npda/views/dashboard/partials.py

@@ -13,8 +13,8 @@
 )
 
 import json
-from datetime import date
-
+from datetime import date, time
+from time import sleep
 
 # Django imports
 from django.apps import apps