Stimulus - Action Parameters

Use declaratively specified action parameters in the DOM to move elements between parents.

View Solution on Patreon
Stimulus - Action Parameters

Premise

Passing contextual information to Stimulus actions needed a bit of manual wiring of DOM data attributes. With action parameters, there’s an officially sanctioned way which we are going to explore now.

Starting Point

As a trivial example, we are looking at a simple ticket system where we want to triage incoming tickets. The user should be able to assign an issue to the Infrastructure, Devops, Mobile, and QA teams.

Challenge

Create a Stimulus controller that allows to move cards from the “Inbox” column to other ones using action parameters. Here’s a sneak peek:

A Kanban Board with 5 columns

The Stackblitz example contains four cards that are already wired up to the ticket Stimulus controller:

https://stackblitz.com/edit/stimulus-action-parameters?file=index.html%3AL58,controllers%2Fticket_controller.js

All that’s left to do for you is implement the action in the controller, and add the corresponding data attributes to the menu items:

https://stackblitz.com/edit/stimulus-action-parameters?file=index.html,controllers%2Fticket_controller.js%3AL4

Teaser

Currently, this example does not persist any changes to the database. How would you tackle this?

More from

Stimulus - Video Progress Tracker with LocalStorage
29 October 2024

Store ephemeral user state like video playback progress in localStorage

Stimulus - Image Upload Previews with `URL.createObjectURL`
17 September 2024

Create client-side previews of files using URL.createObjectURL

Stimulus - Removing Markers from a Wavesurfer Element
30 July 2024

Use Stimulus value callbacks to interact with a wavesurfer element and remove markers.

Cookies
essential