Pack FPP selection by column height
This commit is contained in:
sas.fajri
186
server.js
186
server.js
@@ -631,6 +631,7 @@ function renderOrderDetail(order) {
|
||||
|
||||
function renderOrderForm(step, stepKey = "demografi", fppTests = [], mouId = "") {
|
||||
const fppGroups = groupFppTestsForSelection(fppTests);
|
||||
const packedGroups = packFppGroupsIntoColumns(fppGroups, 5);
|
||||
const steps = [
|
||||
["demografi", "Demografi", "Patient identity and contact details."],
|
||||
["diagnosa", "Diagnosa", "Clinical indication and diagnosis."],
|
||||
@@ -689,50 +690,58 @@ function renderOrderForm(step, stepKey = "demografi", fppTests = [], mouId = "")
|
||||
<p id="order-selected-count">0 selected</p>
|
||||
</div>
|
||||
${
|
||||
fppGroups.length
|
||||
? `<div class="fpp-select-board">${fppGroups
|
||||
packedGroups.length
|
||||
? `<div class="fpp-select-board">${packedGroups
|
||||
.map(
|
||||
(group) => `
|
||||
<article class="fpp-select-column">
|
||||
<div class="fpp-select-head">
|
||||
<div class="fpp-select-title">${escapeHtml(group.heading)}</div>
|
||||
<div class="fpp-select-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
|
||||
</div>
|
||||
<div class="fpp-select-body">
|
||||
${group.sections
|
||||
.map(
|
||||
(section) => `
|
||||
<section class="fpp-select-section">
|
||||
${section.title ? `<div class="fpp-select-section-head">${escapeHtml(section.title)}</div>` : ""}
|
||||
<ul class="fpp-select-list">
|
||||
${section.tests
|
||||
.map(
|
||||
(test) => `
|
||||
<li class="fpp-select-row ${test.doctortest ? "" : "is-disabled"}">
|
||||
<label class="fpp-select-label">
|
||||
<input
|
||||
class="fpp-select-toggle"
|
||||
type="checkbox"
|
||||
${test.doctortest ? "" : "disabled"}
|
||||
data-test-id="${escapeHtml(test.testId)}"
|
||||
data-test-name="${escapeHtml(test.name)}"
|
||||
data-test-price="${escapeHtml(test.price)}"
|
||||
data-test-heading="${escapeHtml(group.heading)}"
|
||||
data-test-subcategory="${escapeHtml(section.title || "")}"
|
||||
/>
|
||||
<span class="fpp-select-name">${escapeHtml(test.name)}</span>
|
||||
</label>
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</ul>
|
||||
</section>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</article>
|
||||
(column) => `
|
||||
<div class="fpp-select-stack">
|
||||
${column
|
||||
.map(
|
||||
(group) => `
|
||||
<article class="fpp-select-column">
|
||||
<div class="fpp-select-head">
|
||||
<div class="fpp-select-title">${escapeHtml(group.heading)}</div>
|
||||
<div class="fpp-select-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
|
||||
</div>
|
||||
<div class="fpp-select-body">
|
||||
${group.sections
|
||||
.map(
|
||||
(section) => `
|
||||
<section class="fpp-select-section">
|
||||
${section.title ? `<div class="fpp-select-section-head">${escapeHtml(section.title)}</div>` : ""}
|
||||
<ul class="fpp-select-list">
|
||||
${section.tests
|
||||
.map(
|
||||
(test) => `
|
||||
<li class="fpp-select-row ${test.doctortest ? "" : "is-disabled"}">
|
||||
<label class="fpp-select-label">
|
||||
<input
|
||||
class="fpp-select-toggle"
|
||||
type="checkbox"
|
||||
${test.doctortest ? "" : "disabled"}
|
||||
data-test-id="${escapeHtml(test.testId)}"
|
||||
data-test-name="${escapeHtml(test.name)}"
|
||||
data-test-price="${escapeHtml(test.price)}"
|
||||
data-test-heading="${escapeHtml(group.heading)}"
|
||||
data-test-subcategory="${escapeHtml(section.title || "")}"
|
||||
/>
|
||||
<span class="fpp-select-name">${escapeHtml(test.name)}</span>
|
||||
</label>
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</ul>
|
||||
</section>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</article>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}</div>`
|
||||
@@ -954,9 +963,30 @@ function groupFppTestsForSelection(tests = []) {
|
||||
}));
|
||||
}
|
||||
|
||||
function packFppGroupsIntoColumns(groups = [], maxColumns = 5) {
|
||||
const columnCount = Math.min(Math.max(groups.length, 1), maxColumns);
|
||||
const columns = Array.from({ length: columnCount }, () => ({ items: [], score: 0 }));
|
||||
const estimateScore = (group) =>
|
||||
1 +
|
||||
group.sections.length +
|
||||
group.sections.reduce((sum, section) => sum + section.tests.length * 0.12, 0);
|
||||
|
||||
for (const group of groups) {
|
||||
let target = columns[0];
|
||||
for (const column of columns) {
|
||||
if (column.score < target.score) target = column;
|
||||
}
|
||||
target.items.push(group);
|
||||
target.score += estimateScore(group);
|
||||
}
|
||||
|
||||
return columns.map((column) => column.items);
|
||||
}
|
||||
|
||||
function renderFpp(groups, activeGroup = "All") {
|
||||
const availableGroups = groups.map((item) => item.heading);
|
||||
const visibleGroups = activeGroup === "All" ? groups : groups.filter((item) => item.heading === activeGroup);
|
||||
const packedGroups = packFppGroupsIntoColumns(visibleGroups, 5);
|
||||
return `
|
||||
<div class="stack swap-zone fpp-shell">
|
||||
<section class="panel fpp-toolbar">
|
||||
@@ -971,38 +1001,46 @@ function renderFpp(groups, activeGroup = "All") {
|
||||
<div class="fpp-sheet-meta">Hitam putih, padat, dan mengikuti pembagian grup seperti form manual.</div>
|
||||
</div>
|
||||
<div class="fpp-board">
|
||||
${visibleGroups
|
||||
${packedGroups
|
||||
.map(
|
||||
(group) => `
|
||||
<article class="fpp-column">
|
||||
<div class="fpp-column-head">
|
||||
<div class="fpp-column-title">${escapeHtml(group.heading)}</div>
|
||||
<div class="fpp-column-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
|
||||
</div>
|
||||
<div class="fpp-column-body">
|
||||
${group.sections
|
||||
.map(
|
||||
(section) => `
|
||||
<section class="fpp-section">
|
||||
${section.title ? `<div class="fpp-section-head">${escapeHtml(section.title)}</div>` : ""}
|
||||
<ul class="fpp-test-list">
|
||||
${section.tests
|
||||
.map(
|
||||
(test) => `
|
||||
<li class="fpp-test ${test.doctortest ? "" : "is-disabled"}" title="${test.doctortest ? "" : "Tidak dapat dicentang"}">
|
||||
<span class="fpp-dot" aria-hidden="true"></span>
|
||||
<span class="fpp-test-name">${escapeHtml(test.name)}</span>
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</ul>
|
||||
</section>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</article>
|
||||
(column) => `
|
||||
<div class="fpp-select-stack">
|
||||
${column
|
||||
.map(
|
||||
(group) => `
|
||||
<article class="fpp-column">
|
||||
<div class="fpp-column-head">
|
||||
<div class="fpp-column-title">${escapeHtml(group.heading)}</div>
|
||||
<div class="fpp-column-count">${group.sections.reduce((sum, section) => sum + section.tests.length, 0)} tests</div>
|
||||
</div>
|
||||
<div class="fpp-column-body">
|
||||
${group.sections
|
||||
.map(
|
||||
(section) => `
|
||||
<section class="fpp-section">
|
||||
${section.title ? `<div class="fpp-section-head">${escapeHtml(section.title)}</div>` : ""}
|
||||
<ul class="fpp-test-list">
|
||||
${section.tests
|
||||
.map(
|
||||
(test) => `
|
||||
<li class="fpp-test ${test.doctortest ? "" : "is-disabled"}" title="${test.doctortest ? "" : "Tidak dapat dicentang"}">
|
||||
<span class="fpp-dot" aria-hidden="true"></span>
|
||||
<span class="fpp-test-name">${escapeHtml(test.name)}</span>
|
||||
</li>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</ul>
|
||||
</section>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
</article>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("")}
|
||||
|
||||
@@ -745,6 +745,13 @@ tr:last-child td {
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.fpp-select-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.fpp-select-column {
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
|
||||
Reference in New Issue
Block a user