hrynco/hrynco-notification-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move test modal to view body, wire button via addEventListener

Browse Source 
Razor section forwarding across nested layouts is unreliable.
Modal div and script are now directly in Edit.cshtml body (not in
any section) so they are always in the DOM when the page renders.
Button uses addEventListener instead of inline onclick to decouple
from layout rendering order.

Ref: IT-628

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
Anatolii Grynchuk
2026-05-02 03:43:25 +03:00
parent c9f776de80
commit 7587e7fd17
2 changed files with 56 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
HrynCo.NotificationService.Web/Views/AdminChannels/Edit.cshtml
+56 -54
View File
@@ -123,7 +123,7 @@
</button> </button>
@if (!Model.IsNew) @if (!Model.IsNew)
{ {
<button type="button" class="btn btn-success" onclick="new bootstrap.Modal(document.getElementById('testModal')).show()"> <button type="button" class="btn btn-success" id="testModalBtn">
<i class="bi bi-send me-1"></i> Test <i class="bi bi-send me-1"></i> Test
</button> </button>
} }
@@ -135,64 +135,66 @@
@if (!Model.IsNew) @if (!Model.IsNew)
{ {
@section Scripts { <div class="modal fade" id="testModal" tabindex="-1">
<div class="modal fade" id="testModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered">
<div class="modal-dialog modal-dialog-centered"> <div class="modal-content">
<div class="modal-content"> <div class="modal-header">
<div class="modal-header"> <h5 class="modal-title"><i class="bi bi-send me-2"></i>Send Test Email</h5>
<h5 class="modal-title"><i class="bi bi-send me-2"></i>Send Test Email</h5> <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div>
</div> <div class="modal-body">
<div class="modal-body"> <label for="testToEmail" class="form-label fw-semibold">Recipient Email</label>
<label for="testToEmail" class="form-label fw-semibold">Recipient Email</label> <input type="email" id="testToEmail" class="form-control" placeholder="you@example.com" />
<input type="email" id="testToEmail" class="form-control" placeholder="you@example.com" /> <div id="testResult" class="mt-3" style="display:none"></div>
<div id="testResult" class="mt-3" style="display:none"></div> </div>
</div> <div class="modal-footer">
<div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-success" id="testSendBtn" onclick="sendTestEmail('@Model.Id')">
<button type="button" class="btn btn-success" id="testSendBtn" onclick="sendTestEmail('@Model.Id')"> <i class="bi bi-send me-1"></i> Send
<i class="bi bi-send me-1"></i> Send </button>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<script> <script>
async function sendTestEmail(channelId) { document.getElementById('testModalBtn').addEventListener('click', function () {
const toEmail = document.getElementById('testToEmail').value.trim(); bootstrap.Modal.getOrCreateInstance(document.getElementById('testModal')).show();
const resultDiv = document.getElementById('testResult'); });
const sendBtn = document.getElementById('testSendBtn');
if (!toEmail) { async function sendTestEmail(channelId) {
resultDiv.style.display = 'block'; const toEmail = document.getElementById('testToEmail').value.trim();
resultDiv.innerHTML = '<div class="alert alert-warning mb-0">Please enter a recipient email.</div>'; const resultDiv = document.getElementById('testResult');
return; const sendBtn = document.getElementById('testSendBtn');
}
sendBtn.disabled = true; if (!toEmail) {
sendBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending…'; resultDiv.style.display = 'block';
resultDiv.style.display = 'none'; resultDiv.innerHTML = '<div class="alert alert-warning mb-0">Please enter a recipient email.</div>';
return;
try {
const resp = await fetch(`/admin/channels/${channelId}/test`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ toEmail })
});
const data = await resp.json();
resultDiv.style.display = 'block';
resultDiv.innerHTML = data.success
? `<div class="alert alert-success mb-0"><i class="bi bi-check-circle me-1"></i>${data.message}</div>`
: `<div class="alert alert-danger mb-0"><i class="bi bi-x-circle me-1"></i>${data.message}</div>`;
} catch (e) {
resultDiv.style.display = 'block';
resultDiv.innerHTML = `<div class="alert alert-danger mb-0">Request failed: ${e.message}</div>`;
} finally {
sendBtn.disabled = false;
sendBtn.innerHTML = '<i class="bi bi-send me-1"></i> Send';
}
} }
</script>
} sendBtn.disabled = true;
sendBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> Sending…';
resultDiv.style.display = 'none';
try {
const resp = await fetch(`/admin/channels/${channelId}/test`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ toEmail })
});
const data = await resp.json();
resultDiv.style.display = 'block';
resultDiv.innerHTML = data.success
? `<div class="alert alert-success mb-0"><i class="bi bi-check-circle me-1"></i>${data.message}</div>`
: `<div class="alert alert-danger mb-0"><i class="bi bi-x-circle me-1"></i>${data.message}</div>`;
} catch (e) {
resultDiv.style.display = 'block';
resultDiv.innerHTML = `<div class="alert alert-danger mb-0">Request failed: ${e.message}</div>`;
} finally {
sendBtn.disabled = false;
sendBtn.innerHTML = '<i class="bi bi-send me-1"></i> Send';
}
}
</script>
} }
HrynCo.NotificationService.Web/Views/Shared/_EditorLayout.cshtml
-4
View File
@@ -14,7 +14,3 @@
</div> </div>
</div> </div>
</div> </div>
@section Scripts {
@RenderSection("Scripts", required: false)
}