Repeater Easy Sort

[Robin S]

Repeater Easy Sort

Adds a compact "easy-sort" mode to Repeater and Repeater Matrix, making those fields easier to sort when there are a large number of items.

The module also enhances Repeater Matrix by allowing a colour to be set for each matrix type. This colour is used in the item headers and in the "add new" links, to help visually distinguish different matrix types in the inputfield.

Screencasts

A Repeater field

A Repeater Matrix field with custom header colours

Easy-sort mode

There are two ways to enter easy-sort mode.

1. Click the double-arrow in a Repeater item header. This activates easy-sort mode and also highlights the item with a black background so it's easier to find it in easy-sort mode.

2. Click the horizontal ellipsis icon in the Repeater field header to activate easy-sort mode. To return to normal mode click the vertical ellipsis icon.

While in easy-sort mode:

• The items will reduce in width so that more items can be shown on the screen at once. The minimum width is configurable in the field settings.
• Any items that were in an open state are collapsed, but when you exit easy-sort mode the previously open items will be reopened.
• You can drag an item left/right/up/down to sort it within the items.
• You can click an item header to open the item.
• An "Exit easy-sort mode" button appears at the bottom of the inputfield.

Configuration

In the field settings for Repeater and Repeater Matrix fields you can define a minimum width in pixels for items in easy-sort mode. While in easy-sort mode the items will be sized to neatly fill the available width on any screen size but will never be narrower than the width you set here.

If desired you can enable easy-sort mode for a field by default. Since easy-sort is then the default mode for the field no "Exit easy-sort mode" button is shown. Use the mode buttons in the field header to change between easy-sort and normal mode when needed.

In the field settings for Repeater Matrix you can define a custom header colour for each matrix type using an HTML "color" type input. The default colour for this type of input is black, so when black is selected in the input it means that no custom colour will be applied to the header.

Exclusions

The easy-sort mode is only possible on Repeater/Matrix fields that do not use the "item depth" option.

 

https://github.com/Toutouwai/RepeaterEasySort
https://processwire.com/modules/repeater-easy-sort/

[bernhard]

Nice! I'm not an UI expert but personally I'd find it more intuitive to have a grid/list switch in the inputfield header similar to the image field:

Not sure, just wanted to share that idea 🙂

[Rudy]

@Robin S This is great!

I noticed that the grid only works with UIkit theme. It just shorten the width but not wrapped around.

[Robin S]

11 hours ago, bernhard said:

I'm not an UI expert but personally I'd find it more intuitive to have a grid/list switch in the inputfield header similar to the image field

Thanks for the suggestion. I'll keep it in mind but for now will leave the interface as it is for a couple of reasons:

• The intention with this module is just to create a temporary mode to activate when doing a drag sort, and leaving the repeater interface as per the core default at other times. At this point I don't want to get into making broader changes to the repeater interface: hacking controls into the inputfield header (the core doesn't make this easy to do), setting a default view mode, storing the view mode in a cookie, etc, like what is done with image fields.
• I'm predicting that users will first identify the item they want to drag with the repeater field in its normal mode. When easy-sort mode is activated the repeater items move quite a bit from their original position, and it's a feature of this module that the item you want to drag gets identified with a black background so it's easier to locate. This requires a button per repeater item rather than a single button per repeater field.

 

4 hours ago, Rudy said:

I noticed that the grid only works with UIkit theme. It just shorten the width but not wrapped around.

Fixed in v0.1.1. Although personally speaking I gotta say... I wish @ryan would drop those ancient legacy themes from the core because it's a real hassle for module developers to support multiple themes. The Uikit theme has been the default standard for several years at this point and it's the only theme that's likely to get attention and further development going forward, so PW users should get on board with it. I only test my modules in AdminThemeUikit but will consider compatibility fixes for legacy themes on a case-by-case basis.

[Roych]

Great module 😉 I was just thinking that maybe option for selecting a default view would be nice?

R

[Roych]

On 10/7/2021 at 10:10 AM, Roych said:

Great module 😉 I was just thinking that maybe option for selecting a default view would be nice?

R

Selection of default compact view possible somehow?

Thank you

R

[Robin S]

On 10/7/2021 at 9:10 PM, Roych said:

I was just thinking that maybe option for selecting a default view would be nice?

I had actually just given an answer regarding that in the post immediately above yours:

On 10/7/2021 at 9:46 AM, Robin S said:

The intention with this module is just to create a temporary mode to activate when doing a drag sort, and leaving the repeater interface as per the core default at other times. At this point I don't want to get into making broader changes to the repeater interface: hacking controls into the inputfield header (the core doesn't make this easy to do), setting a default view mode, storing the view mode in a cookie, etc, like what is done with image fields.

But okay, it sounds like you have a real need for this, so v0.2.0 adds an option to have easy-sort mode active by default. It also adds mode buttons to the field header. See the updated readme for more information.

[Roych]

On 2/19/2022 at 3:04 AM, Robin S said:

I had actually just given an answer regarding that in the post immediately above yours:

But okay, it sounds like you have a real need for this, so v0.2.0 adds an option to have easy-sort mode active by default. It also adds mode buttons to the field header. See the updated readme for more information.

Wow, thank you for this. Looks and works great. 😉 Some of my clients are more familiar with stacked items than list. Especialy if they have lots of items added.

Thank you very much

R

[monollonom]

Hi @Robin S,

Thank you for this useful module.

I had a question / suggestion: could it be possible to disable the module on specific repeaters ? In my case there's only one repeater among others that really benefits from the easy sort feature. I know the user could just ignore it and have the relevant repeater with easy mode on by default but maybe it'd be better if the buttons weren't there at all ?

[Robin S]

@monollonom, you could do this with a hook in /site/ready.php:

$wire->addHookAfter('InputfieldRepeater::renderReadyHook', function(HookEvent $event) {
	/** @var InputfieldRepeater $inputfield */
	$inputfield = $event->object;
	// Disable RepeaterEasySort on all Repeater fields apart from those named "foo"
	if($inputfield->hasField && $inputfield->hasField->name !== 'foo') {
		$inputfield->removeClass('RepeaterEasySort', 'wrapClass');
	}
}, [ 'priority' => 101 ]);

 

[monollonom]

Perfect it's working as expected, thanks!