Merge pull request #340 from fasrc/ajk_tidyup

Tidyup
fasrc · Sep 23, 2024 · 3166d0b · 3166d0b
2 parents 5571811 + e79305b
commit 3166d0b
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 33 deletions.
diff --git a/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html b/coldfront/plugins/ifx/templates/plugins/ifx/billing_records.html
@@ -3,22 +3,21 @@
 {% 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/[email protected]/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 %}
 
 
 {% 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;
@@ -35,6 +34,12 @@
     #organizations {
         width: 400px;
     }
+    #delete-selected {
+        color: red;
+    }
+    #delete-selected:disabled {
+        color: grey;
+    }
     .result-header {
         font-size: 12pt;
         font-weight: bold;
@@ -54,12 +59,55 @@
     .righty {
         position: relative;
         float: right;
+        margin-left: 1em;
+    }
+    .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 +137,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 +270,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 +293,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',
@@ -234,7 +312,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
@@ -267,14 +344,25 @@
                         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)
+                }
             })
 
         })
     })(jQuery)
 
 </script>
 <div style="font-size: 10pt;">
+    <h2>Billing Records</h2>
     <div id="loading">
         <p>
             <div id="progressbar"></div>
@@ -299,23 +387,28 @@
     <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>
         </div>
         <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" disabled></input>
+        </div>
         <div style="clear: both;"></div>
     </div>
     <hr/>
     <div style="margin: 1em;">
         <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
@@ -3,30 +3,35 @@
 {% 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/[email protected]/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 %}
 Calculate Billing Month
 {% endblock %}
 
 
 {% 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
             });
@@ -47,6 +52,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()) {
@@ -57,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'},
@@ -67,14 +106,18 @@
                     {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',
                     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) {
@@ -127,6 +170,7 @@
 
 </script>
 <div style="font-size: 10pt;">
+    <h2>Calculate Billing Month</h2>
     <div id="loading">
         <p>
             <div id="progressbar"></div>
@@ -135,11 +179,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>
@@ -167,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
@@ -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])