115 lines
4.2 KiB
Plaintext
115 lines
4.2 KiB
Plaintext
@await Html.PartialAsync("PagesView/Canvass/_CanvassStyles")
|
|
@await Html.PartialAsync("PagesView/Canvass/_CanvassHelpers")
|
|
|
|
<div class="canvass-wrapper">
|
|
|
|
@* {{-- HEADER --}} *@
|
|
<div class="cv-header">
|
|
<div class="cv-header-inner">
|
|
<i class="fas fa-file-invoice cv-header-icon"></i>
|
|
<div>
|
|
<h1>Canvass Management</h1>
|
|
<p>Manage purchase canvass requests by supplier, status, and comparison</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@* {{-- TAB NAV --}}
|
|
{{-- data-tab-id matches the ViewComponent switch:
|
|
1=ForTagging, 2=ForCanvass, 3=ForApproval, 4=Completed --}} *@
|
|
<div class="cv-tabs" role="tablist">
|
|
<button class="cv-tab-btn active" data-tab-id="1" role="tab">
|
|
<i class="fas fa-user-tag"></i> For Tagging
|
|
</button>
|
|
<button class="cv-tab-btn" data-tab-id="2" role="tab">
|
|
<i class="fas fa-store"></i> For Canvass
|
|
</button>
|
|
<button class="cv-tab-btn" data-tab-id="3" role="tab">
|
|
<i class="fas fa-clock"></i> For Approval
|
|
</button>
|
|
<button class="cv-tab-btn" data-tab-id="4" role="tab">
|
|
<i class="fas fa-check-circle"></i> Completed
|
|
</button>
|
|
</div>
|
|
|
|
@* {{-- DYNAMIC TAB CONTENT — loaded via AJAX --}} *@
|
|
<div id="cv-tab-content">
|
|
<div class="cv-tab-loading">
|
|
<div class="cv-spinner"></div>
|
|
<span>Loading…</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<input hidden id="supplierId" />
|
|
@await Html.PartialAsync("PagesView/Canvass/_CanvassScript")
|
|
<script>
|
|
(function () {
|
|
"use strict";
|
|
|
|
const tabContent = document.getElementById("cv-tab-content");
|
|
const tabBtns = document.querySelectorAll(".cv-tab-btn");
|
|
|
|
// Cache stores the raw HTML string per tab id
|
|
const cache = {};
|
|
let activeTabId = null;
|
|
|
|
async function loadTab(tabId) {
|
|
if (activeTabId === tabId) return;
|
|
activeTabId = tabId;
|
|
|
|
// Mark active button
|
|
tabBtns.forEach(b => b.classList.toggle("active", b.dataset.tabId === String(tabId)));
|
|
|
|
if (cache[tabId]) {
|
|
// ── FIX: inject cached HTML then re-run its <script> blocks ──────
|
|
injectHtml(tabContent, cache[tabId]);
|
|
return;
|
|
}
|
|
|
|
tabContent.innerHTML = `<div class="cv-tab-loading">
|
|
<div class="cv-spinner"></div><span>Loading…</span></div>`;
|
|
|
|
try {
|
|
const res = await fetch(`/CanvassMgmt/GetCanvassingTabPage?id=${tabId}`);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const html = await res.text();
|
|
cache[tabId] = html;
|
|
injectHtml(tabContent, html);
|
|
} catch (err) {
|
|
console.error("Tab load error:", err);
|
|
tabContent.innerHTML = `
|
|
<div class="cv-placeholder">
|
|
<i class="fas fa-exclamation-triangle" style="color:#ff5c5c"></i>
|
|
<h3>Failed to load</h3>
|
|
<p>Please try again or refresh the page.</p>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Set innerHTML then re-execute every <script> block so IIFEs inside
|
|
* ViewComponent views fire correctly — both on first load AND cache restore.
|
|
*/
|
|
function injectHtml(container, html) {
|
|
container.innerHTML = html;
|
|
container.querySelectorAll("script").forEach(oldScript => {
|
|
const newScript = document.createElement("script");
|
|
// Copy attributes (type, src, etc.) if any
|
|
Array.from(oldScript.attributes).forEach(attr =>
|
|
newScript.setAttribute(attr.name, attr.value));
|
|
newScript.textContent = oldScript.textContent;
|
|
oldScript.replaceWith(newScript);
|
|
});
|
|
}
|
|
|
|
// Wire tab clicks
|
|
tabBtns.forEach(btn =>
|
|
btn.addEventListener("click", () => loadTab(parseInt(btn.dataset.tabId, 10)))
|
|
);
|
|
|
|
// Auto-load the first tab on page ready
|
|
loadTab(1);
|
|
})();
|
|
</script> |