ukrbublik / react-awesome-query-builder Goto Github PK

LIke this: http://querybuilder.js.org/demo.html#plugins
Make its displaying configurable
(maybe also add 'Invert' button)

Can we populate List of Fields/Operators/Services from an Web Service API instead of hard coding in the Config.js?

For renderFieldAndOpAsDropdown==true, see renderAsDropdown()
Can't use <Menu mode="vertical-left" ... /> because this isn't supported by AntDesign, but supported by https://github.com/react-component/menu
If there is no space on right side of screen, dropdown submenu will not be fully visible

Is there a way to use the result of queryBuilderFormat to repopulate the querybuilder in the value prop?

Lets say i have created a query using the query builder with set of fields/operators/values and saved it(JSON) to storage. On my next visit(refresh) to the UI page i want to recreate the UI with all controls(fields/operators/values) with specific values i saved from the saved query in storage with the specific previous values selected.

Hi. Project looks great. I wanted to play with it, but can't get past the first step.. "npm install".

It's failing on "rm -rf build/npm && babel -d build/npm/lib ./modules && cp README.md build/npm...."

I'm not very familiar with npm, but it looks like if I want to run the examples, I would need to do some hacking to convert *nix script code to Windows?

I have a project and I wanted to integrate this query builder into it, but it messes up all my styles. Can anyone help me to find a way to "isolate" query builder own styles from the rest of the styles from the application?

Warning: Failed prop type: Invalid prop `children1` of type `Map` supplied to `Item`, expected instance of `OrderedMap`.

For anyone who ever faces the above warning after converting the tree output using fromJS from Immutable, you can solve it by doing the following:

function fromJSOrdered(js){
  return typeof js !== 'object' || js === null ? js :
    Array.isArray(js) ? 
      Immutable.Seq(js).map(fromJSOrdered).toList() :
      Immutable.Seq(js).map(fromJSOrdered).toOrderedMap()
}

Reference: https://github.com/facebook/immutable-js/wiki/Converting-from-JS-objects#custom-conversion

How to customize the look of ant design components.
E.g. buttons used within Groups etc.?

Hey, this library looks like a great fit for my project!

I am however unsure of whether there exists any functionality for calling add rule externally, like from a separate meny in my webapp. Would this be something that could be inserted into Query as a value?

I have read the example code and the github issues. My apology if this question / functionality has already been covered.

TypeError: children.map is not a function

I am getting below error after importing component in application

