aurelia-v-grid / vGrid

Aurelia-v-grid - npm source
MIT License
49 stars 10 forks source link

query between value/dates #73

Closed vegarringdal closed 7 years ago

vegarringdal commented 7 years ago

Need to add something to be able to query between dates and numbers Dunno how to do this atm, the arrayFilter class will need some work too: (https://github.com/vegarringdal/vGrid/blob/dev-rebuild/src/utils/arrayFilter.ts)

Same with how filter is updated

Maybe I could have a operator called "between", that creates to inputs under header

@Thanood, @JOKaija Any suggestions ?

Thanood commented 7 years ago

Could you make it available outside of the grid?

Imagine you have a default date filter "greater than". Next to the input box is a button with three dots (...). It opens a small panel ("advanced filter") which users could use to add another filter (connected with or, and or not as they wish to). Users can f.i. add an and operator with a less than filter.

There you'd have your between but completely customizable (and also usable for numbers, strings, ...). 😃

Of course, users should be able to create that panel. But the result of that panel should be understood by v-grid. Thus my question if we can somehow set that filter outside of the grid. Of course, v-grid could offer a default implementation.

What do you think?

vegarringdal commented 7 years ago

Could maybe add option the the menu, if you right click on a input you get typical 2 value input/filter so you could write in 2 value.

Like the option with advanced filer, maybe when you have a filter, I coudl add a row at bottom showing the active filter, and a edit button, then you could filter attributes you dont even have in the displayed columns

vegarringdal commented 7 years ago

Doing between query is now possible with code... So someone could now create a custom label with a button popup to do it

this.ds.query([{attribute:"index", operator:">", value:5}, {attribute:"index", operator:"<", value:10}])
this.gridConnector.raiseEvent("filterUpdateValues")

image

JOKaija commented 7 years ago

vegarringdal, one thing what you could add to this vGrid. Multifiltering.

Lets say. I have to show ie. values 10 and 100 on grid.

filter = [10, 100]

this.ds.query([{attribute:"index", operator:"=", value: this.filter},

Right now I can fake this requirement on one of my column, where I wan't to show items, which are transferred to customer (day information) AND items, what customer have already. So, I add "." character to "Original" string -> "Original." and day string have already several ".". Filtering with "." works for that, but it is not nice way to work with filter. And my boss will hate this, since he have to edit his excell schema for that column to filter out "." character from "Original". He is somekind excell fanatic :-) Yea, I could filter it away by myself too when creating excell, but.... blah...

vegarringdal commented 7 years ago

I know where you are going, only problem with or queries is that first filter with the headers will break that result Extending data source to do do 2 queries then combining them for the result to be displayed should be the hardest thing for me to implement, but getting this to work nice with the built in filtering, doing sub queries of displayed might be harder.

Only way I see how this can be done is by either adding function to tell the grid to use current displayed array as main until told otherwise or have some kinda callback options when a filter is run, so you can edit the query before it runs somehow.

Or maybe I could have a way to set default filter to run first before the grid filter runs

JOKaija commented 7 years ago

Imagine you have a default date filter "greater than". Next to the input box is a button with three dots (...). It opens a small panel ("advanced filter")

Just for note: I KNOW, the users, who are forced to use new programs, will HATE that kind of extra clicks! (They hate that new program anyway, when they are forced to learn something new, possibly complex one system) I heard so many times from users, how programmers are so "over engineered", that they doesn't even know, what REAL life users wants and they do overcomplex applications.

Users want to click max 1 position and after that enter required information. Also right mouse click should be avoided. Not normal way to use web pages... btw, I hate it too... On standalone applications yes, but on web pages.... BIG NO!

This is, what I'm observed about users opinions over 30 years...

Thanood commented 7 years ago

programmers are so "over engineered", that they doesn't even know, what REAL life users wants

You might be right but that being a "final solution" wasn't my intent. 😃

To be clear: my idea was to provide the developer with an api to allow for custom filters of any format. Including a second filter input or a more advanced single input inside of a header. You choose but you need the tools to do that.

Create something easy and use custom HTML headers to build it. Use the (proposed) api to set grid filters. And there is where "combine any filters for whatever" steps in: create anything your users want because then you have the api to do just that.

vegarringdal commented 7 years ago

Just for note: I KNOW, the users, who are forced to use new programs, will HATE that kind of extra clicks! I heard so many times from users, how programmers are so "engineered", that they doesn't even know, what REAL users wants and they do overcomplex applications. Users want to click max 1 position and after that enter required information. Also right mouse click should be avoided. Not normal way to use web pages... This is, what I'm observed about users opinions between 20 years...

Adding option to save queries you run a lot helps a lot, we lost that in the new software at work, been a nightmare to make special queries every time to get the results we need for different usages.

The custom html is there to help with this, you can make a header have 1 label and 2 inputs for setting the between inputs, right click with menus/ filters you do now, just need to make the default datasource very flexible

JOKaija commented 7 years ago

right click with menus/ filters you do now, just need to make the default datasource very flexible

Yep. But! Don't take this personall level. I just tell, what users have told to me :-) That was just a "note". I've learned it and that why I love that I can do simpliest menus via "colHeaderTemplate".

vegarringdal commented 7 years ago

Yep. But! Don't take this personall level. I just tell, what users have told to me :-) That was just a "note".

Np :-) I have same issue at work where the engineers havent made what we need to have control over what we are doing due to not understanding our needs, timeframe and budget :-)

Getting you to use the new grid was to help me see missing parts, we have already improved a few parts since you got it installed :-)

