Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add filter and group support #25

Open
janpeterka opened this issue Jun 21, 2023 · 0 comments
Open

Add filter and group support #25

janpeterka opened this issue Jun 21, 2023 · 0 comments

Comments

@janpeterka
Copy link

janpeterka commented Jun 21, 2023

Hi, I started to play with this, and I stumbled on missing filter and group support.

Filter is not so needed, I was for my case able to solve that.
For moving items between lists I need the group attribute however.
Is it possible to add that? I can create PR, but have no experience with ts, so I don't know how to test it end everything..

Thanks for reply, and thanks for these controllers!


In case someone needs this functionaly, it's possible to implement with something like this:

export default class extends Sortable {
  initialize() {
    super.initialize()
    this.onAdd = this.onAdd.bind(this)
  }

  connect() {
    super.connect()
    console.log("SortableController connected")
  }

  get options() {
    let options = super.options
    options["group"] = this.element.dataset.sortableGroupValue
    options["onAdd"] = this.onAdd
    options["onRemove"] = this.onRemove

    return options
  }

  async onAdd(event) {
    // For now, as I only use this for recipes in DailyPlans, this calls "move".
    const { item, newIndex } = event
    const listId = this.element.dataset.sortableListId
    const moveUrl = item.dataset.sortableMoveUrl

    const param = this.resourceNameValue ? `${this.resourceNameValue}[${this.paramNameValue}]` : this.paramNameValue

    const data = new FormData()
    data.append(param, newIndex + 1)
    data.append("daily_plan_id", listId)

    return await patch(moveUrl, { body: data, responseKind: this.responseKindValue })
  }

}

onAdd and onRemove are Sortable functions for moving items between lists.
I used most of code from onUpdate for this, with few changes:

  • I need id of the list item is moved to, so I just add that to ul element. It could be generalized more, but I didn't do that.
  • In my case, I don't need separate add/remove actions, I can call move endpoint that just changes element attribute. So I only define data-sortable-move-url on my <li> item, as I'm basically PATCHing this resource.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant