Skip to content

Commit d0dd47f

Browse files
tungleduyxyztungleduyxyz
authored
Merge pull request #21 from killbill/killbill-admin-new-ui
Killbill admin new UI
2 parents 4dc617a + 5c9f9cf commit d0dd47f

File tree

17 files changed

+311
-91
lines changed

17 files changed

+311
-91
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ env:
1515

1616
jobs:
1717
test:
18-
runs-on: ubuntu-latest
18+
runs-on: ubuntu-22.04
1919
strategy:
2020
matrix:
2121
include:

‎Gemfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ group :development do
2424
gem 'sprockets-rails'
2525
end
2626

27+
# Temporary fix for JRuby 9.4.10.0 here: https://github.com/jruby/jruby/issues/7262
28+
gem 'jar-dependencies', '~> 0.4.1' if defined?(JRUBY_VERSION)
29+
2730
# gem 'killbill-assets-ui', github: 'killbill/killbill-assets-ui', ref: 'main'
2831
# gem 'killbill-assets-ui', path: '../killbill-assets-ui'
2932
gem 'killbill-assets-ui'

‎app/assets/images/avatax/sort-down.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/assets/images/avatax/sort-up.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎app/views/avatax/configuration/_exemptions_form.html.erb‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
<%= form_tag do_set_exemption_configuration_path, :class => 'form-horizontal' do %>
2-
<div class="form-group">
3-
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-2 control-label' %>
2+
<div class="form-group d-flex pb-3">
3+
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-3 control-label' %>
44

5-
<div class="col-sm-10">
5+
<div class="col-sm-9">
66
<%= text_field_tag :account_id, nil, :class => 'form-control' %>
77
</div>
88
</div>
9-
<div class="form-group">
10-
<%= label_tag :customer_usage_type, 'Customer Usage Type', :class => 'col-sm-2 control-label' %>
11-
<div class="col-sm-10">
9+
<div class="form-group d-flex pb-3 border-bottom mb-3">
10+
<%= label_tag :customer_usage_type, 'Customer Usage Type', :class => 'col-sm-3 control-label' %>
11+
<div class="col-sm-9">
1212
<%= text_field_tag :customer_usage_type, nil, :class => 'form-control' %>
1313
</div>
1414
</div>
15-
<div class="form-group">
16-
<div class="col-sm-offset-2 col-sm-10">
17-
<%= submit_tag 'Save', :class => 'btn btn-default' %>
18-
</div>
15+
<div class="form-group d-flex justify-content-end pb-3">
16+
<%= render "kaui/components/button/button", {
17+
label: 'Close',
18+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
19+
type: "button",
20+
html_class: "kaui-button custom-hover mx-2",
21+
html_options: {
22+
id: "closeButton",
23+
onclick: "window.history.back();"
24+
}
25+
} %>
26+
<%= render "kaui/components/button/button", {
27+
label: 'Save',
28+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
29+
type: "submit",
30+
html_class: "kaui-dropdown custom-hover",
31+
html_options: {
32+
id: "saveButton"
33+
}
34+
} %>
1935
</div>
2036
<% end %>

‎app/views/avatax/configuration/_exemptions_table.html.erb‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
1-
<table id="exemptions-table" class="table table-condensed table-striped mobile-data">
1+
<table id="exemptions-table" class="configuration-table">
2+
<colgroup>
3+
<col style="width: 45%">
4+
<col style="width: 45%">
5+
<col style="width: 10%">
6+
</colgroup>
27
<thead>
38
<tr>
4-
<th>Account ID</th>
5-
<th>Customer Usage Type</th>
9+
<th class="sortable-header" data-column="0">
10+
<div class="header-content">
11+
<span class="header-text">Account ID</span>
12+
<div class="sort-icons">
13+
<%= image_tag "avatax/sort-up.svg", class: "sort-icon sort-asc" %>
14+
<%= image_tag "avatax/sort-down.svg", class: "sort-icon sort-desc" %>
15+
</div>
16+
</div>
17+
</th>
18+
<th class="sortable-header" data-column="1">
19+
<div class="header-content">
20+
<span class="header-text">Customer Usage Type</span>
21+
<div class="sort-icons">
22+
<%= image_tag "avatax/sort-up.svg", class: "sort-icon sort-asc" %>
23+
<%= image_tag "avatax/sort-down.svg", class: "sort-icon sort-desc" %>
24+
</div>
25+
</div>
26+
</th>
627
<th></th>
728
</tr>
829
</thead>
@@ -12,7 +33,7 @@
1233
<td><%= exemption[:account_id] %></td>
1334
<td><%= exemption[:customer_usage_type] %></td>
1435
<td>
15-
<%= link_to '<i class="fa fa-times"></i>'.html_safe, remove_exemption_configuration_path(:account_id => exemption[:account_id]), :method => :delete %>
36+
<%= link_to 'Remove'.html_safe, remove_exemption_configuration_path(:account_id => exemption[:account_id]), :method => :delete %>
1637
</td>
1738
</tr>
1839
<% end %>
@@ -24,11 +45,30 @@
2445
$('#exemptions-table').dataTable({
2546
"dom": "t",
2647
"paging": false,
48+
"ordering": true,
2749
"columns": [
2850
null,
2951
null,
3052
{ "orderable": false }
3153
]
3254
});
55+
var exemptionsTable = $('#exemptions-table').DataTable();
56+
57+
$('#exemptions-table thead').on('click', 'th.sortable-header, th.sortable-header *', function(e) {
58+
var th = $(this).closest('th');
59+
var columnIndex = parseInt(th.data('column'), 10);
60+
var currentOrder = exemptionsTable.order();
61+
var direction = 'asc';
62+
63+
if (currentOrder.length && currentOrder[0][0] === columnIndex) {
64+
direction = currentOrder[0][1] === 'asc' ? 'desc' : 'asc';
65+
}
66+
67+
exemptionsTable.order([columnIndex, direction]).draw();
68+
69+
// Update icon state
70+
$('#exemptions-table thead th .sort-icon').removeClass('active');
71+
th.find('.sort-' + (direction === 'asc' ? 'asc' : 'desc')).addClass('active');
72+
});
3373
});
3474
<% end %>