vegarringdal commented 7 years ago

Its also why I on the new grid have a datasource where you set the array to use, and try and keep the actual grid code kinda separated away from it.

Old one was a pain to expand, new one someone can take the gridconnector and datasource and make own without updating the grid as long as they have the mandatory function I need in the gridConnector and grouping results is correct/skipped if not needed

vegarringdal commented 7 years ago

Been thinking about the filters I have built in, if I add key to that attribute Ive made, it should be easier to have 2 different filter inputs on same attribute without one overriding values in the other one.

Because when you do a filter in the "inputs" it last filter and updates the values, main issue here is that it uses the attribute name as key, so if you have more then 1 of the same one it kinda gets messed up.

But again, if I add key by defalt and not allow users to define it, they wont know what key to add to query by kode to get correct input to update with correct value

Could maybe have key option as optional, if user dont set personal key it creates one

Haveto go now, but here is somehow what needs to be looked at

vegarringdal commented 7 years ago

Gave this some more thought

The grid works like this:

When you setArray() it sets the entire array to internal variable called mainArray Then it sends the array to the collection, this adds keys avgKey (numbers) to each row that does now have __avgGroup attribute.

When the grid header inputs do a query the grid always uses the mainArray Maybe I should have 2 arrays for holding data mainArray & subArray. When you set data these have the same data But what I could do is create a method called subQuery() that the grid header inputs uses, and the main query() method only reduces/sets values to the subArray

That way if you have 20k rows and want to do a initial query to reduce to 1000k and let users only work with that he can...

Maybe dumb idea, just writing it down while I have it in my head, so I can look at it more tomorrow/another day :-)

JOKaija commented 7 years ago

Any progress with multifiltering with several values / column?

vegarringdal commented 7 years ago

No, only added so you can do it by code atm Been pretty busy at work this week, did do some fixes in the weekend

You are prob thinking about built in between date input/ two inputs

vegarringdal commented 7 years ago

JOKaija K, added something to help you out since you are kinda stuck atm Pushed new build It enables you to have 2 columns on same attribute without it massing everything up What it does is uses a key, its prob not 100% what you wanted, but this will give you atleast a option to do the custom html part inside 1 column with you dont want 2 columns

html sample

<v-grid-col
          col-filter-menu="filter:index;filterkey:less"
          col-header-name="index"
          col-label-menu="sort:index" 
          col-width="100" 
          col-sort="field:index;asc:false" 
          col-filter="field:index;operator:<;key:less"
          col-field="index | numberFormatter"
          col-pin-left="true">
        </v-grid-col>

        <v-grid-col
          col-filter-menu="filter:index;filterkey:greater"
          col-header-name="index"
          col-label-menu="sort:index" 
          col-width="100" 
          col-sort="field:index;asc:false" 
          col-filter="field:index;operator:>;key:greater" 
          col-field="index | numberFormatter"
          col-pin-left="true">
        </v-grid-col>

Notice the

How it works it the grid does not just use the attribute when updating the inputs and when sending query, this way they are not so connected as earlier

to do manualy filter by code you will need to include the key

 this.ds.query([{attribute: 'index', operator: '>', value: 5, key:'greater' }, {attribute: 'index', operator: '<', value: 10, key:'less' }]);

filterkey

vegarringdal commented 7 years ago

@JOKaija Added most of this to the docs too, tell me how it works out

vegarringdal commented 7 years ago

@JOKaija Did you give it a try, or was it not useful at all ?