Refactored the activity table to use meaningful data attributes instead of CSS classes for JavaScript functionality.

This commit is contained in:
Beverly Nguyen
2025-08-07 12:29:15 -07:00
parent 4f82c69323
commit c779f38258
2 changed files with 14 additions and 10 deletions

View File

@@ -295,24 +295,28 @@
liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
const tableHeading = document.querySelector('#tableActivity h2');
const senderColumns = document.querySelectorAll('.sender-column');
const senderElements = [
document.querySelector('[data-column="sender"]'),
...document.querySelectorAll('[data-sender]')
];
const allRows = document.querySelectorAll('#activity-table tbody tr');
const caption = document.querySelector('#activity-table caption');
const table = document.getElementById('activity-table');
const caption = table.querySelector('caption');
if (selectedValue === 'individual') {
tableHeading.textContent = 'My activity';
caption.textContent = `Table showing the sent jobs for ${currentUserName}`;
senderColumns.forEach(col => {
col.style.display = 'none';
senderElements.forEach(el => {
if (el) el.style.display = 'none';
});
allRows.forEach(row => row.style.display = 'none');
const userRows = Array.from(allRows).filter(row => {
const senderCell = row.querySelector('.sender-column');
const rowSender = senderCell ? senderCell.textContent.trim() : '';
const senderCell = row.querySelector('[data-sender]');
const rowSender = senderCell ? senderCell.dataset.sender : '';
return rowSender === currentUserName;
});
@@ -333,8 +337,8 @@
tableHeading.textContent = 'Service activity';
caption.textContent = `Table showing the sent jobs for service`;
senderColumns.forEach(col => {
col.style.display = '';
senderElements.forEach(el => {
if (el) el.style.display = '';
});
allRows.forEach((row, index) => {

View File

@@ -30,7 +30,7 @@
<th scope="col" class="table-field-heading-first" id="jobId">Job ID#</th>
<th data-sortable scope="col" class="table-field-heading" scope="col">Template</th>
<th data-sortable scope="col" class="table-field-heading width-30">Job status</th>
<th data-sortable scope="col" role="columnheader" class="table-field-heading sender-column">Sender
<th data-sortable scope="col" role="columnheader" class="table-field-heading" data-column="sender">Sender
</th>
<th data-sortable scope="col" class="table-field-heading"># of Recipients</th>
</tr>
@@ -58,7 +58,7 @@
Sent on {{ job.processing_started|format_datetime_table }}
{% endif %}
</td>
<td class="table-field">{{ job.created_by.name }}</td>
<td class="table-field" data-sender="{{ job.created_by.name }}">{{ job.created_by.name }}</td>
<td class="table-field width-5">{{ job.notification_count }}</td>
</tr>
{% endfor %}