d_s_bisht/devsofttech_hms_ci4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine OPD template builder UI and preview behavior

Browse Source
This commit is contained in:
DevSoftTech Server 2026-06-05 03:34:08 +05:30
parent 700741ab9b
commit b3e8a1a692
3 changed files with 518 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/Views/Setting/Template/index.php
View File

@ -202,7 +202,7 @@ $hasTemplateAccess = $canPathology || $canUltrasound || $canXray || $canCt || $c
<?php if ($canOpdPrintTemplate) { ?>
<div class="col-6 col-md-2 col-lg-2">
<a class="admin-tile" href="javascript:load_form_div('<?= base_url('Opd/print_template_builder') ?>','maindiv','OPD Print Template');">
<a class="admin-tile" href="javascript:load_form('<?= base_url('Opd/print_template_builder') ?>','maindiv','OPD Print Template');">
<span class="tile-icon"><i class="bi bi-printer"></i></span>
<span>OPD Print Template</span>
</a>
@ -211,7 +211,7 @@ $hasTemplateAccess = $canPathology || $canUltrasound || $canXray || $canCt || $c
<?php if ($canDischarge) { ?>
<div class="col-6 col-md-2 col-lg-2">
<a class="admin-tile" href="javascript:load_form_div('<?= base_url('setting/template/discharge_templates') ?>','maindiv','IPD Discharge Template');">
<a class="admin-tile" href="javascript:load_form('<?= base_url('setting/template/discharge_templates') ?>','maindiv','IPD Discharge Template');">
<span class="tile-icon"><i class="bi bi-file-earmark-medical"></i></span>
<span>IPD Discharge Template</span>
</a>
@ -220,7 +220,7 @@ $hasTemplateAccess = $canPathology || $canUltrasound || $canXray || $canCt || $c
<?php if ($canIpdDocumentMaster) { ?>
<div class="col-6 col-md-2 col-lg-2">
<a class="admin-tile" href="javascript:load_form_div('<?= base_url('setting/template/ipd_document_templates') ?>','maindiv','IPD Document Master');">
<a class="admin-tile" href="javascript:load_form('<?= base_url('setting/template/ipd_document_templates') ?>','maindiv','IPD Document Master');">
<span class="tile-icon"><i class="bi bi-file-earmark-richtext"></i></span>
<span>IPD Document Master</span>
</a>
@ -230,7 +230,7 @@ $hasTemplateAccess = $canPathology || $canUltrasound || $canXray || $canCt || $c
<?php if ($canDiagnosisPrintTemplate) { ?>
<?php if ($canPathologyPrintTemplate) { ?>
<div class="col-6 col-md-2 col-lg-2">
<a class="admin-tile" href="javascript:load_form_div('<?= base_url('setting/template/diagnosis_print_settings/5') ?>','maindiv','Pathology Print Template');">
<a class="admin-tile" href="javascript:load_form('<?= base_url('setting/template/diagnosis_print_settings/5') ?>','maindiv','Pathology Print Template');">
<span class="tile-icon"><i class="bi bi-printer"></i></span>
<span>Pathology Print Template</span>
</a>
@ -238,7 +238,7 @@ $hasTemplateAccess = $canPathology || $canUltrasound || $canXray || $canCt || $c
<?php } ?>
<div class="col-6 col-md-2 col-lg-2">
<a class="admin-tile" href="javascript:load_form_div('<?= base_url('setting/template/diagnosis_print_settings/3') ?>','maindiv','Diagnosis Print Template');">
<a class="admin-tile" href="javascript:load_form('<?= base_url('setting/template/diagnosis_print_settings/3') ?>','maindiv','Diagnosis Print Template');">
<span class="tile-icon"><i class="bi bi-printer-fill"></i></span>
<span>Diagnosis Print Template</span>
</a>
@ -247,7 +247,7 @@ $hasTemplateAccess = $canPathology || $canUltrasound || $canXray || $canCt || $c
<?php if ($canDoctorDocumentPrintTemplate) { ?>
<div class="col-6 col-md-2 col-lg-2">
<a class="admin-tile" href="javascript:load_form_div('<?= base_url('setting/template/document_print_settings') ?>','maindiv','Document Print Template');">
<a class="admin-tile" href="javascript:load_form('<?= base_url('setting/template/document_print_settings') ?>','maindiv','Document Print Template');">
<span class="tile-icon"><i class="bi bi-file-earmark-pdf"></i></span>
<span>Document Print Template</span>
</a>

663
app/Views/billing/opd_template_builder.php
View File

@ -5,9 +5,8 @@
</div>
<div style="float:right; margin-top:8px;">
<div class="btn-group btn-group-sm" role="group" aria-label="Template Navigation">
<a class="btn btn-info" href="javascript:load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=list','maindiv','OPD Template List');">Template List</a>
<a class="btn btn-default" href="#opd-paper-settings">Paper Print Settings</a>
<button type="button" class="btn btn-primary" disabled>Edit Template</button>
<a class="btn btn-info" href="javascript:load_form('<?= base_url('Opd/print_template_builder') ?>?mode=list','maindiv','OPD Template List');">Template List</a>
</div>
</div>
</div>
@ -18,61 +17,167 @@ $paperSettings = $paper_settings ?? [];
$paperPageSize = strtoupper((string) ($paperSettings['page_size'] ?? 'A4'));
$paperCustomWidth = (string) ($paperSettings['custom_width_mm'] ?? '210');
$paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
$selectedTemplateName = (string) ($selected_name ?? 'default');
$placeholderGroups = [
'hospital' => [],
'patient' => [],
'opd_master' => [],
'opd_consult' => [],
'other' => [],
];
$hospitalSet = [
'hospital_name', 'hospital_address', 'hospital_phone', 'hospital_email',
'h_name', 'h_address_1', 'h_address_2', 'h_phone_no', 'h_email', 'h_logo',
'hospital_section',
];
$patientSet = [
'pname', 'prelative', 'age_sex', 'phoneno', 'p_address', 'uhid_no',
'patient_section',
];
$opdMasterSet = [
'opd_sr_no', 'opd_no', 'opd_date', 'exp_date', 'opd_fee_desc',
'total_no_visit', 'last_opdvisit_date', 'str_opd_book_date',
'doctor_name', 'doctor_full_name', 'doctor_title',
'doctor_reg_no', 'doctor_registration',
'doctor_phone', 'doctor_email', 'doctor_address',
'doctor_specialization', 'specname', 'short_description',
'doctor_short_description', 'doctor_sign_html',
'print_time', 'current_date',
'margintop', 'marginbottom', 'marginleft', 'marginright', 'marginheader', 'marginfooter',
];
$opdConsultSet = [
'bp', 'bp_diastolic', 'pulse', 'temp', 'spo2', 'rr_min', 'height', 'weight', 'waist',
'pallor', 'icterus', 'cyanosis', 'clubbing', 'edema',
'vital_content', 'vital_content_extra', 'vital_content_full', 'general_examination',
'pain_value', 'pain_label', 'pain_scale',
'complication', 'addiction',
'drug_allergy_status', 'drug_allergy_details', 'adr_history', 'current_medications',
'drug_allergy_block', 'adr_history_block', 'current_medications_block',
'women_lmp', 'women_last_baby', 'women_pregnancy_related', 'women_related_problems', 'women_block',
'obstetric_history', 'menstrual_history', 'medical_surgical_history',
'family_history', 'allergic_history', 'vaccination_history', 'patient_history_block',
'morbidities', 'morbidities_block',
'painscale_img',
'complaint', 'diagnosis', 'provisional_diagnosis', 'finding_examinations',
'medical', 'investigation', 'prescriber_remarks', 'advice', 'next_visit', 'refer_to',
'rx', 'rxtable', 'rxfullblock',
'vitalsblock', 'complaintblock', 'diagnosisblock', 'investigationblock',
'remarksblock', 'adviceblock', 'nextvisitblock',
'content_section', 'content',
];
foreach (($placeholders ?? []) as $ph) {
$key = strtolower((string) $ph);
if (in_array($key, $hospitalSet, true)) {
$placeholderGroups['hospital'][] = $ph;
} elseif (in_array($key, $patientSet, true)) {
$placeholderGroups['patient'][] = $ph;
} elseif (in_array($key, $opdMasterSet, true)) {
$placeholderGroups['opd_master'][] = $ph;
} elseif (in_array($key, $opdConsultSet, true)) {
$placeholderGroups['opd_consult'][] = $ph;
} else {
$placeholderGroups['other'][] = $ph;
}
}
foreach ($placeholderGroups as $groupName => $groupValues) {
$groupValues = array_values(array_unique($groupValues));
natcasesort($groupValues);
$placeholderGroups[$groupName] = array_values($groupValues);
}
?>
<section class="content">
<div class="row">
<div class="col-md-8">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Edit Template Content</h3>
<div class="box-tools">
<button type="button" class="btn btn-default btn-sm" id="btn_back_to_list">Back to List</button>
</div>
</div>
<div class="box-body">
<?= csrf_field() ?>
<div class="row">
<div class="col-sm-6">
<label>Template Name</label>
<input type="text" id="tmpl_name" class="form-control" value="<?= esc($selected_name ?? 'default') ?>" placeholder="default">
<input type="hidden" id="tmpl_original_name" value="<?= esc($selected_name ?? '') ?>">
</div>
<div class="col-sm-6" style="padding-top:25px;">
<button type="button" class="btn btn-default" id="btn_new_part">New</button>
<button type="button" class="btn btn-default" id="btn_load_part">Edit</button>
<button type="button" class="btn btn-primary" id="btn_save_part">Save</button>
</div>
</div>
<div class="form-group" style="margin-top:10px;">
<label>Template HTML Content (for template id save/load)</label>
<textarea id="tmpl_content" class="form-control" rows="10" style="font-family:Consolas,monospace;"><?= esc($template_content ?? '') ?></textarea>
</div>
<div id="tmpl_msg" class="text-muted"></div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">Placeholders</h3>
</div>
<div class="box-body" style="max-height:280px; overflow:auto;">
<?php foreach (($placeholders ?? []) as $ph) : ?>
<span class="label label-default" style="display:inline-block; margin:2px;">{{<?= esc($ph) ?>}}</span>
<?php endforeach; ?>
</div>
</div>
<div class="alert alert-info">
<strong>Old-style (recommended):</strong> save a name (example: <strong>opd_print_parcha_chamunda_hospital_ksp</strong>), then set that name in doctor master fields:<br>
<code>opd_print_format</code>, <code>opd_blank_print</code>, <code>rx_pre_print_letter_head_format</code>, <code>rx_blank_letter_head</code>, <code>rx_plain_paper</code>.<br><br>
<strong>Optional composed mode:</strong> use <code>compose_default</code> with type-specific parts.
</div>
</div>
</div>
<style>
.opd-template-builder .box {
margin-bottom: 12px;
}
<div class="row" style="margin-top:10px;">
<div class="col-md-12">
.opd-template-builder .box-title {
font-weight: 600;
}
.opd-template-builder .section-note {
color: #666;
font-size: 12px;
margin-bottom: 8px;
}
.opd-template-builder .template-actions {
padding-top: 25px;
text-align: right;
}
.opd-template-builder .template-actions .btn {
margin-left: 6px;
}
.opd-template-builder .placeholder-list {
max-height: 300px;
overflow: auto;
border: 1px solid #eee;
padding: 8px;
border-radius: 4px;
background: #fafafa;
}
.opd-template-builder .placeholder-chip {
display: inline-block;
margin: 2px;
padding: 2px 6px;
border: 1px solid #d8d8d8;
border-radius: 3px;
background: #fff;
font-size: 11px;
color: #444;
}
.opd-template-builder .placeholder-group {
margin-bottom: 10px;
}
.opd-template-builder .placeholder-group-title {
font-size: 12px;
font-weight: 600;
color: #555;
margin-bottom: 6px;
}
.opd-template-builder .vars-list {
line-height: 1.7;
max-height: 240px;
overflow: auto;
border: 1px solid #d9edf7;
border-radius: 4px;
padding: 8px;
background: #f9fcff;
}
.opd-template-builder textarea {
resize: vertical;
}
.opd-template-builder .group-spacer {
margin-top: 10px;
}
.opd-template-builder .preview-frame {
width: 100%;
height: 560px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
}
</style>
<section class="content opd-template-builder">
<div class="row">
<div class="col-md-6">
<div class="box box-success" id="opd-paper-settings">
<div class="box-header with-border">
<h3 class="box-title">OPD Paper Print Settings</h3>
@ -92,7 +197,7 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
</select>
</div>
<div class="row" id="opd_custom_size_row" style="display:none; margin-top:-2px; margin-bottom:8px;">
<div class="row group-spacer" id="opd_custom_size_row" style="display:none; margin-bottom:8px;">
<div class="col-xs-6">
<label>Custom Width (mm)</label>
<input type="number" step="1" min="20" max="600" id="opd_custom_width" class="form-control input-sm" value="<?= esc($paperCustomWidth) ?>">
@ -104,59 +209,58 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
</div>
<div class="row" style="margin-top:6px;">
<div class="col-md-2 col-sm-4 col-xs-6" style="margin-bottom:8px;">
<div class="col-md-4 col-sm-6 col-xs-6" style="margin-bottom:8px;">
<label>Top (cm)</label>
<input type="number" step="0.1" min="0" max="25" id="opd_margin_top" class="form-control input-sm" value="<?= esc((string) ($paperSettings['page_margin_top_cm'] ?? '6.1')) ?>">
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="margin-bottom:8px;">
<div class="col-md-4 col-sm-6 col-xs-6" style="margin-bottom:8px;">
<label>Bottom (cm)</label>
<input type="number" step="0.1" min="0" max="25" id="opd_margin_bottom" class="form-control input-sm" value="<?= esc((string) ($paperSettings['page_margin_bottom_cm'] ?? '2.5')) ?>">
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="margin-bottom:8px;">
<div class="col-md-4 col-sm-6 col-xs-6" style="margin-bottom:8px;">
<label>Left (cm)</label>
<input type="number" step="0.1" min="0" max="25" id="opd_margin_left" class="form-control input-sm" value="<?= esc((string) ($paperSettings['page_margin_left_cm'] ?? '0.7')) ?>">
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="margin-bottom:8px;">
<div class="col-md-4 col-sm-6 col-xs-6" style="margin-bottom:8px;">
<label>Right (cm)</label>
<input type="number" step="0.1" min="0" max="25" id="opd_margin_right" class="form-control input-sm" value="<?= esc((string) ($paperSettings['page_margin_right_cm'] ?? '0.7')) ?>">
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="margin-bottom:8px;">
<div class="col-md-4 col-sm-6 col-xs-6" style="margin-bottom:8px;">
<label>Header (cm)</label>
<input type="number" step="0.1" min="0" max="25" id="opd_margin_header" class="form-control input-sm" value="<?= esc((string) ($paperSettings['margin_header_cm'] ?? '0.5')) ?>">
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="margin-bottom:8px;">
<div class="col-md-4 col-sm-6 col-xs-6" style="margin-bottom:8px;">
<label>Footer (cm)</label>
<input type="number" step="0.1" min="0" max="25" id="opd_margin_footer" class="form-control input-sm" value="<?= esc((string) ($paperSettings['margin_footer_cm'] ?? '1.5')) ?>">
</div>
</div>
<div class="form-group" style="margin-top:8px;">
<div class="form-group group-spacer">
<label>Header HTML</label>
<textarea id="opd_header_html" class="form-control input-sm" rows="4" style="font-family:Consolas,monospace;"><?= esc((string) ($paperSettings['header_html'] ?? '')) ?></textarea>
</div>
<div class="form-group" style="margin-top:8px;">
<div class="form-group group-spacer">
<label>Footer HTML</label>
<textarea id="opd_footer_html" class="form-control input-sm" rows="4" style="font-family:Consolas,monospace;"><?= esc((string) ($paperSettings['footer_html'] ?? '')) ?></textarea>
</div>
<div class="form-group" style="margin-top:8px;">
<div class="form-group group-spacer">
<label>HTML Content</label>
<textarea id="opd_paper_html_content" class="form-control input-sm" rows="8" style="font-family:Consolas,monospace;"><?= esc((string) ($paperSettings['paper_html_content'] ?? '')) ?></textarea>
</div>
<div class="form-group group-spacer">
<label>Custom CSS (for template-specific layout)</label>
<textarea id="opd_custom_style_css" class="form-control input-sm" rows="6" style="font-family:Consolas,monospace;" placeholder=".RxPlace { position:absolute; top:73mm; left:70mm; width:135mm; }"></textarea>
</div>
<div class="small text-muted" style="margin-bottom:8px;">
<strong>How it works:</strong><br>
1. Margin values (cm) auto-populate the CSS @page block<br>
2. <strong>Header HTML:</strong> Enter HTML for top of page (logo, hospital name, address, doctor info using {{variables}})<br>
3. <strong>Footer HTML:</strong> Enter HTML for bottom of page (print time, page number, etc. using {{variables}})<br>
4. <strong>HTML Content:</strong> Enter main body content between header and footer (patient info, diagnosis, etc.)<br><br>
<strong>Available variables:</strong><br>
Hospital: {{H_Name}}, {{H_address_1}}, {{H_address_2}}, {{H_phone_No}}, {{H_Email}}, {{H_logo}}<br>
Patient/OPD: {{pName}}, {{age_sex}}, {{phoneno}}, {{uhid_no}}, {{opd_no}}, {{opd_date}}<br>
Medical: {{Complaint}}, {{diagnosis}}, {{medical}}, {{advice}}, {{doctor_name}}, {{short_description}}, {{doctor_short_description}}, {{doctor_sign_html}}<br>
Dates: {{print_time}}, {{current_date}}<br>
Margins (cm): {{MarginTop}}, {{MarginBottom}}, {{MarginLeft}}, {{MarginRight}}, {{MarginHeader}}, {{MarginFooter}}
2. Header/Footer HTML define print header/footer blocks<br>
3. HTML Content is the main body between header and footer<br>
4. Custom CSS is optional and applies to template body elements (for exact letterhead positioning)
</div>
<button type="button" class="btn btn-success btn-sm" id="btn_save_opd_paper">Save OPD Print Settings</button>
@ -164,6 +268,99 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Template Preview: <?= esc($selectedTemplateName) ?></h3>
<div class="box-tools">
<button type="button" class="btn btn-default btn-sm" id="btn_back_to_list">Back to List</button>
</div>
</div>
<div class="box-body">
<?= csrf_field() ?>
<p class="section-note">Preview uses paper settings and renders in print-page style for mPDF-like output.</p>
<input type="hidden" id="tmpl_name" value="<?= esc($selectedTemplateName) ?>">
<input type="hidden" id="tmpl_original_name" value="<?= esc($selectedTemplateName) ?>">
<div class="form-group group-spacer">
<label>Preview Output</label>
<iframe id="tmpl_preview_frame" class="preview-frame"></iframe>
</div>
<div id="tmpl_msg" class="text-muted"></div>
</div>
</div>
<div class="box box-warning">
<div class="box-header with-border">
<h3 class="box-title">All Placeholders</h3>
</div>
<div class="box-body placeholder-list">
<div class="form-group" style="margin-bottom:8px;">
<input type="text" id="placeholder_search" class="form-control input-sm" placeholder="Search placeholders...">
</div>
<div class="placeholder-group" data-group="hospital">
<div class="placeholder-group-title">1. Hospital Related Placeholders</div>
<?php foreach (($placeholderGroups['hospital'] ?? []) as $ph) : ?>
<span class="placeholder-chip" data-placeholder="<?= esc(strtolower((string) $ph)) ?>">{{<?= esc($ph) ?>}}</span>
<?php endforeach; ?>
</div>
<div class="placeholder-group" data-group="patient">
<div class="placeholder-group-title">2. Patient Information</div>
<?php foreach (($placeholderGroups['patient'] ?? []) as $ph) : ?>
<span class="placeholder-chip" data-placeholder="<?= esc(strtolower((string) $ph)) ?>">{{<?= esc($ph) ?>}}</span>
<?php endforeach; ?>
</div>
<div class="placeholder-group" data-group="opd_master">
<div class="placeholder-group-title">3. OPD Master : OPD Date, Fee, Doctor Info</div>
<?php foreach (($placeholderGroups['opd_master'] ?? []) as $ph) : ?>
<span class="placeholder-chip" data-placeholder="<?= esc(strtolower((string) $ph)) ?>">{{<?= esc($ph) ?>}}</span>
<?php endforeach; ?>
</div>
<div class="placeholder-group" data-group="opd_consult">
<div class="placeholder-group-title">4. OPD Consult : from OPD Consult Form</div>
<?php foreach (($placeholderGroups['opd_consult'] ?? []) as $ph) : ?>
<span class="placeholder-chip" data-placeholder="<?= esc(strtolower((string) $ph)) ?>">{{<?= esc($ph) ?>}}</span>
<?php endforeach; ?>
</div>
<?php if (!empty($placeholderGroups['other'] ?? [])) : ?>
<div class="placeholder-group" data-group="other">
<div class="placeholder-group-title">Other</div>
<?php foreach (($placeholderGroups['other'] ?? []) as $ph) : ?>
<span class="placeholder-chip" data-placeholder="<?= esc(strtolower((string) $ph)) ?>">{{<?= esc($ph) ?>}}</span>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
</div>
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Placeholder Usage</h3>
</div>
<div class="box-body small vars-list">
<strong>Use placeholders with double curly braces:</strong><br>
<code>{{pName}}</code>, <code>{{opd_date}}</code>, <code>{{doctor_name}}</code><br><br>
<strong>Example:</strong><br>
Patient: <code>{{pName}}</code><br>
Date: <code>{{opd_date}}</code><br>
Doctor: <code>{{doctor_name}}</code><br><br>
<strong>Rule:</strong> The complete list is shown in <em>All Placeholders</em> above.
</div>
</div>
<div class="alert alert-info">
<strong>Old-style (recommended):</strong> save a name (example: <strong>opd_print_parcha_chamunda_hospital_ksp</strong>), then set that name in doctor master fields:<br>
<code>opd_print_format</code>, <code>opd_blank_print</code>, <code>rx_pre_print_letter_head_format</code>, <code>rx_blank_letter_head</code>, <code>rx_plain_paper</code>.<br><br>
<strong>Optional composed mode:</strong> use <code>compose_default</code> with type-specific parts.
</div>
</div>
</div>
</section>
@ -204,19 +401,29 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
return value.replace(/^[_-]+|[_-]+$/g, '');
}
document.getElementById('btn_load_part').addEventListener('click', function () {
var name = normalizeTemplateId(document.getElementById('tmpl_name').value || 'default');
if (!name) { name = 'default'; }
document.getElementById('tmpl_name').value = name;
load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=' + encodeURIComponent(name), 'maindiv', 'OPD Template Edit');
});
var placeholderSearch = document.getElementById('placeholder_search');
if (placeholderSearch) {
placeholderSearch.addEventListener('input', function () {
var query = (placeholderSearch.value || '').toLowerCase().trim();
var groups = document.querySelectorAll('.placeholder-group');
document.getElementById('btn_new_part').addEventListener('click', function () {
document.getElementById('tmpl_name').value = '';
document.getElementById('tmpl_content').value = '';
document.getElementById('tmpl_original_name').value = '';
setMsg('Enter new template name, then write HTML and click Save.', true);
});
groups.forEach(function (groupEl) {
var chips = groupEl.querySelectorAll('.placeholder-chip');
var visibleCount = 0;
chips.forEach(function (chipEl) {
var key = (chipEl.getAttribute('data-placeholder') || '').toLowerCase();
var isVisible = !query || key.indexOf(query) !== -1;
chipEl.style.display = isVisible ? 'inline-block' : 'none';
if (isVisible) {
visibleCount += 1;
}
});
groupEl.style.display = visibleCount > 0 ? 'block' : 'none';
});
});
}
function toggleCustomSize() {
var pageSize = document.getElementById('opd_page_size');
@ -237,6 +444,7 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
var header = document.getElementById('opd_header_html');
var footer = document.getElementById('opd_footer_html');
var body = document.getElementById('opd_paper_html_content');
var customCss = document.getElementById('opd_custom_style_css');
var pageBlock = '<style>@page {\n'
+ 'margin-top: ' + ((top && top.value) || '6.1') + 'cm;\n'
@ -270,7 +478,189 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
}
var bodyText = (body && body.value) ? body.value.trim() : '';
return pageBlock + headerBlock + footerBlock + bodyText;
var customCssText = (customCss && customCss.value) ? customCss.value.trim() : '';
var customStyleBlock = customCssText !== '' ? '<style>\n' + customCssText + '\n</style>\n\n' : '';
return pageBlock + headerBlock + footerBlock + customStyleBlock + bodyText;
}
function splitCustomCssAndBody(content) {
var source = (content || '').trim();
var cssList = [];
source = source.replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, function (full, inner) {
var cssText = (inner || '').trim();
if (!cssText) {
return '';
}
if (/@page\b/i.test(cssText)
|| /header\s*:\s*html_myHeader/i.test(cssText)
|| /footer\s*:\s*html_myFooter/i.test(cssText)) {
return '';
}
cssList.push(cssText);
return '';
});
return {
bodyHtml: source.trim(),
customCss: cssList.join('\n\n').trim()
};
}
function hydrateCustomCssFromBody() {
var bodyEl = document.getElementById('opd_paper_html_content');
var cssEl = document.getElementById('opd_custom_style_css');
if (!bodyEl || !cssEl) {
return;
}
var parsed = splitCustomCssAndBody(bodyEl.value || '');
bodyEl.value = parsed.bodyHtml || '';
cssEl.value = parsed.customCss || '';
}
function stripMpdfBlocks(html) {
var source = (html || '');
var headerHtml = '';
var footerHtml = '';
var customCss = [];
// Extract CSS first from the whole source so styles inside header/footer
// are preserved in preview (mPDF applies CSS globally).
source = source.replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, function (_, inner) {
var cssText = (inner || '').trim();
if (!cssText) {
return '';
}
if (/@page\b/i.test(cssText)
|| /header\s*:\s*html_myHeader/i.test(cssText)
|| /footer\s*:\s*html_myFooter/i.test(cssText)) {
return '';
}
customCss.push(cssText);
return '';
});
source = source.replace(/<htmlpageheader\b[^>]*name\s*=\s*["']myHeader["'][^>]*>([\s\S]*?)<\/htmlpageheader>/i, function (_, inner) {
headerHtml = inner || '';
return '';
});
source = source.replace(/<htmlpagefooter\b[^>]*name\s*=\s*["']myFooter["'][^>]*>([\s\S]*?)<\/htmlpagefooter>/i, function (_, inner) {
footerHtml = inner || '';
return '';
});
source = source.replace(/header\s*:\s*html_myHeader\s*;?/gi, '');
source = source.replace(/footer\s*:\s*html_myFooter\s*;?/gi, '');
return {
bodyHtml: source.trim(),
headerHtml: headerHtml.trim(),
footerHtml: footerHtml.trim(),
customCss: customCss.join('\n\n').trim()
};
}
function buildMpdfLikePreview(html) {
var parsed = stripMpdfBlocks(html);
var top = (document.getElementById('opd_margin_top') || {}).value || '6.1';
var bottom = (document.getElementById('opd_margin_bottom') || {}).value || '2.5';
var left = (document.getElementById('opd_margin_left') || {}).value || '0.7';
var right = (document.getElementById('opd_margin_right') || {}).value || '0.7';
var topCm = parseFloat(top) || 6.1;
var bottomCm = parseFloat(bottom) || 2.5;
var leftCm = parseFloat(left) || 0.7;
var rightCm = parseFloat(right) || 0.7;
var headerCm = parseFloat((document.getElementById('opd_margin_header') || {}).value || '0.5') || 0.5;
var footerCm = parseFloat((document.getElementById('opd_margin_footer') || {}).value || '1.5') || 1.5;
var pageWidth = '210mm';
var pageHeight = '297mm';
var pageSize = ((document.getElementById('opd_page_size') || {}).value || 'A4').toUpperCase();
if (pageSize === 'A4-L') {
pageWidth = '297mm';
pageHeight = '210mm';
} else if (pageSize === 'A5') {
pageWidth = '148mm';
pageHeight = '210mm';
} else if (pageSize === 'A6') {
pageWidth = '105mm';
pageHeight = '148mm';
} else if (pageSize === 'LETTER') {
pageWidth = '216mm';
pageHeight = '279mm';
} else if (pageSize === 'LEGAL') {
pageWidth = '216mm';
pageHeight = '356mm';
} else if (pageSize === 'CUSTOM') {
var cw = ((document.getElementById('opd_custom_width') || {}).value || '210');
var ch = ((document.getElementById('opd_custom_height') || {}).value || '297');
pageWidth = cw + 'mm';
pageHeight = ch + 'mm';
}
var liveHeader = ((document.getElementById('opd_header_html') || {}).value || '').trim();
var liveFooter = ((document.getElementById('opd_footer_html') || {}).value || '').trim();
var finalHeader = liveHeader !== '' ? liveHeader : (parsed.headerHtml || '').trim();
var finalFooter = liveFooter !== '' ? liveFooter : (parsed.footerHtml || '').trim();
var liveCustomCss = ((document.getElementById('opd_custom_style_css') || {}).value || '').trim();
var finalCustomCss = liveCustomCss !== '' ? liveCustomCss : (parsed.customCss || '').trim();
var hasHeader = finalHeader !== '';
var hasFooter = finalFooter !== '';
// Collapse extra white space when header/footer blocks are empty.
var contentTopCm = hasHeader ? topCm : Math.max(0.4, topCm * 0.35);
var contentBottomCm = hasFooter ? bottomCm : Math.max(0.4, bottomCm * 0.35);
// Keep footer visually near page bottom like mPDF page footer behavior.
// We reserve footer space in content padding so body text does not overlap footer.
var footerReserveCm = hasFooter ? Math.max(contentBottomCm, footerCm + 0.6) : contentBottomCm;
var headerBlock = hasHeader
? '<div class="header" style="padding:' + Math.max(0.2, headerCm * 0.6) + 'cm ' + leftCm + 'cm ' + Math.max(0.2, headerCm * 0.5) + 'cm ' + leftCm + 'cm;border-bottom:1px solid #eee;">' + finalHeader + '</div>'
: '';
var footerBlock = hasFooter
? '<div class="footer" style="padding:' + Math.max(0.2, footerCm * 0.4) + 'cm ' + leftCm + 'cm ' + Math.max(0.2, footerCm * 0.5) + 'cm ' + leftCm + 'cm;border-top:1px solid #eee;">' + finalFooter + '</div>'
: '';
return '<!doctype html><html><head><meta charset="utf-8">'
+ '<style>'
+ 'html,body{margin:0;padding:0;background:#f0f2f5;font-family:Arial,sans-serif;}'
+ '.sheet{width:' + pageWidth + ';min-height:' + pageHeight + ';margin:12px auto;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;flex-direction:column;overflow:hidden;}'
+ '.header{flex:0 0 auto;}'
+ '.content{flex:1 1 auto;padding:' + contentTopCm + 'cm ' + rightCm + 'cm ' + footerReserveCm + 'cm ' + leftCm + 'cm;}'
+ '.footer{flex:0 0 auto;margin-top:auto;}'
+ finalCustomCss
+ '</style></head><body>'
+ '<div class="sheet">'
+ headerBlock
+ '<div class="content">' + (parsed.bodyHtml || '') + '</div>'
+ footerBlock
+ '</div></body></html>';
}
function renderTemplatePreview() {
var frame = document.getElementById('tmpl_preview_frame');
if (!frame) {
return;
}
// Preview must always reflect current control values on this page.
var html = buildTemplateFromPaperFields();
frame.srcdoc = buildMpdfLikePreview(html);
}
var pageSizeSelect = document.getElementById('opd_page_size');
@ -278,81 +668,26 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
pageSizeSelect.addEventListener('change', toggleCustomSize);
}
toggleCustomSize();
hydrateCustomCssFromBody();
document.getElementById('btn_save_part').addEventListener('click', function () {
var name = normalizeTemplateId(document.getElementById('tmpl_name').value || '');
var originalName = normalizeTemplateId(document.getElementById('tmpl_original_name').value || '');
var content = document.getElementById('tmpl_content').value || '';
document.getElementById('tmpl_name').value = name;
if (!content.trim()) {
content = buildTemplateFromPaperFields();
var tmplContentEl = document.getElementById('tmpl_content');
if (tmplContentEl && content.trim()) {
tmplContentEl.value = content;
}
}
if (!name) {
setMsg('Template name required', false);
var previewInputIds = [
'opd_page_size', 'opd_custom_width', 'opd_custom_height',
'opd_margin_top', 'opd_margin_bottom', 'opd_margin_left', 'opd_margin_right',
'opd_margin_header', 'opd_margin_footer',
'opd_header_html', 'opd_footer_html', 'opd_paper_html_content', 'opd_custom_style_css'
];
previewInputIds.forEach(function (id) {
var el = document.getElementById(id);
if (!el) {
return;
}
var csrf = getCsrfPair();
var payload = {
section: 'full',
name: name,
content: content
};
payload[csrf.name] = csrf.value;
var saveTemplate = function () {
$.post('<?= base_url('Opd/print_template_save') ?>', payload, function (res) {
if (res && res.csrfName && res.csrfHash) {
var tokenInput = document.querySelector('input[name="' + res.csrfName + '"]');
if (tokenInput) tokenInput.value = res.csrfHash;
}
if (!res || Number(res.update || 0) !== 1) {
setMsg((res && res.error_text) ? res.error_text : 'Unable to save template', false);
return;
}
document.getElementById('tmpl_original_name').value = (res.name || name);
setMsg('Saved: ' + (res.section || 'full') + '/' + (res.name || name), true);
setTimeout(function () {
load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=' + encodeURIComponent(res.name || name), 'maindiv', 'OPD Template Edit');
}, 250);
}, 'json').fail(function () {
setMsg('Unable to save template', false);
});
};
if (originalName && originalName !== name) {
var renamePayload = {
old_name: originalName,
new_name: name
};
var renameCsrf = getCsrfPair();
renamePayload[renameCsrf.name] = renameCsrf.value;
$.post('<?= base_url('Opd/print_template_rename') ?>', renamePayload, function (renameRes) {
if (renameRes && renameRes.csrfName && renameRes.csrfHash) {
var renameTokenInput = document.querySelector('input[name="' + renameRes.csrfName + '"]');
if (renameTokenInput) renameTokenInput.value = renameRes.csrfHash;
}
if (!renameRes || Number(renameRes.update || 0) !== 1) {
setMsg((renameRes && renameRes.error_text) ? renameRes.error_text : 'Unable to rename template', false);
return;
}
document.getElementById('tmpl_original_name').value = name;
saveTemplate();
}, 'json').fail(function () {
setMsg('Unable to rename template', false);
});
return;
}
saveTemplate();
el.addEventListener('input', renderTemplatePreview);
el.addEventListener('change', renderTemplatePreview);
});
renderTemplatePreview();
var savePaperBtn = document.getElementById('btn_save_opd_paper');
if (savePaperBtn) {
savePaperBtn.addEventListener('click', function () {
@ -371,7 +706,15 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
margin_footer_cm: document.getElementById('opd_margin_footer').value || '1.5',
header_html: document.getElementById('opd_header_html').value || '',
footer_html: document.getElementById('opd_footer_html').value || '',
paper_html_content: document.getElementById('opd_paper_html_content').value || ''
paper_html_content: (function () {
var bodyVal = document.getElementById('opd_paper_html_content').value || '';
var cssVal = document.getElementById('opd_custom_style_css').value || '';
cssVal = cssVal.trim();
if (!cssVal) {
return bodyVal;
}
return '<style>\n' + cssVal + '\n</style>\n\n' + bodyVal;
})()
};
payload[csrf.name] = csrf.value;
@ -426,6 +769,8 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
} else {
setPaperMsg((res.notice || 'OPD print settings saved.'), true);
}
renderTemplatePreview();
}).fail(function () {
setPaperMsg('Unable to save OPD print settings', false);
}).always(function () {
@ -480,6 +825,8 @@ $paperCustomHeight = (string) ($paperSettings['custom_height_mm'] ?? '297');
document.getElementById('opd_footer_html').value = settings.footer_html || '';
document.getElementById('opd_paper_html_content').value = settings.paper_html_content || '';
toggleCustomSize();
hydrateCustomCssFromBody();
renderTemplatePreview();
setPaperMsg((res.notice || 'OPD print settings reset.'), true);
}).fail(function () {

19
app/Views/billing/opd_template_builder_list.php
View File

@ -4,16 +4,11 @@
<h1>OPD Print Template Builder</h1>
</div>
<div style="float:right; margin-top:8px;">
<?php $firstTemplate = !empty($template_names ?? []) ? (string) $template_names[0] : 'default'; ?>
<div class="btn-group btn-group-sm" role="group" aria-label="Template Navigation">
<button type="button" class="btn btn-primary" disabled>Template List</button>
<a class="btn btn-default" href="javascript:load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=<?= esc($firstTemplate) ?>','maindiv','OPD Template Edit');">Edit Template</a>
</div>
<button type="button" class="btn btn-success btn-sm" id="btn_new_template">+ Add New Template</button>
</div>
</div>
<ol class="breadcrumb">
<li><a href="javascript:load_form_div('<?= base_url('opd/appointment') ?>','maindiv','OPD Appointment');">OPD</a></li>
<li class="active">Template List</li>
<li>OPD Template List</li>
</ol>
</section>
@ -22,7 +17,7 @@
<div class="box-header with-border">
<h3 class="box-title">Templates</h3>
<div class="box-tools">
<button type="button" class="btn btn-success btn-sm" id="btn_new_template">+ Add New Template</button>
</div>
</div>
<div class="box-body">
@ -48,7 +43,7 @@
<td><?= (int) $idx + 1 ?></td>
<td><?= esc($nm) ?></td>
<td>
<a class="btn btn-primary btn-xs" href="javascript:load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=<?= esc($nm) ?>','maindiv','OPD Template Edit');">Edit</a>
<a class="btn btn-primary btn-xs" href="javascript:load_form('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=<?= esc($nm) ?>','maindiv','OPD Template Edit');">Edit</a>
<button type="button" class="btn btn-default btn-xs btn_rename_template" data-name="<?= esc($nm) ?>">Rename</button>
<button type="button" class="btn btn-danger btn-xs btn_delete_template" data-name="<?= esc($nm) ?>">Delete</button>
</td>
@ -102,7 +97,7 @@
return;
}
load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=' + encodeURIComponent(name), 'maindiv', 'OPD Template Edit');
load_form('<?= base_url('Opd/print_template_builder') ?>?mode=edit&name=' + encodeURIComponent(name), 'maindiv', 'OPD Template Edit');
});
var renameButtons = document.querySelectorAll('.btn_rename_template');
@ -148,7 +143,7 @@
}
setListMsg('Template renamed: ' + oldName + ' -> ' + (res.new_name || newName), true);
load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=list', 'maindiv', 'OPD Template List');
load_form('<?= base_url('Opd/print_template_builder') ?>?mode=list', 'maindiv', 'OPD Template List');
}, 'json').fail(function () {
setListMsg('Unable to rename template', false);
});
@ -187,7 +182,7 @@
}
setListMsg('Template deleted: ' + templateName, true);
load_form_div('<?= base_url('Opd/print_template_builder') ?>?mode=list', 'maindiv', 'OPD Template List');
load_form('<?= base_url('Opd/print_template_builder') ?>?mode=list', 'maindiv', 'OPD Template List');
}, 'json').fail(function () {
setListMsg('Unable to delete template', false);
});