‎app/views/avatax/configuration/_plugin_form.html.erb‎

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,48 @@
11
<%= form_tag update_plugin_configuration_path, :class => 'form-horizontal' do %>
2-
<div class="form-group">
3-
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-2 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax account number"} %>
4-
<div class="col-sm-10">
2+
<div class="form-group d-flex pb-3">
3+
<%= label_tag :account_id, 'Account ID', :class => 'col-sm-3 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax account number"} %>
4+
<div class="col-sm-9">
55
<%= text_field_tag :account_id, @configuration[:account_id], :class => 'form-control', :required => true %>
66
</div>
77
</div>
8-
<div class="form-group">
9-
<%= label_tag :license_key, 'License key', :class => 'col-sm-2 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax license key"} %>
10-
<div class="col-sm-10">
8+
<div class="form-group d-flex pb-3">
9+
<%= label_tag :license_key, 'License key', :class => 'col-sm-3 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your AvaTax license key"} %>
10+
<div class="col-sm-9">
1111
<%= text_field_tag :license_key, @configuration[:license_key], :class => 'form-control', :required => true %>
1212
</div>
1313
</div>
14-
<div class="form-group">
15-
<%= label_tag :company_code, 'Company code', :class => 'col-sm-2 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your company code"} %>
16-
<div class="col-sm-10">
14+
<div class="form-group d-flex pb-3">
15+
<%= label_tag :company_code, 'Company code', :class => 'col-sm-3 control-label', :data => {:toggle=>"popover", :trigger=> "hover", :content=> "Your company code"} %>
16+
<div class="col-sm-9">
1717
<%= text_field_tag :company_code, @configuration[:company_code], :class => 'form-control', :required => true %>
1818
</div>
1919
</div>
20-
<div class="form-group">
21-
<div class="col-sm-offset-2 col-sm-10">
20+
<div class="form-group d-flex justify-content-end pb-3 border-bottom mb-3">
21+
<div class="col-sm-9">
2222
<div class="checkbox">
2323
<%= label_tag :commit_documents, 'Commit documents', :class => 'control-label' do %>
2424
<%= check_box_tag :commit_documents, '1', @configuration[:commit_documents] %>Commit documents?
2525
<% end %>
2626
</div>
2727
</div>
2828
</div>
29-
<div class="form-group">
30-
<div class="col-sm-offset-2 col-sm-10">
31-
<%= submit_tag 'Save', :class => 'btn btn-default' %>
32-
</div>
29+
<div class="form-group d-flex justify-content-end pb-3">
30+
<%= render "kaui/components/button/button", {
31+
label: 'Close',
32+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
33+
type: "button",
34+
html_class: "kaui-button custom-hover mx-2",
35+
html_options: {
36+
id: "closeButton",
37+
onclick: "window.history.back();"
38+
}
39+
} %>
40+
<%= render "kaui/components/button/button", {
41+
label: 'Save',
42+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
43+
type: "submit",
44+
html_class: "kaui-dropdown custom-hover",
45+
} %>
3346
</div>
3447
<% end %>
3548

‎app/views/avatax/configuration/_products_form.html.erb‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,36 @@
11
<%= form_tag do_set_tax_code_configuration_path, :class => 'form-horizontal' do %>
2-
<div class="form-group">
3-
<%= label_tag :product_name, 'Product name', :class => 'col-sm-2 control-label' %>
2+
<div class="form-group d-flex pb-3">
3+
<%= label_tag :product_name, 'Product name', :class => 'col-sm-3 control-label' %>
44

