git/admin-portal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

code improvement on how to pass data to modal on backlog

Browse Source
This commit is contained in:
Frederico Falcao 2025-05-30 12:37:34 +01:00
parent eb429fc05c
commit 30fde6928d
2 changed files with 42 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
tech/tabs/02-backlog/05_content.html.php
View File

@ -91,21 +91,12 @@
</td>
<td><?= htmlspecialchars($item['created']) ?></td>
<td>
<button class="btn btn-outline-info" onclick="viewBacklog(
'<?= htmlspecialchars($item['id']) ?>',
'<?= htmlspecialchars(addslashes($item['title'])) ?>',
'<?= htmlspecialchars(addslashes($item['desc'])) ?>',
'<?= htmlspecialchars($status) ?>',
'<?= htmlspecialchars($item['type'] ?? '') ?>',
'<?= htmlspecialchars($item['created']) ?>'
)" title="View Details"><i class="bi bi-info-circle"></i></button>
<button class="btn btn-outline-secondary" onclick="editBacklog(
'<?= htmlspecialchars($item['id']) ?>',
'<?= htmlspecialchars(addslashes($item['title'])) ?>',
'<?= htmlspecialchars(addslashes($item['desc'])) ?>',
'<?= htmlspecialchars($status) ?>',
'<?= htmlspecialchars($item['type'] ?? '') ?>'
)" title="Edit"><i class="bi bi-pencil"></i></button>
<button class="btn btn-outline-info" onclick="viewBacklog('<?= $item['id'] ?>')">
<i class="bi bi-info-circle"></i>
</button>
<button class="btn btn-outline-secondary" onclick="editBacklog('<?= $item['id'] ?>')">
<i class="bi bi-pencil"></i>
</button>
<form method="POST" class="d-inline" onsubmit="return confirm('Delete this backlog item?');" action="?tab=backlog">
<input type="hidden" name="delete_backlog_id" value="<?= htmlspecialchars($item['id']) ?>">
<button class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
@ -117,3 +108,7 @@
</tbody>
</table>
</div>
<script>
const backlogTickets = <?= json_encode(array_column($backlog, null, 'id'), JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP) ?>;
</script>

60
tech/tabs/02-backlog/07_javascript.js
View File

@ -1,15 +1,3 @@
function editBacklog(id, title, desc, status, type) {
document.getElementById('editBacklogId').value = id;
document.getElementById('editBacklogTitle').value = title;
document.getElementById('editBacklogDesc').value = desc;
document.getElementById('editBacklogStatus').value = status;
document.getElementById('editBacklogType').value = type;
const modalEl = document.getElementById('editBacklogModal');
const modal = new bootstrap.Modal(modalEl);
modal.show();
}
/**
* Escape HTML special characters in a string.
@ -23,34 +11,40 @@ function escapeHtml(unsafe) {
.replace(/'/g, '&#039;');
}
/**
* Show modal with backlog item details.
*/
function viewBacklog(id, title, desc, status, type, created) {
document.getElementById('viewBacklogTitle').textContent = title;
const descEl = document.getElementById('viewBacklogDesc');
const escapedDesc = escapeHtml(desc);
descEl.innerHTML = escapedDesc.replace(/\n/g, '<br>');
const statusBadge = document.getElementById('viewBacklogStatusBadge');
function editBacklog(id) {
const item = backlogTickets[id];
if (!item) return;
document.getElementById('editBacklogId').value = item.id;
document.getElementById('editBacklogTitle').value = item.title;
document.getElementById('editBacklogDesc').value = item.desc;
document.getElementById('editBacklogStatus').value = item.status;
document.getElementById('editBacklogType').value = item.type;
new bootstrap.Modal(document.getElementById('editBacklogModal')).show();
}
function viewBacklog(id) {
const item = backlogTickets[id];
if (!item) return;
document.getElementById('viewBacklogTitle').textContent = item.title;
document.getElementById('viewBacklogDesc').innerHTML = escapeHtml(item.desc).replace(/\n/g, '<br>');
document.getElementById('viewBacklogCreated').textContent = item.created;
const statusMap = { 'in progress': 'warning', 'done': 'success', 'cancelled': 'secondary' };
statusBadge.textContent = status.charAt(0).toUpperCase() + status.slice(1);
statusBadge.className = 'badge bg-' + (statusMap[status] || 'light');
document.getElementById('viewBacklogCreated').textContent = created;
const badge = document.getElementById('viewBacklogStatusBadge');
badge.className = 'badge bg-' + (statusMap[item.status] || 'light');
badge.textContent = item.status.charAt(0).toUpperCase() + item.status.slice(1);
const typeMap = {
'bug': 'bi-bug-fill text-danger',
'improvement': 'bi-tools text-success',
'nice-to-have': 'bi-star text-secondary'
};
const typeIcon = typeMap[type] || '';
const icon = typeMap[item.type] || '';
const typeEl = document.getElementById('viewBacklogType');
if (typeIcon) {
typeEl.innerHTML = `<i class="bi ${typeIcon}"></i> ${type.charAt(0).toUpperCase() + type.slice(1)}`;
} else {
typeEl.textContent = '';
}
typeEl.innerHTML = icon ? `<i class="bi ${icon}"></i> ${item.type}` : '';
const modalEl = document.getElementById('viewBacklogModal');
const modal = new bootstrap.Modal(modalEl);
modal.show();
new bootstrap.Modal(document.getElementById('viewBacklogModal')).show();
}