kaui 3.0.9 → 4.0.0

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

@@ -1,51 +1,114 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Tag Definitions
-      <% if can? :create_tag_definition, Kaui::Tag %>
-          <%= link_to '&nbsp;<i class="fa fa-plus-square"></i>'.html_safe, kaui_engine.new_tag_definition_path %>
-      <% end %>
-    </h1>
-
-    <table id='tag_definitions-table' class='table table-condensed mobile-data'>
-      <thead>
-      <tr>
-        <th>Id</th>
-        <th>Name</th>
-        <th>Description</th>
-        <th>System tag?</th>
-        <th>Applicable types</th>
-        <th></th>
-      </tr>
-      </thead>
-      <tbody>
-      <% @tag_definitions.each do |tag_definition| %>
-          <tr>
-            <td><%= object_id_popover(tag_definition.id) %></td>
-            <td><%= tag_definition.name %></td>
-            <td><%= tag_definition.description %></td>
-            <td><%= tag_definition.system_tag? %></td>
-            <td><%= tag_definition.pretty_applicable_object_types %></td>
-            <td>
-              <% unless tag_definition.system_tag? %>
-                  <%= link_to 'Destroy', kaui_engine.tag_definition_path(tag_definition.id), :confirm => 'Are you sure?', :method => :delete %>
+<div class="kaui-container kaui-tag-definitions-index">
+  <%= render partial: 'kaui/components/breadcrumb/breadcrumb', locals: {
+    breadcrumbs: [
+      { label: 'Settings', href: '/' },
+      { label: "Tag Definitions", href: '#' }
+    ]
+  } %>
+
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_setting_sidebar' %>
+
+    <div class="tag-definitions-details w-100">
+      <div class="d-flex flex-column">
+        <div class="tag-definitions-details-header">
+          <h2>Tag Definitions</h2>
+          <span>
+            <% if can? :create_tag_definition, Kaui::Tag %>
+              <%= link_to kaui_engine.new_tag_definition_path do %>
+                <%= render "kaui/components/button/button", {
+                  label: "Create Definition",
+                  icon: "kaui/plus.svg",
+                  variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                  type: "button",
+                  html_class: "kaui-dropdown custom-hover",
+                } %>
               <% end %>
-            </td>
-          </tr>
-      <% end %>
-      </tbody>
-    </table>
+            <% end %>
+          </span>
+        </div>
 
+        <div class="mt-4">
+          <table id='tag_definitions-table' class='tag-definitions-table'>
+            <thead>
+            <tr>
+              <th class="sortable-header" data-column="0">
+                <div class="header-content">
+                  <span class="header-text">Id</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="1">
+                <div class="header-content">
+                  <span class="header-text">Name</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="2">
+                <div class="header-content">
+                  <span class="header-text">Description</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="3">
+                <div class="header-content">
+                  <span class="header-text">System tag</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th class="sortable-header" data-column="4">
+                <div class="header-content">
+                  <span class="header-text">Applicable types</span>
+                  <div class="sort-icons">
+                    <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                    <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                  </div>
+                </div>
+              </th>
+              <th></th>
+            </tr>
+            </thead>
+            <tbody>
+            <% @tag_definitions.each do |tag_definition| %>
+                <tr>
+                  <td><%= object_id_popover(tag_definition.id) %></td>
+                  <td><%= tag_definition.name %></td>
+                  <td><%= tag_definition.description %></td>
+                  <td><span class="<%= tag_definition.system_tag? %>"><%= tag_definition.system_tag? %></span></td>
+                  <td><span><%= tag_definition.pretty_applicable_object_types %></span></td>
+                  <td>
+                    <% unless tag_definition.system_tag? %> 
+                      <%= link_to 'Destroy', kaui_engine.tag_definition_path(tag_definition.id), :confirm => 'Are you sure?', :method => :delete %>
+                    <% end %> 
+                  </td>
+                </tr>
+            <% end %>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
   </div>
-
 </div>
 
