Jared Vititoe
7695c6134c
- Add role=dialog/aria-modal/aria-labelledby to all 12 modal overlays (JS + PHP)
- Add aria-label="Close" to all 14 modal close buttons
- Add full ARIA combobox pattern to @mention autocomplete (listbox, option, aria-selected, aria-expanded)
- Add for= attributes to admin filter form labels (AuditLog, UserActivity, ApiKeys)
- Remove dead closeOnAdvancedSearchBackdropClick() from advanced-search.js
CSS/JS style cleanup:
- Move .ascii-banner static styles from JS inline to CSS class; add .ascii-banner--glow
- Add .ascii-banner-cursor, .loading-overlay--hiding, .has-overlay, tr[data-clickable]
- Add .animate-fadein/.animate-fadeout/.comment--deleting to ticket.css
- Add .lt-toast--hiding to base.css; remove opacity/transition inline JS
- Remove redundant cursor:pointer JS (already in th{} CSS rule)
- Remove trailing space in lt-select class attributes
Bug fixes:
- base.js: boot overlay opacity inline style was overriding .fade-out class opacity via
specificity (1000 vs 20), preventing the fade-out animation — removed
- ascii-banner.js: cursor used blink-caret (border-color only) instead of blink-cursor
(opacity-based), so the █ cursor never actually blinked — fixed
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
259 lines
13 KiB
PHP
259 lines
13 KiB
PHP
<?php
|
|
// Admin view for managing ticket templates
|
|
// Receives $templates from controller
|
|
require_once __DIR__ . '/../../middleware/SecurityHeadersMiddleware.php';
|
|
require_once __DIR__ . '/../../middleware/CsrfMiddleware.php';
|
|
$nonce = SecurityHeadersMiddleware::getNonce();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Template Management - Admin</title>
|
|
<link rel="icon" type="image/png" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/images/favicon.png">
|
|
<link rel="stylesheet" href="/assets/css/base.css">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/dashboard.css?v=20260320">
|
|
<link rel="stylesheet" href="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/css/ticket.css?v=20260320">
|
|
<script nonce="<?php echo $nonce; ?>" src="/assets/js/base.js"></script>
|
|
<script nonce="<?php echo $nonce; ?>" src="<?php echo $GLOBALS['config']['ASSETS_URL']; ?>/js/utils.js?v=20260320"></script>
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
window.CSRF_TOKEN = '<?php echo CsrfMiddleware::getToken(); ?>';
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="user-header">
|
|
<div class="user-header-left">
|
|
<a href="/" class="back-link">[ ← DASHBOARD ]</a>
|
|
<span class="admin-page-title">Admin: Templates</span>
|
|
</div>
|
|
<div class="user-header-right">
|
|
<?php if (isset($GLOBALS['currentUser'])): ?>
|
|
<span class="user-name">[ <?php echo htmlspecialchars(strtoupper($GLOBALS['currentUser']['display_name'] ?? $GLOBALS['currentUser']['username'])); ?> ]</span>
|
|
<span class="admin-badge">[ ADMIN ]</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ascii-frame-outer admin-container">
|
|
<span class="bottom-left-corner">╚</span>
|
|
<span class="bottom-right-corner">╝</span>
|
|
|
|
<div class="ascii-section-header">Ticket Template Management</div>
|
|
<div class="ascii-content">
|
|
<div class="ascii-frame-inner">
|
|
<div class="admin-header-row">
|
|
<h2>Ticket Templates</h2>
|
|
<button data-action="show-create-modal" class="btn">+ NEW TEMPLATE</button>
|
|
</div>
|
|
|
|
<p class="text-muted-green mb-1">
|
|
Templates pre-fill ticket creation forms with standard content for common ticket types.
|
|
</p>
|
|
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Template Name</th>
|
|
<th>Category</th>
|
|
<th>Type</th>
|
|
<th>Priority</th>
|
|
<th>Active</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php if (empty($templates)): ?>
|
|
<tr>
|
|
<td colspan="6" class="empty-state">No templates defined. Create templates to speed up ticket creation.</td>
|
|
</tr>
|
|
<?php else: ?>
|
|
<?php foreach ($templates as $tpl): ?>
|
|
<tr>
|
|
<td><strong><?php echo htmlspecialchars($tpl['template_name']); ?></strong></td>
|
|
<td><?php echo htmlspecialchars($tpl['category'] ?? 'Any'); ?></td>
|
|
<td><?php echo htmlspecialchars($tpl['type'] ?? 'Any'); ?></td>
|
|
<td>P<?php echo $tpl['default_priority'] ?? '4'; ?></td>
|
|
<td>
|
|
<span class="<?php echo ($tpl['is_active'] ?? 1) ? 'text-open' : 'text-closed'; ?>">
|
|
<?php echo ($tpl['is_active'] ?? 1) ? 'Active' : 'Inactive'; ?>
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<button data-action="edit-template" data-id="<?php echo $tpl['template_id']; ?>" class="btn btn-small">EDIT</button>
|
|
<button data-action="delete-template" data-id="<?php echo $tpl['template_id']; ?>" class="btn btn-small btn-danger">DELETE</button>
|
|
</td>
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
<?php endif; ?>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create/Edit Modal -->
|
|
<div class="lt-modal-overlay" id="templateModal" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
|
<div class="lt-modal lt-modal-lg">
|
|
<div class="lt-modal-header">
|
|
<span class="lt-modal-title" id="modalTitle">Create Template</span>
|
|
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
|
|
</div>
|
|
<form id="templateForm">
|
|
<input type="hidden" id="template_id" name="template_id">
|
|
<div class="lt-modal-body">
|
|
<div class="setting-row">
|
|
<label for="template_name">Template Name *</label>
|
|
<input type="text" id="template_name" name="template_name" required>
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="title_template">Title Template</label>
|
|
<input type="text" id="title_template" name="title_template" placeholder="Pre-filled title text">
|
|
</div>
|
|
<div class="setting-row">
|
|
<label for="description_template">Description Template</label>
|
|
<textarea id="description_template" name="description_template" rows="10" placeholder="Pre-filled description content"></textarea>
|
|
</div>
|
|
<div class="setting-grid-3">
|
|
<div class="setting-row setting-row-compact">
|
|
<label for="category">Category</label>
|
|
<select id="category" name="category">
|
|
<option value="">Any</option>
|
|
<option value="General">General</option>
|
|
<option value="Hardware">Hardware</option>
|
|
<option value="Software">Software</option>
|
|
<option value="Network">Network</option>
|
|
<option value="Security">Security</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-row setting-row-compact">
|
|
<label for="type">Type</label>
|
|
<select id="type" name="type">
|
|
<option value="">Any</option>
|
|
<option value="Maintenance">Maintenance</option>
|
|
<option value="Install">Install</option>
|
|
<option value="Task">Task</option>
|
|
<option value="Upgrade">Upgrade</option>
|
|
<option value="Issue">Issue</option>
|
|
<option value="Problem">Problem</option>
|
|
</select>
|
|
</div>
|
|
<div class="setting-row setting-row-compact">
|
|
<label for="priority">Priority</label>
|
|
<select id="priority" name="priority">
|
|
<option value="1">P1</option>
|
|
<option value="2">P2</option>
|
|
<option value="3">P3</option>
|
|
<option value="4" selected>P4</option>
|
|
<option value="5">P5</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="setting-row">
|
|
<label><input type="checkbox" id="is_active" name="is_active" checked> Active</label>
|
|
</div>
|
|
</div>
|
|
<div class="lt-modal-footer">
|
|
<button type="submit" class="lt-btn lt-btn-primary">SAVE</button>
|
|
<button type="button" class="lt-btn lt-btn-ghost" data-modal-close>CANCEL</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script nonce="<?php echo $nonce; ?>">
|
|
const templates = <?php echo json_encode($templates ?? []); ?>;
|
|
|
|
function showCreateModal() {
|
|
document.getElementById('modalTitle').textContent = 'Create Template';
|
|
document.getElementById('templateForm').reset();
|
|
document.getElementById('template_id').value = '';
|
|
document.getElementById('is_active').checked = true;
|
|
lt.modal.open('templateModal');
|
|
}
|
|
|
|
function closeModal() {
|
|
lt.modal.close('templateModal');
|
|
}
|
|
|
|
// Event delegation for data-action handlers
|
|
document.addEventListener('click', function(event) {
|
|
const target = event.target.closest('[data-action]');
|
|
if (!target) return;
|
|
|
|
const action = target.dataset.action;
|
|
switch (action) {
|
|
case 'show-create-modal':
|
|
showCreateModal();
|
|
break;
|
|
case 'edit-template':
|
|
editTemplate(target.dataset.id);
|
|
break;
|
|
case 'delete-template':
|
|
deleteTemplate(target.dataset.id);
|
|
break;
|
|
}
|
|
});
|
|
|
|
// Form submit handler
|
|
document.getElementById('templateForm').addEventListener('submit', function(e) {
|
|
saveTemplate(e);
|
|
});
|
|
|
|
if (window.lt) lt.keys.initDefaults();
|
|
|
|
function saveTemplate(e) {
|
|
e.preventDefault();
|
|
const data = {
|
|
template_id: document.getElementById('template_id').value,
|
|
template_name: document.getElementById('template_name').value,
|
|
title_template: document.getElementById('title_template').value,
|
|
description_template: document.getElementById('description_template').value,
|
|
category: document.getElementById('category').value || null,
|
|
type: document.getElementById('type').value || null,
|
|
default_priority: parseInt(document.getElementById('priority').value) || 4,
|
|
is_active: document.getElementById('is_active').checked ? 1 : 0
|
|
};
|
|
|
|
const url = '/api/manage_templates.php' + (data.template_id ? '?id=' + data.template_id : '');
|
|
const apiCall = data.template_id ? lt.api.put(url, data) : lt.api.post(url, data);
|
|
apiCall.then(result => {
|
|
if (result.success) {
|
|
window.location.reload();
|
|
} else {
|
|
lt.toast.error(result.error || 'Failed to save');
|
|
}
|
|
}).catch(err => lt.toast.error('Failed to save'));
|
|
}
|
|
|
|
function editTemplate(id) {
|
|
const tpl = templates.find(t => t.template_id == id);
|
|
if (!tpl) return;
|
|
|
|
document.getElementById('template_id').value = tpl.template_id;
|
|
document.getElementById('template_name').value = tpl.template_name;
|
|
document.getElementById('title_template').value = tpl.title_template || '';
|
|
document.getElementById('description_template').value = tpl.description_template || '';
|
|
document.getElementById('category').value = tpl.category || '';
|
|
document.getElementById('type').value = tpl.type || '';
|
|
document.getElementById('priority').value = tpl.default_priority || 4;
|
|
document.getElementById('is_active').checked = (tpl.is_active ?? 1) == 1;
|
|
document.getElementById('modalTitle').textContent = 'Edit Template';
|
|
lt.modal.open('templateModal');
|
|
}
|
|
|
|
function deleteTemplate(id) {
|
|
showConfirmModal('Delete Template', 'Delete this template?', 'error', function() {
|
|
lt.api.delete('/api/manage_templates.php?id=' + id)
|
|
.then(data => {
|
|
if (data.success) window.location.reload();
|
|
else lt.toast.error(data.error || 'Failed to delete');
|
|
}).catch(err => lt.toast.error('Failed to delete'));
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|