From 95793c78c925685cbdaade0c0db0ee38ff5bb38e Mon Sep 17 00:00:00 2001
From: Ross <xkjq@ymail.com>
Date: Mon, 27 Apr 2026 11:16:48 +0100
Subject: [PATCH] Refactor self-review functionality: replace inline actions
 with dedicated partials and enhance dynamic panel updates

---
 .../atlas/collection_case_view_take.html      |  84 +++++-------
 .../atlas/partials/_self_review_block.html    |  62 +++++++++
 .../partials/_selfreview_popup_success.html   | 121 +++++++++---------
 3 files changed, 155 insertions(+), 112 deletions(-)
 create mode 100644 atlas/templates/atlas/partials/_self_review_block.html

diff --git a/atlas/templates/atlas/collection_case_view_take.html b/atlas/templates/atlas/collection_case_view_take.html
index 15c7a0f4..9c6f9478 100644
--- a/atlas/templates/atlas/collection_case_view_take.html
+++ b/atlas/templates/atlas/collection_case_view_take.html
@@ -213,32 +213,8 @@
                 {% include "atlas/partials/collection_question_answer_block.html" %}
 
                 {% if collection.self_review %}
-                    <div>
-                        <div class="self-review-actions mb-3">
-                            <div class="btn-group btn-group-sm" role="group" aria-label="Self review actions">
-                                <a class="btn btn-primary" href="{% url 'atlas:add_self_review' cid_user_exam.id case.id %}">
-                                    <i class="bi bi-card-checklist"></i> Add Self Review
-                                </a>
-                                <button type="button"
-                                        class="btn btn-outline-info"
-                                        onclick="openSelfReviewPopup('{% url 'atlas:add_self_review' cid_user_exam.id case.id %}')">
-                                    Popup
-                                </button>
-                                <button type="button"
-                                        class="btn btn-outline-secondary"
-                                        onclick="openSelfReviewSidebar('{% url 'atlas:add_self_review' cid_user_exam.id case.id %}')">
-                                    Sidebar
-                                </button>
-                            </div>
-                        </div>
-                        {% if self_review %}
-                            <h4>Self Feedback</h4>
-
-                            {% for review in self_review %}
-                                {{review.get_display_block}}
-
-                            {% endfor %}
-                        {% endif %}
+                    <div id="self-review-panel-que">
+                        {% include 'atlas/partials/_self_review_block.html' with panel_key='que' %}
                     </div>
                 {% else %}
                     <h4>Answer score: {{answer.score}}</h4>
@@ -277,31 +253,9 @@
             {% if question_completed %}
                 <div>
                     {% if collection.self_review %}
-                        <div class="self-review-actions mb-3">
-                            <div class="btn-group btn-group-sm" role="group" aria-label="Self review actions">
-                                <a class="btn btn-primary" href="{% url 'atlas:add_self_review' cid_user_exam.id case.id %}">
-                                    <i class="bi bi-card-checklist"></i> Add Self Review
-                                </a>
-                                <button type="button"
-                                        class="btn btn-outline-info"
-                                        onclick="openSelfReviewPopup('{% url 'atlas:add_self_review' cid_user_exam.id case.id %}')">
-                                    Popup
-                                </button>
-                                <button type="button"
-                                        class="btn btn-outline-secondary"
-                                        onclick="openSelfReviewSidebar('{% url 'atlas:add_self_review' cid_user_exam.id case.id %}')">
-                                    Sidebar
-                                </button>
-                            </div>
+                        <div id="self-review-panel-rep">
+                            {% include 'atlas/partials/_self_review_block.html' with panel_key='rep' %}
                         </div>
-                        {% if self_review %}
-                            <h4>Self Feedback</h4>
-
-                            {% for review in self_review %}
-                                {{review.get_display_block}}
-
-                            {% endfor %}
-                        {% endif %}
                     {% else %}
                         <h4>Answer score: {{answer.score}}</h4>
                         Answer feedback: {{answer.feedback|safe}}