node_modules\antd\lib\style\index.css:12
SyntaxError: Unexpected token {
at createScript (vm.js:56:10)
at Object.runInThisContext (vm.js:97:10)
at Module._compile (module.js:542:28)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object. (node_modules\antd\lib\col\style\css.js:3:1)

Is there any reason why there's an underscore prepended to string queries. In my implementation, there is a single underscore. In the demo implementation, there are 2 underscores.

If this is a bug, I'll look into it and submit a PR, but if there's a reason I'm unaware of, feel free to let me know.

Thanks for creating this neat little wrapper!

I am getting the below error. I have already antd installed in a project .

$ npm i react-awesome-query-builder
[email protected] /Users/umutguncan/netionant
└─┬ [email protected]
  └─┬ [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├─┬ [email protected]
    │ └── [email protected]
    ├─┬ [email protected]
    │ └── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    ├── [email protected]
    └── [email protected]

npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none was installed.

typing something that doesn't make sense into the query builder makes it fail quietly.

Perhaps we could add an actual error message, disallow invalid inputs, or just in some way tell the user what happened

Is there already something available (or) something on the roadmap to get the SQL equivalent of the query
that can become the WHERE clause and passed to the database.

Could be an extension to the human string format queryString

@ukrbublik Hello, thanks for your work. I'm developing a big data center. So the query conditions may be very complex. I haven't found how to reset all conditions, just like this:

What's more?Is it possible to hide all the add, add group,and ,or, del Buttons for just a simple search box?

pls give me some suggestion.

Hi,

Do you have any plans to support React 16 in your road map?

Thanks

One of the best parts about Jquery builder is the ability to translate the query into mongodb or sql.
Does this plugin have the same ability, or would I have to write my own converter?

Thank you.

This lib is using with antd v2.12.2 which is bit aged. Some of my components rendered differently after this library being used. I assume this is cause by the older version of antd.

Thanks for this awesome library! We're seeing a deprecation warning in the console when using the select widget:

browser.js?3a0d:49 Warning: `Select[multiple|tags|combobox]` is deprecated, please use `Select[mode]` instead.

Can follow up with a PR later.

My end goal is that I want to be able to query two tables from the same heading in the query builder. As an example, right now I've got something like this:

    members: {
      label: 'Members',
      type: '!struct',
      subfields: {
        subname: {
          type: 'number',
          operators: ['equal'],
        },
        members_count: { // reference aggregates table
          label: 'Count',
          type: 'number'
        }
      }
    }

Right now this would generate members.subname and members.members_count, but I'd like to have the option to set something like tableName (or something more generic, if you can think of it) so that it'd generate aggregates.members_count while still showing up as one group in the builder.

Hi,

For the MongoDB support, do you have a way to customise the queries? jQuery-querybuilder has an event you can hook into which allows us to utilise $elemMatch.

Thanks

It would be great to have a setting that shows/hides "Add rule" button.

User case, I would like to show a "ready-only" mode where it shows the rules but does not allow to make changes. I understand that there will need to be other things to make it really readonly, but this could be a start.

If you're ok with this proposal, I can create a PR

I have a configured a in operator which allows a list of values.

select_in: {
    label: 'in',
    labelForFormat: 'IN',
    formatOp: (field, op, values, valueSrc, valueType, opDef, operatorOptions, isForDisplay) => {
      if (valueSrc === 'value') {
        return `${field} IN (${values.join(', ')})`
      } else {
        return `${field} IN (${values})`
      }
    },
    reversedOp: 'select_not_in'
  }

Say, I have stored a select_in item have values [1, 2, 3] in my savedTree.

When restore form the tree.

        <Query
          {...config}
          value={savedTree}
          onChange={this.onChange}
          get_children={this.getChildren}
        > </Query>

The constructor of ConnectedQuery at line will call the validateTree.

And then goto the line:

will set operatorCardinality to 1 for my select_in operator. And the the follow line use operatorCardinality to cut my list of 3 values to list of only 1 value:

The the newValue will will be [1].

Could use import import mdn-polyfills/Element.prototype.closest from https://github.com/msn0/mdn-polyfills

So I'm running into an issue with webpack when I bundle this component in with a module.

This is the error I get out on the browser:

621:1 Uncaught Error: Module build failed: 
@import "./themes/default";
@import "./core/index";

^
      File to import not found or unreadable: ./themes/default.
Parent style sheet: stdin
      in C:\vso-git\myapp\node_modules\antd\lib\style\index.less (line 1, column 1)

here's what I get in the CLI:

ERROR in ./~/css-loader!./~/less-loader/dist/cjs.js!./~/sass-loader/lib/loader.js?{"includePaths":["./AdvancedSearch/Adv
ancedSearch/Content/Modules/AdvancedSearch","C://vso-git//myapp//host//Content"]}!./~/antd/lib/style/index.les
s
Module build failed:
@import "./themes/default";
@import "./core/index";

^
      File to import not found or unreadable: ./themes/default.
Parent style sheet: stdin
      in C:\vso-git\myapp\node_modules\antd\lib\style\index.less (line 1, column 1)
 @ ./~/antd/lib/style/index.less 4:14-146
 @ ./~/antd/lib/date-picker/style/index.js
 @ ./~/react-awesome-query-builder/build/npm/lib/components/widgets/Number.js
 @ ./~/react-awesome-query-builder/build/npm/lib/components/widgets/index.js
 @ ./~/react-awesome-query-builder/build/npm/lib/index.js
 @ ./AdvancedSearch/AdvancedSearch/App/Modules/AdvancedSearch/viewmodels/QueryBuilderEx.es6
 @ ./~/babel-loader/lib?{"presets":["babel-preset-es2015","react","stage-3"]}!./AdvancedSearch/AdvancedSearch/App/Module
s/AdvancedSearch/viewmodels/AdvancedSearch.es6
 @ ./AdvancedSearch/AdvancedSearch/App/Modules/AdvancedSearch/viewmodels/AdvancedSearch.es6
 @ multi ./AdvancedSearch/AdvancedSearch/App/Modules/AdvancedSearch/viewmodels/AdvancedSearch.es6 ./AdvancedSearch/Advan
cedSearch/App/Modules/AdvancedSearch/viewmodels/AdvancedSearch.html

Now this could be an issue with antd, as the error is clearly coming from that library. And there's a bunch of other less style issues that I am getting this is just 1 / 6 errors I'm getting all pointing to the less styles in antd design.

I have a less-loader in my webpack below is my configuration:

    module: {
        rules: [{
            test: /\.es6|.jsx|.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: { presets: ['babel-preset-es2015', 'react', 'stage-3'] } //stage-3 does the polyfilling for '...' syntax
        }, {
            test: path.resolve(moduleExportPath),
            exclude: /node_modules/,
            use: [{
                loader: 'expose-loader',
                options: `__${type}_${dmxModule}`
            }, {
                loader: 'babel-loader',
                options: { presets: ['babel-preset-es2015', 'react', 'stage-3'] } //stage-3 does the polyfilling for '...' syntax
            }]
        }, {
            test: /\.html$/,
            loader: 'custom-knockout-template-loader!html-loader'
        }, {
            test: /\.(scss|css|less)$/,
            //include: path.resolve(__dirname, './host/Content'),
            //exclude: /node_modules/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader",
            }, {
                loader: "sass-loader", // compiles Sass to CSS
                options: {
                    includePaths: [moduleCssRootFile, path.resolve(__dirname, './host/Content')]
                }
            }]
        }, {
            test: /\.json$/,
            loader: 'json-loader',
        }],
        loaders: [{
            test: /exporting/, loader: 'imports?highstock'
        }, {
            test: /highcharts.modules.treemap/, loader: 'imports?highstock,highcharts.modules.heatmap'
        }, {
            test: /highcharts.modules.heatmap/, loader: 'imports?highstock'
        }]
    }

So I could be using the less loader incorrectly here. If so let me know what I should do I've tried a few different approaches. Including how you configured your webpack config here: https://github.com/ukrbublik/react-awesome-query-builder/blob/master/webpack.config.js

My webpack is failing:

Module not found: Error: Can't resolve 'style' in path'

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
You need to specify 'style-loader' instead of 'style',
see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed
 @ ./node_modules/antd/lib/time-picker/style/index.js 5:0-23
 @ ./node_modules/antd/lib/date-picker/style/index.js
 @ ./node_modules/react-awesome-query-builder/build/npm/lib/components/widgets/Number.js
@ ./node_modules/react-awesome-query-builder/build/npm/lib/components/widgets/index.js
@ ./node_modules/react-awesome-query-builder/build/npm/lib/index.js

Hello ,
I ran into some weird issue when trying to set setDefaultFieldAndOp to true. while it initializes the rule correctly with the correct Field & Operator. updating the value doesn't reflect in the input or the query unless you change the operator to something else ().

You can easily Reproduce the issue by cloning a fresh clone and changing setDefaultFieldAndOp to true. and add any defaultField for example name2.

I am suspecting the issue is originating from "valueType" being initialized with an object and not an array. but i am not sure where to go from there. So any help would be apprechiated.
Thanks

Hi,
I am just going through your plugin, i am not genarte QueryStringFormat as
Number < 1 AND Name 2 != "dd" OR Date < "07/Th/2018"

Awesome query builder does not render in Internet Explorer.

I get "Object doesn't support property in method 'remove'" on stuff.js (45,3)

The sample also fails (with a different error in this case).

• .query-builder-container for sortable in scrollable container
• config

I am running into accessibility problems using a screen reader because this library depends on Ant Design (see here: ant-design/ant-design#13198)

Has anyone come up with any workarounds to make the components listed accessible via screen reader?

Thanks!

Currently passing new value to Query will not re-render the query with the new value. Are there any plans on having this fixed?

Hi,I like you component.I want to update field data from database at component,But
exception:

react-dom.development.js:244 Uncaught TypeError: Cannot read property 'type' of undefined
    at _validateValue (tree.js:357)
    at setValue (tree.js:533)
    at tree.js:635
    at dispatch (createStore.js:165)
    at Object.setValue (stuff.js:28)
    at Object.RuleContainer._this.setValue (RuleContainer.js:73)
    at WidgetContainer._this._setValue (WidgetContainer.js:98)
    at Object.NumberWidget._this.handleChange [as onChange] (Number.js:68)
    at Object.setValue (mixin.js:140)
    at Object.onBlur (mixin.js:93)
    at HTMLUnknownElement.callCallback (react-dom.development.js:104)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:142)
    at Object.invokeGuardedCallback (react-dom.development.js:191)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:205)
    at executeDispatch (react-dom.development.js:470)
    at executeDispatchesInOrder (react-dom.development.js:492)
    at executeDispatchesAndRelease (react-dom.development.js:590)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:601)
    at forEachAccumulated (react-dom.development.js:571)
    at runEventsInBatch (react-dom.development.js:732)
    at runExtractedEventsInBatch (react-dom.development.js:741)
    at handleTopLevel (react-dom.development.js:4198)
    at batchedUpdates (react-dom.development.js:12510)
    at batchedUpdates (react-dom.development.js:1943)
    at dispatchEvent (react-dom.development.js:4279)
    at interactiveUpdates (react-dom.development.js:12565)
    at interactiveUpdates (react-dom.development.js:1962)
    at dispatchInteractiveEvent (react-dom.development.js:4256)

