From 79e8f02ec66204fd51ef51e398ab4543010dfb9d Mon Sep 17 00:00:00 2001
From: Beverly Nguyen <Beverly.Nguyen@gsa.gov>
Date: Thu, 16 Jan 2025 18:17:27 -0800
Subject: [PATCH] refactor code partial

---
 .../views/dashboard/activity-chart.html       | 19 +++++
 .../views/dashboard/activity-table.html       | 56 ++++++++++++++
 app/templates/views/dashboard/dashboard.html  | 77 +------------------
 3 files changed, 79 insertions(+), 73 deletions(-)
 create mode 100644 app/templates/views/dashboard/activity-chart.html
 create mode 100644 app/templates/views/dashboard/activity-table.html

diff --git a/app/templates/views/dashboard/activity-chart.html b/app/templates/views/dashboard/activity-chart.html
new file mode 100644
index 000000000..b65a7c786
--- /dev/null
+++ b/app/templates/views/dashboard/activity-chart.html
@@ -0,0 +1,19 @@
+<h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</h2>
+<div id="activityChartContainer">
+    <form class="usa-form">
+        <label class="usa-label" for="options">Account</label>
+        <select class="usa-select margin-bottom-2" name="options" id="options">
+            <option value disabled>- Select -</option>
+            <option value="service" selected>{{ current_service.name }}</option>
+            <option value="individual">{{ current_user.name }}</option>
+        </select>
+    </form>
+    <div id="activityChart">
+        <div class="chart-header">
+            <div class="chart-subtitle">{{ current_service.name }} - last 7 days</div>
+            <div class="chart-legend" role="region" aria-label="Legend"></div>
+        </div>
+        <div class="chart-container" id="weeklyChart"></div>
+        <table id="weeklyTable" class="usa-sr-only usa-table"></table>
+    </div>
+</div>
diff --git a/app/templates/views/dashboard/activity-table.html b/app/templates/views/dashboard/activity-table.html
new file mode 100644
index 000000000..cbb7e0c87
--- /dev/null
+++ b/app/templates/views/dashboard/activity-table.html
@@ -0,0 +1,56 @@
+<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>
+
+            <thead class="table-field-headings">
+                <tr>
+                    <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.id }}">
+                    <td class="table-field jobid" role="rowheader">
+                        <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>
+                    <td class="table-field time-sent">
+                        {% if job.scheduled_for and not job.processing_finished %}
+                        Scheduled for
+                        {{ job.scheduled_for|format_datetime_table }}
+                        {% else %}
+                        {% if job.processing_finished %}
+                        Sent on {{job.processing_finished|format_datetime_table}}
+                        {% elif job.processing_started %}
+                        Sending since {{job.processing_started|format_datetime_table}}
+                        {% else %}
+                        Pending since {{job.created_at|format_datetime_table}}
+                        {% endif %}
+                        {% endif %}
+                    </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 %}
+                {% 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>
diff --git a/app/templates/views/dashboard/dashboard.html b/app/templates/views/dashboard/dashboard.html
index cd2167dcf..92518ed9c 100644
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -33,83 +33,14 @@
     </div>
     <div id="totalMessageTable" class="margin-0"></div>
 
-    <h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</h2>
-    <div id="activityChartContainer">
-      <form class="usa-form">
-        <label class="usa-label" for="options">Account</label>
-        <select class="usa-select margin-bottom-2" name="options" id="options">
-          <option value disabled>- Select -</option>
-          <option value="service" selected>{{ current_service.name }}</option>
-          <option value="individual">{{ current_user.name }}</option>
-        </select>
-      </form>
-      <div id="activityChart">
-        <div class="chart-header">
-          <div class="chart-subtitle">{{ current_service.name }} - last 7 days</div>
-          <div class="chart-legend" role="region" aria-label="Legend"></div>
-        </div>
-        <div class="chart-container" id="weeklyChart"></div>
-        <table id="weeklyTable" class="usa-sr-only usa-table"></table>
-      </div>
-    </div>
+    {% include 'views/dashboard/activity-chart.html'   %}
+
     <div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
 
+    {% include 'views/dashboard/activity-table.html'   %}
+
     {% if current_user.has_permissions('manage_service') %}{% endif %}
 
-    <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>
-
-          <thead class="table-field-headings">
-            <tr>
-              <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.id }}">
-                  <td class="table-field jobid" role="rowheader">
-                    <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>
-                  <td class="table-field time-sent">
-                    {% if job.scheduled_for and not job.processing_finished %}
-                      Scheduled for
-                      {{ job.scheduled_for|format_datetime_table }}
-                    {% else %}
-                        {% if job.processing_finished %}
-                          Sent on {{job.processing_finished|format_datetime_table}}
-                        {% elif job.processing_started %}
-                          Sending since {{job.processing_started|format_datetime_table}}
-                        {% else %}
-                          Pending since {{job.created_at|format_datetime_table}}
-                        {% endif %}
-                    {% endif %}
-                  </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 %}
-            {% 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>
     {{ ajax_block(partials, updates_url, 'template-statistics') }}
   </div>