kaui 3.0.3 → 3.0.5

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. checksums.yaml +4 -4
  2. data/app/controllers/kaui/account_timelines_controller.rb +117 -0
  3. data/app/controllers/kaui/accounts_controller.rb +50 -7
  4. data/app/controllers/kaui/audit_logs_controller.rb +37 -0
  5. data/app/controllers/kaui/bundles_controller.rb +5 -1
  6. data/app/controllers/kaui/engine_controller.rb +3 -28
  7. data/app/controllers/kaui/engine_controller_util.rb +8 -2
  8. data/app/controllers/kaui/invoices_controller.rb +54 -29
  9. data/app/controllers/kaui/payments_controller.rb +69 -9
  10. data/app/controllers/kaui/sessions_controller.rb +7 -0
  11. data/app/helpers/kaui/exception_helper.rb +25 -0
  12. data/app/helpers/kaui/subscription_helper.rb +5 -1
  13. data/app/models/kaui/account.rb +9 -0
  14. data/app/models/kaui/invoice.rb +2 -0
  15. data/app/models/kaui/payment.rb +7 -0
  16. data/app/views/kaui/account_timelines/_multi_functions_bar.html.erb +155 -0
  17. data/app/views/kaui/account_timelines/show.html.erb +2 -0
  18. data/app/views/kaui/accounts/_account_info.html.erb +7 -0
  19. data/app/views/kaui/accounts/_multi_functions_bar.html.erb +329 -0
  20. data/app/views/kaui/accounts/index.html.erb +32 -18
  21. data/app/views/kaui/audit_logs/_multi_functions_bar.html.erb +189 -0
  22. data/app/views/kaui/audit_logs/index.html.erb +8 -0
  23. data/app/views/kaui/bundles/index.html.erb +34 -0
  24. data/app/views/kaui/errors/500.html.erb +29 -0
  25. data/app/views/kaui/invoices/_multi_functions_bar.html.erb +322 -0
  26. data/app/views/kaui/invoices/index.html.erb +49 -24
  27. data/app/views/kaui/payments/_multi_functions_bar.html.erb +323 -0
  28. data/app/views/kaui/payments/index.html.erb +73 -30
  29. data/config/locales/en.yml +3 -0
  30. data/config/routes.rb +7 -0
  31. data/lib/kaui/error_handler.rb +37 -0
  32. data/lib/kaui/version.rb +1 -1
  33. data/lib/kaui.rb +117 -30
  34. metadata +13 -19