5-
<div class="col-sm-10">
5+
<div class="col-sm-9">
66
<%= select_tag :product_name, options_for_select(@products), :class => 'form-control' %>
77
</div>
88
</div>
9-
<div class="form-group">
10-
<%= label_tag :tax_code, 'Tax code', :class => 'col-sm-2 control-label' %>
11-
<div class="col-sm-10">
9+
<div class="form-group d-flex pb-3 border-bottom mb-3">
10+
<%= label_tag :tax_code, 'Tax code', :class => 'col-sm-3 control-label' %>
11+
<div class="col-sm-9">
1212
<%= text_field_tag :tax_code, nil, :class => 'form-control' %>
1313
</div>
1414
</div>
15-
<div class="form-group">
16-
<div class="col-sm-offset-2 col-sm-10">
17-
<%= submit_tag 'Save', :class => 'btn btn-default' %>
18-
</div>
15+
<div class="form-group d-flex justify-content-end pb-3">
16+
<%= render "kaui/components/button/button", {
17+
label: 'Close',
18+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
19+
type: "button",
20+
html_class: "kaui-button custom-hover mx-2",
21+
html_options: {
22+
id: "closeButton",
23+
onclick: "window.history.back();"
24+
}
25+
} %>
26+
<%= render "kaui/components/button/button", {
27+
label: 'Save',
28+
variant: "outline-secondary d-inline-flex align-items-center gap-1",
29+
type: "submit",
30+
html_class: "kaui-dropdown custom-hover",
31+
html_options: {
32+
id: "saveButton"
33+
}
34+
} %>
1935
</div>
2036
<% end %>

‎app/views/avatax/configuration/_products_table.html.erb‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,29 @@
1-
<table id="products-table" class="table table-condensed table-striped mobile-data">
1+
<table id="products-table" class="configuration-table">
2+
<colgroup>
3+
<col style="width: 45%">
4+
<col style="width: 45%">
5+
<col style="width: 10%">
6+
</colgroup>
27
<thead>
38
<tr>
4-
<th>Product name</th>
5-
<th>Tax code</th>
9+
<th class="sortable-header" data-column="0">
10+
<div class="header-content">
11+
<span class="header-text">Product name</span>
12+
<div class="sort-icons">
13+
<%= image_tag "avatax/sort-up.svg", class: "sort-icon sort-asc" %>
14+
<%= image_tag "avatax/sort-down.svg", class: "sort-icon sort-desc" %>
15+
</div>
16+
</div>
17+
</th>
18+
<th class="sortable-header" data-column="1">
19+
<div class="header-content">
20+
<span class="header-text">Tax code</span>
21+
<div class="sort-icons">
22+
<%= image_tag "avatax/sort-up.svg", class: "sort-icon sort-asc" %>
23+
<%= image_tag "avatax/sort-down.svg", class: "sort-icon sort-desc" %>
24+
</div>
25+
</div>
26+
</th>
627
<th></th>
728
</tr>
829
</thead>
@@ -12,7 +33,7 @@
1233
<td><%= tax_code[:productName] %></td>
1334
<td><%= tax_code[:taxCode] %></td>
1435
<td>
15-
<%= link_to '<i class="fa fa-times"></i>'.html_safe, remove_tax_code_configuration_path(:product_name => tax_code[:productName]), :method => :delete %>
36+
<%= link_to 'Remove'.html_safe, remove_tax_code_configuration_path(:product_name => tax_code[:productName]), :method => :delete %>
1637
</td>
1738
</tr>
1839
<% end %>
@@ -24,11 +45,30 @@
2445
$('#products-table').dataTable({
2546
"dom": "t",
2647
"paging": false,
48+
"ordering": true,
2749
"columns": [
2850
null,
2951
null,
3052
{ "orderable": false }
3153
]
3254
});
55+
var productsTable = $('#products-table').DataTable();
56+
57+
$('#products-table thead').on('click', 'th.sortable-header, th.sortable-header *', function(e) {
58+
var th = $(this).closest('th');
59+
var columnIndex = parseInt(th.data('column'), 10);
60+
var currentOrder = productsTable.order();
61+
var direction = 'asc';
62+
63+
if (currentOrder.length && currentOrder[0][0] === columnIndex) {
64+
direction = currentOrder[0][1] === 'asc' ? 'desc' : 'asc';
65+
}
66+
67+
productsTable.order([columnIndex, direction]).draw();
68+
69+
// Update icon state
70+
$('#products-table thead th .sort-icon').removeClass('active');
71+
th.find('.sort-' + (direction === 'asc' ? 'asc' : 'desc')).addClass('active');
72+
});
3373
});
3474
<% end %>

0 commit comments

Comments
 (0)