refactor code

app/assets/javascripts/activityChart.js

@@ -1,7 +1,8 @@
 (function (window) {
 
     if (document.getElementById('activityChartContainer')) {
-
+        const tableContainer = document.getElementById('activityContainer');
+        const currentUserName = tableContainer.getAttribute('data-currentUserName');
         const COLORS = {
             delivered: '#0076d6',
             failed: '#fa9441',
@@ -270,27 +271,58 @@
         subTitle.textContent = `${selectedText} - last 7 days`;
         fetchData(selectedValue);
 
-        // Update ARIA live region
         const liveRegion = document.getElementById('aria-live-account');
         liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
 
-        // Switch tables based on dropdown selection
-        const selectedTable = selectedValue === "individual" ? "table1" : "table2";
-        const tables = document.querySelectorAll('.table-overflow-x-auto');
-        tables.forEach(function(table) {
-            table.classList.add('hidden'); // Hide all tables by adding the hidden class
-            table.classList.remove('visible'); // Ensure they are not visible
-        });
-        const tableToShow = document.getElementById(selectedTable);
-        tableToShow.classList.remove('hidden'); // Remove hidden class
-        tableToShow.classList.add('visible'); // Add visible class
+        const tableHeading = document.querySelector('#tableActivity h2');
+        const senderColumns = document.querySelectorAll('.sender-column');
+        const allRows = document.querySelectorAll('#activity-table tbody tr');
+        const caption = document.querySelector('#activity-table caption');
+
+        if (selectedValue === 'individual') {
+
+            tableHeading.textContent = 'My activity';
+            caption.textContent = `Table showing the sent jobs for ${currentUserName}`;
+
+            senderColumns.forEach(col => {
+            col.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() : '';
+                return rowSender === currentUserName;
+            });
+
+            userRows.slice(0, 5).forEach(row => {
+                row.style.display = '';
+            });
+        } else {
+
+            tableHeading.textContent = 'Service activity';
+            caption.textContent = `Table showing the sent jobs for service`;
+
+            senderColumns.forEach(col => {
+            col.style.display = '';
+            });
+
+            allRows.forEach((row, index) => {
+                row.style.display = (index < 5) ? '' : 'none';
+            });
+        }
     };
 
     document.addEventListener('DOMContentLoaded', function() {
         // Initialize activityChart chart and table with service data by default
         fetchData('service');
 
-        // Add event listener to the dropdown
+        const allRows = Array.from(document.querySelectorAll('#activity-table tbody tr'));
+        allRows.forEach((row, index) => {
+            row.style.display = (index < 5) ? '' : 'none';
+        });
+
         const dropdown = document.getElementById('options');
         dropdown.addEventListener('change', handleDropdownChange);
     });

app/main/views/dashboard.py

@@ -62,36 +62,18 @@ def service_dashboard(service_id):
     job_response = job_api_client.get_jobs(service_id)["data"]
     service_data_retention_days = 7
 
-    jobs = [
-        {
-            "job_id": job["id"],
-            "time_left": get_time_left(job["created_at"]),
-            "download_link": url_for(
-                ".view_job_csv", service_id=current_service.id, job_id=job["id"]
-            ),
-            "view_job_link": url_for(
-                ".view_job", service_id=current_service.id, job_id=job["id"]
-            ),
-            "created_at": job["created_at"],
-            "processing_finished": job.get("processing_finished"),
-            "processing_started": job.get("processing_started"),
-            "scheduled_for": job.get("scheduled_for"),
-            "notification_count": job["notification_count"],
-            "created_by": job["created_by"],
-            "template_name": job["template_name"],
-            "original_file_name": job["original_file_name"],
-        }
-        for job in job_response
-        if job["job_status"] != "cancelled"
-    ]
+    filtered_jobs = [job for job in job_response if job["job_status"] != "cancelled"]
+    sorted_jobs = sorted(filtered_jobs, key=lambda job: job["created_at"], reverse=True)
+
     return render_template(
         "views/dashboard/dashboard.html",
         updates_url=url_for(".service_dashboard_updates", service_id=service_id),
         partials=get_dashboard_partials(service_id),
-        jobs=sorted(jobs, key=lambda job: job["created_at"], reverse=True)[:5],
+        jobs=sorted_jobs,
         service_data_retention_days=service_data_retention_days,
         sms_sent=sms_sent,
         sms_allowance_remaining=sms_allowance_remaining,
+        service_id=service_id,
     )
 
 

app/templates/views/dashboard/dashboard.html

@@ -56,69 +56,30 @@
 
     {% if current_user.has_permissions('manage_service') %}{% endif %}
 
-    <div class="table-container">
-      <div id="table1" class="table-overflow-x-auto hidden">
-        <h2 class="margin-top-4 margin-bottom-1">My activity</h2>
-        <table class="usa-table job-table">
-          <caption class="usa-sr-only">Table showing the sent jobs for {{current_user.name}}</caption>
-          <thead class="table-field-headings">
-            <tr>
-              <th scope="col" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
-              <th data-sortable scope="col" class="table-field-heading"><span>Template</span></th>
-              <th data-sortable scope="col" class="table-field-heading"><span>Job status</span></th>
-              <th data-sortable scope="col" class="table-field-heading"><span># of Recipients</span></th>
-            </tr>
-          </thead>
-          <tbody>
-            {% if jobs %}
-              {% for job in jobs[:5] %}
-                {% if job.created_by.name == current_user.name %}
-                  {% set notification = job.notifications[0] %}
-                  <tr id="{{ job.job_id }}">
-                    <td class="table-field jobid" role="rowheader">
-                      <a class="usa-link" href="{{ job.view_job_link }}">
-                        {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
-                      </a>
-                    </td>
-                    <td class="table-field template">{{ job.template_name }}</td>
-                    <td class="table-field time-sent">Sent on
-                      {{ (job.processing_finished if job.processing_finished else job.processing_started
-                        if job.processing_started else job.created_at)|format_datetime_table }}
-                    </td>
-                    <td class="table-field count-of-recipients">{{ job.notification_count }}</td>
-                  </tr>
-                {% endif %}
-              {% endfor %}
-            {% else %}
-              <tr class="table-row">
-                <td class="table-empty-message" colspan="10">No batched job messages found &thinsp;(messages are kept for {{ service_data_retention_days }} days).</td>
-              </tr>
-            {% endif %}
-          </tbody>
-        </table>
-      </div>
+    <div class="table-container" id="activityContainer" data-currentUserName="{{ current_user.name }}">
+      <div id="tableActivity" class="table-overflow-x-auto">
+        <h2 id="table-heading" class="margin-top-4 margin-bottom-1">Service activity</h2>
+
+        <table class="usa-table job-table" id="activity-table">
+          <caption class="usa-sr-only">Table showing the sent jobs for {{current_service.name}}</caption>
 
-      <div id="table2" class="table-overflow-x-auto visible">
-        <h2 class="margin-top-4 margin-bottom-1">Service activity</h2>
-        <table class="usa-table job-table">
-          <caption class="usa-sr-only">Table showing the sent jobs for this service</caption>
           <thead class="table-field-headings">
             <tr>
-              <th scope="col" role="columnheader" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
-              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Template</span></th>
-              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Job status</span></th>
-              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Sender</span></th>
-              <th data-sortable scope="col" role="columnheader" class="table-field-heading"><span># of Recipients</span></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">Job status</th>
+              <th data-sortable scope="col" role="columnheader" class="table-field-heading sender-column">Sender</th>
+              <th data-sortable scope="col" class="table-field-heading"># of Recipients</th>
             </tr>
           </thead>
           <tbody>
             {% if jobs %}
               {% for job in jobs %}
                 {% set notification = job.notifications[0] %}
-                <tr id="{{ job.job_id }}">
+                <tr id="{{ job.id }}">
                   <td class="table-field jobid" role="rowheader">
-                    <a class="usa-link" href="{{ job.view_job_link }}">
-                      {{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
+                    <a class="usa-link" href="{{ url_for('.view_job', service_id=service_id, job_id=job.id )}}">
+                      {{ job.id[:8] if job.id else 'Manually entered number' }}
                     </a>
                   </td>
                   <td class="table-field template">{{ job.template_name }}</td>
@@ -136,7 +97,7 @@
                         {% endif %}
                     {% endif %}
                   </td>
-                  <td class="table-field sender">{{ job.created_by.name }}</td>
+                  <td class="table-field sender sender-column">{{ job.created_by.name }}</td>
                   <td class="table-field count-of-recipients">{{ job.notification_count }}</td>
                 </tr>
               {% endfor %}