julpod / filter-collections Goto Github PK
View Code? Open in Web Editor NEWSmart package for Meteor that adds filter and pager behavior to our Meteor's collections.
License: Other
Smart package for Meteor that adds filter and pager behavior to our Meteor's collections.
License: Other
I'm sorry I got this to you later than I promised but I finished a small demo. The link is here http://filtercollections.meteor.com/ and the repo is here https://github.com/krishamoud/filter-collections-example
Hi,
First thanks for making this package, it's great.
I'm just curious how to get the sorting to work though. I wrote a sample app to demo this app but I can't figure out how to get the sorting to work.
I have it here if you want to look at it.
https://github.com/krishamoud/filter-collections-example
-Kris
It may be benificial to join/depend on and use the meteor-pages package for its features.
https://github.com/alethes/meteor-pages
The fcPager
object is not reactive, so if I am adding or removing objects, I need to refresh the page before seeing the changes.
Some links to work related to the search implementation:
language:
fields.I have a problem with the functions related to DataTable. When Page load, the data is showing normally on the table, but it disappear once I press any function such as "sorting column head", "checkbox", "paging" or using "Search Text-box".
The problem exist only when I retrieve the data from back-end API, while all functions are working normally when I use the hard coded text in the ts file. in the two scenarios I place the code in ngOnInit{} and same HTML code.
I am using "light-bootstrap-dashboard-pro-angular-v1.3.0 " and below the Working Hard coded data and the code with the problem.
******************************* Declaration in both scenarios *****************************
declare interface DataTable {
headerRow: string[];
footerRow: string[];
dataRows: string[][];
}
public dataTable: DataTable;
********************************* Working - Hard Coded *****************************
ngOnInit{
this.dataTable = {
headerRow: [ 'Name', 'Position', 'Office' ],
footerRow: [ 'Name', 'Position', 'Office' ],
dataRows: [
['Airi Satou', 'Andrew Mike', 'Develop'],
['Angelica Ramos', 'John Doe', 'Design'],
['Ashton Cox', 'Alex Mike', 'Design', '2010']
]
};
}
*********************** Problem - Retrieved from back-end ********************************
ngOnInit {
this.astSrv.getAllAssets().subscribe((asts: AssetModel[]) => {
this.dataTable.headerRow = [];
this.dataTable.footerRow = [];
this.dataTable.dataRows = [];
this.dataTable.headerRow.push('Description', 'Company', 'Code' );
this.dataTable.footerRow.push('Description', 'Company', 'Code' );
asts.forEach (rw => {
let astDescription: string = rw.astDescription.toString();
let astCompany: string = rw.astCompany.toString();
let astCode: string = rw.astCode.toString();
this.dataTable.dataRows.push( [ astDescription , astCompany , astCode ]);
});
});
}
Could you specify the license? The license file is empty
Hello
I'm using the popular simple-schema package for my collections, therefore I declare my collection as instances of Mongo.Collection
e.g.
Items = new Mongo.Collection('items);
Unfortunately the application crashes when trying to publish
// doesn't work, will throw error
Meteor.FilterCollections.publish(Objects, {
name: 'people-lite'
});
meteor throws the following error:
/Users/moi/.meteor/packages/meteor-tool/.1.1.3.ik16id++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/fibers/future.js:245
throw(ex);
^
TypeError: Cannot call method 'publish' of undefined
at app/server/publications.js:12:26
at app/server/publications.js:16:3
at /Users/moi/myproject/.meteor/local/build/programs/server/boot.js:222:10
at Array.forEach (native)
at Function._.each._.forEach (/Users/moi/.meteor/packages/meteor-tool/.1.1.3.ik16id++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
at /Users/moi/myproject/.meteor/local/build/programs/server/boot.js:117:5
Exited with code: 8
Your application is crashing. Waiting for file change.
is there any way I can still use your package together with simple-form?
thank you
Something I found when playing with the example site at http://filtercollections.meteor.com/people, if searching for an invalid regex - just a single asterisk * - an exception is logged in the console and the application stops working:
Exception from Deps recompute: SyntaxError: Invalid regular expression: /*/: Nothing to repeat
at new RegExp (<anonymous>)
at Object.f.$regex (http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:3:4058)
at http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:3:1748
at Function.C.each.C.forEach (http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:1:802)
at u (http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:3:1656)
at http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:3:7004
at Function.C.each.C.forEach (http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:1:802)
at p (http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:3:6833)
at http://filtercollections.meteor.com/6c18fbdb69988b87c2fd9438ea0f6a066c015dd5.js:3:2019
at Array.map (native)
Some additional error handling may be required.
Quality is very important please write some unit tests for the package
I was wondering if/when there would be a version compatible with Meteor 0.9 and its new packaging system.
So far, I've found filter-collections to be the package that best meets our needs, but we have to move to 0.9 (for various reasons) and so now we're in a Catch-22 situation: if we stay on 0.8.3, we have filter-collections, but can't move forward, and if we go to 0.9 then we have to toss out all the views relying on FC...
I've been looking at your filter-collections-example repository. It looks great! Let me know if you need help applying the 0.1.0 updates.
Nice package. But after the changes with meteor 0.8, any changes to filtering is not reactive, and the template is not updated. This is probably because "rendered" is only run once after meteor 0.8.
The publish function should only publish on a whitelist basis.
Instead of executing client supplied finds:
collection.find(query.selector, query.options);
Only _.pick out whitelisted field:
parameters,
and use the other parts only as explicit sort and limit objects in the find:
collection.find(query.selector, {sort: query.options.sort, limit: query.options.limit, fields: query.options.fields});
When i want to use my collection "Sites" on another page (template) but i get:
Uncaught Error: There is already a collection named 'sitesCountFC'
SitesFilter = new Meteor.FilterCollections(Sites, {
template: 'siteList',
pager: {
itemsPerPage: 40
},
sort: {
order: ['asc', 'desc'],
defaults: [
['siteid', 'asc']
]
},
filters: {
siteid: {
title: 'Site ID',
operator: ['$regex', 'i'],
condition: '$or',
searchable: 'required'
},
site: {
title: 'Site Naam',
operator: ['$regex', 'i'],
condition: '$or',
searchable: 'required'
},
plaats: {
title: 'Plaats',
operator: ['$regex', 'i'],
condition: '$or',
searchable: 'required'
}
},
callbacks: {
beforeSubscribe: function (query) {
NProgress.start();
},
afterSubscribe: function (subscription) {
NProgress.done();
}
}
});
rfcFilter = new Meteor.FilterCollections(Sites, {
template: 'rfcAdd',
pager: {
itemsPerPage: 40
},
sort: {
order: ['asc', 'desc'],
defaults: [
['siteid', 'asc']
]
},
filters: {
siteid: {
title: 'Site ID',
operator: ['$regex', 'i'],
condition: '$or',
searchable: 'required'
},
site: {
title: 'Site Naam',
operator: ['$regex', 'i'],
condition: '$or',
searchable: 'required'
},
plaats: {
title: 'Plaats',
operator: ['$regex', 'i'],
condition: '$or',
searchable: 'required'
}
}
});
I am using the sort template helpers like so
<th class="fc-sort show-phone" data-fc-sort="phone"><a href="#" id="phone">
<i class="sort order icon"></i> Phone</a>
{{#if fcSort.phone.desc}}desc{{/if}}
{{#if fcSort.phone.asc}}asc{{/if}}
</th>
I can click it once, and it sorts and updates the text whether it is desc or asc, but I get the following error and am no longer able to sort any futher:
Exception from Deps recompute: TypeError: Cannot read property 'nodeName' of null at Patcher.match
After this error, the whole page no longer responds to any events.
In the demo example, when you click on a new page, the list grows and shrinks back again very quickly. It's a not very nice user experience.
But well done on this package. Looks like a solid start to a much needed package.
Hello,
I'm keen to use this smart package but I implement infinite scroll in my project using this method from meteorpedia: http://www.meteorpedia.com/read/Infinite_Scrolling
How do I use this smart package but continue to use my current infinite scroll implementation?
How it works is probably obivous to you. Could you provide a little more meta info about how it works in the Readme intro?
For example, where the sort/filter computation is done (server or client), why (pros/cons), if there can be a server side filtering from global data set to client data set, and further client side sort/filter without creating server load or retransmissions (as long as documents don't change).
Hello, thank you for this great package, I'm looking for a way to display (filter) only favorite which is held in another collection than user collection. Is there a way to pass to filter collection an array of ids that should be displayed, our should it be done manually ?
Cheers
I am trying to filter my collection "PriceList" and successfully implemented sorting, which works perfectly fine, but when I tried to implement filters and search, it is acting strangely. When I click custom filter buttons, they dont update the template dymanically, but when I do sorting after that, template gets updated, any idea where I am doing mistake? The following are the files, let me know if any more information needed.
price_list.js
PriceListFilter = new Meteor.FilterCollections(PriceList, {
name: "PriceListFC",
template: 'price_list',
filters: {
"trip": {
title: 'Trips',
operator: ['$regex', 'i'],
condition: '$and',
searchable: 'optional',
},
},
sort:{
order: ['desc', 'asc'],
amount0: ['desc', 'asc'],
amount1: ['desc', 'asc'],
amount2: ['desc', 'asc'],
amount3: ['desc', 'asc'],
amount4: ['desc', 'asc'],
},
});
price_list.html
<template name="price_list">
<div class="pael panel-info">
<div class="">
<div class="pull-right">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" value="{{fcFilterSearchable.criteria}}" data-fc-search-target="search-box">
</div>
<button type="submit" class="btn btn-success fc-search-trigger" data-fc-search-trigger="search-box">Submit</button>
{{#each available}}
<a href="#" class="fc-search-fields">{{#if active}}Disable{{else}}Enable{{/if}} {{title}} filter</a>
{{/each}}
<button type="button" class="fc-filter btn btn-primary {{#if fcFilterObj.isActive 'trip' 'Single Trip'}}active{{/if}}" data-fc-filter-field="trip" data-fc-filter-value="Single Trip" >
Single Trip
</button>
<a href="#" class="fc-filter btn btn-primary {{#if fcFilterObj.isActive 'trip' 'Annual Trip'}}active{{/if}}" data-fc-filter-field="trip" data-fc-filter-value="Annual Trip" >
Annual Trip
</a>
{{#if fcFilterSearchable.criteria}}<button type="button" class="btn btn-danger fc-search-clear">Reset</button>{{/if}}
</form>
{{#if fcFilterActive}}
<div class="navbar-form pull-right">
{{#each fcFilterActive}}
<a href="#" class="btn btn-info fc-filter-clear">{{title}}: {{operator}} {{value}}</a>
{{/each}}
</div>
{{/if}}
</div>
<h4>Price Comparision</h4>
</div>
<div class="table-responsive">
<table class="table table-hover table-bordered">
<thead >
<tr class="info">
<th class="fc-sort" data-fc-sort="amount0">
InsureandGo.com - Budget
{{#if fcSort.amount0.desc}}(des){{/if}}
{{#if fcSort.amount0.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount1">
InsureandGo.com - Silver
{{#if fcSort.amount1.desc}}(des){{/if}}
{{#if fcSort.amount1.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount2">
InsureandGo.com - Gold
{{#if fcSort.amount2.desc}}(des){{/if}}
{{#if fcSort.amount2.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount3">
InsureandGo.com - Black
{{#if fcSort.amount3.desc}}(des){{/if}}
{{#if fcSort.amount3.asc}}(asc){{/if}}
</th>
<th class="fc-sort" data-fc-sort="amount4">
InsureandGo.com - Annual Silver
{{#if fcSort.amount4.desc}}(des){{/if}}
{{#if fcSort.amount4.asc}}(asc){{/if}}
</th>
</tr>
</thead>
<tbody>
{{#each fcResults}}
<tr>
<td>{{amount0}}</td>
<td>{{amount1}}</td>
<td>{{amount2}}</td>
<td>{{amount3}}</td>
<td>{{amount4}}</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
</template>
I am trying to use the allow callback to check whether the current user is admin, but this.userId
is undefined.
My code is something like this:
Meteor.FilterCollections.publish(Meteor.users, {
name: 'usersListFiltered',
callbacks: {
allow: function(){
if (Roles.userIsInRole(this.userId, ['admin'])) {
return true;
} else {
return false;
}
}
}
});
Shouldn't this work? Am I missing something?
I'm trying to filter using multiple select one collection with FilterCollections package
PosicoesFilter = new FilterCollections(Posicoes, {
name: 'posicoes',
template: 'posicoes140',
filters: {
veiculoId: {
title: 'Veiculo',
/* operator: ['$elemMatch'],
condition: '$and',*/
searchable: true
},
id: {
title: 'ID',
condition: '$and',
sort: 'desc'
},
type: {
title: 'People Types'
},
"ignicao": {
title: 'Ignição'
},
"flags.status_movimento": {
title: 'Status Movimento'
}
},
sort: {
order: ['desc', 'asc'],
defaults: [
['data', 'desc']
]
},
pager: {
options: [50, 100, 150, 200, 250],
itemsPerPage: 100,
currentPage: 1,
showPages: 5,
},
callbacks: {
afterResults: function(cursor) {
var alteredResults = cursor.fetch();
_.each(alteredResults, function(result, idx) {
let veiculo = Veiculos.findOne(result.veiculoId, {
placa: 1
});
if (veiculo) {
alteredResults[idx].veiculo = veiculo.placa;
} else {
alteredResults[idx].veiculo =
"Veículo não cadastrado";
}
});
return alteredResults;
},
}
});
With this multiple select code
<select name="veiculos" class="fc-filter ui selection dropdown" data-fc-filter-field="veiculoId">
{{#each filtroVeiculos}}
<option class="fc-filter" data-fc-filter-field="veiculoId" data-fc-filter-value="{{value}}">{{label}}</option>
{{/each}}
</select>
It doesn't work. Have some example to do that?
I thought I had it figured out but I can't seem to sort the collection before the page is loaded. For example as soon as the page loads I would like the newest items to be loaded first.
Meteor 0.8 was released yesterday and I believe this package breaks for many of the client side features. It appears that sorting and paging still works, but searching and filtering does not. I've tried both the helper way and the method way to do some filtering and searching without any success.
I'm using the doctorpangloss:filter-collections fork, (which says it has Iron Router support) but I'm not sure if there is a way to only publish the records when at a specific route?
I am following the docs to implement pagination but get this instead
(results are more than 10)
No values in select box.
'From to' is blank.
have found 0 documents.
I've tried using defaults; setting the options manually.
If I try to set the options after the app has loaded
'from to' changes to 'from 0 to 0'
select option of 0 appears
I've already implemented sorting in the same collection.
CommentsFilter = new Meteor.FilterCollections(Comments, {
template: 'commentstable',
sort: {
order: ['desc', 'asc'],
defaults: [
['date', 'desc'],
]
},
pager: {
}
// Other arguments explained later. See Configuration.
});
<template name="commentstable">
<table class="table">
<tr>
<th class="fc-sort" data-fc-sort="title">
Posted by
{{#if fcSort.name.desc}}desc{{/if}}
{{#if fcSort.name.asc}}asc{{/if}}
</th>
<th class="fc-sort" data-fc-sort="body">
Body
{{#if fcSort.name.desc}}desc{{/if}}
{{#if fcSort.name.asc}}asc{{/if}}
</th>
<th class="fc-sort" data-fc-sort="date">
Time
{{#if fcSort.name.desc}}desc{{/if}}
{{#if fcSort.name.asc}}asc{{/if}}
</th>
<th class="fc-sort" data-fc-sort="tags">
Tags
{{#if fcSort.name.desc}}desc{{/if}}
{{#if fcSort.name.asc}}asc{{/if}}
</th>
</tr>
{{#each fcResults}}
<tr>
<td>{{title}}</td>
<td>{{body}}</td>
<td>{{date}}</td>
<td>{{tags}}</td>
</tr>
{{/each}}
</table>
<!-- items per page -->
<select class="fc-pager-options">
{{#each fcPager.options}}
<option value="{{value}}" {{status}}>{{value}}</option>
{{/each}}
</select>
<!-- /items per page -->
<!-- pager status -->
<ul>
<li>Current page is: {{fcPager.currentPage}}.</li>
<li>We are displaying {{fcPager.itemsPerPage}} results.</li>
<li>From <strong>{{fcPager.offsetStart}}</strong> to <strong>{{fcPager.offsetEnd}}</strong>.</li>
<li>We have found a total of <strong>{{fcPager.totalItems}}</strong> documents.</li>
</ul>
<!-- /pager status -->
<!-- numbered pager -->
<ul>
<li><a href="#" class="fc-pager-first"><<</a></li>
<li><a href="#" class="fc-pager-previous"><</a></li>
{{#each fcPager.pages}}
<li class="{{status}}"><a href="#" class="fc-pager-page" data-fc-pager-page="{{page}}">{{page}}</a></li>
{{/each}}
<li><a href="#" class="fc-pager-next">></a></li>
<li><a href="#" class="fc-pager-last">>></a></li>
</ul>
<!-- /numbered pager -->
<!-- items per page -->
<a href="#" class="fc-pager-option" data-fc-pager-page="10">ten</a>
<a href="#" class="fc-pager-option" data-fc-pager-page="20">twenty</a>
<a href="#" class="fc-pager-option" data-fc-pager-page="30">thirty</a>
<a href="#" class="fc-pager-option" data-fc-pager-page="40">fourty</a>
<a href="#" class="fc-pager-option" data-fc-pager-page="50">fifty</a>
<!-- /items per page -->
</template>```
I'm using meteor 0.8.2
Filters are being applied but I can't see the filters:
{{#if fcFilterActive}}
<hr/>
<strong>Active Filters</strong>
<ul class="nav nav-pills">
{{#each fcFilterActive}}
<li class="active"><a href="#" class="fc-filter-clear">{{title}}: {{operator}} {{value}}</a></li>
{{/each}}
<li class="active"><a href="#" class="fc-filter-reset">Reset all filters</a></li>
</ul>
{{/if}}
<!-- /active filters -->
That code {{#if fcFilterActive}} seems to be broken or something.
I'm using this packages also:
standard-app-packages
jquery
blaze-layout
iron-router
accounts-ui
accounts-base
accounts-password
bootstrap-3
moment
simple-schema
collection2
autoform
iron-router-progress
spin
fast-render
filter-collections
Maybe that has something to do?
thanks
Hey Julian,
Saw you may be available for Meteor contracting and wanted to discuss. I would have used your LinkedIn but prefer not to mess with InMail or connecting with people I technically don't know. Apologies for going this route!
If interested shoot me and email at [email protected]
Thanks,
George Kellerman
For example, an important meteor pattern is to "publish with relations", as there are no table joins. A package for this is https://github.com/erundook/meteor-publish-with-relations (see its publish API)
But publications may publish data from arbritrary sources (e.g. HTTP requests and others), not just collections.
It would be great these could be combined. For example, if filter-collections' sort, filter and pagination features could be added to custom publish functions, or, custom or publish-with-relations functions could be added to an (explicit) filter-collections publication definition.
I spent many hours before I guessed that this could be a problem. Perhaps I should have discovered this much sooner. It would be really helpful for new users if this was documented. If anyone has problems with sort/filter try "remove autopublish".
If there are less documents than for one page, then the collection is not sorted. Server receive the sort parameters. Maybe refresh is not triggered?
There is also a problem with sorting in desc order. Sometimes documents are sorted asc on each page, but desc trough pages.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.