kaui 3.0.9 → 4.0.0

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

@@ -3,14 +3,23 @@
   <%= hidden_field_tag :invoice_id, invoice_id %>
 
   <% available_tags.each do |tag| %>
-        <%= 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 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 %>
 
@@ -19,3 +28,4 @@ $(function() {
   $(".tag-description").tooltip();
 });
 <% end %>
+

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

@@ -2,15 +2,22 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="advanceSearchModalLabel">Advance Search</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <h5 class="modal-title d-flex align-items-center gap-3" id="advanceSearchModalLabel">
+          <span class="icon-container">
+            <%= image_tag("kaui/modal/search.svg", width: 20, height: 20) %>
+          </span>
+          Advance Search
+        </h5>
+        <button type="button" class="close close-button custom-hover" data-bs-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">
+            <%= image_tag("kaui/modal/close.svg", width: 20, height: 20) %>
+          </span>
         </button>
       </div>
       <div class="modal-body">
         <form id="advanceSearchForm">
-            <div class="form-group d-flex align-items-center">
-            <label for="searchFieldSelect" class="mr-2" style="width: 30%;">Search Fields:</label>
+          <div class="form-group d-flex align-items-center">
+            <label for="searchFieldSelect" class="mr-2 field-label" style="width: 30%;">Search Field</label>
             <select id="searchFieldSelect" class="form-control mr-2">
               <% if @account.account_id.present? %>
                 <% @search_fields.reject { |value, _| value == 'balance' || value == 'account_id' }.each do |value, title| %>
@@ -22,7 +29,9 @@
                 <% end %>
               <% end %>
             </select>
-            <button type="button" class="btn btn-secondary" id="addSearchField">Add</button>
+            <button type="button" class="border-button custom-hover" id="addSearchField">
+              <%= image_tag("kaui/modal/plus.svg", width: 16, height: 16) %>
+            </button>
           </div>
           <div id="search-fields-container">
           </div>
@@ -34,18 +43,33 @@
         <% end %>
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-        <button type="button" class="btn btn-primary" id="applyAdvanceSearch">Apply Search</button>
-        <button type="button" class="btn btn-danger" id="clearAdvanceSearch">Clear Search</button>
+        <%= render "kaui/components/button/button", {
+          label: 'Clear Search',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-button custom-hover",
+          html_options: {
+            id: "clearAdvanceSearch"
+          }
+        } %>
+        <%= render "kaui/components/button/button", {
+          label: 'Apply Search',
+          variant: "outline-secondary d-inline-flex align-items-center gap-1",
+          type: "button",
+          html_class: "kaui-dropdown custom-hover",
+          html_options: {
+            id: "applyAdvanceSearch"
+          }
+        } %>
       </div>
     </div>
   </div>
 </div>
 
 <template id="search-field-template">
-  <div class="form-group row align-items-center search-field">
-    <label class="col-sm-4 col-form-label search-field-label"></label>
-    <div class="col-sm-3">
+  <div class="form-group row align-items-center justify-content-between search-field">
+    <label class="col-sm-3 col-form-label search-field-label"></label>
+    <div class="col-sm-4">
       <select class="form-control search-field-filter">
         <option value="eq">Equals</option>
         <option value="neq">Not Equals</option>
@@ -59,60 +83,12 @@
     <div class="col-sm-4">
       <input type="text" class="form-control search-field-value">
     </div>
-    <div class="col-sm-1">
-      <i class="glyphicon glyphicon-remove" id=remove-search-field></i>
-    </div>
+    <button type="button" class="button custom-hover" id="remove-search-field">
+      <%= image_tag("kaui/modal/red-close.svg", width: 16, height: 16) %>
+    </button>
   </div>
 </template>
 
