Feature request: bindable reoderable-group

[HeyndrickxKarel]

Hi!

I have come into a situation where I’m required to loop over an array of objects and give them a reorderable-group based on a property. Therefor bind reorderable-group.

I was wondering whether this could be added in a future release?

Kind regards

Karel Heyndrickx

[3cp]

Getting into trouble on the order of those attributes between dnd and binding :-(

[3cp]

Now I understood why I didn't implement it in the first place 🤣

[3cp]

Borrow your attention here @bigopon,

For

<div reorderable-repeat.for="a in arr" reorderable-group.bind="some"></div>

I kind need to somehow get the attribute reorderable-group's sourceExpression before creating any child views. This was not an issue for other attribute like reorderable-after-reordering because after-reordering callback is only possible to be fired when there is some child to mutate.

But reorderable-group needs to work on an empty list, because there is another reorderable-group-for to link to the group name that allow user to drop item to this group even when no child views were created to act as drop targets. reorderable-group-for acts like a backdrop target for user to bring item into this empty list.

<div reorderable-group-for.bind="arr" style="padding:1rem;">
  <div reorderable-repeat.for="a in arr" reorderable-group.bind="some"></div>
</div>

Is there some API to access the reorerable-group attribute when reorderable-repeat was created (before adding any child views)?

Right now, I only find this.instruction.behaviorInstructions which contains only the reorderable-repeat attribute itself.

[bigopon]

At the moment, how is the value of reorderable-group retrieved by the repeater?

[3cp]

Right now, it only supports plain string group, no support of binding on the reorderable-group attribute.

[bigopon]

I see that it's retrieved in the constructor of reorderable-repeat. If we are to change from plain attribute to an expression, we also need to know what to evaluate the expression with. I think it can be done during created, via owningView parameter. So, if you want, you can do:

class ReorderableRepeat {
  constructor(boundViewFactory) {
    const rootRepeatedElement = boundViewFactory.viewFactory.template.content.firstChild;
    const auTargetId = rootRepeatedElement.getAttribute('au-target-id');
    const reorderableGroupExpression = boundViewFactory.viewFactory.instructions[auTargetId]?.expressions.find(e => e.targetProperty = 'reorderableGroup');
    // this is what you want probably
    const sourceExpression = reorderableGroupExpression ? reorderableGroupExpression.sourceExpression : null;
  }
}

It'll probably work, may need to tweak the naming of the variables a bit

[3cp]

Thx, it's almost fully working. It's in behaviorInstructions. I need to clean up other parts to respect the dynamic group.

[3cp]

Released in v1.4.0.

[HeyndrickxKarel]

Awesome!