Serenity: QuickFilters - Alternative displays

[sayuga]

So, I've been asked to take the quickfilters that are currently displayed on top of the grid, and move them to a side menu (right-side menu) or somewhere so that hides when not in use. I was also thinking about making it hide in-place as a expandable block or simply having it appear in a separate dialog box. Now, before I tackle this, I want to verify something.

I pressume my best option to manipulate this behaviour will be in the .less files but some of the function will be depended on whether its an add or update. Is there a simple way to intercept the quickfilters? I'm going to be playing with this but wanted to see if anyone has any groundwork already in place.

[stixoffire]

@sayuga just an idea - using getQuickFilters you can try to get the element and remove it from the grid object and then add it to where you want it - much like a button ..

[sayuga]

That is a good point though I'm leaning more towards something similar to a hover behavior if possible. Most people are likely to hover and then select the search filters...though now that I think about it....I'm not sure how well that would work on mobile. Maybe a button is a better option. I'll post a sample once I get something running to get some opinions

[sayuga]

At the end I opted for the button option. I figure it'll be better suited when using mobile screens.

Here is what I did:

If you want to affect only on Grid go the the .less file and add:

.s-myProject-xyzGrid{
.quick-filters-bar{display: none}
}

then add in the xyzGrid.ts file:

getButtons() {
var buttons = super.getButtons();

         buttons.push( {
            separator: true,
            title: 'Show Quick Filters',
            cssClass: 'show-quick-filters',
            icon: 'fa-search',
            onClick: () => {

                this.element.find('.quick-filters-bar').toggle(this.element.show)

            },
            hint: 'Click here to display Quick Filters'
        });
        return buttons;
    }

Not ultimately the end product of what I wanted originally but I feel it works better . Thoughts anyone?

[stixoffire]

@sayuga I think if you wanted to move them to a side menu
Pseudo code
var quickFilterElem = this.element.find('.quick-filters-bar')
var quickfilterparent = this.element.find('.quick-filters-bar').Getparent()

quickfilterparent.Remove(quickFilterElem);
var myNewParent = this.element.find(parent of where I want it to be placed)
myNewParent.Add(add(quickFilterElem);

See this for some guidance and reusable code :
https://www.abeautifulsite.net/adding-and-removing-elements-on-the-fly-using-javascript

[sayuga]

thank you @stixoffire I think I'm going to stick with what I've put together since it works for my current needs but I'll explore your approach some more and add it to the wiki a bit later. It may be a nice way to set particular behaviors on the css,.

[JohnRanger]

@sayuga ,

if I read you here in this issue correctly you wanted to add your solution to the Wiki. Will you do it? :-)

With kind regards,

John

[sayuga]

Hi there @JohnRanger. It's been a while since I've had the chance to log back in here and had completely forgotten I never added the wiki entry. I'll try to get it done this week.

Cheers!