my query config:
fields:{},
other config is not changed from demo,

<Query
                       {...query_config}
                       fields={this.state.from_db_fields}
                      //you can pass object here, see treeJSON at onChange
                      //value=transit.fromJSON(treeJSON)
                          get_children={this.getChildren} />

this.state.from_db_fields had data from database.
please help .
how to update fields data from database at component?
Thanks your see!

Immutable strings aren't exactly the best transport for doing any type of AST eval on the backend. So in order to support a backend eval as well as frontend initialization, you would need to store a tuple of a regular json representation as well as the immutable representation (wasteful), or write a recursive fold over the json -> immutable representation. The former is a bad idea for a few reasons, so if you're just left with the latter, why not just support that at a library level?

I generally prefer language level persistent immutable data structures, but for a language like JS that doesn't have it, it seems like a much better idea to enforce immutability internally (if at all), and to allow the option to expose those internals when requested

I need to display more than 100 fields in the first field drop down, so if i need to change this dropdown to drop down with search similar to one displayed here... https://ant.design/components/select/#components-select-demo-search

How can i change it ? if Yes then where should i modify the code.

I have other form elements like drop down, check box etc present on the page along with query builder.. If i have multiple row visible with query builder with data in it & if i click on other form elements which are not part of query builder then all query builder row disappear and query string becomes empty.
I noticed that in my onchage function i am using this.setState({someFlag :true})
if i comment this.setState({someFlag :true}) code then above issue does not happen, but i need
use setState inside my function.

