Paginated resource selection

[ddmck]

Feature

On the index page of a resource, or when viewing nested resources on a resource show page, when a user selected a one or more records and then cicks on a pagination link/button the selected resources are not persisted.

Ideally a user would be able to select multiple resources across the paginated records and then bulk delete or perform a bulk action.

Right now, it is not clear to the user the the prior resources are no longer selected.

Current workarounds

For smaller collections of resources it is possible to increase the number of items per page to select more than the default pagination amount, but for larger collections this would likely cause memory issues.

Screenshots or screen recordings

AvoPaginatedResources.mov

The video shows what happens when selecting a resource from the blog posts on the AVO demo site. When no records are selected the action is disabled, which occurs after changing pages. When navigating back the checkbox briefly shows as selected but I think this is just due to browser caching, as no params are passed in the the pagination request related to selected resources.

Additional context

I have not seen this behavior implemented elsewhere. This could potentially be solved by having a stimulus controller tracking the selected items, or by making a get request when checkboxes are updated, and use turboframes/streams to update the pagination links with the currently selected resources, and then create hidden form fields for the resources not shown on the page.

It might be a good idea to indicate to the user the number of resources currently selected, so that they are not performing actions/deleting records they are unaware of.

[adrianthedev]

As a side-note, I fixed the failing action.

Yeah. this could be a cool feature. I'm thinking of a few things that might prove difficult to build, maintain. It's probably going to land in a paid tier in the future.

The first things that comes to mind when I think about how to implement it is using localStorage and have some kind of JS controller that overlays the selected items somewhere in the UI (the Ui will be tricky to get right).
That will ensure that the selection is persisted when the users changes pages.
One thing that I don't have an answer for is when to reset that selection. Maybe never and let the user do it manually?

But yeah, a good feature to have

[ddmck]

I made a bit of progress working towards a solution. Created a stimulus controller that tracks target checkboxes and adds hidden checkboxes mirroring them outside of the pagination frame.

It's missing any sort of display to the user about how many resources are selected. I think this sort of approach could be possible with some changes to the item_select_all_controller.js and item_selector_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller { 
  static targets = ["form", "paginatedCheckboxInput", "proxyCheckboxInput"]
  formTarget: HTMLFormElement
  paginatedCheckboxInputTargets: HTMLInputElement[]
  proxyCheckboxInputTargets: HTMLInputElement[]

  connect() {
  }

  paginatedCheckboxInputTargetConnected(paginatedCheckboxInput) {
    // if paginatedCheckboxInput has a corresponding proxyCheckboxInput, check the checkbox
    const proxyCheckboxInput = this.proxyCheckboxInputTargets.find((proxyCheckboxInput) => {
      return proxyCheckboxInput.value === paginatedCheckboxInput.value
    })
    if (proxyCheckboxInput) {
      paginatedCheckboxInput.checked = true
    }
  }

  onChange(e: Event) {
    const target = e.target as HTMLInputElement
    const checked = target.checked
    if (checked) {
      // Create a hidden input with the same name as the checkbox and insert it into the form.
      const input = document.createElement("input")
      input.type = "hidden"
      input.name = target.name
      input.value = target.value
      input.dataset.paginatedFormTarget = "proxyCheckboxInput"
      this.formTarget.appendChild(input)
    } else {
      // Remove the hidden input from the form.
      const input = this.formTarget.querySelector(`input[name="${target.name}"][value="${target.value}"]`)
      if (input) {
        input.remove()
      }
    }
  }
}

[adrianthedev]

Hey @ddmck,

Have you thought about maybe using a localstorage solution?
We already have a localstorage service that we use.

Thoughts:

• have the paginated feature as a separate feature which you can toggle on/off per resource
• when it's toggled to off it the selection would behave as it does right now
• when it's on...
• when a use selects a record, we persist it in loncalstorage and show a "floating box" showing how many records have been selected
• this box would be persisted on page changes
• it would be per resource, so it won't show up on users if you selected something on products
• the box should have a "clear" button which resets it

Maybe there are a few more things to take into account, but I think this would provide the right level of certainty and a good experience to users.

What do you think?