93 lines
3.4 KiB
Plaintext
93 lines
3.4 KiB
Plaintext
<!-- ReportDesigner.cshtml -->
|
|
<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
|
|
<script src="https://unpkg.com/grapesjs"></script>
|
|
|
|
<div style="display:flex;gap:8px;padding:10px">
|
|
<button id="btn-save">Save Template</button>
|
|
<button id="btn-preview">Preview with Sample Data</button>
|
|
<select id="report-type">
|
|
<option value="ris">RIS Report</option>
|
|
<option value="mrs">MRS Report</option>
|
|
<option value="inventory">Inventory Report</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="gjs-editor"></div>
|
|
|
|
<script>
|
|
const editor = grapesjs.init({
|
|
container: '#gjs-editor',
|
|
height: '100vh',
|
|
fromElement: false,
|
|
storageManager: false, // we handle save/load ourselves
|
|
|
|
// ── Block manager: drag-drop components your team can use ──
|
|
blockManager: {
|
|
blocks: [
|
|
{
|
|
id: 'data-field',
|
|
label: 'Data Field',
|
|
content: '<span class="df-token">{{FieldName}}</span>',
|
|
category: 'Report Fields'
|
|
},
|
|
{
|
|
id: 'table-block',
|
|
label: 'Data Table',
|
|
content: `<table class="rpt-table">
|
|
<thead><tr><th>Column 1</th><th>Column 2</th></tr></thead>
|
|
<tbody><tr><td>{{Field1}}</td><td>{{Field2}}</td></tr></tbody>
|
|
</table>`,
|
|
category: 'Report Fields'
|
|
},
|
|
{
|
|
id: 'kpi-card',
|
|
label: 'KPI Card',
|
|
content: `<div class="kpi-cell">
|
|
<div class="kpi-lbl">Label</div>
|
|
<div class="kpi-val">{{KpiValue}}</div>
|
|
</div>`,
|
|
category: 'Report Fields'
|
|
}
|
|
]
|
|
}
|
|
});
|
|
|
|
// ── Load existing template when report type changes ──
|
|
document.getElementById('report-type').addEventListener('change', async (e) => {
|
|
const res = await fetch(`/ReportDesigner/GetTemplate?type=${e.target.value}`);
|
|
const data = await res.json();
|
|
editor.setComponents(data.html || '');
|
|
editor.setStyle(data.css || '');
|
|
});
|
|
|
|
// ── Save template ──
|
|
document.getElementById('btn-save').addEventListener('click', async () => {
|
|
const html = editor.getHtml();
|
|
const css = editor.getCss();
|
|
const type = document.getElementById('report-type').value;
|
|
|
|
await fetch('/ReportDesigner/SaveTemplate', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ reportType: type, html, css })
|
|
});
|
|
|
|
alert('Template saved.');
|
|
});
|
|
|
|
// ── Preview with real sample data ──
|
|
document.getElementById('btn-preview').addEventListener('click', async () => {
|
|
const html = editor.getHtml();
|
|
const css = editor.getCss();
|
|
const type = document.getElementById('report-type').value;
|
|
|
|
const res = await fetch('/ReportDesigner/PreviewPdf', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ reportType: type, html, css })
|
|
});
|
|
|
|
const blob = await res.blob();
|
|
window.open(URL.createObjectURL(blob), '_blank');
|
|
});
|
|
</script> |