Can you please help me on this issue.

Hi

is ti possible to fix a limitation of a number of inner group level?

thanks

Does the builder support multi-tiered feature Where the first drop down opens another select box with 2nd drop down options?? Basically like a nested JSON.

Something like this?

Hi. I've been playing around with this. It seems very well done. Looks nice and very flexible and functional.
One problem I'm having is that I don't see an obvious way to dynamically load fields. The config is a full-blown javascript file. If I understand correctly, then this has to be compiled/bundled by webpack.
I'm new to react, webpack, etc, so maybe I just don't understand it well enough.
I need the 'fields' portion of the config file to be dynamically generated at load time. Is there an easy way to do this?
I will have potentially hundreds of fields and they will change depending on who's looking at it.
Thanks

Is there any way to add new type other than existing? Like for between query builder I would like add slider control (other that two input controls), for that I tried to add new Type but its not working for my.
Or is there any other way to add Slider widget in existing code?

Hey @ukrbublik,

So I have been using your library (with redux) for a while now and its been working great! However, I was recently asked to attempt to add multiselect, and found some issues with the MultiSelectWidget when storing the querytree in redux (or probably any other storage).

What happens
My program takes the onChange querytree from Query and stores them in redux, then uses this tree to reinstantiate Query. However, when I try to initialize Query with a querytree containing MultiSelectWidgets, their values are immediatly reset.

What I think causes this
I believe that I have located the bug in the function _getNewValueForFieldOp in modules/stores/tree.js. After doing some console.log testing, I can see that this if-sentence does not have an else statement, and in my case of trying to add a value to a MultiSelectWidget, the newValue is not set and is thus reset to undefined. The problem is not here. Firstly the value is in the wrong format (immutable list rather than normal list), secondly this if triggers and sets the value to invalid.

Whats in the image
Here are some console.logging I did. It shows the currentval and return value of this if sentence. As you can see, the currentval is at one point a List [ List [] ], which doesn't run properly.

What I thought I could do
I kinda already promised to deliver this functionality, so I would like to create a pull request, mb tomorrow or something. I can however not be 100% sure that I dont make any breaking changes, since this is core functionality. So if you could help me out with checking if my pull request is good that would be great :)

TL;DR: I think I found a bug, will make PR, please help to ensure its good

EDIT: update with more debugging info

A structure like this:

Ends up causing a weird effect:

This effect will be undercovered if you have simple fields placed first... The problem is that fields is an object and object's property order is a complex matter :)

Is there any setting to avoid this behaviour ? Is there a possibility to pass an array as fields so we can have order?

Best regards