From 00e1a6f8094996f17675175a30def5e9bbf3e76a Mon Sep 17 00:00:00 2001
From: Kyle Le <tungleduy.xyz@gmail.com>
Date: Fri, 19 Jul 2024 00:06:58 +0700
Subject: [PATCH] [technical-support-137] New feature to modify columns

---
 app/controllers/kaui/accounts_controller.rb |   9 +-
 app/views/kaui/accounts/_edit_columns.erb   | 144 ++++++++++++++++++++
 app/views/kaui/accounts/index.html.erb      |  13 +-
 lib/kaui.rb                                 |  17 ++-
 4 files changed, 161 insertions(+), 22 deletions(-)
 create mode 100644 app/views/kaui/accounts/_edit_columns.erb

diff --git a/app/controllers/kaui/accounts_controller.rb b/app/controllers/kaui/accounts_controller.rb
index 87f9d39d..efd0b470 100644
--- a/app/controllers/kaui/accounts_controller.rb
+++ b/app/controllers/kaui/accounts_controller.rb
@@ -39,14 +39,7 @@ def pagination
       end
 
       formatter = lambda do |account|
-        child_label = ''
-        unless account.parent_account_id.nil?
-          child_label = account.parent_account_id.nil? ? '' : view_context.content_tag(:span, 'Child', class: %w[label label-info account-child-label])
-        end
-
-        row = [child_label, view_context.link_to(account.account_id, view_context.url_for(action: :show, account_id: account.account_id))]
-        row += Kaui.account_search_columns.call(account, view_context)[1]
-        row
+        Kaui.account_search_columns.call(account, view_context)[1]
       end
 
       paginate searcher, data_extractor, formatter
diff --git a/app/views/kaui/accounts/_edit_columns.erb b/app/views/kaui/accounts/_edit_columns.erb
new file mode 100644
index 00000000..cef9c9e5
--- /dev/null
+++ b/app/views/kaui/accounts/_edit_columns.erb
@@ -0,0 +1,144 @@
+<div class="dropdown-container">
+  <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_search_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>
+
+<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;
+    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() {
+  updateDropdownOrder();
+
+  function loadState() {
+    var state = JSON.parse(localStorage.getItem('DataTables_accounts-table_' + window.location.pathname));
+    return state || { columns: [], columnOrder: [] };
+  }
+
+  function updateDropdownOrder() {
+    var state = loadState();
+    var columnOrder = state.ColReorder;
+    var $list = $('#column-visibility');
+    var thElements = document.querySelectorAll('#accounts-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 = $('#accounts-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 = $('#accounts-table').DataTable();
+    var column = table.column($(this).attr('data-column'));
+    column.visible(!column.visible());
+  });
+});
+<% end %>
diff --git a/app/views/kaui/accounts/index.html.erb b/app/views/kaui/accounts/index.html.erb
index 706e5264..5013a6af 100644
--- a/app/views/kaui/accounts/index.html.erb
+++ b/app/views/kaui/accounts/index.html.erb
@@ -7,12 +7,11 @@
     <% else %>
         <h1>Showing all accounts</h1>
     <% end %>
+    <%= render :partial => 'edit_columns' %>
 
     <table id="accounts-table" class="table table-condensed mobile-data">
       <thead>
       <tr>
-        <th></th>
-        <th>ID</th>
         <% Kaui.account_search_columns.call()[0].each do |title| %>
           <th><%= title %></th>
         <% end %>
@@ -33,6 +32,9 @@
 $(document).ready(function() {
 
   var table = $('#accounts-table').DataTable({
+    "colReorder": true,
+    "stateSave": true,
+    "scrollX": true,
     "dom": "<'row'r>t<'row'<'col-md-6'i><'col-md-6'p>>",
     "pagingType": <% if @max_nb_records.nil? -%>"simple"<% else -%>"full_numbers"<% end -%>,
     "language": {
@@ -50,13 +52,6 @@ $(document).ready(function() {
     "serverSide": true,
     "search": {"search": "<%= @search_query %>"},
     "ajax": "<%= accounts_pagination_path(:ordering => @ordering, :format => :json) %>",
-    "columnDefs": [
-    { "orderable": false, "targets": 0, "createdCell": function (td, cellData, rowData, row, col) {
-        $(td).css('padding-left', '20px');
-        $(td).css('width', '60px');
-
-    } }
-    ],
     drawCallback: function() {
         setObjectIdPopover();
     }
diff --git a/lib/kaui.rb b/lib/kaui.rb
index d724f27d..af2c869d 100644
--- a/lib/kaui.rb
+++ b/lib/kaui.rb
@@ -60,12 +60,19 @@ module Kaui
   self.creditcard_plugin_name =  -> { '__EXTERNAL_PAYMENT__' }
 
   self.account_search_columns = lambda do |account = nil, view_context = nil|
+    fields = KillBillClient::Model::AccountAttributes.instance_variable_get('@json_attributes')
     [
-      ['External key', 'Balance'],
-      [
-        account&.external_key,
-        account.nil? || view_context.nil? ? nil : view_context.humanized_money_with_symbol(account.balance_to_money)
-      ]
+      fields.map { |attr| attr.split('_').join(' ').capitalize },
+      fields.map do |attr|
+        case attr
+        when 'account_id'
+          account.nil? || view_context.nil? ? nil : view_context.link_to(account.account_id, view_context.url_for(action: :show, account_id: account.account_id))
+        when 'account_balance'
+          account.nil? || view_context.nil? ? nil : view_context.humanized_money_with_symbol(account.balance_to_money)
+        else
+          account&.send(attr.downcase)
+        end
+      end
     ]
   end