koha-tmpl/intranet-tmpl/prog/js/ill-batch-table.js

   1 (function () {
   2     var table;
   3     var batchesProxy;
   4
   5     window.addEventListener('load', onload);
   6
   7     function onload() {
   8         // Only proceed if appropriate
   9         if (!document.getElementById('ill-batch-requests')) return;
  10
  11         // A proxy that will give us some element of reactivity to
  12         // changes in our list of batches
  13         batchesProxy = new Proxy(
  14             { data: [] },
  15             {
  16                 get: function (obj, prop) {
  17                     return obj[prop];
  18                 },
  19                 set: function (obj, prop, value) {
  20                     obj[prop] = value;
  21                     updateTable();
  22                 }
  23             }
  24         );
  25
  26         // Initialise the Datatable, binding it to our proxy object
  27         table = initTable();
  28
  29         // Do the initial data population
  30         window.doBatchApiRequest( '?_per_page=-1', {
  31                 headers: {
  32                     'x-koha-embed': '+strings,requests+count,patron'
  33                 }
  34             })
  35             .then(function(response) {
  36                 return response.json();
  37             })
  38             .then(function(data) {
  39                 batchesProxy.data = data;
  40             });
  41
  42         // Clean up any event listeners we added
  43         window.addEventListener('beforeunload', removeEventListeners);
  44     };
  45
  46     // Initialise the Datatable
  47     // FIXME: This should be a kohaTable not KohaTable
  48     var initTable = function () {
  49         return KohaTable("ill-batch-requests", {
  50             data: batchesProxy.data,
  51             columns: [
  52                 {
  53                     data: 'ill_batch_id',
  54                     width: '10%'
  55                 },
  56                 {
  57                     data: 'name',
  58                     render: createName,
  59                     width: '30%'
  60                 },
  61                 {
  62                     data: 'requests_count',
  63                     width: '10%'
  64                 },
  65                 {
  66                     data: 'status',
  67                     render: createStatus,
  68                     width: '10%'
  69                 },
  70                 {
  71                     data: 'patron',
  72                     render: createPatronLink,
  73                     width: '10%'
  74                 },
  75                 {
  76                     data: 'branch',
  77                     render: createBranch,
  78                     width: '20%'
  79                 },
  80                 {
  81                     render: createActions,
  82                     width: '10%',
  83                     orderable: false,
  84                     className: 'noExport'
  85                 }
  86             ],
  87             processing: true,
  88             deferRender: true,
  89             drawCallback: addEventListeners
  90         });
  91     }
  92
  93     // A render function for branch name
  94     var createBranch = function (x, y, data) {
  95         return data._strings.library_id.str;
  96     };
  97
  98     // A render function for batch name
  99     var createName = function (x, y, data) {
 100         var a = document.createElement('a');
 101         a.setAttribute('href', '/cgi-bin/koha/ill/ill-requests.pl?batch_id=' + data.ill_batch_id);
 102         a.setAttribute('title', data.name);
 103         a.textContent = data.name;
 104         return a.outerHTML;
 105     };
 106
 107     // A render function for batch status
 108     var createStatus = function (x, y, data) {
 109         return data._strings.status_code.str;
 110     };
 111
 112     // A render function for our patron link
 113     var createPatronLink = function (data) {
 114         return data ? $patron_to_html(data, { display_cardnumber: true, url: true }) : '';
 115     };
 116
 117     // A render function for our row action buttons
 118     var createActions = function (data, type, row) {
 119         var div = document.createElement('div');
 120         div.setAttribute('class', 'action-buttons');
 121
 122         var editButton = document.createElement('button');
 123         editButton.setAttribute('type', 'button');
 124         editButton.setAttribute('class', 'editButton btn btn-xs btn-default');
 125         editButton.setAttribute('data-batch-id', row.ill_batch_id);
 126         editButton.appendChild(document.createTextNode(ill_batch_edit));
 127
 128         var deleteButton = document.createElement('button');
 129         deleteButton.setAttribute('type', 'button');
 130         deleteButton.setAttribute('class', 'deleteButton btn btn-xs btn-danger');
 131         deleteButton.setAttribute('data-batch-id', row.ill_batch_id);
 132         deleteButton.appendChild(document.createTextNode(ill_batch_delete));
 133
 134         div.appendChild(editButton);
 135         div.appendChild(deleteButton);
 136
 137         return div.outerHTML;
 138     };
 139
 140     // Add event listeners to our row action buttons
 141     var addEventListeners = function () {
 142         var del = document.querySelectorAll('.deleteButton');
 143         del.forEach(function (el) {
 144             el.addEventListener('click', handleDeleteClick);
 145         });
 146
 147         var edit = document.querySelectorAll('.editButton');
 148         edit.forEach(function (elEdit) {
 149             elEdit.addEventListener('click', handleEditClick);
 150         });
 151     };
 152
 153     // Remove all added event listeners
 154     var removeEventListeners = function () {
 155         var del = document.querySelectorAll('.deleteButton');
 156         del.forEach(function (el) {
 157             el.removeEventListener('click', handleDeleteClick);
 158         });
 159         window.removeEventListener('load', onload);
 160         window.removeEventListener('beforeunload', removeEventListeners);
 161     };
 162
 163     // Handle "Delete" clicks
 164     var handleDeleteClick = function(e) {
 165         var el = e.srcElement;
 166         if (confirm(ill_batch_confirm_delete)) {
 167             deleteBatch(el);
 168         }
 169     };
 170
 171     // Handle "Edit" clicks
 172     var handleEditClick = function(e) {
 173         var el = e.srcElement;
 174         var id = el.dataset.batchId;
 175         window.openBatchModal(id);
 176     };
 177
 178     // Delete a batch
 179     // - Make the API call
 180     // - Handle errors
 181     // - Update our proxy data
 182     var deleteBatch = function (el) {
 183         var id = el.dataset.batchId;
 184         doBatchApiRequest(
 185             '/' + id,
 186             { method: 'DELETE' }
 187         )
 188         .then(function (response) {
 189             if (!response.ok) {
 190                 window.handleApiError(ill_batch_delete_fail);
 191             } else {
 192                 removeBatch(el.dataset.batchId);
 193             }
 194         })
 195         .catch(function (response) {
 196             window.handleApiError(ill_batch_delete_fail);
 197         })
 198     };
 199
 200     // Remove a batch from our proxy data
 201     var removeBatch = function(id) {
 202         batchesProxy.data = batchesProxy.data.filter(function (batch) {
 203             return batch.ill_batch_id != id;
 204         });
 205     };
 206
 207     // Redraw the table
 208     var updateTable = function () {
 209         table.api()
 210             .clear()
 211             .rows.add(batchesProxy.data)
 212             .draw();
 213     };
 214
 215 })();