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

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

@ -91,29 +91,24 @@
</td> </td>
<td><?= htmlspecialchars($item['created']) ?></td> <td><?= htmlspecialchars($item['created']) ?></td>
<td> <td>
<button class="btn btn-outline-info" onclick="viewBacklog( <button class="btn btn-outline-info" onclick="viewBacklog('<?= $item['id'] ?>')">
'<?= htmlspecialchars($item['id']) ?>', <i class="bi bi-info-circle"></i>
'<?= htmlspecialchars(addslashes($item['title'])) ?>', </button>
'<?= htmlspecialchars(addslashes($item['desc'])) ?>', <button class="btn btn-outline-secondary" onclick="editBacklog('<?= $item['id'] ?>')">
'<?= htmlspecialchars($status) ?>', <i class="bi bi-pencil"></i>
'<?= htmlspecialchars($item['type'] ?? '') ?>', </button>
'<?= htmlspecialchars($item['created']) ?>' <form method="POST" class="d-inline" onsubmit="return confirm('Delete this backlog item?');" action="?tab=backlog">
)" title="View Details"><i class="bi bi-info-circle"></i></button> <input type="hidden" name="delete_backlog_id" value="<?= htmlspecialchars($item['id']) ?>">
<button class="btn btn-outline-secondary" onclick="editBacklog( <button class="btn btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
'<?= htmlspecialchars($item['id']) ?>', </form>
'<?= htmlspecialchars(addslashes($item['title'])) ?>', &nbsp;&nbsp;&nbsp;&nbsp;
'<?= htmlspecialchars(addslashes($item['desc'])) ?>',
'<?= htmlspecialchars($status) ?>',
'<?= htmlspecialchars($item['type'] ?? '') ?>'
)" title="Edit"><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>
</form>
&nbsp;&nbsp;&nbsp;&nbsp;
</td> </td>
</tr> </tr>
<?php endforeach; ?> <?php endforeach; ?>
</tbody> </tbody>
</table> </table>
</div> </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. * Escape HTML special characters in a string.
@ -23,34 +11,40 @@ function escapeHtml(unsafe) {
.replace(/'/g, '&#039;'); .replace(/'/g, '&#039;');
} }
/** function editBacklog(id) {
* Show modal with backlog item details. const item = backlogTickets[id];
*/ if (!item) return;
function viewBacklog(id, title, desc, status, type, created) {
document.getElementById('viewBacklogTitle').textContent = title; document.getElementById('editBacklogId').value = item.id;
const descEl = document.getElementById('viewBacklogDesc'); document.getElementById('editBacklogTitle').value = item.title;
const escapedDesc = escapeHtml(desc); document.getElementById('editBacklogDesc').value = item.desc;
descEl.innerHTML = escapedDesc.replace(/\n/g, '<br>'); document.getElementById('editBacklogStatus').value = item.status;
const statusBadge = document.getElementById('viewBacklogStatusBadge'); 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' }; const statusMap = { 'in progress': 'warning', 'done': 'success', 'cancelled': 'secondary' };
statusBadge.textContent = status.charAt(0).toUpperCase() + status.slice(1); const badge = document.getElementById('viewBacklogStatusBadge');
statusBadge.className = 'badge bg-' + (statusMap[status] || 'light'); badge.className = 'badge bg-' + (statusMap[item.status] || 'light');
document.getElementById('viewBacklogCreated').textContent = created; badge.textContent = item.status.charAt(0).toUpperCase() + item.status.slice(1);
const typeMap = { const typeMap = {
'bug': 'bi-bug-fill text-danger', 'bug': 'bi-bug-fill text-danger',
'improvement': 'bi-tools text-success', 'improvement': 'bi-tools text-success',
'nice-to-have': 'bi-star text-secondary' 'nice-to-have': 'bi-star text-secondary'
}; };
const typeIcon = typeMap[type] || ''; const icon = typeMap[item.type] || '';
const typeEl = document.getElementById('viewBacklogType'); const typeEl = document.getElementById('viewBacklogType');
if (typeIcon) { typeEl.innerHTML = icon ? `<i class="bi ${icon}"></i> ${item.type}` : '';
typeEl.innerHTML = `<i class="bi ${typeIcon}"></i> ${type.charAt(0).toUpperCase() + type.slice(1)}`;
} else {
typeEl.textContent = '';
}
const modalEl = document.getElementById('viewBacklogModal'); new bootstrap.Modal(document.getElementById('viewBacklogModal')).show();
const modal = new bootstrap.Modal(modalEl);
modal.show();
} }