+
 <%= javascript_tag do %>
 $(document).ready(function() {
-  $('#tag_definitions-table').dataTable({
+  var table = $('#tag_definitions-table').DataTable({
     "dom": "t",
-    "paging": "false",
+    "paging": false,
     "order": [],
     "columns": [
     null,
@@ -56,5 +119,53 @@ $(document).ready(function() {
     { "orderable": false }
     ]
   });
+
+  // Custom sorting functionality
+  var currentSortColumn = -1;
+  var currentSortDirection = 'asc';
+
+  // Handle custom header clicks
+  $('.sortable-header').on('click', function() {
+    var columnIndex = parseInt($(this).data('column'));
+    var newDirection = 'asc';
+    
+    // If clicking the same column, toggle direction
+    if (currentSortColumn === columnIndex) {
+      newDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
+    }
+    
+    currentSortColumn = columnIndex;
+    currentSortDirection = newDirection;
+    
+    // Update visual indicators
+    updateSortIndicators(columnIndex, newDirection);
+    
+    // Apply DataTable sorting
+    table.order([columnIndex, newDirection]).draw();
+  });
+
+  // Function to update sort indicators
+  function updateSortIndicators(columnIndex, direction) {
+    // Reset all headers
+    $('.sortable-header').removeClass('sort-asc-active sort-desc-active');
+    $('.sort-icon').removeClass('active');
+    
+    // Set active state for current column
+    var $header = $('.sortable-header[data-column="' + columnIndex + '"]');
+    $header.addClass(direction + '-active');
+    $header.find('.sort-' + direction).addClass('active');
+  }
+
+  // Add hover tooltip functionality for object IDs
+  $('.object-id-popover').each(function() {
+    var $element = $(this);
+    var objectId = $element.data('id');
+    
+    if (objectId) {
+      $element.on('mouseenter', function() {
+        showObjectIdTooltip(this, objectId);
+      });
+    }
+  });
 });
 <% end %>

data/app/views/kaui/tag_definitions/new.html.erb

@@ -1,10 +1,17 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new tag definition</h1>
-      <%= render 'form' %>
+<div class="register add-new-tag-definition-details">
+  <div class="">
+        <div class="mx-auto" style="max-width:  37.5rem;">
+          <h5 class="add-new-tag-definition-title border-bottom pb-3 mb-3">
+              <span class="icon-container">
+                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M6.6665 11.667L8.33425 13.3368" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M15 5.00033L18.3333 1.66699" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M7.98807 17.1545L2.84508 12.0115C2.19422 11.3607 2.19422 10.3053 2.84508 9.65451L8.67841 3.82117C8.99099 3.5086 9.41491 3.33301 9.85691 3.33301H16.6666V10.1427C16.6666 10.5847 16.491 11.0086 16.1784 11.3212L10.3451 17.1545C9.69424 17.8053 8.63891 17.8053 7.98807 17.1545Z" stroke="#414651" stroke-width="1.5" stroke-linejoin="round"/>
+                  </svg>
+              </span>
+              Add New Tag Definition
+          </h5>
+          <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
 </div>

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

@@ -1,59 +1,148 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Tags</h1>
-
-    <table id="tags-table" class="table table-condensed mobile-data">
-      <thead>
-      <tr>
-        <th>Tag ID</th>
-        <th>Object ID</th>
-        <th>Object type</th>
-        <th>Tag definition name</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr>
-        <td colspan="1" class="dataTables_empty">Loading data from server</td>
-      </tr>
-      </tbody>
-    </table>
+<div class="kaui-container kaui-tags-index">
+  <%= render partial: 'kaui/components/breadcrumb/breadcrumb', locals: {
+    breadcrumbs: [
+      { label: 'Settings', href: '/' },
+      { label: "Tags", href: '#' }
+    ]
+  } %>
 
-  </div>
+  <div class="d-flex" style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_setting_sidebar' %>
+
+    <div class="tags-details w-100">
+      <div class="d-flex flex-column">
+        <div class="tags-details-header">
+          <h2>Tags</h2>
+          <span>
+          </span>
+        </div>
 
+        <div class="mt-4 w-100">
+         <table id="tags-table" class="tags-table">
+          <thead>
+          <tr>
+            <th class="sortable-header" data-column="0">
+              <div class="header-content">
+                <span class="header-text">Tag ID</span>
+                <div class="sort-icons">
+                  <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                  <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                </div>
+              </div>
+            </th>
+            <th class="sortable-header" data-column="1">
+              <div class="header-content">
+                <span class="header-text">Object ID</span>
+                <div class="sort-icons">
+                  <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                  <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                </div>
+              </div>
+            </th>
+            <th class="sortable-header" data-column="2">
+              <div class="header-content">
+                <span class="header-text">Object type</span>
+                <div class="sort-icons">
+                  <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                  <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                </div>
+              </div>
+            </th>
+            <th class="sortable-header" data-column="3">
+              <div class="header-content">
+                <span class="header-text">Tag definition name</span>
+                <div class="sort-icons">
+                  <%= image_tag "kaui/sort-up.svg", class: "sort-icon sort-asc" %>
+                  <%= image_tag "kaui/sort-down.svg", class: "sort-icon sort-desc" %>
+                </div>
+              </div>
+            </th>
+          </tr>
+          </thead>
+          <tbody>
+          </tbody>
+        </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <%= javascript_tag do %>
+  $(document).ready(function() {
+    var table = $('#tags-table').DataTable({
+      "dom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
+      "pagingType": <% if @max_nb_records.nil? -%>"simple"<% else -%>"full_numbers"<% end -%>,
+      "language": {
+        "info": <% if @max_nb_records.nil? -%>"Showing _START_ to _END_ of <%= number_with_delimiter(Kaui::EngineControllerUtil::SIMPLE_PAGINATION_THRESHOLD) -%>+ entries"<% else -%>"Showing _START_ to _END_ of _TOTAL_ entries"<% end -%>
+      },
+      "pageLength": <%= @limit %>,
+      "displayStart": <%= @offset %>,
+      <% unless @ordering.blank? %>
+        "order": [[ 0, "<%= @ordering %>" ]],
+      <% end %>
+      "processing": true,
+      "serverSide": true,
+      "search": {"search": "<%= @search_query %>"},
+      "ajax": "<%= tags_pagination_path(:ordering => @ordering, :format => :json) %>"
+    });
+
+    // Custom sorting functionality
+    var currentSortColumn = -1;
+    var currentSortDirection = 'asc';
 
-$(document).ready(function() {
-  var table = $('#tags-table').DataTable({
-    "dom": "<'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
-    "pagingType": <% if @max_nb_records.nil? -%>"simple"<% else -%>"full_numbers"<% end -%>,
-    "language": {
-    <!-- See DefaultPaginationSqlDaoHelper.java -->
-      "info": <% if @max_nb_records.nil? -%>"Showing _START_ to _END_ of <%= number_with_delimiter(Kaui::EngineControllerUtil::SIMPLE_PAGINATION_THRESHOLD) -%>+ entries"<% else -%>"Showing _START_ to _END_ of _TOTAL_ entries"<% end -%>
-    },
-    "pageLength": <%= @limit %>,
-    "displayStart": <%= @offset %>,
+    // Handle custom header clicks
+    $('.sortable-header').on('click', function() {
+      var columnIndex = parseInt($(this).data('column'));
+      var newDirection = 'asc';
+      
+      // If clicking the same column, toggle direction
+      if (currentSortColumn === columnIndex) {
+        newDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
+      }
+      
+      currentSortColumn = columnIndex;
+      currentSortDirection = newDirection;
+      
+      // Update visual indicators
+      updateSortIndicators(columnIndex, newDirection);
+      
+      // Apply DataTable sorting
+      table.order([columnIndex, newDirection]).draw();
+    });
+
+    // Function to update sort indicators
+    function updateSortIndicators(columnIndex, direction) {
+      // Reset all headers
+      $('.sortable-header').removeClass('sort-asc-active sort-desc-active');
+      $('.sort-icon').removeClass('active');
+      
+      // Set active state for current column
+      var $header = $('.sortable-header[data-column="' + columnIndex + '"]');
+      $header.addClass(direction + '-active');
+      $header.find('.sort-' + direction).addClass('active');
+    }
+
+    // Initialize sort indicators based on current state
     <% unless @ordering.blank? %>
-        "order": [[ 0, "<%= @ordering %>" ]],
+      var initialColumn = 0;
+      var initialDirection = "<%= @ordering %>";
+      updateSortIndicators(initialColumn, initialDirection);
     <% end %>
-    "processing": true,
-    "serverSide": true,
-    "search": {"search": "<%= @search_query %>"},
-    "ajax": "<%= tags_pagination_path(:ordering => @ordering, :format => :json) %>"
-  });
 
-  <!-- When we don't know the total number of pages, we need to hide the legend and next button manually -->
-  <% if @max_nb_records.nil? %>
     $('#tags-table').on('draw.dt', function() {
-      var noMoreData = table.column(0)
-                            .data()
-                            .length == 0;
-      $(".next.paginate_button").toggleClass("disabled", noMoreData);
-      $(".dataTables_info").toggle(!noMoreData);
+      // Custom logic for column 3 wrapping in a span
+      $('#tags-table tbody tr').each(function () {
+        const $td = $(this).find('td:nth-of-type(3)');
+        const content = $td.text().trim();
+        $td.html(`<span>${content}</span>`);
+      });
+
+      <% if @max_nb_records.nil? %>
+        var noMoreData = table.column(0).data().length == 0;
+        $(".next.paginate_button").toggleClass("disabled", noMoreData);
+        $(".dataTables_info").toggle(!noMoreData);
+      <% end %>
     });
-  <% end %>
-});
+  });
 <% end %>

data/app/views/kaui/tenants/_form.html.erb

@@ -1,13 +1,16 @@
 <%= form_for :tenants, :url => {:action => :select_tenant}, :html => {:class => 'form-horizontal'} do |f| %>
-    <div class="form-group">
+    <div class="form-group d-flex pb-3">
       <%= label_tag :tenant_name, 'Tenant', :class => 'col-sm-2 control-label' %>
       <div class="col-sm-10">
         <%= select_tag :kb_tenant_id, options_for_select(@tenants.map { |t| [t.name || t.api_key, t.kb_tenant_id] }), :class => 'form-control' %>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <%= f.submit 'Save', :class => 'btn btn-default' %>
-      </div>
+    <div class="form-group d-flex justify-content-end pt-3 mt-3 border-top">
+      <%= render "kaui/components/button/button", {
+        label: 'Save',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "submit",
+        html_class: "kaui-dropdown custom-hover"
+      } %>
     </div>
 <% end %>

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

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Choose tenant</h1>
-      <%= render 'form' %>
+<div class="register kaui-container kaui-tenant-select">
+  <div class="">
+        <div class="" style="max-width: 36rem; margin: 0 auto;">
+            <h5 class="choose-tenant-title border-bottom">
+                <span class="icon-container">
+                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M13.3334 5.83333C13.3334 7.67428 11.841 9.16667 10.0001 9.16667C8.15913 9.16667 6.66675 7.67428 6.66675 5.83333C6.66675 3.99238 8.15913 2.5 10.0001 2.5C11.841 2.5 13.3334 3.99238 13.3334 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M15.8334 15.8337C15.8334 13.5325 13.9679 11.667 11.6667 11.667H8.33341C6.03223 11.667 4.16675 13.5325 4.16675 15.8337V17.5003H15.8334V15.8337Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </span>
+                Choose tenant
+            </h5>
+            <%= render 'form' %>
+        </div>
     </div>
-
-  </div>
-</div>
+</div>

data/app/views/kaui/transactions/_control_plugin_names.html.erb

@@ -1,5 +1,7 @@
-<div id="control_plugin_names" class="row">
-  <a class='btn btn-xs' href="javascript:void(0);" onclick="new_control_plugin_name();" id="new_control_plugin_names"><%= '<i class="fa fa-plus-square"></i>'.html_safe + " add control plugin names" %></a>
+<div id="control_plugin_names" class="">
+  <a class='dots-menu kaui-button' href="javascript:void(0);" onclick="new_control_plugin_name();" id="new_control_plugin_names"><%= '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99992 3.3335V16.6668M16.6666 10.0002H3.33325" stroke="#1570EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>'.html_safe + " Add Control Plugin Names" %></a>
   <table id="control_plugin_names_table" class="table table-condensed">
     <thead>
     <tr>
@@ -11,14 +13,22 @@
     <% (@control_plugin_names ||= ['']).each_with_index do |control_plugin_name, index| %>
       <tr id="control_plugin_name_<%= index %>" >
         <td><%= text_field_tag 'control_plugin_names[]', control_plugin_name, class: 'form-control' %></td>
-        <td>
-          <a class='btn btn-xs' href="javascript:void(0);" onclick="delete_control_plugin_name(this);" id="delete_control_plugin_name_<%= index %>"><%= '<i class="fa fa-times"></i>'.html_safe %></a>
+        <td class="close-icon">
+          <a class='' href="javascript:void(0);" onclick="delete_control_plugin_name(this);" id="delete_control_plugin_name_<%= index %>"><%= '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_394_21877)">
+                <path d="M12.6671 3.3335L3.33374 12.6668M3.33374 3.3335L12.6671 12.6668" stroke="#D92D20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </g>
+                <defs>
+                <clipPath id="clip0_394_21877">
+                <rect width="16" height="16" fill="white"/>
+                </clipPath>
+                </defs>
+                </svg>'.html_safe %></a>
         </td>
       </tr>
     <% end %>
     </tbody>
   </table>
-  <hr/>
 </div>
 
 <%= javascript_tag do %>
@@ -50,15 +60,13 @@
 
     function delete_control_plugin_name(obj) {
       var idx = obj.id.split("delete_control_plugin_name_")[1];
-      var rowCount = $('#control_plugin_names_table tr').size();
+      var rowCount = $('#control_plugin_names_table tbody tr').length;
 
-      if ( rowCount > 2 ){
+      if (rowCount > 1) {
         $("#control_plugin_name_" + idx).remove();
       } else {
         $("#control_plugin_name_" + idx).find('td').each(function(){
-          $(this).contents().each(function(){
-            $(this).val('');
-          });
+          $(this).find('input').val('');
         });
       }
     }