-<style>
-  .form-group.row.align-items-center {
-    display: flex;
-    align-items: center;
-  }
-
-  .form-group.row.align-items-center label {
-    margin-bottom: 0; /* Remove default margin */
-  }
-
-  .form-group.row.align-items-center .form-control {
-    margin-right: 10px; /* Add some space between elements */
-  }
-
-  .form-group.d-flex {
-    display: flex;
-    align-items: center;
-  }
-
-  .form-group.d-flex label {
-    margin-bottom: 0; /* Remove default margin */
-  }
-
-  .form-group.d-flex .form-control {
-    margin-right: 10px; /* Add some space between the select box and the button */
-  }
-
-  #search-labels-container .label {
-    margin-left: 5px; /* Add space between labels */
-    margin-bottom: 5px; /* Add space below labels if they wrap to the next line */
-    color: white;
-  }
-
-  .filter-bar-container {
-    display: flex;
-    justify-content: flex-start; /* Align items to the left */
-    align-items: center; /* Center items vertically */
-  }
-
-  .filter-bar {
-    display: flex;
-    align-items: center; /* Center items vertically */
-  }
-
-  .filter-bar label {
-    margin: 10px; /* Add some space between the label and the select box */
-  }
-</style>
 
 <%= javascript_tag do %>
 $(document).ready(function() {
@@ -163,18 +139,26 @@ $(document).ready(function() {
     }
 
     searchFields.each(function() {
-      var filter = $(this).find('.search-field-filter option:selected').text();
-      var value = $(this).find('.search-field-value').val();
-      var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '');
+      var filter = $(this).find('.search-field-filter option:selected').text().trim();
+      var value = $(this).find('.search-field-value').val().trim();
+      var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '').trim();
 
       // Create and append the search label
       if (value !== '') {
         var label = $('<span>', {
-          class: 'label label-info',
-          text: columnName + ' [' + filter + '] ' + value
+          class: 'label label-info d-inline-flex align-items-center gap-2',
+          'data-field': columnName,
+          'data-filter': filter,
+          'data-value': value
         });
+        var labelText = $('<span>', { text: columnName + ' [' + filter + '] ' + value });
+        var closeIcon = $('<span>', {
+          class: 'filter-close-icon',
+          style: 'cursor: pointer; margin-left: 5px; display: inline-flex; align-items: center;'
+        }).html('<svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8337 4.1665L4.16699 15.8332M4.16699 4.1665L15.8337 15.8332" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+        label.append(labelText).append(closeIcon);
+        searchLabelsContainer.append(label);
       }
-      searchLabelsContainer.append(label);
     });
     $('#advanceSearchModal').modal('hide');
   });

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

@@ -1,76 +1,64 @@
 <div class="info-wrapper">
-
-  <% display_payment_options = (!dry_run && ((can?(:credit, Kaui::Account) && @invoice.status == 'DRAFT') || (can?(:charge, Kaui::Account) && @invoice.status == 'DRAFT') || (@invoice.balance > 0 && can?(:trigger, Kaui::Payment))))
-     if !(@available_invoice_tags ||= nil).blank? || !(@custom_fields ||= nil).blank? || display_payment_options %>
-      <div class="tag-bar">
-        <% unless @available_invoice_tags.blank? %>
-          <div class="tag-select" onclick="void(0)">
-            <span><i class="fa fa-tag"></i><i class="fa fa-caret-down"></i></span>
-
-            <div class="tag-select-box">
-              <strong>Tag As:</strong>
-              <%= render :partial => 'kaui/invoice_tags/form_bar',
-                         :locals => {:account_id => @account.account_id,
-                                     :invoice_id => @invoice.invoice_id,
-                                     :tag_names => @invoice_tags.map { |tag| tag.tag_definition_name },
-                                     :available_tags => @available_invoice_tags} %>
-            </div>
-          </div>
-        <% end %>
-        <%= render :partial => 'kaui/custom_fields/list_bar',
-                   :locals => {:custom_fields => @custom_fields} %>
-
-        <% if display_payment_options %>
-            <div class="tag-select" onclick="void(0)">
-              <span><i class="fa fa-credit-card"></i><i class="fa fa-caret-down"></i></span>
-
-              <div class="tag-select-box">
-
-                <% if can?(:credit, Kaui::Account) && @invoice.status == 'DRAFT' %>
-                    <%= link_to '<i class="fa fa-plus-square"></i>&nbsp;Add credit'.html_safe,
-                                kaui_engine.new_account_credit_path(@invoice.account_id, :currency => @invoice.currency, :invoice_id => @invoice.invoice_id) %>
-                <% end %>
-                <% if can?(:charge, Kaui::Account) && @invoice.status == 'DRAFT' %>
-                    <%= link_to '<i class="fa fa-plus-square"></i>&nbsp;Create charge'.html_safe,
-                                kaui_engine.new_account_charge_path(@invoice.account_id, :currency => @invoice.currency, :invoice_id => @invoice.invoice_id) %>
-                <% end %>
-                <% if @invoice.balance > 0 && can?(:trigger, Kaui::Payment) %>
-                    <%= link_to '<i class="fa fa-plus-square"></i>&nbsp;Make payment'.html_safe,
-                                kaui_engine.new_account_payment_path(@invoice.account_id, :invoice_id => @invoice.invoice_id) %>
-                <% end %>
-              </div>
-
-            </div>
-        <% end %>
-
-        <% if can?(:void, Kaui::Invoice) && @invoice.status != 'VOID' && @invoice_tags.find { |t| t.tag_definition_name == 'WRITTEN_OFF' }.nil? # The backend will do more comprehensive checks %>
-          <div class="tag-select" onclick="void(0)">
-            <span><i class="fa fa-trash"></i><i class="fa fa-caret-down"></i></span>
-
-            <div class="tag-select-box">
-              <%= form_tag void_invoice_path(:id => @invoice.invoice_id), :method => :delete do %>
-                <%= label_tag :comment, 'Comment', :class => 'col-sm-2 control-label' %>
-                <%= text_area_tag :comment, nil, :rows => 3, :class => 'form-control' %>
-                <%= submit_tag 'Void', :class => 'btn btn-default' %>
-              <% end %>
-            </div>
-          </div>
-        <% end %>
-      </div>
-  <% end %>
-
-  <table id="invoice-table" class="table table-condensed mobile-data">
+  <table id="invoice-table" class="invoice-table">
     <thead>
     <tr>
       <% unless (@available_invoice_item_tags ||= nil).blank? && (@custom_fields_per_invoice_item ||= nil).blank? %>
           <th></th>
       <% end %>