@@ -675,6 +629,34 @@
 
         window.selfReviewCurrentEmbedUrl = null;
 
+        window.refreshSelfReviewPanels = async function () {
+            try {
+                var resp = await fetch(window.location.href, { credentials: 'same-origin' });
+                var html = await resp.text();
+                var parser = new DOMParser();
+                var doc = parser.parseFromString(html, 'text/html');
+
+                var currentPanels = document.querySelectorAll('.js-self-review-panel[data-refresh-key]');
+                currentPanels.forEach(function (currentPanel) {
+                    var key = currentPanel.getAttribute('data-refresh-key');
+                    if (!key) return;
+                    var replacement = doc.querySelector('.js-self-review-panel[data-refresh-key="' + key + '"]');
+                    if (replacement) {
+                        currentPanel.outerHTML = replacement.outerHTML;
+                    }
+                });
+            } catch (e) {
+                console.warn('Unable to refresh self review panels', e);
+            }
+        };
+
+        window.addEventListener('message', function (event) {
+            if (!event || !event.data) return;
+            if (event.data.type === 'self_review_saved') {
+                window.refreshSelfReviewPanels();
+            }
+        });
+
         window.bindSelfReviewEmbedForm = function () {
             var root = document.getElementById('selfReviewSidebarBody');
             if (!root) return;
@@ -707,7 +689,7 @@
                         root.innerHTML = '<div class="p-3"><div class="alert alert-success mb-0">Self review saved. You can continue reviewing this case.</div></div>';
                         setTimeout(function () {
                             window.closeSelfReviewSidebar();
-                            window.location.reload();
+                            window.refreshSelfReviewPanels();
                         }, 500);
                         return;
                     }
