kaui 3.0.2 → 3.0.4

data/app/views/kaui/audit_logs/_multi_functions_bar.html.erb

@@ -0,0 +1,218 @@
+<div class="dropdown-container">
+  <button class="btn btn-default download-button-right" type="button" id="modalDownloadButton">
+    <i class="glyphicon glyphicon-download-alt"></i>
+    <strong>Download CSV</strong>
+  </button>
+</div>
+
+<div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title" id="downloadCsvModalLabel">Download</h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form id="downloadCsvForm">
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-group">
+                <label for="startDate">Created Date From:</label>
+                <input type="text" class="form-control" id="startDate" name="startDate">
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="form-group">
+                <label for="endDate">To:</label>
+                <input type="text" class="form-control" id="endDate" name="endDate">
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-check">
+                <div>
+                  <input type="radio" id="customDate" name="download_option" value="customDate">
+                  <label for="customDate">Custom date</label>
+                </div>
+                <div>
+                  <input type="radio" id="allData" name="download_option" value="all">
+                  <label for="allData">All logs</label>
+                </div>
+                <div>
+                  <input type="radio" id="thisWeek" name="download_option" value="thisWeek">
+                  <label for="thisWeek">This week</label>
+                </div>
+                <div>
+                  <input type="radio" id="thisMonth" name="download_option" value="thisMonth">
+                  <label for="thisMonth">This month</label>
+                </div>
+                <div>
+                  <input type="radio" id="thisYear" name="download_option" value="thisYear">
+                  <label for="thisYear">This year</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" id="downloadButton">Download</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .dropdown-menu#column-visibility {
+    max-height: 300px;
+    width: 220px;
+    overflow-y: auto;
+  }
+  
+  .dropdown-menu {
+    padding: 5px;
+  }
+  .toggle-button-right {
+    float: right;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    background-color: white;
+    color: black;
+    text-transform: none;
+    border: 1px solid #ccc;
+    padding: 8px 15px;
+  }
+
+  .download-button-right {
+    float: right;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    background-color: white;
+    color: black;
+    text-transform: none;
+    border: 1px solid #ccc;
+    padding: 8px 15px;
+  }
+
+  .icon-drag {
+    float: right;
+    padding: 5px;
+  }
+
+  .dropdown-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .label-group-item-manual {
+    margin: 5px;
+    width: -webkit-fill-available;
+    cursor: grab;
+  }
+  .label-group-item-manual:active {
+      cursor: grabbing;
+  }
+</style>
+
+<%= javascript_tag do %>
+$(document).ready(function() {
+  $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
+    event.stopPropagation();
+  });
+
+  $('#modalDownloadButton').click(function() {
+    $('#downloadCsvModal').modal('show');
+  });
+
+  $('#startDate, #endDate').datepicker({
+    dateFormat: 'yy-mm-dd'
+  });
+
+  $('#downloadCsvModal').on('show.bs.modal', function (e) {
+    $('#allData').prop('checked', true);
+    $('#startDate, #endDate').prop('disabled', true);
+    $('#startDate').val(null);
+    $('#endDate').val(null);
+  });
+
+  $('#allData').change(function() {
+    $('#startDate').val(null);
+    $('#endDate').val(null);
+    var isChecked = $(this).is(':checked');
+    $('#startDate, #endDate').prop('disabled', true);
+  });
+
+  function setDateRange(option) {
+    var currentDate = new Date();
+    var startDate, endDate;
+
+    if (option === "day") {
+      startDate = new Date();
+      endDate = new Date();
+      endDate.setDate(endDate.getDate() + 1);
+    } else if (option === "week") {
+      startDate = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1));
+      currentDate = new Date();
+      endDate = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 7));
+    } else if (option === "month") {
+      startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+      endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+    } else if (option === "year") {
+      startDate = new Date(currentDate.getFullYear(), 0, 1);
+      endDate = new Date(currentDate.getFullYear(), 11, 31);
+    }
+
+    var startDateFormatted = startDate.toISOString().split('T')[0];
+    var endDateFormatted = endDate.toISOString().split('T')[0];
+
+    $('#startDate').val(startDateFormatted);
+    $('#endDate').val(endDateFormatted);
+    $('#startDate, #endDate').prop('disabled', true);
+  }
+
+  $('#thisWeek').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("week");
+    }
+  });
+
+  $('#thisMonth').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("month");
+    }
+  });
+
+  $('#thisYear').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("year");
+    }
+  });
+
+  $('#customDate').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("day");
+      $('#startDate, #endDate').prop('disabled', false);
+    }
+  });
+
+  var downloadButton = document.getElementById('downloadButton');
+  if (downloadButton) {
+    downloadButton.addEventListener('click', function() {
+      event.preventDefault();
+      var startDate = $('#startDate').val();
+      var endDate = $('#endDate').val();
+      var downloadAll = $('#allData').is(':checked');
+      
+      if (downloadAll) {
+        window.open("<%= download_audit_logs_path %>?account_id=<%=@account.account_id%>", '_blank');
+      } else {
+        window.open("<%= download_audit_logs_path %>?account_id=<%=@account.account_id%>&startDate="+startDate+"&endDate="+endDate, '_blank');
+      }
+    });
+  }
+});
+<% end %>