@@ -0,0 +1,189 @@
1
+ <div class="dropdown-container">
2
+ <button class="btn btn-default download-button-right" type="button" id="modalDownloadButton">
3
+ <i class="glyphicon glyphicon-download-alt"></i>
4
+ <strong>Download CSV</strong>
5
+ </button>
6
+ </div>
7
+
8
+ <div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel" aria-hidden="true">
9
+ <div class="modal-dialog" role="document">
10
+ <div class="modal-content">
11
+ <div class="modal-header">
12
+ <h3 class="modal-title" id="downloadCsvModalLabel">Download</h3>
13
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
14
+ <span aria-hidden="true">&times;</span>
15
+ </button>
16
+ </div>
17
+ <div class="modal-body">
18
+ <form id="downloadCsvForm">
19
+ <div class="row">
20
+ <div class="col-md-6">
21
+ <div class="form-group">
22
+ <label for="startDate">Created Date From:</label>
23
+ <input type="text" class="form-control" id="startDate" name="startDate">
24
+ </div>
25
+ </div>
26
+ <div class="col-md-6">
27
+ <div class="form-group">
28
+ <label for="endDate">To:</label>
29
+ <input type="text" class="form-control" id="endDate" name="endDate">
30
+ </div>
31
+ </div>
32
+ </div>
33
+ <div class="row">
34
+ <div class="col-md-6">
35
+ <div class="form-check">
36
+ <div>
37
+ <input type="radio" id="customDate" name="download_option" value="customDate">
38
+ <label for="customDate">Custom date</label>
39
+ </div>
40
+ <div>
41
+ <input type="radio" id="allData" name="download_option" value="all">
42
+ <label for="allData">All logs</label>
43
+ </div>
44
+ <div>
45
+ <input type="radio" id="thisWeek" name="download_option" value="thisWeek">
46
+ <label for="thisWeek">This week</label>
47
+ </div>
48
+ <div>
49
+ <input type="radio" id="thisMonth" name="download_option" value="thisMonth">
50
+ <label for="thisMonth">This month</label>
51
+ </div>
52
+ <div>
53
+ <input type="radio" id="thisYear" name="download_option" value="thisYear">
54
+ <label for="thisYear">This year</label>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ </form>
60
+ </div>
61
+ <div class="modal-footer">
62
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
63
+ <button type="button" class="btn btn-primary" id="downloadButton">Download</button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <style>
70
+ .dropdown-menu#column-visibility {
71
+ max-height: 300px;
72
+ width: 220px;
73
+ overflow-y: auto;
74
+ }
75
+
76
+ .dropdown-menu {
77
+ padding: 5px;
78
+ }
79
+ .toggle-button-right {
80
+ float: right;
81
+ margin-bottom: 10px;
82
+ margin-left: 10px;
83
+ background-color: white;
84
+ color: black;
85
+ text-transform: none;
86
+ border: 1px solid #ccc;
87
+ padding: 8px 15px;
88
+ }
89
+
90
+ .download-button-right {
91
+ float: right;
92
+ margin-bottom: 10px;
93
+ margin-left: 10px;
94
+ background-color: white;
95
+ color: black;
96
+ text-transform: none;
97
+ border: 1px solid #ccc;
98
+ padding: 8px 15px;
99
+ }
100
+
101
+ .icon-drag {
102
+ float: right;
103
+ padding: 5px;
104
+ }
105
+
106
+ .dropdown-container {
107
+ display: flex;
108
+ justify-content: flex-end;
109
+ }
110
+
111
+ .label-group-item-manual {
112
+ margin: 5px;
113
+ width: -webkit-fill-available;
114
+ cursor: grab;
115
+ }
116
+ .label-group-item-manual:active {
117
+ cursor: grabbing;
118
+ }
119
+ </style>
120
+
121
+ <%= javascript_tag do %>
122
+ $(document).ready(function() {
123
+ $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
124
+ event.stopPropagation();
125
+ });
126
+
127
+ $('#modalDownloadButton').click(function() {
128
+ $('#downloadCsvModal').modal('show');
129
+ });
130
+
131
+ $('#startDate, #endDate').datepicker({
132
+ dateFormat: 'yy-mm-dd'
133
+ });
134
+
135
+ $('#downloadCsvModal').on('show.bs.modal', function (e) {
136
+ $('#allData').prop('checked', true);
137
+ $('#startDate, #endDate').prop('disabled', true);
138
+ $('#startDate').val(null);
139
+ $('#endDate').val(null);
140
+ });
141
+
142
+ $('#allData').change(function() {
143
+ $('#startDate').val(null);
144
+ $('#endDate').val(null);
145
+ $('#startDate, #endDate').prop('disabled', true);
146
+ });
147
+
148
+ $('#thisWeek').change(function() {
149
+ if ($(this).is(':checked')) {
150
+ setDateRange("week");
151
+ }
152
+ });
153
+
154
+ $('#thisMonth').change(function() {
155
+ if ($(this).is(':checked')) {
156
+ setDateRange("month");
157
+ }
158
+ });
159
+
160
+ $('#thisYear').change(function() {
161
+ if ($(this).is(':checked')) {
162
+ setDateRange("year");
163
+ }
164
+ });
165
+
166
+ $('#customDate').change(function() {
167
+ if ($(this).is(':checked')) {
168
+ setDateRange("day");
169
+ $('#startDate, #endDate').prop('disabled', false);
170
+ }
171
+ });
172
+
173
+ var downloadButton = document.getElementById('downloadButton');
174
+ if (downloadButton) {
175
+ downloadButton.addEventListener('click', function() {
176
+ event.preventDefault();
177
+ var startDate = $('#startDate').val();
178
+ var endDate = $('#endDate').val();
179
+ var downloadAll = $('#allData').is(':checked');
180
+
181
+ if (downloadAll) {
182
+ window.open("<%= download_audit_logs_path %>?account_id=<%=@account.account_id%>", '_blank');
183
+ } else {
184
+ window.open("<%= download_audit_logs_path %>?account_id=<%=@account.account_id%>&startDate="+startDate+"&endDate="+endDate, '_blank');
185
+ }
186
+ });
187
+ }
188
+ });
189
+ <% end %>
@@ -3,6 +3,7 @@
3
3
  <div class="column-block">
