Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implemented invoice search box in latest invoice section. #379

Closed
wants to merge 1 commit into from
Closed

Implemented invoice search box in latest invoice section. #379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions app/assets/stylesheets/kaui/invoice.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,18 @@ table.invoice-totals {
font-size: 12px;
padding: 5px 30px;
}

.invoice-bar{
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.search-icon{
margin-left: -25px;
opacity: 0.5;
}

#search-invoice-btn{
margin-left: 10px;
}
30 changes: 27 additions & 3 deletions app/views/kaui/invoices/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<div class="search">

<div class="column-block">

<h1>Invoices</h1>

<div class="invoice-bar">
<div>
<input type="text" id="invoice-search" placeholder="Search Invoice" />
<span class="search-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
<button id="search-invoice-btn">Search</button>
</div>
<%= link_to 'Latest invoices', kaui_engine.invoices_path %>
</div>
<table id="invoices-table" class="table table-condensed mobile-data">
<thead>
<tr>
Expand Down Expand Up @@ -32,7 +38,8 @@ $(document).ready(function() {
"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 -%>
"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 -%>,
"zeroRecords": "No matching records found, please click on Latest Invoices"
},
"pageLength": <%= @limit %>,
"displayStart": <%= @offset %>,
Expand Down Expand Up @@ -63,5 +70,22 @@ $(document).ready(function() {
$(".dataTables_info").toggle(!noMoreData);
});
<% end %>

function searchInvoices () {
var invoiceSearch = document.getElementById('invoice-search').value;
table.search( invoiceSearch ).draw();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Is this performing only client-side search (in datatables)? What happens when there are multiple pages of invoices?
  • Is this performing a full table search or just search on a specific column? Would search for "15" match both the invoice number and the invoice amount?

Copy link
Contributor Author

@rohan-equinix rohan-equinix Sep 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Pierre,

  1. We will be doing client-side search only as we are utilizing Datatable Search() API. Also, we will search from multiple pages and not from a single page.
  2. We are performing a search only on the Number column and not full table search. So if we are searching for 15, it will give search results based on invoice number and not other columns.

}

var searchInput = document.getElementById('invoice-search');

searchInput.addEventListener("keypress", function(event) {
if (event.keyCode == 13) {
searchInvoices();
}
});

$('#search-invoice-btn').on("click", function(event) {
searchInvoices();
});
});
<% end %>