-      <th>Description</th>
-      <th>Start date</th>
-      <th>End date</th>
-      <th>Subscription ID</th>
-      <th>Amount</th>
-      <th>Comments</th>
+      <th class="sortable-header" data-column="<%= (@available_invoice_item_tags.blank? && @custom_fields_per_invoice_item.blank?) ? 0 : 1 %>">
+        <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="<%= (@available_invoice_item_tags.blank? && @custom_fields_per_invoice_item.blank?) ? 1 : 2 %>">
+        <div class="header-content">
+          <span class="header-text">Start date</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="<%= (@available_invoice_item_tags.blank? && @custom_fields_per_invoice_item.blank?) ? 2 : 3 %>">
+        <div class="header-content">
+          <span class="header-text">End date</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="<%= (@available_invoice_item_tags.blank? && @custom_fields_per_invoice_item.blank?) ? 3 : 4 %>">
+        <div class="header-content">
+          <span class="header-text">Subscription 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="<%= (@available_invoice_item_tags.blank? && @custom_fields_per_invoice_item.blank?) ? 4 : 5 %>">
+        <div class="header-content">
+          <span class="header-text">Amount</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="<%= (@available_invoice_item_tags.blank? && @custom_fields_per_invoice_item.blank?) ? 5 : 6 %>">
+        <div class="header-content">
+          <span class="header-text">Comments</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>
@@ -114,9 +102,14 @@
           <td>
             <% if can? :item_adjust, Kaui::Invoice %>
                 <nobr>
-                  <%= link_to 'Adjust',
-                              kaui_engine.edit_account_invoice_item_path(@invoice.account_id, item.invoice_item_id, :invoice_id => @invoice.invoice_id),
-                              :class => "btn btn-xs #{'disabled' unless item.amount > 0}" %>
+                  <%= link_to kaui_engine.edit_account_invoice_item_path(@invoice.account_id, item.invoice_item_id, :invoice_id => @invoice.invoice_id), :class => " #{'disabled' unless item.amount > 0}" do %>
+                    <%= render "kaui/components/button/button", {
+                      label: "Adjust",
+                      variant: "outline-secondary d-inline-flex align-items-center gap-1",
+                      type: "button",
+                      html_class: "adjust-button kaui-button",
+                    } %>
+                  <% end %>
                 </nobr>
             <% end %>
           </td>
@@ -124,28 +117,20 @@
     <% end %>
     </tbody>
   </table>
-  <table class="invoice-totals">
-    <tr>
-      <th></th>
-      <td></td>
-    </tr>
-    <tr>
-      <th>Invoice Total:</th>
-      <td><%= humanized_money_with_symbol @invoice.amount_to_money %> (<%= @invoice.currency %>)</td>
-    </tr>
-    <tr>
-      <th>Resulting available credits:</th>
-      <td><%= humanized_money_with_symbol @invoice.credit_adjustment_to_money %> (<%= @invoice.currency %>)</td>
-    </tr>
-    <tr>
-      <th>Refunded:</th>
-      <td><%= humanized_money_with_symbol @invoice.refund_adjustment_to_money %> (<%= @invoice.currency %>)</td>
-    </tr>
-    <tr>
-      <th>Balance:</th>
-      <td><%= humanized_money_with_symbol @invoice.balance_to_money %> (<%= @invoice.currency %>)</td>
-    </tr>
-  </table>
+  <div class="invoice-totals d-flex align-items-center justify-content-end gap-5">
+    <div class="d-flex align-items-end justify-content-between mb-3 flex-column">
+      <p>Invoice Total:</p>
+      <p>Resulting available credits:</p>
+      <p>Refunded:</p>
+      <p>Balance:</p>
+    </div>
+    <div class="d-flex align-items-start justify-content-between mb-3 flex-column">
+      <p><%= humanized_money_with_symbol @invoice.amount_to_money %> (<%= @invoice.currency %>)</p>
+      <p><%= humanized_money_with_symbol @invoice.credit_adjustment_to_money %> (<%= @invoice.currency %>)</p>
+      <p><%= humanized_money_with_symbol @invoice.refund_adjustment_to_money %> (<%= @invoice.currency %>)</p>
+      <p><%= humanized_money_with_symbol @invoice.balance_to_money %> (<%= @invoice.currency %>)</p>
+    </div>
+  </div>
 
 </div>