data/app/views/kaui/audit_logs/index.html.erb

@@ -3,6 +3,7 @@
   <div class="column-block">
 
     <h1>Audit logs</h1>
+    <%= render :partial => 'multi_functions_bar' %>
     <input type="hidden" id="audit-logs" value="<%= @audit_logs_json %>">
     <table id="audit-logs-table" class="table table-condensed table-colored-rows mobile-data">
       <thead>

data/app/views/kaui/bundles/index.html.erb

@@ -76,4 +76,38 @@
       <% end %>
   <% end %>
 
+  <div class="text-right" style="margin-top: 20px;">
+    <%= link_to 'First', account_bundles_path(page: 1), class: "btn btn-custom #{'disabled' if @page == 1}" %>
+    <%= link_to 'Previous', account_bundles_path(page: @page - 1), class: "btn btn-custom #{'disabled' if @page == 1}" %>
+
+    <% if @total_pages <= 10 %>
+        <% (1..@total_pages).each do |num| %>
+            <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+        <% end %>
+    <% else %>
+        <%= link_to 1, account_bundles_path(page: 1), class: paging_button_class(1, @page) %>
+        <% if @page < 5 %>
+            <% (2..5).each do |num| %>
+                <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+            <% end %>
+            <%= '...' %>
+        <% elsif @page > @total_pages - 4 %>
+            <%= '...' %>
+            <% (@total_pages-4..@total_pages-1).each do |num| %>
+                <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+            <% end %>
+        <% else %>
+            <%= '...' %>
+            <% (@page-1..@page+1).each do |num| %>
+                <%= link_to num, account_bundles_path(page: num), class: paging_button_class(num, @page) %>
+            <% end %>
+            <%= '...' %>
+        <% end %>
+        <%= link_to @total_pages, account_bundles_path(page: @total_pages), class: paging_button_class(@total_pages, @page) %>
+    <% end %>
+
+    <%= link_to 'Next', account_bundles_path(page: @page + 1), class: "btn btn-custom #{'disabled' if @page == @total_pages}" %>
+    <%= link_to 'Last', account_bundles_path(page: @total_pages), class: "btn btn-custom #{'disabled' if @page == @total_pages}" %>
+  </div>
+
 </div>

