Reset all filters button

[Toflar]

My ticket #1979 is floating around for quite some time now and everytime I have to reset all filters I think about this again, so here's my pull request to speed up this feature ;)

I've added a @todo because I seriously couldn't find out in what circumstances Contao displays a filter panel at the bottom of a page :D

[Toflar]

Ah for those who like pictures:

[Aybee]

+1

[aschempp]

Afaik the panel at the bottom is only for limit.

I really hate the icons and I think they are totally unclear...

[aschempp]

Also, be aware (about the icons) that this is not only for filters, its also the limit, search and sorting. It should match "apply" and "reset" action.

[xchs]

What about adding an (advanced) click event handler? Something similar like we already have implemented for the "Click-to-edit" functionality (see https://github.com/contao/core/blob/master/system/themes/default/src/hover.js#L92-L144).

So we might, for example, reset all filter settings by applying a [Ctrl]+Click or [Shift]+Click on the Apply/Reload icon.

[Toflar]

Afaik the panel at the bottom is only for limit.

Which is no reason for it to use a different FORM_SUBMIT, is it? :)

I really hate the icons and I think they are totally unclear...

I've searched good ones for a while. Feel free to suggest others.

Also, be aware (about the icons) that this is not only for filters, its also the limit, search and sorting. It should match "apply" and "reset" action.

I know. In my opinion they perfectly do.

What about adding an (advanced) click event handler?

We can still do that when the rest is clear ;)

[MacKP]

Hm i think it would be better, when we have an extra line for Filter 'Apply' and 'Reset'. Then we don't need Icons and its a little bit better for understanding. ATM its not clear, that the Apply Button for all Lines is. It looks like it is only for the secend one and the first one has no...
Maybe the new Line in a darker grey.

regards

[Toflar]

This would look something like this...

[MacKP]

Yes, maybe without the hr between the lines... and maybe in one color.. so it would be clear, that this is all together? But this looks like it goes in the right way i think.

[frontendschlampe]

+1 for the layout idea @Toflar :-)

[Toflar]

So rather buttons than icons? What do others think? @leofeyer?

[tristanlins]

I like the icon version #6239 (comment) but the buttons are also okay. 👍

[bekanntmacher]

Buttons without the hr between because sort, search and show are also filters. The icons are not clear enough.

[Aybee]

+1 for buttons

[aschempp]

Buttons are very nice, though they are pretty big.. maybe we can make them a little smaller?

[Toflar]

We'd need to add a CSS class "tl_submit small" or so then. But I want to have @leofeyer's feedback on this first.

[leofeyer]

I don't like the buttons at all.

[Toflar]

:D So back to icons? And if so, which ones? :)

[leofeyer]

No idea. I'm not even saying that we need a reset button :)

[discordier]

+1 for buttons instead of icons.
+1 for reset button in general.

[davidmaack]

+1 for the buttons
+1+1+1 for the reset function :)

[christianromeni]

+1 for Reset..

But I'm also not sure about the Buttons.. They take up more space.. And we already have 2 or sometimes 3 lines up there (I'm counting the tl_buttons div as a line)

[Toflar]

I actually like the buttons better too and also I like them in the size they are. It looks exactly the same e.g. in the edit mode for the "restore version" option.

[fabil]

+1 for the buttons
+1 for the reset-button

[ralfhartmann]

+1

[tpk109]

+1 for buttons otherwise

[Toflar]

So how do we proceed? I still think a "reset all filters" is a very useful feature in terms of usability!

[aschempp]

How about making the header fields collapsible? Then the button's size would not be a problem at all...

[Aybee]

Ich benutze in meinem BE etwas Javascript zum Resetten. Vielleicht sind ein paar Stellen davon ja hilfreich. (Ganz unten ist noch ne Option, damit ein ausgewählter Filter sofort greift ohne auf den Submit-Button zu klicken - fand ich immer sehr hilfreich.)

(function($) {
  window.addEvent('domready', function() {

    // Create a reset button to reset the panel selects and submit
    // TODO: Create ticket for marking default options with class="default" or data-default="true"
    var submitPanel = $$('.tl_submit_panel') || false;

    if(submitPanel[0]){
      var
        resetButton,
        resetSelects = $$('.tl_filter select, .tl_limit select'),
        //searchText = $$('input[type=search]')
        searchText = $$('input[type=search], .tl_search input')
      ;

      // create the reset button
      resetButton = new Element('div.reset_button', {
        title: 'Filter, Suche und Limit zurücksetzen - dann neu laden',
        text: 'reset',
        styles: {
          backgroundColor: 'orange',
          borderRadius: '5px',
          cursor: 'pointer',
          display: 'inline-block',
          width: 42,
          height: 22,
          lineHeight: 20,
          textAlign: 'center'
        }
      });

      resetButton.addEvent('click', function() {
        Array.each(resetSelects, function(el) {
          el.getSelected().setProperty('selected', '');
        });
        //searchText.erase('value');
        searchText.set('value', '');
        submitPanel[0].getParent('form').submit();
      });

      resetButton.inject(submitPanel[0]);
    }



    // Immediatly reload page after filter select or sort select
    $$('.tl_filter select, .tl_sorting select').addEvent('change', function() {
      this.form.submit();
    });

  });
})(document.id);

edit: corrected 2 lines

[Toflar]

I still think this is a very good feature and should be moved to core-bundle for 4.2. However, as I did my proposal I cannot really work on this more than I did here. @contao/developers

[bezin]

I just had the exact same demand for a filter reset button as proposed here. I would really appreciate this feature :)

[leofeyer]

Implemented in contao/core-bundle@bbd17d3. The icon will be exchanged when we merge the back end icons PR.