From 8f38ea309199718ee458b37b7dea9799c59bba74 Mon Sep 17 00:00:00 2001
From: Aaron Kitzmiller <aaron.kitzmiller@gmail.com>
Date: Tue, 3 Sep 2024 13:10:18 -0400
Subject: [PATCH 1/4] Add js-cookie Set a cookie for year, month, and errors
 only so that back and forth doesn't require resetting the values Set default
 to last month when cookies aren't set.

---
 .../plugins/ifx/calculate_billing_month.html  | 38 ++++++++++++++++---
 coldfront/templates/common/base.html          |  2 +
 2 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html b/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html
index de19046f4..f57a75986 100644
--- a/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html
+++ b/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html
@@ -3,6 +3,10 @@
 {% load crispy_forms_tags %}
 {% load static %}
 
+{% block ifx_head %}
+<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
+{% endblock %}
+
 {% block title %}
 Calculate Billing Month
 {% endblock %}
@@ -47,6 +51,30 @@
                     dialog.dialog("close");
                 });
 
+
+            // Get month and year cookie and errorsOnly if it exists using js-cookie
+            var year = Cookies.get('coldfront-billing-year') || new Date().getFullYear()
+            var month = Cookies.get('coldfront-billing-month') || new Date().getMonth() - 1
+            var errorsOnly = Cookies.get('coldfront-billing-errors-only') || false
+            $("#year").val(year)
+            $("#month").val(month)
+            $("#errorsOnly").prop('checked', errorsOnly)
+
+            // Set month and year cookie when changed
+            $("#year").change(function() {
+                Cookies.set('coldfront-billing-year', $(this).val())
+            })
+            $("#month").change(function() {
+                Cookies.set('coldfront-billing-month', $(this).val())
+            })
+            $("#errorsOnly").change(function() {
+                if ($(this).is(":checked")) {
+                    Cookies.set('coldfront-billing-errors-only', 'true')
+                } else {
+                    Cookies.remove('coldfront-billing-errors-only')
+                }
+            })
+
             $("#productUsageReload").click((ev) => {
                 ev.preventDefault()
                 if (!$("#year").val() || !$("#month").val()) {
@@ -74,7 +102,7 @@
                     data: function (d)  {
                         d.year = $("#year").val()
                         d.month = $("#month").val()
-                        d.errors_only = $("#errors_only").is(":checked") ? 'true' : 'false'
+                        d.errors_only = $("#errorsOnly").is(":checked") ? 'true' : 'false'
                     },
                     dataSrc: '',
                     error: function (jqXHR, status, error) {
@@ -135,11 +163,11 @@
     <div style="margin: 1em; width: 100%;">
         <div style="position: relative; float: left;">
             <label for="year">Year</label>
-            <input type="text" id="year" name="year" value="2024"/>
+            <input type="text" id="year" name="year"/>
             <label for="month">Month</label>
-            <input type="text" id="month" name="month" value="5"/>
-            <label for="errors_only">Errors Only</label>
-            <input type="checkbox" id="errors_only" name="errors_only"/>
+            <input type="text" id="month" name="month"/>
+            <label for="errorsOnly">Errors Only</label>
+            <input type="checkbox" id="errorsOnly" name="errorsOnly"/>
         </div>
         <div style="position: relative; float: left; margin-left: 1em;">
             <input id="productUsageReload" type="submit" value="Reload Data"></input>
diff --git a/coldfront/templates/common/base.html b/coldfront/templates/common/base.html
index f8f88968a..b7299a14a 100644
--- a/coldfront/templates/common/base.html
+++ b/coldfront/templates/common/base.html
@@ -44,6 +44,8 @@
    <!-- Custom -->
   <link rel="stylesheet" href="{% static 'common/css/common.css' %}">
 
+  {% block ifx_head %}{% endblock %}
+
   <title>{% block title %}FAS Research Computing | HARVARD UNIVERSITY {% endblock %}</title>
 </head>
 

From 09c8e95b85c769446421861612f549412ed7d176 Mon Sep 17 00:00:00 2001
From: Aaron Kitzmiller <aaron.kitzmiller@gmail.com>
Date: Tue, 3 Sep 2024 17:33:03 -0400
Subject: [PATCH 2/4] Updated jquery DataTable with "selectable rows" plugin,
 "layout" option for element placement Setting year and month by cookie if
 set; defaults to last month otherwise Errors only also cookie set Selected
 rows in billing record table can be deleted; can reset a lab when combined
 with the right search

---
 .../plugins/ifx/billing_records.html          | 103 +++++++++++++++---
 .../plugins/ifx/calculate_billing_month.html  |  40 +++++--
 coldfront/plugins/ifx/views.py                |   5 +-
 3 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
index af59e93eb..4413f75a3 100644
--- a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
+++ b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
@@ -3,6 +3,14 @@
 {% load crispy_forms_tags %}
 {% load static %}
 
+{% block ifx_head %}
+<link rel="stylesheet" href="https://cdn.datatables.net/2.1.5/css/dataTables.dataTables.min.css"></style>
+<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
+<script src="https://cdn.datatables.net/2.1.5/js/dataTables.js"></script>
+<script src="https://cdn.datatables.net/select/2.0.5/js/dataTables.select.js"></script>
+<script src="https://cdn.datatables.net/select/2.0.5/js/select.dataTables.js"></script>
+{% endblock %}
+
 {% block title %}
 Billing Records
 {% endblock %}
@@ -10,15 +18,6 @@
 
 {% block content %}
 <style>
-    .dataTables_filter {
-        display: inline-flex;
-        margin: 0 0.5em 0 0;
-    }
-    .dataTables_length {
-        display: inline-flex;
-        margin: 0 0.5em 0 0;
-        float: right;
-    }
     #notification-errors {
         margin: 1em 0 0.5em 1em;
         font-size: 10pt;
@@ -55,11 +54,53 @@
         position: relative;
         float: right;
     }
+    .dt-input {
+        margin: 0 0 0 1em;
+        width: 300px;
+    }
 </style>
 <script>
     (function($){
         $(document).ready(function(){
+            var token = '{{ auth_token }}'
+            function deleteSelectedBillingRecords() {
+                const delete_url_template = '{{ delete_url }}'
+                const promises = []
+                const errors = []
+                billingRecordsTable.rows({selected: true}).data().each((row) => {
+                    const delete_url = delete_url_template.replace('0', row.id)
+                    promises.push(
+                        $.ajax({
+                            headers: {
+                                'X-CSRFToken': Cookies.get('csrftoken'),
+                                'sessionid': Cookies.get('sessionid'),
+                                'Authorization': `Token ${token}`,
+                            },
+                            url: delete_url,
+                            type: 'DELETE',
+                            error: function (jqXHR, status, error) {
+                                errors.push(`Error for row ${row.id}: ${status} ${error}`)
+                            }
+                        })
+                    )
 
+                })
+                Promise.allSettled(promises).then(() => {
+                    if (errors.length) {
+                        alert(errors.join('\n'))
+                    }
+                    billingRecordsTable.ajax.reload()
+                }).catch(() => {
+                    if (errors.length) {
+                        alert(errors.join('\n'))
+                    }
+                    billingRecordsTable.ajax.reload()
+                })
+            }
+            $("#delete-selected").click((ev) => {
+                ev.preventDefault()
+                deleteSelectedBillingRecords()
+            })
             $( "#progressbar" ).progressbar({
                 value: false
             });
@@ -89,6 +130,20 @@
                     dialog.dialog("close")
                 });
 
+            // Get month and year cookie and errorsOnly if it exists using js-cookie
+            var year = Cookies.get('coldfront-billing-year') || new Date().getFullYear()
+            var month = Cookies.get('coldfront-billing-month') || new Date().getMonth() - 1
+            $("#year").val(year)
+            $("#month").val(month)
+
+            // Set month and year cookie when changed
+            $("#year").change(function() {
+                Cookies.set('coldfront-billing-year', $(this).val())
+            })
+            $("#month").change(function() {
+                Cookies.set('coldfront-billing-month', $(this).val())
+            })
+
             var organizationSource = []
             $.ajax({
                 url: '/ifx/api/get-org-names/',
@@ -208,9 +263,21 @@
                     })
                 }
             })
+            DataTable.defaults.layout = {
+                topStart: null,
+                topEnd: null,
+                bottomStart: null,
+                bottomEnd: null,
+            };
             var billingRecordsTable = $("#billing-records").DataTable({
-                dom: '<fl>tp',
+                layout: {
+                    topStart: 'search',
+                    topEnd: 'pageLength',
+                    bottomStart: 'paging',
+                },
                 columns: [
+                    {render: DataTable.render.select(), orderable: false, targets: 0},
+                    {data: 'id'},
                     {data: function(item){ return item.current_state.replace(/_/g, ' ')}, width: '200px'},
                     {data: 'product_usage.product_user.full_name', width: '100px'},
                     {data: function(item){ return item.account.organization.replace(/ \(a Harvard.*/, '')}, width: '300px'},
@@ -219,7 +286,11 @@
                     {data: 'percent', width: '50px'},
                     {data: 'description', width: '500px'},
                 ],
-                order: [[ 2, "asc" ], [ 1, "asc" ]],
+                select: {
+                    style: 'os',
+                    selector: 'td:first-child'
+                },
+                order: [[ 4, "asc" ], [ 1, "asc" ]],
                 ajax: {
                     url: '/ifx/api/billing/get-billing-record-list/',
                     type: 'GET',
@@ -275,6 +346,7 @@
 
 </script>
 <div style="font-size: 10pt;">
+    <h2>Billing Records</h2>
     <div id="loading">
         <p>
             <div id="progressbar"></div>
@@ -299,9 +371,9 @@
     <div style="margin: 1em; width: 100%;">
         <div class="lefty">
             <label for="year">Year</label>
-            <input type="text" id="year" name="year" value="2024"/>
+            <input type="text" id="year" name="year"/>
             <label for="month">Month</label>
-            <input type="text" id="month" name="month" value="5"/>
+            <input type="text" id="month" name="month"/>
         </div>
         <div class="lefty">
             <input id="billing-record-reload" type="submit" value="Reload Data"></input>
@@ -309,6 +381,9 @@
         <div class="righty">
             <input id="start-notification" type="submit" value="Notify Lab Managers"></input>
         </div>
+        <div class="righty">
+            <input id="delete-selected" type="submit" value="Delete Selected"></input>
+        </div>
         <div style="clear: both;"></div>
     </div>
     <hr/>
@@ -316,6 +391,8 @@
         <table id="billing-records" class="display" style="width: 100%" cellpadding="5px">
             <thead>
                 <tr>
+                    <th></th>
+                    <th>Id</th>
                     <th>State</th>
                     <th>User</th>
                     <th>Lab</th>
diff --git a/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html b/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html
index f57a75986..db386b09d 100644
--- a/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html
+++ b/coldfront/plugins/ifx/templates/plugins/ifx/calculate_billing_month.html
@@ -4,7 +4,11 @@
 {% load static %}
 
 {% block ifx_head %}
+<link rel="stylesheet" href="https://cdn.datatables.net/2.1.5/css/dataTables.dataTables.min.css"></style>
 <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
+<script src="https://cdn.datatables.net/2.1.5/js/dataTables.js"></script>
+<script src="https://cdn.datatables.net/select/2.0.5/js/dataTables.select.js"></script>
+<script src="https://cdn.datatables.net/select/2.0.5/js/select.dataTables.js"></script>
 {% endblock %}
 
 {% block title %}
@@ -14,23 +18,20 @@
 
 {% block content %}
 <style>
-    .dataTables_filter {
-        display: inline-flex;
-        margin: 0 0.5em 0 0;
-    }
-    .dataTables_length {
-        display: inline-flex;
-        margin: 0 0.5em 0 0;
-        float: right;
-    }
     label {
         margin: 0 0 0 1em;
     }
+    .dt-input {
+        margin: 0 0 0 1em;
+        width: 200px;
+    }
 </style>
 <script>
     (function($){
         $(document).ready(function(){
 
+
+
             $( "#progressbar" ).progressbar({
                 value: false
             });
@@ -85,8 +86,18 @@
                 }
             })
 
+            DataTable.defaults.layout = {
+                topStart: null,
+                topEnd: null,
+                bottomStart: null,
+                bottomEnd: null,
+            };
             var productUsagesTable = $("#product-usages").DataTable({
-                dom: '<fl>tp',
+                layout: {
+                    topStart: 'search',
+                    topEnd: 'pageLength',
+                    bottomStart: 'paging',
+                },
                 columns: [
                     {data: 'id', width: '100px'},
                     {data: 'full_name', width: '200px'},
@@ -95,7 +106,11 @@
                     {data: 'description', width: '500px'},
                     {data: 'error_message', width: '400px'},
                 ],
-                order: [[ 2, "asc" ], [ 1, "asc" ]],
+                order: [[ 3, "asc" ], [ 2, "asc" ]],
+                select: {
+                    style: 'os',
+                    selector: 'td:first-child'
+                },
                 ajax: {
                     url: '/ifx/api/get-product-usages/',
                     type: 'GET',
@@ -155,6 +170,7 @@
 
 </script>
 <div style="font-size: 10pt;">
+    <h2>Calculate Billing Month</h2>
     <div id="loading">
         <p>
             <div id="progressbar"></div>
@@ -195,7 +211,7 @@
     </div>
     <hr/>
     <div style="margin: 1em;">
-        <table id="product-usages" class="display" style="width: 100%" cellpadding="5px">
+        <table id="product-usages" class="display" cellpadding="5px">
             <thead>
                 <tr>
                     <th>ID</th>
diff --git a/coldfront/plugins/ifx/views.py b/coldfront/plugins/ifx/views.py
index 4bdee1be5..97cbffe5a 100644
--- a/coldfront/plugins/ifx/views.py
+++ b/coldfront/plugins/ifx/views.py
@@ -12,6 +12,7 @@
 from django.db import connection
 from django.conf import settings
 from django.core.exceptions import PermissionDenied
+from django.urls import reverse
 from django_q.tasks import async_task
 from rest_framework.decorators import api_view, permission_classes, authentication_classes
 from rest_framework.response import Response
@@ -79,7 +80,9 @@ def billing_records(request):
     '''
     if not request.user.is_superuser:
         raise PermissionDenied
-    return render(request, 'plugins/ifx/billing_records.html')
+    delete_url = reverse('billing-record-detail', kwargs={'pk': 0})
+    token = request.user.auth_token.key
+    return render(request, 'plugins/ifx/billing_records.html', { 'delete_url': delete_url, 'auth_token': token })
 
 @api_view(['GET',])
 @authentication_classes([TokenAuthentication, SessionAuthentication, BasicAuthentication])

From 7d5769777d457542203e1bf9a9b4bed59fe8476e Mon Sep 17 00:00:00 2001
From: Aaron Kitzmiller <aaron.kitzmiller@gmail.com>
Date: Tue, 3 Sep 2024 17:44:39 -0400
Subject: [PATCH 3/4] Don't enable delete button until some are selected

---
 .../templates/plugins/ifx/billing_records.html    | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
index 4413f75a3..627aeca0e 100644
--- a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
+++ b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
@@ -305,7 +305,6 @@
                         alert(status + ' ' + error)
                     },
                 },
-                {% comment %}
                 footerCallback: function (row, data, start, end, display) {
                     // THIS DOES NOT WORK because the ajax call is not done yet
                     // Leaving it here, because I'd like to find a fix
@@ -338,7 +337,17 @@
                         api.column(4).footer().innerHTML =
                             '$' + pageTotal + ' ( $' + total + ' total)';
                     }
-                } {% endcomment %}
+                }
+            })
+            billingRecordsTable.on('select', function (e, dt, type, indexes) {
+                $('#delete-selected').prop('disabled', false)
+            })
+            billingRecordsTable.on('deselect', function (e, dt, type, indexes) {
+                if (type === 'row' && billingRecordsTable.rows({selected: true}).count() > 0) {
+                    $('#delete-selected').prop('disabled', false)
+                } else {
+                    $('#delete-selected').prop('disabled', true)
+                }
             })
 
         })
@@ -382,7 +391,7 @@ <h2>Billing Records</h2>
             <input id="start-notification" type="submit" value="Notify Lab Managers"></input>
         </div>
         <div class="righty">
-            <input id="delete-selected" type="submit" value="Delete Selected"></input>
+            <input id="delete-selected" type="submit" value="Delete Selected" disabled></input>
         </div>
         <div style="clear: both;"></div>
     </div>

From e79305b097dd6f06f22bbc7e13557e7096b59023 Mon Sep 17 00:00:00 2001
From: Aaron Kitzmiller <aaron.kitzmiller@gmail.com>
Date: Tue, 3 Sep 2024 18:32:06 -0400
Subject: [PATCH 4/4] Disabled delete button until selection

---
 .../plugins/ifx/templates/plugins/ifx/billing_records.html | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
index 627aeca0e..156afe1cf 100644
--- a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
+++ b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
@@ -34,6 +34,12 @@
     #organizations {
         width: 400px;
     }
+    #delete-selected {
+        color: red;
+    }
+    #delete-selected:disabled {
+        color: grey;
+    }
     .result-header {
         font-size: 12pt;
         font-weight: bold;
@@ -53,6 +59,7 @@
     .righty {
         position: relative;
         float: right;
+        margin-left: 1em;
     }
     .dt-input {
         margin: 0 0 0 1em;