Refactor self-review functionality: replace inline actions with dedicated partials and enhance dynamic panel updates

This commit is contained in:
Ross
2026-04-27 11:16:48 +01:00
parent 37e1bf29a3
commit 95793c78c9
3 changed files with 155 additions and 112 deletions
@@ -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 id="self-review-panel-rep">
{% include 'atlas/partials/_self_review_block.html' with panel_key='rep' %}
</div>
</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;
}
@@ -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>
@@ -1,6 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<title>Self Review Saved</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -36,8 +36,8 @@
color: #d0d0d0;
}
</style>
</head>
<body>
</head>
<body>
<div class="wrap">
<div class="card">
<h1>Self review saved</h1>
@@ -51,9 +51,8 @@
try {
if (window.opener && !window.opener.closed) {
var targetUrl = "{{ target_url|escapejs }}";
try {
window.opener.location.href = targetUrl || window.opener.location.href;
window.opener.postMessage({ type: 'self_review_saved' }, '*');
} catch (e) {
window.opener.location.reload();
}
@@ -65,5 +64,5 @@
}, 700);
})();
</script>
</body>
</body>
</html>