Refactor self-review functionality: replace inline actions with dedicated partials and enhance dynamic panel updates
This commit is contained in:
Ross
@@ -213,32 +213,8 @@
|
|||||||
{% include "atlas/partials/collection_question_answer_block.html" %}
|
{% include "atlas/partials/collection_question_answer_block.html" %}
|
||||||
|
|
||||||
{% if collection.self_review %}
|
{% if collection.self_review %}
|
||||||
<div>
|
<div id="self-review-panel-que">
|
||||||
<div class="self-review-actions mb-3">
|
{% include 'atlas/partials/_self_review_block.html' with panel_key='que' %}
|
||||||
<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>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<h4>Answer score: {{answer.score}}</h4>
|
<h4>Answer score: {{answer.score}}</h4>
|
||||||
@@ -277,31 +253,9 @@
|
|||||||
{% if question_completed %}
|
{% if question_completed %}
|
||||||
<div>
|
<div>
|
||||||
{% if collection.self_review %}
|
{% if collection.self_review %}
|
||||||
<div class="self-review-actions mb-3">
|
<div id="self-review-panel-rep">
|
||||||
<div class="btn-group btn-group-sm" role="group" aria-label="Self review actions">
|
{% include 'atlas/partials/_self_review_block.html' with panel_key='rep' %}
|
||||||
<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>
|
</div>
|
||||||
{% if self_review %}
|
|
||||||
<h4>Self Feedback</h4>
|
|
||||||
|
|
||||||
{% for review in self_review %}
|
|
||||||
{{review.get_display_block}}
|
|
||||||
|
|
||||||
{% endfor %}
|
|
||||||
{% endif %}
|
|
||||||
{% else %}
|
{% else %}
|
||||||
<h4>Answer score: {{answer.score}}</h4>
|
<h4>Answer score: {{answer.score}}</h4>
|
||||||
Answer feedback: {{answer.feedback|safe}}
|
Answer feedback: {{answer.feedback|safe}}
|
||||||
@@ -675,6 +629,34 @@
|
|||||||
|
|
||||||
window.selfReviewCurrentEmbedUrl = null;
|
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 () {
|
window.bindSelfReviewEmbedForm = function () {
|
||||||
var root = document.getElementById('selfReviewSidebarBody');
|
var root = document.getElementById('selfReviewSidebarBody');
|
||||||
if (!root) return;
|
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>';
|
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 () {
|
setTimeout(function () {
|
||||||
window.closeSelfReviewSidebar();
|
window.closeSelfReviewSidebar();
|
||||||
window.location.reload();
|
window.refreshSelfReviewPanels();
|
||||||
}, 500);
|
}, 500);
|
||||||
return;
|
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,69 +1,68 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Self Review Saved</title>
|
<title>Self Review Saved</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||||
background: #111;
|
background: #111;
|
||||||
color: #f0f0f0;
|
color: #f0f0f0;
|
||||||
}
|
}
|
||||||
.wrap {
|
.wrap {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
.card {
|
.card {
|
||||||
max-width: 460px;
|
max-width: 460px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border: 1px solid #3a3a3a;
|
border: 1px solid #3a3a3a;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background: #1a1a1a;
|
background: #1a1a1a;
|
||||||
padding: 1rem 1.2rem;
|
padding: 1rem 1.2rem;
|
||||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
|
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
|
||||||
}
|
}
|
||||||
h1 {
|
h1 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: 1.15rem;
|
font-size: 1.15rem;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
color: #d0d0d0;
|
color: #d0d0d0;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="wrap">
|
<div class="wrap">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h1>Self review saved</h1>
|
<h1>Self review saved</h1>
|
||||||
<p>This window will close shortly and refresh the case page.</p>
|
<p>This window will close shortly and refresh the case page.</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
try { window.alert('Self review saved. This popup will close and refresh the case page.'); } catch (e) {}
|
try { window.alert('Self review saved. This popup will close and refresh the case page.'); } catch (e) {}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (window.opener && !window.opener.closed) {
|
if (window.opener && !window.opener.closed) {
|
||||||
var targetUrl = "{{ target_url|escapejs }}";
|
try {
|
||||||
try {
|
window.opener.postMessage({ type: 'self_review_saved' }, '*');
|
||||||
window.opener.location.href = targetUrl || window.opener.location.href;
|
} catch (e) {
|
||||||
} catch (e) {
|
window.opener.location.reload();
|
||||||
window.opener.location.reload();
|
}
|
||||||
}
|
}
|
||||||
}
|
} catch (e) {}
|
||||||
} catch (e) {}
|
|
||||||
|
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
window.close();
|
window.close();
|
||||||
}, 700);
|
}, 700);
|
||||||
})();
|
})();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user