Giter VIP home page Giter VIP logo

vinzdrance / meteor-tabular-filter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from loredanacirstea/meteor-tabular-filter

0.0 1.0 0.0 76 KB

Collection filter based on the aldeed:simple-schema structure. It outputs a Mongo Selector based on the chosen options from the UI. It is compatible with aldeed:tabular selector.

Home Page: http://simple-filter.meteor.com/

CSS 2.18% HTML 18.62% JavaScript 79.20%

meteor-tabular-filter's Introduction

meteor-tabular-filter

https://atmospherejs.com/loredanacirstea/meteor-tabular-filter

It only works with bootstrap now, so you will have to add:

meteor add twbs:bootstrap
meteor add loredanacirstea:meteor-tabular-filter

Recommended only for personal use: making quick querries on your data. For this, see demo at http://simple-filter.meteor.com , with source at: https://github.com/loredanacirstea/simple-filter.

This package is not actively maintained as a default, but I will make small changes if there are easy to fix issues.

Version

0.2.0 - Changes:

Session.set("schema", "Table"); is now: Session.set("tabular-filter", {schema: "Table", label: 'On Field'});, so you can have a custom label for the filter.

Description

This package offers a filter which gets data from an aldeed:simple-schema object (collection structure). It outputs a Mongo Selector based on the chosen options from the meteor-tabular-filter UI. It is compatible with aldeed:tabular's selector.

Basically, meteor-tabular-filter just creates a filter UI from the colection structure and outputs a Mongo Selector (such as { $and: [ { priority: "medium" }, { state: true } ] }) after the user chooses the options.

What to expect

The AND / OR operations are done in the added order. Example:

Priority = medium AND Repetitions > 4 OR Deadline > 01/17/2015 AND State = true

will compute the first AND (Priority AND Repetitions), use the result with OR (result1 OR Deadline) and finally use the result with the second AND (result2 AND State).

Bugs

When getting an unwanted result (ex. when deleting the first filter), refresh the page.

How to Use

(see examples/simple-filter)

Set a Session variable with the name of your Simple Schema object.

//examples/simple-filter/client/client.js

Template.view_table.rendered = function(){
    Session.set("tabular-filter", {schema: "Table", label: 'On Field'});
}

Set a template helper (or another method) from the filter's filter_selector Session variable.

//examples/simple-filter/client/client.js

Template.view_table.helpers({
  selector: function (){
    var select = Session.get("filter_selector");
    return select;
  }
});

The Simple Schema object should have the form:

//examples/simple-filter/lib/schema.js

Schemas = {};
Schemas.Table = new SimpleSchema({});

Add the {{> expression_filter}} template to your .html file

//examples/simple-filter/client/client.html

<div id="content">
    {{> expression_filter}} <!-- add this template for the filter -->
    {{> view_table}} <!-- template for the aldeed:meteor-tabular grid -->
</div>

The selector template helper can be used with aldeed:meteor-tabular:

//examples/simple-filter/client/client.html

<template name="view_table">
    <div class="table-responsive">
        {{> tabular table=TabularTables.Table selector=selector class="table table-striped table-bordered table-hover table-condensed"}}
    </div>
</template>

Omit Schema Fields

If you have schema fields that you don't want to include, extend SimpleSchema with:

SimpleSchema.extendOptions({
  tabularFilterOmit: Match.Optional(Boolean)
});

and add tabularFilterOmit: true to your field, like this:

deadline: {
    type: Date,
    label: "Deadline",
    tabularFilterOmit: true
},

By Loretek

meteor-tabular-filter's People

Contributors

loredanacirstea avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.