darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-07 05:08:25 -04:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

20
app/assets/javascripts/activityChart.js
View File

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

4
app/templates/views/dashboard/activity-table.html
View File

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