4
4
 
5
5
  <h1>Audit logs</h1>
6
+ <%= render :partial => 'multi_functions_bar' %>
6
7
  <input type="hidden" id="audit-logs" value="<%= @audit_logs_json %>">
7
8
  <table id="audit-logs-table" class="table table-condensed table-colored-rows mobile-data">
8
9
  <thead>
@@ -30,6 +31,12 @@
30
31
 
31
32
  </div>
32
33
 
34
+ <style>
35
+ #audit-logs-table td, #audit-logs-table tr {
36
+ white-space: nowrap;
37
+ }
38
+ </style>
39
+
33
40
 
34
41
  <%= javascript_tag do %>
35
42
  $(document).ready(function() {
@@ -37,6 +44,7 @@
37
44
  $('#audit-logs-table').DataTable({
38
45
  dom: "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
39
46
  data: auditLogs,
47
+ "scrollX": true,
40
48
  order: [[ 0, 'desc' ]],
41
49
  createdRow: function( row, data, dataIndex ) {
42
50
  if ( data[3] == "INSERT" ) {
@@ -76,4 +76,38 @@
76
76
  <% end %>
77
77
  <% end %>
78
78
 
79
+ <div class="text-right" style="margin-top: 20px;">
80
+ <%= link_to 'First', account_bundles_path(page: 1), class: "btn btn-custom #{'disabled' if @page == 1}" %>
81
+ <%= link_to 'Previous', account_bundles_path(page: @page - 1), class: "btn btn-custom #{'disabled' if @page == 1}" %>
82
+
83
+ <% if @total_pages <= 10 %>
84
+ <% (1..@total_pages).each do |num| %>
85
+ <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
86
+ <% end %>
87
+ <% else %>
88
+ <%= link_to 1, account_bundles_path(page: 1), class: paging_button_class(1, @page) %>
89
+ <% if @page < 5 %>
90
+ <% (2..5).each do |num| %>
91
+ <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
92
+ <% end %>
93
+ <%= '...' %>
94
+ <% elsif @page > @total_pages - 4 %>
95
+ <%= '...' %>
96
+ <% (@total_pages-4..@total_pages-1).each do |num| %>
97
+ <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
98
+ <% end %>
99
+ <% else %>
100
+ <%= '...' %>
101
+ <% (@page-1..@page+1).each do |num| %>
102
+ <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
103
+ <% end %>
104
+ <%= '...' %>
105
+ <% end %>
106
+ <%= link_to @total_pages, account_bundles_path(page: @total_pages), class: paging_button_class(@total_pages, @page) %>
107
+ <% end %>
108
+
109
+ <%= link_to 'Next', account_bundles_path(page: @page + 1), class: "btn btn-custom #{'disabled' if @page == @total_pages}" %>
110
+ <%= link_to 'Last', account_bundles_path(page: @total_pages), class: "btn btn-custom #{'disabled' if @page == @total_pages}" %>
111
+ </div>
112
+
79
113
  </div>
@@ -0,0 +1,29 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>We're sorry, but something went wrong (500)</title>
5
+ <style type="text/css">
6
+ body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
7
+ div.dialog {
8
+ width: 35em; /* Increase the width of the dialog */
9
+ padding: 1em 6em; /* Increase the padding of the dialog */
10
+ margin: 4em auto 0 auto;
11
+ border: 1px solid #ccc;
12
+ border-right-color: #999;
13
+ border-bottom-color: #999;
14
+ font-size: 1.2em; /* Increase the font size in the dialog */
15
+ }
16
+ h1 { font-size: 100%; color: #f00; line-height: 1.0em; } /* Increase the font size of the title */
17
+ </style>
18
+ </head>
19
+
20
+ <body>
21
+ <!-- This file lives in public/500.html -->
22
+ <div class="dialog">
23
+ <h1>We're sorry, but something went wrong.</h1>
24
+ <% if @error.present? %>
25
+ <p><%= @error %></p>
26
+ <% end %>
27
+ </div>
28
+ </body>
29
+ </html>
@@ -0,0 +1,322 @@
1
+ <div class="dropdown-container">
2
+ <button class="btn btn-default download-button-right" type="button" id="modalDownloadButton">
3
+ <i class="glyphicon glyphicon-download-alt"></i>
4
+ <strong>Download CSV</strong>
5
+ </button>
6
+ <div class="dropdown">
7
+ <button class="btn btn-default dropdown-toggle toggle-button-right" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
8
+ <i class="glyphicon glyphicon-cog"></i>
9
+ <strong>Edit Columns</strong>
10
+ </button>
11
+ <ul class="dropdown-menu" id="column-visibility" aria-labelledby="v">
12
+ <% Kaui.account_invoices_columns.call[0].each_with_index do |title, index| %>
13
+ <li class="list-group-item-manual" data-id="<%= index %>">
14
+ <label class="label-group-item-manual">
15
+ <input type="checkbox" class="column-toggle" draggable="true" data-column="<%= index %>" checked> <%= title %>
16
+ <span class="glyphicon glyphicon-option-vertical icon-drag" aria-hidden="true"></span>
17
+ </label>
18
+ </li>
19
+ <% end %>
20
+ </ul>
21
+ </div>
22
+ </div>
23
+
24
+ <div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel" aria-hidden="true">
25
+ <div class="modal-dialog" role="document">
26
+ <div class="modal-content">
27
+ <div class="modal-header">
28
+ <h3 class="modal-title" id="downloadCsvModalLabel">Download</h3>
29
+ <button type="button" class="close" data-dismiss="modal" aria-label="Close">
30
+ <span aria-hidden="true">&times;</span>
31
+ </button>
32
+ </div>
33
+ <div class="modal-body">
34
+ <form id="downloadCsvForm">
35
+ <div class="row">
36
+ <div class="col-md-6">
37
+ <div class="form-group">
38
+ <label for="startDate">Invoice Date From:</label>
39
+ <input type="text" class="form-control" id="startDate" name="startDate">
40
+ </div>
41
+ </div>
42
+ <div class="col-md-6">
43
+ <div class="form-group">
44
+ <label for="endDate">To:</label>
45
+ <input type="text" class="form-control" id="endDate" name="endDate">
46
+ </div>
47
+ </div>
48
+ </div>
49
+ <div class="row">
50
+ <div class="col-md-6">
51
+ <div class="form-check">
52
+ <div>
53
+ <input type="radio" id="customDate" name="download_option" value="customDate">
54
+ <label for="customDate">Custom date</label>
55
+ </div>
56
+ <div>
57
+ <input type="radio" id="allData" name="download_option" value="all">
58
+ <label for="allData">All invoices</label>
59
+ </div>
60
+ <div>
61
+ <input type="radio" id="thisWeek" name="download_option" value="thisWeek">
62
+ <label for="thisWeek">This week</label>
63
+ </div>
64
+ <div>
65
+ <input type="radio" id="thisMonth" name="download_option" value="thisMonth">
66
+ <label for="thisMonth">This month</label>
67
+ </div>
68
+ <div>
69
+ <input type="radio" id="thisYear" name="download_option" value="thisYear">
70
+ <label for="thisYear">This year</label>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ <div class="row">
76
+ <div class="col-md-12">
77
+ <h5>Additional Options</h5>
78
+ </div>
79
+ </div>
80
+ <div class="row">
81
+ <div class="col-md-6">
82
+ <div class="form-check">
83
+ <input type="checkbox" class="form-check-input" id="allFields" name="allFields">
84
+ <label class="form-check-label" for="allFields">All fields</label>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </form>
89
+ </div>
90
+ <div class="modal-footer">
91
+ <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
92
+ <button type="button" class="btn btn-primary" id="downloadButton">Download</button>
93
+ </div>
94
+ </div>
95
+ </div>
96
+ </div>
97
+
98
+ <style>
99
+ .dropdown-menu#column-visibility {
100
+ max-height: 300px;
101
+ width: 200px;
102
+ overflow-y: auto;
103
+ }
104
+
105
+ .dropdown-menu {
106
+ padding: 5px;
107
+ }
108
+
109
+ .dropdown-menu#column-visibility::before {
110
+ content: 'Drag to reorder columns';
111
+ display: block;
112
+ height: 30px;
113
+ text-align: center;
114
+ color: darkgrey;
115
+ padding-top: 5px;
116
+ }
117
+
118
+ .toggle-button-right {
119
+ float: right;
120
+ margin-bottom: 10px;
121
+ margin-left: 10px;
122
+ background-color: white;
123
+ color: black;
124
+ text-transform: none;
125
+ border: 1px solid #ccc;
126
+ padding: 8px 15px;
127
+ }
128
+
129
+ .download-button-right {
130
+ float: right;
131
+ margin-bottom: 10px;
132
+ margin-left: 10px;
133
+ background-color: white;
134
+ color: black;
135
+ text-transform: none;
136
+ border: 1px solid #ccc;
137
+ padding: 8px 15px;
138
+ }
139
+
140
+ .icon-drag {
141
+ float: right;
142
+ padding: 5px;
143
+ }
144
+
145
+ .dropdown-container {
146
+ display: flex;
147
+ justify-content: flex-end;
148
+ }
149
+
150
+ .label-group-item-manual {
151
+ margin: 5px;
152
+ width: -webkit-fill-available;
153
+ cursor: grab;
154
+ }
155
+ .label-group-item-manual:active {
156
+ cursor: grabbing;
157
+ }
158
+ </style>
159
+
160
+ <%= javascript_tag do %>
161
+ $(document).ready(function() {
162
+ $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
163
+ event.stopPropagation();
164
+ });
165
+
166
+ $('#modalDownloadButton').click(function() {
167
+ $('#downloadCsvModal').modal('show');
168
+ });
169
+ $('#startDate, #endDate').datepicker({
170
+ dateFormat: 'yy-mm-dd'
171
+ });
172
+
173
+ $('#downloadCsvModal').on('show.bs.modal', function (e) {
174
+ $('#allData').prop('checked', true);
175
+ $('#startDate, #endDate').prop('disabled', true);
176
+ $('#startDate').val(null);
177
+ $('#endDate').val(null);
178
+ });
179
+
180
+ $('#allData').change(function() {
181
+ $('#startDate').val(null);
182
+ $('#endDate').val(null);
183
+ $('#startDate, #endDate').prop('disabled', true);
184
+ });
185
+
186
+ $('#thisWeek').change(function() {
187
+ if ($(this).is(':checked')) {
188
+ setDateRange("week");
189
+ }
190
+ });
191
+
192
+ $('#thisMonth').change(function() {
193
+ if ($(this).is(':checked')) {
194
+ setDateRange("month");
195
+ }
196
+ });
197
+
198
+ $('#thisYear').change(function() {
199
+ if ($(this).is(':checked')) {
200
+ setDateRange("year");
201
+ }
202
+ });
203
+
204
+ $('#customDate').change(function() {
205
+ if ($(this).is(':checked')) {
206
+ setDateRange("day");
207
+ $('#startDate, #endDate').prop('disabled', false);
208
+ }
209
+ });
210
+
211
+ var downloadButton = document.getElementById('downloadButton');
212
+ if (downloadButton) {
213
+ downloadButton.addEventListener('click', function() {
214
+ event.preventDefault();
215
+
216
+ var allFieldsChecked = $('#allFields').is(':checked');
217
+ var startDate = $('#startDate').val();
218
+ var endDate = $('#endDate').val();
219
+ var downloadAll = $('#allData').is(':checked');
220
+ var thElements = document.querySelectorAll('#invoices-table th');
221
+ var columnTitles = Array.from(thElements).map(function(th) {
222
+ return th.textContent.trim();
223
+ });
224
+ var columnsString = columnTitles.join(',')
225
+
226
+ var url = new URL("<%= download_invoices_path %>", window.location.origin);
227
+ var params = new URLSearchParams();
228
+ params.append('account_id', "<%=@account.account_id%>");
229
+ params.append('columnsString', columnsString);
230
+ if (!downloadAll) {
231
+ params.append('startDate', startDate);
232
+ params.append('endDate', endDate);
233
+ }
234
+ params.append('allFieldsChecked', allFieldsChecked);
235
+ url.search = params.toString();
236
+ console.log(url.toString());
237
+ window.open(url.toString(), '_blank');
238
+ });
239
+ }
240
+
241
+ updateDropdownOrder();
242
+
243
+ function loadState() {
244
+ var state = JSON.parse(localStorage.getItem('DataTables_invoices-table'));
245
+ return state || { columns: [], columnOrder: [] };
246
+ }
247
+
248
+ function updateDropdownOrder() {
249
+ var state = loadState();
250
+ var columnOrder = state.ColReorder;
251
+ var $list = $('#column-visibility');
252
+ var thElements = document.querySelectorAll('#invoices-table th');
253
+ var $columnTitles = Array.from(thElements).map(function(th) {
254
+ return th.textContent.trim();
255
+ });
256
+ if (columnOrder !== undefined) {
257
+ $list.empty();
258
+ columnOrder.forEach(function(colIdx, index) {
259
+ var $item = $('<li>', { class: "list-group-item-manual", "data-id": index });
260
+ var column = state.columns[colIdx];
261
+ var col_name = $columnTitles[colIdx];
262
+ var $label = $('<label>', {
263
+ class: "label-group-item-manual",
264
+ });
265
+ var $checkbox = $("<input>", {
266
+ type: "checkbox",
267
+ value: colIdx,
268
+ checked: column.visible,
269
+ "data-column": colIdx,
270
+ class: "column-toggle"
271
+ });
272
+ $label.append($checkbox).append(" " + col_name);
273
+ var $icon = $("<span>", { class: "glyphicon glyphicon-option-vertical icon-drag"});
274
+ $label.append($icon);
275
+ $item.append($label);
276
+ $list.append($item);
277
+ });
278
+ }
279
+ resetDataColumn();
280
+ resetDataId();
281
+ }
282
+
283
+ $("#column-visibility").sortable({
284
+ axis: "y",
285
+ containment: "parent",
286
+ stop: function(event, ui) {
287
+ var order = $("#column-visibility").sortable('toArray', {attribute: 'data-id'});
288
+ reorderTableColumns(order);
289
+ }
290
+ });
291
+ $("#column-visibility").disableSelection();
292
+
293
+ function reorderTableColumns(order) {
294
+ var table = $('#invoices-table').DataTable();
295
+ var columnIndexes = order.map(Number);
296
+ console.log('New column order:', columnIndexes);
297
+ table.colReorder.order(columnIndexes);
298
+ resetDataColumn();
299
+ resetDataId();
300
+ }
301
+
302
+ function resetDataId() {
303
+ var elements = document.querySelectorAll('.list-group-item-manual');
304
+ elements.forEach(function(element, index) {
305
+ element.setAttribute('data-id', index);
306
+ });
307
+ }
308
+
309
+ function resetDataColumn() {
310
+ var elements = document.querySelectorAll('.column-toggle');
311
+ elements.forEach(function(element, index) {
312
+ element.setAttribute('data-column', index);
313
+ });
314
+ }
315
+
316
+ $('.column-toggle').on('change', function() {
317
+ var table = $('#invoices-table').DataTable();
318
+ var column = table.column($(this).attr('data-column'));
319
+ column.visible(!column.visible());
320
+ });
321
+ });
322
+ <% end %>