Added filtering option to Lists and Products views.

This commit is contained in:
Brian McGonagill 2022-08-25 15:39:27 -05:00
parent 0768e707b8
commit 7641b17e6f
6 changed files with 208 additions and 20 deletions

View file

@ -4,7 +4,15 @@
<table class="highlight striped responsive-table">
<thead>
<tr>
<th>Product Name</th>
<th>
{{#if $eq searchProd false}}
Product Name <i class="material-icons clickable right" id="filterProds">search</i>
{{else}}
<div style="width: 100%;">
<input type="text" class="searchProds" id="searchProds" style="width:85%" /> <i class="material-icons clickable" id="closeFilter">close</i>
</div>
{{/if}}
</th>
<th>Category</th>
<th>Store</th>
<th>Location</th>
@ -14,7 +22,7 @@
<tbody>
{{#each products}}
<tr>
<td>{{prodName}}</td>
<td>{{prodName}} </td>
<td>{{prodCategory}}</td>
<td>{{prodStore}}</td>
<td>{{prodLocation}}</td>

View file

@ -8,12 +8,21 @@ Template.prodMgmtTbl.onRendered(function() {
Meteor.setTimeout(function() {
$('.tooltipped').tooltip();
}, 150);
Session.set("searchProds", false);
});
Template.prodMgmtTbl.helpers({
products: function() {
return Products.find({});
let searchVal = Session.get("searchVal");
if (typeof searchVal == 'undefined' || searchVal.length == 0) {
return Products.find({});
} else {
return Products.find({ prodName: { $regex: searchVal + '.*', $options: 'i' } });
}
},
searchProd: function() {
return Session.get("searchProds");
}
});
Template.prodMgmtTbl.events({
@ -37,5 +46,19 @@ Template.prodMgmtTbl.events({
$("#prodLocation").val(prodInfo.prodLocation);
$("#prodStore").val(prodInfo.prodStore);
$('select').formSelect();
},
'click #filterProds' (event) {
event.preventDefault();
Session.set("searchProds", true);
},
'click #closeFilter' (event) {
event.preventDefault();
Session.set("searchProds", false);
},
"keyup #searchProds" (event) {
if (event.which !== 13) {
let searchVal = $("#searchProds").val();
Session.set("searchVal", searchVal);
}
}
});