Add QR share and print actions
This commit is contained in:
75
server.js
75
server.js
@@ -268,6 +268,15 @@ function layout(title, body, { authenticated = false, activePath = "/", subtitle
|
||||
injectOrderDraftPayload(form);
|
||||
});
|
||||
document.addEventListener('click', function (event) {
|
||||
var printTrigger = event.target.closest && event.target.closest('[data-action="print-order"]');
|
||||
if (printTrigger) {
|
||||
event.preventDefault();
|
||||
document.body.classList.add('print-order');
|
||||
window.setTimeout(function () {
|
||||
window.print();
|
||||
}, 50);
|
||||
return;
|
||||
}
|
||||
var close = event.target.closest && event.target.closest('[data-modal-close]');
|
||||
if (!close) return;
|
||||
event.preventDefault();
|
||||
@@ -276,6 +285,9 @@ function layout(title, body, { authenticated = false, activePath = "/", subtitle
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Escape') closeModal();
|
||||
});
|
||||
window.addEventListener('afterprint', function () {
|
||||
document.body.classList.remove('print-order');
|
||||
});
|
||||
document.addEventListener('htmx:afterSwap', function (event) {
|
||||
if (event.detail && event.detail.target && event.detail.target.id === 'modal-root') {
|
||||
var root = document.getElementById('modal-root');
|
||||
@@ -645,15 +657,24 @@ function qrImageUrl(value, size = 240) {
|
||||
return `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${data}`;
|
||||
}
|
||||
|
||||
function formatOrderDisplayDate(value) {
|
||||
const text = String(value || "").trim();
|
||||
const match = text.match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}:\d{2}:\d{2}))?$/);
|
||||
if (!match) return text;
|
||||
return `${match[3]}-${match[2]}-${match[1]}${match[4] ? ` ${match[4]}` : ""}`;
|
||||
}
|
||||
|
||||
function renderOrderSaved(order) {
|
||||
const details = Array.isArray(order.details) ? order.details : [];
|
||||
const qrText = order.orderCode || order.id || "";
|
||||
const printableDate = formatOrderDisplayDate(order.orderDate || "");
|
||||
const printableDoctor = order.doctorName || order.doctor || sampleLogin.username;
|
||||
return `
|
||||
<div class="stack order-created-shell" data-order-saved="true">
|
||||
<section class="panel">
|
||||
${panelHeader(
|
||||
"Order saved",
|
||||
"QR Code and review are shown after the order has been submitted successfully.",
|
||||
"QR Step",
|
||||
"Order is saved. Share it to WhatsApp or print the slip below.",
|
||||
`<div class="pill-row">
|
||||
<a class="btn btn-secondary" href="/orders/${escapeHtml(order.id || "")}">Open detail</a>
|
||||
<a class="btn btn-primary" href="/orders/new">Create new order</a>
|
||||
@@ -661,14 +682,47 @@ function renderOrderSaved(order) {
|
||||
)}
|
||||
<div class="detail-grid">
|
||||
<div class="card order-created-qr">
|
||||
<strong>QR Code</strong>
|
||||
<p class="muted">${escapeHtml(qrText || "-")}</p>
|
||||
<div class="qr-preview">
|
||||
${
|
||||
qrText
|
||||
? `<img class="image_qrcode" src="${qrImageUrl(qrText)}" alt="QR code for order ${escapeHtml(qrText)}" loading="lazy" />`
|
||||
: `<div class="note-box">QR code not available.</div>`
|
||||
}
|
||||
<div class="qr-slip">
|
||||
<div class="qr-slip-header">
|
||||
<div class="qr-slip-label">Tanggal Order</div>
|
||||
<div class="qr-slip-value">${escapeHtml(printableDate || "-")}</div>
|
||||
<div class="qr-slip-label">Nama</div>
|
||||
<div class="qr-slip-value">${escapeHtml(order.patient || "-")}</div>
|
||||
<div class="qr-slip-label">Dokter</div>
|
||||
<div class="qr-slip-value">${escapeHtml(printableDoctor)}</div>
|
||||
</div>
|
||||
<div class="qr-slip-section-title">Pemeriksaan</div>
|
||||
<div class="qr-slip-tests">
|
||||
${
|
||||
details.length
|
||||
? details
|
||||
.map(
|
||||
(item) => `<div class="qr-slip-test">- ${escapeHtml(item.test_name || item.testName || "-")}</div>`,
|
||||
)
|
||||
.join("")
|
||||
: `<div class="qr-slip-test muted">-</div>`
|
||||
}
|
||||
</div>
|
||||
<div class="qr-preview">
|
||||
${
|
||||
qrText
|
||||
? `<img class="image_qrcode" src="${qrImageUrl(qrText, 320)}" alt="QR code for order ${escapeHtml(qrText)}" loading="lazy" />`
|
||||
: `<div class="note-box">QR code not available.</div>`
|
||||
}
|
||||
</div>
|
||||
<div class="qr-code-text">${escapeHtml(qrText || "-")}</div>
|
||||
<div class="pill-row qr-actions">
|
||||
${
|
||||
qrText
|
||||
? `<a class="btn btn-secondary" href="${escapeHtml(
|
||||
`https://wa.me/?text=${encodeURIComponent(
|
||||
`Order ${order.id || ""} | ${order.patient || ""} | QR ${qrText}`,
|
||||
)}`,
|
||||
)}" target="_blank" rel="noreferrer">Share WhatsApp</a>`
|
||||
: ""
|
||||
}
|
||||
<button class="btn btn-primary" type="button" data-action="print-order">Print</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
@@ -2250,6 +2304,7 @@ async function renderRoute(req, res, url) {
|
||||
message: saved.order_note || body.patient_note || "",
|
||||
orderDate: saved.order_date || "",
|
||||
orderCode: saved.order_qrcode || "",
|
||||
doctorName: sessionData.username || sampleLogin.username,
|
||||
details: Array.isArray(saved.details) ? saved.details : Array.isArray(body.details) ? body.details : [],
|
||||
};
|
||||
html(
|
||||
|
||||
Reference in New Issue
Block a user