tambet / FilterBuilder

FilterBuilder is an UI component to create queries and filters. Based on vue 2.0.

FilterBuilder

FilterBuilder is an UI component to create queries and filters. Based on vue 2.0 and bootstrap & AdminLTE.css

Use the FilterBuilder to construct queries of arbitrary complexity.

🌰 Here is a DEMO

###Usage Writing HTML like:

<and-or :options="options" :isFirst="isFirst" ref="andOr"></and-or>

Passing Pros like:

{
  options: {
    keys: [{
      name: 'Choose Key',
      id: -99
    },{
      name: 'Crash Number',
      id: 134
    },{
      name: 'Daily Startup',
      id: 256
    }],
    operators: [{
      name: 'Choose Operator',
      id: -99
    },{
      name: 'more',
      id: '>'
    },{
      name: 'equal',
      id: '='
    },{
      name: 'less',
      id: '<'
    }]
  },
  isFirst: true
}

Using queryFormStatus() function to get query result like:

{
    "conditions": "AND",
    "rules": [
        {
            "key": "2",
            "operator": "more",
            "value": "1"
        },
        {
            "key": "2",
            "operator": "equal",
            "value": "3"
        },
        {
            "conditions": "OR",
            "rules": [
                {
                    "key": "1",
                    "operator": "equal",
                    "value": "4"
                },
                {
                    "key": "3",
                    "operator": "equal",
                    "value": "5"
                },
                {
                    "conditions": "AND",
                    "rules": [
                        {
                            "key": "2",
                            "operator": "less",
                            "value": "6"
                        }
                    ]
                }
            ]
        }
    ]
}

Using fillFormStatus() function to fill query into this component.

🍒Form validation & other addtional function is still in develop.