data/app/views/kaui/errors/500.html.erb

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>We're sorry, but something went wrong (500)</title>
+    <style type="text/css">
+      body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
+      div.dialog {
+        width: 35em; /* Increase the width of the dialog */
+        padding: 1em 6em; /* Increase the padding of the dialog */
+        margin: 4em auto 0 auto;
+        border: 1px solid #ccc;
+        border-right-color: #999;
+        border-bottom-color: #999;
+        font-size: 1.2em; /* Increase the font size in the dialog */
+      }
+      h1 { font-size: 100%; color: #f00; line-height: 1.0em; } /* Increase the font size of the title */
+    </style>
+  </head>
+
+  <body>
+    <!-- This file lives in public/500.html -->
+    <div class="dialog">
+      <h1>We're sorry, but something went wrong.</h1>
+      <% if @error.present? %>
+        <p><%= @error %></p>
+      <% end %>
+    </div>
+  </body>
+</html>

data/app/views/kaui/invoices/_multi_functions_bar.html.erb

@@ -0,0 +1,340 @@
+<div class="dropdown-container">
+  <button class="btn btn-default download-button-right" type="button" id="modalDownloadButton">
+    <i class="glyphicon glyphicon-download-alt"></i>
+    <strong>Download CSV</strong>
+  </button>
+  <div class="dropdown">
+    <button class="btn btn-default dropdown-toggle toggle-button-right" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+      <i class="glyphicon glyphicon-cog"></i>
+      <strong>Edit Columns</strong>
+    </button>
+    <ul class="dropdown-menu" id="column-visibility" aria-labelledby="v">
+      <%  Kaui.account_invoices_columns.call[0].each_with_index do |title, index| %>
+          <li class="list-group-item-manual" data-id="<%= index %>">
+            <label class="label-group-item-manual">
+              <input type="checkbox" class="column-toggle" draggable="true" data-column="<%= index %>" checked> <%= title %>
+              <span class="glyphicon glyphicon-option-vertical icon-drag" aria-hidden="true"></span>
+            </label>
+          </li>
+      <% end %>
+    </ul>
+  </div>
+</div>
+
+<div class="modal fade" id="downloadCsvModal" tabindex="-1" role="dialog" aria-labelledby="downloadCsvModalLabel" aria-hidden="true">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h3 class="modal-title" id="downloadCsvModalLabel">Download</h3>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        <form id="downloadCsvForm">
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-group">
+                <label for="startDate">Invoice Date From:</label>
+                <input type="text" class="form-control" id="startDate" name="startDate">
+              </div>
+            </div>
+            <div class="col-md-6">
+              <div class="form-group">
+                <label for="endDate">To:</label>
+                <input type="text" class="form-control" id="endDate" name="endDate">
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-check">
+                <div>
+                  <input type="radio" id="customDate" name="download_option" value="customDate">
+                  <label for="customDate">Custom date</label>
+                </div>
+                <div>
+                  <input type="radio" id="allData" name="download_option" value="all">
+                  <label for="allData">All invoices</label>
+                </div>
+                <div>
+                  <input type="radio" id="thisWeek" name="download_option" value="thisWeek">
+                  <label for="thisWeek">This week</label>
+                </div>
+                <div>
+                  <input type="radio" id="thisMonth" name="download_option" value="thisMonth">
+                  <label for="thisMonth">This month</label>
+                </div>
+                <div>
+                  <input type="radio" id="thisYear" name="download_option" value="thisYear">
+                  <label for="thisYear">This year</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-12">
+              <h5>Additional Options</h5>
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-md-6">
+              <div class="form-check">
+                <input type="checkbox" class="form-check-input" id="allFields" name="allFields">
+                <label class="form-check-label" for="allFields">All fields</label>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        <button type="button" class="btn btn-primary" id="downloadButton">Download</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .dropdown-menu#column-visibility {
+    max-height: 300px;
+    width: 200px;
+    overflow-y: auto;
+  }
+  
+  .dropdown-menu {
+    padding: 5px;
+  }
+  .toggle-button-right {
+    float: right;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    background-color: white;
+    color: black;
+    text-transform: none;
+    border: 1px solid #ccc;
+    padding: 8px 15px;
+  }
+
+  .download-button-right {
+    float: right;
+    margin-bottom: 10px;
+    margin-left: 10px;
+    background-color: white;
+    color: black;
+    text-transform: none;
+    border: 1px solid #ccc;
+    padding: 8px 15px;
+  }
+
+  .icon-drag {
+    float: right;
+    padding: 5px;
+  }
+
+  .dropdown-container {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .label-group-item-manual {
+    margin: 5px;
+    width: -webkit-fill-available;
+    cursor: grab;
+  }
+  .label-group-item-manual:active {
+      cursor: grabbing;
+  }
+</style>
+
+<%= javascript_tag do %>
+$(document).ready(function() {
+  $('.dropdown-menu').on('click', 'input[type="checkbox"], label', function(event) {
+    event.stopPropagation();
+  });
+
+  $('#modalDownloadButton').click(function() {
+    $('#downloadCsvModal').modal('show');
+  });
+  $('#startDate, #endDate').datepicker({
+    dateFormat: 'yy-mm-dd'
+  });
+
+  $('#downloadCsvModal').on('show.bs.modal', function (e) {
+    $('#allData').prop('checked', true);
+    $('#startDate, #endDate').prop('disabled', true);
+    $('#startDate').val(null);
+    $('#endDate').val(null);
+  });
+
+  $('#allData').change(function() {
+    $('#startDate').val(null);
+    $('#endDate').val(null);
+    $('#startDate, #endDate').prop('disabled', true);
+  });
+
+  function setDateRange(option) {
+    var currentDate = new Date();
+    var startDate, endDate;
+
+    if (option === "day") {
+      startDate = new Date();
+      endDate = new Date();
+      endDate.setDate(endDate.getDate() + 1);
+    } else if (option === "week") {
+      startDate = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1));
+      currentDate = new Date();
+      endDate = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 7));
+    } else if (option === "month") {
+      startDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
+      endDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
+    } else if (option === "year") {
+      startDate = new Date(currentDate.getFullYear(), 0, 1);
+      endDate = new Date(currentDate.getFullYear(), 11, 31);
+    }
+
+    var startDateFormatted = startDate.toISOString().split('T')[0];
+    var endDateFormatted = endDate.toISOString().split('T')[0];
+
+    $('#startDate').val(startDateFormatted);
+    $('#endDate').val(endDateFormatted);
+    $('#startDate, #endDate').prop('disabled', true);
+  }
+
+  $('#thisWeek').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("week");
+    }
+  });
+
+  $('#thisMonth').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("month");
+    }
+  });
+
+  $('#thisYear').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("year");
+    }
+  });
+
+  $('#customDate').change(function() {
+    if ($(this).is(':checked')) {
+      setDateRange("day");
+      $('#startDate, #endDate').prop('disabled', false);
+    }
+  });
+
+  var downloadButton = document.getElementById('downloadButton');
+  if (downloadButton) {
+    downloadButton.addEventListener('click', function() {
+      event.preventDefault();
+
+      var allFieldsChecked = $('#allFields').is(':checked');
+      var startDate = $('#startDate').val();
+      var endDate = $('#endDate').val();
+      var downloadAll = $('#allData').is(':checked');
+      var thElements = document.querySelectorAll('#invoices-table th');
+      var columnTitles = Array.from(thElements).map(function(th) {
+        return th.textContent.trim();
+      });
+      var columnsString = columnTitles.join(',')
+
+      var url = new URL("<%= download_invoices_path %>", window.location.origin);
+      var params = new URLSearchParams();
+      params.append('account_id', "<%=@account.account_id%>");
+      params.append('columnsString', columnsString);
+      if (!downloadAll) {
+        params.append('startDate', startDate);
+        params.append('endDate', endDate);
+      }
+      params.append('allFieldsChecked', allFieldsChecked);
+      url.search = params.toString();
+      console.log(url.toString());
+      window.open(url.toString(), '_blank');
+    });
+  }
+
+  updateDropdownOrder();
+
+  function loadState() {
+    var state = JSON.parse(localStorage.getItem('DataTables_invoices-table'));
+    return state || { columns: [], columnOrder: [] };
+  }
+
+  function updateDropdownOrder() {
+    var state = loadState();
+    var columnOrder = state.ColReorder;
+    var $list = $('#column-visibility');
+    var thElements = document.querySelectorAll('#invoices-table th');
+    var $columnTitles = Array.from(thElements).map(function(th) {
+      return th.textContent.trim();
+    });
+    if (columnOrder !== undefined) {
+      $list.empty();
+      columnOrder.forEach(function(colIdx, index) {
+        var $item = $('<li>', { class: "list-group-item-manual", "data-id": index });
+        var column = state.columns[colIdx];
+        var col_name = $columnTitles[colIdx];
+        var $label = $('<label>', {
+          class: "label-group-item-manual",
+          });
+        var $checkbox = $("<input>", {
+          type: "checkbox",
+          value: colIdx,
+          checked: column.visible,
+          "data-column": colIdx,
+          class: "column-toggle"
+        });
+        $label.append($checkbox).append(" " + col_name);
+        var $icon = $("<span>", { class: "glyphicon glyphicon-option-vertical icon-drag"});
+        $label.append($icon);
+        $item.append($label);
+        $list.append($item);
+      });
+    }
+    resetDataColumn();
+    resetDataId();
+  }
+
+  $("#column-visibility").sortable({
+    axis: "y",
+    containment: "parent",
+    stop: function(event, ui) {
+      var order = $("#column-visibility").sortable('toArray', {attribute: 'data-id'});
+      reorderTableColumns(order);
+    }
+  });
+  $("#column-visibility").disableSelection();
+
+  function reorderTableColumns(order) {
+    var table = $('#invoices-table').DataTable();
+    var columnIndexes = order.map(Number);
+    console.log('New column order:', columnIndexes);
+    table.colReorder.order(columnIndexes);
+    resetDataColumn();
+    resetDataId();
+  }
+
+  function resetDataId() {
+    var elements = document.querySelectorAll('.list-group-item-manual');
+    elements.forEach(function(element, index) {
+      element.setAttribute('data-id', index);
+    });
+  }
+
+  function resetDataColumn() {
+    var elements = document.querySelectorAll('.column-toggle');
+    elements.forEach(function(element, index) {
+      element.setAttribute('data-column', index);
+    });
+  }
+
+  $('.column-toggle').on('change', function() {
+    var table = $('#invoices-table').DataTable();
+    var column = table.column($(this).attr('data-column'));
+    column.visible(!column.visible());
+  });
+});
+<% end %>