Add text for empty recent diagnoses panel

ImageMarkup · Nov 22, 2024 · 2e2ac63 · 2e2ac63
1 parent 149488b
commit 2e2ac63
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/isic/core/templates/core/widgets/diagnosis_picker.html b/isic/core/templates/core/widgets/diagnosis_picker.html
@@ -5,7 +5,10 @@
 
     <script>
         function frequentDiagnoses() {
-            const mostFrequentDiagnoses = JSON.parse(document.getElementById('most-frequent-diagnoses').textContent);
+            let mostFrequentDiagnoses = [];
+            if (document.getElementById('most-frequent-diagnoses')) {
+                mostFrequentDiagnoses = JSON.parse(document.getElementById('most-frequent-diagnoses').textContent);
+            }
 
             return {
                 selectedDiagnosis: null,
@@ -34,6 +37,11 @@
 
     <div class="quick-select" x-data="frequentDiagnoses()">
         <h3>Recent Diagnoses</h3>
+
+        <template x-if="mostFrequentDiagnoses.length === 0">
+            <div class="text-sm text-gray-500 text-center">Start annotating to see your recent diagnoses here</div>
+        </template>
+
         <div class="quick-select-list" id="quick-select-list">
             <template x-for="diagnosis in mostFrequentDiagnoses" :key="diagnosis.id">
                 <div class="quick-select-item"