diff --git a/atlas/templates/atlas/partials/_self_review_block.html b/atlas/templates/atlas/partials/_self_review_block.html
new file mode 100644
index 00000000..94e50b62
--- /dev/null
+++ b/atlas/templates/atlas/partials/_self_review_block.html
@@ -0,0 +1,62 @@
+<div class="self-review-actions mb-3 js-self-review-panel" data-refresh-key="{{ panel_key|default:'default' }}">
+    <div class="btn-group btn-group-sm mb-2" role="group" aria-label="Self review actions">
+        <a class="btn btn-primary" href="{% url 'atlas:add_self_review' cid_user_exam.id case.id %}">
+            <i class="bi bi-card-checklist"></i> Add Self Review
+        </a>
+        <button type="button"
+                class="btn btn-outline-info"
+                onclick="openSelfReviewPopup('{% url 'atlas:add_self_review' cid_user_exam.id case.id %}')">
+            Popup
+        </button>
+        <button type="button"
+                class="btn btn-outline-secondary"
+                onclick="openSelfReviewSidebar('{% url 'atlas:add_self_review' cid_user_exam.id case.id %}')">
+            Sidebar
+        </button>
+    </div>
+
+    {% if self_review %}
+        <h4>Self Feedback</h4>
+        <div class="list-group">
+            {% for review in self_review %}
+                <div class="list-group-item">
+                    <div class="d-flex justify-content-between align-items-start mb-2">
+                        <div class="small text-muted">
+                            Updated: {{ review.review_update_date|date:"Y-m-d H:i" }}
+                        </div>
+                        <div class="btn-group btn-group-sm" role="group" aria-label="Edit self review">
+                            <a class="btn btn-outline-primary"
+                               href="{% url 'atlas:self_review_update' cid_user_exam.id case.id review.id %}">
+                                Edit
+                            </a>
+                            <button type="button"
+                                    class="btn btn-outline-info"
+                                    onclick="openSelfReviewPopup('{% url 'atlas:self_review_update' cid_user_exam.id case.id review.id %}')">
+                                Popup
+                            </button>
+                            <button type="button"
+                                    class="btn btn-outline-secondary"
+                                    onclick="openSelfReviewSidebar('{% url 'atlas:self_review_update' cid_user_exam.id case.id review.id %}')">
+                                Sidebar
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="small mb-1">
+                        <strong>Findings:</strong>
+                        <span class="badge bg-info-subtle text-info-emphasis">{{ review.findings|default:"-" }}/5</span>
+                    </div>
+                    <div class="small mb-2">
+                        <strong>Interpretation:</strong>
+                        <span class="badge bg-warning-subtle text-warning-emphasis">{{ review.interpretation|default:"-" }}/5</span>
+                    </div>
+                    {% if review.comments %}
+                        <div class="small text-body-secondary">{{ review.comments|linebreaksbr }}</div>
+                    {% else %}
+                        <div class="small text-muted">No comments added.</div>
+                    {% endif %}
+                </div>
+            {% endfor %}
+        </div>
+    {% endif %}
+</div>
\ No newline at end of file
diff --git a/atlas/templates/atlas/partials/_selfreview_popup_success.html b/atlas/templates/atlas/partials/_selfreview_popup_success.html
index 5c7417aa..09435f45 100644
--- a/atlas/templates/atlas/partials/_selfreview_popup_success.html
+++ b/atlas/templates/atlas/partials/_selfreview_popup_success.html
@@ -1,69 +1,68 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta charset="utf-8">
-    <title>Self Review Saved</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {
-            margin: 0;
-            font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
-            background: #111;
-            color: #f0f0f0;
-        }
-        .wrap {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 1rem;
-        }
-        .card {
-            max-width: 460px;
-            width: 100%;
-            border: 1px solid #3a3a3a;
-            border-radius: 10px;
-            background: #1a1a1a;
-            padding: 1rem 1.2rem;
-            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
-        }
-        h1 {
-            margin-top: 0;
-            font-size: 1.15rem;
-        }
-        p {
-            margin-bottom: 0;
-            color: #d0d0d0;
-        }
-    </style>
-</head>
-<body>
-    <div class="wrap">
-        <div class="card">
-            <h1>Self review saved</h1>
-            <p>This window will close shortly and refresh the case page.</p>
+    <head>
+        <meta charset="utf-8">
+        <title>Self Review Saved</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+            body {
+                margin: 0;
+                font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+                background: #111;
+                color: #f0f0f0;
+            }
+            .wrap {
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 1rem;
+            }
+            .card {
+                max-width: 460px;
+                width: 100%;
+                border: 1px solid #3a3a3a;
+                border-radius: 10px;
+                background: #1a1a1a;
+                padding: 1rem 1.2rem;
+                box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
+            }
+            h1 {
+                margin-top: 0;
+                font-size: 1.15rem;
+            }
+            p {
+                margin-bottom: 0;
+                color: #d0d0d0;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="wrap">
+            <div class="card">
+                <h1>Self review saved</h1>
+                <p>This window will close shortly and refresh the case page.</p>
+            </div>
         </div>
-    </div>
 
-    <script>
-        (function () {
-            try { window.alert('Self review saved. This popup will close and refresh the case page.'); } catch (e) {}
+        <script>
+            (function () {
+                try { window.alert('Self review saved. This popup will close and refresh the case page.'); } catch (e) {}
 
-            try {
-                if (window.opener && !window.opener.closed) {
-                    var targetUrl = "{{ target_url|escapejs }}";
-                    try {
-                        window.opener.location.href = targetUrl || window.opener.location.href;
-                    } catch (e) {
-                        window.opener.location.reload();
+                try {
+                    if (window.opener && !window.opener.closed) {
+                        try {
+                            window.opener.postMessage({ type: 'self_review_saved' }, '*');
+                        } catch (e) {
+                            window.opener.location.reload();
+                        }
                     }
-                }
-            } catch (e) {}
+                } catch (e) {}
 
-            setTimeout(function () {
-                window.close();
-            }, 700);
-        })();
-    </script>
-</body>
+                setTimeout(function () {
+                    window.close();
+                }, 700);
+            })();
+        </script>
+    </body>
 </html>