Sortable Collection with sortablejs

[john-dufrene-dev]

Short description of what this feature will allow to do: This feature is for CollectionField to add possibility to sort Collection, @javiereguiluz are you interested with a feature like this ? I can work on it, not really difficult to implement, but need to use sortablejs.

If someone you can tell me what you think about?

Example of how to use this feature Somethink very simple like this bundle https://github.com/Arkounay/ux-collection#ux-collection with or without symfony UX ?,

Thank's in advance,

[javiereguiluz]

I'd agree on adding this feature. Two quick comments:

(1) Let's imagine that all the code needed to make this work is already implemented and works. How would the end user use this feature? Please, show the new methods to call, the changes to do in the app, etc. (this will help us know if we get developer experience right)_

(2) About UX, sooner or later I guess we'll need to add it. In any case, a very important condition is that everything in EasyAdmin must work without the end user having to do anything (no JS compiling, no commands to run, no asset building, etc.) Out-of-the-box everything must be functional.

Thanks!

[NicoHaase]

https://github.com/EasyCorp/EasyAdminBundle/pull/4368 already contains a POC, maybe it could help to inspire further work on this topic?

[martygraphy]

@javiereguiluz Hi I think that the sorting functionality should cover two cases:

The New/Edit page. A field of type CollectionField would offer a new method of type allowSortByFieldName('your field')

This method would allow to reorder each entity present in the Collection field. And the JS would update the hidden field (no ajax) ?

The Index page (I don't know if this should be the subject of another issue/PR) The ability to reorder the position of each entity in the list within a form. The drag and drop would then be a "local" action. It could be displayed on the left side of each line of the list.

Then when we move the entity we would make an ajax request that would update the two entities concerned.

And thanks for the work of @NicoHaase !

[john-dufrene-dev]

@martygraphy I agree this feature should cover the two cases you mention,

Regarding the CollectionField field, you don't have to use a HiddenField, I did some tests on my side for this part and it seems to work well with little code somethink like this :

import Sortable from "sortablejs";

const eaCollectionSortableHandler = function (event) {
  const el = document.querySelector(".field-collection-sortable");
  const id = el.dataset.eaCollectionFieldId;
  const full_name = el.dataset.eaCollectionFieldFullName;
  const selector = document.getElementById(id);
  let collectionItems = document.querySelectorAll(".field-collection-item");

  collectionItems.forEach((item, i) => {
    item.querySelector("input").id = `${full_name}[${i}]`;
    item.classList.add("add-sortable-border");
  });

  if (null !== selector) {
    Sortable.create(selector, {
      animation: 300,
      sort: true,
      handle: ".field-collection-item",
      onChange: function (evt) {
        let collectionItems = document.querySelectorAll(
          ".field-collection-item"
        );
        collectionItems.forEach((item, i) => {
          item.querySelector("input").name = `${full_name}[${i}]`;
          item.classList.add("add-sortable-border");
        });
      },
    });
  }
};

window.addEventListener("DOMContentLoaded", eaCollectionSortableHandler);
document.addEventListener(
  "ea.collection.item-added",
  eaCollectionSortableHandler
);
document.addEventListener(
  "ea.collection.item-removed",
  eaCollectionSortableHandler
);

This is working with json field and array field,

@javiereguiluz I can work on it and submit a PR if you need help,

Thank's

[martygraphy]

Hi @john-dufrene-dev , I will test this and thanks for your example :+1: Concerning the hidden field I was not talking about a HiddenField but an input of type hidden representing the position field of the entity. If we don't have such a field, I don't see how we can update the entity position when saving.

Or did I misunderstand this issue?

[john-dufrene-dev]

Somethink like this is working with json fields fields / array fields and sortablejs :

https://user-images.githubusercontent.com/25297943/183302535-ea845d48-001e-4e9c-8099-ddad03ffcff5.mov

I can create a pull request if someone want it

[fernandosngular]

What about it? I am trying use the bundle: https://github.com/Arkounay/ux-collection#ux-collection and extend type with custom field easyadmin, it should work?

Thanks

[john-dufrene-dev]

@fernandosngular

It's working for me with json field, But I think for the moment EA are not using symfony/ux we need to transform it to custom parameters for collectionfield,

Like I Saïd before I use my own code in some projets and it's working,

If someone want it I could send PR,

[fernandosngular]

I am interested in this PR, @john-dufrene-dev , thanks

[tonyellow]

I am also interested

[ksn135]

👍

[wontroba666]

I am also interested, @john-dufrene-dev

this sorted collection in the bundle would be really useful

[john-dufrene-dev]

At this Time I haven't lot's of Time to do this PR,

But I will work on it as soon as possible :)

[john-dufrene-dev]

@javiereguiluz

About this point :

2. About UX, sooner or later I guess we'll need to add it. In any case, a very important condition is that everything in EasyAdmin must work without the end user having to do anything (no JS compiling, no commands to run, no asset building, etc.) Out-of-the-box everything must be functional.

This functionality no need to compile anythink, no JS, assets building, just require to add sortable-js library on package bundle, but no change for end user, this feature work on m'y repository for the moment with json/array collection field in database

We can imagine somethink like this :

CollectionField::new('sortable_field')->isCollectionSortable(true);

Is ok for you ?

[wehostadm]

@john-dufrene-dev Also interested by this sort feature :)

@javiereguiluz Currenlty, EasyAdmin seems to sort my CollectionField arbitrary... but maybe there is an option to always keep the same order for items inside the collection ?

What is the actual criteria to sort items ?

[wontroba666]

hey, any chance that this sorting will be added ? ;)

[paulbx81]

We need this CollectionField sorting system so much please