kaui 3.0.9 → 4.0.0

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

@@ -1,13 +1,30 @@
 <%= form_for [:account, @account_email], :html => {:class => 'form-horizontal'} do |f| %>
-    <div class='form-group'>
+    <div class='form-group d-flex pb-3 border-bottom mb-3'>
       <%= f.label :email, 'Email', :class => 'col-sm-2 control-label' %>
       <div class="col-sm-10">
         <%= f.email_field :email, :class => 'form-control', :required => true %>
       </div>
     </div>
-    <div class="form-group">
-      <div class="col-sm-offset-2 col-sm-10">
-        <%= submit_tag 'Save', :class => 'btn btn-default' %>
-      </div>
+
+    <div class="form-group d-flex justify-content-end pb-3">
+      <%= render "kaui/components/button/button", {
+        label: 'Close',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "button",
+        html_class: "kaui-button custom-hover mx-2",
+        html_options: {
+          id: "closeButton",
+          onclick: "window.history.back();"
+        }
+      } %>
+      <%= render "kaui/components/button/button", {
+        label: 'Save Email',
+        variant: "outline-secondary d-inline-flex align-items-center gap-1",
+        type: "submit",
+        html_class: "kaui-dropdown custom-hover",
+        html_options: {
+          id: "saveButton"
+        }
+      } %>
     </div>
-<% end %>
+<% end %>

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

@@ -1,10 +1,16 @@
-<div class="register">
-  <div class="col-md-8 col-md-offset-2">
-
-    <div class="column-block">
-      <h1>Add new email</h1>
+<div class="register add-new-account-email-modal">
+  <div class="">
+    <div class="mx-auto" style="max-width: 37.5rem;">
+      <h5 class="add-account-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.3333 5.83333C13.3333 7.67428 11.8409 9.16667 9.99996 9.16667C8.15901 9.16667 6.66663 7.67428 6.66663 5.83333C6.66663 3.99238 8.15901 2.5 9.99996 2.5C11.8409 2.5 13.3333 3.99238 13.3333 5.83333Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M15.8333 15.8332C15.8333 13.532 13.9678 11.6665 11.6666 11.6665H8.33329C6.03211 11.6665 4.16663 13.532 4.16663 15.8332V17.4998H15.8333V15.8332Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+        </span>
+        Add new email
+      </h5>
       <%= render 'form' %>
     </div>
-
   </div>
 </div>

data/app/views/kaui/account_tags/_form_bar.html.erb

@@ -3,14 +3,23 @@
     <%= hidden_field_tag :account_id, account_id %>
 
     <% available_tags.each do |tag| %>
+        <div class="label-group-item-manual">
         <%= check_box_tag "tag_#{tag.id}", tag.name, tag_names.include?(tag.name), :disabled => !can_change_tags, :readonly => !can_change_tags %>
         <label class='tag-description' rel='tooltip' title='<%= tag.description %>'><%= tag.name %></label>
+        </div>
     <% end %>
 
     <% if can_change_tags %>
         <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
         <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
-        <%= submit_tag 'Update', :class => 'btn btn-default' %>
+        <div class="d-flex align-items-right justify-content-end">
+            <%= render "kaui/components/button/button", {
+                label: "Update",
+                variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                type: "submit",
+                html_class: "kaui-dropdown custom-hover",
+            } %>
+        </div>
     <% end %>
 <% end %>
 

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

@@ -1,35 +1,114 @@
-<div class="search">
-
-  <div class="column-block">
-
-    <h1>Tags</h1>
-    <input type="hidden" id="tags" value="<%= @tags_json %>">
-    <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-account-tags-index">
+  <%= render "kaui/components/breadcrumb/breadcrumb" %>
+  <div class="d-flex " style="gap: 4rem;">
+    <%= render :template => 'kaui/layouts/kaui_account_sidebar' %>
+    <div class="account-tags">
+      <div class="d-flex flex-column ">
+        <div class="account-tags-header mb-4">
+          <div class="d-flex align-items-center">
+            <h2>Tags</h2>
+          </div>
+          <input type="hidden" id="tags" value="<%= @tags_json %>">
+        </div>
+        <table id="tags-table" class="account-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>
 
 <%= javascript_tag do %>
     $(document).ready(function() {
         var tags = JSON.parse($("#tags").val());
-        $('#tags-table').DataTable({
+        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>>",
             data: tags
         });
+
+        // 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');
+        }
     });
+
+    setTimeout(() => {
+      $('#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>`);
+      });
+    }, 50);
 <% end %>