In this episode, we're focusing on adding the ability to create a brand new board using a modal. We kick things off by making a new CreateBoard
component and stashing it inside our modals directory. The idea is that when a certain button is clicked, it will dispatch an event to open this modal.
Once the wiring is set up, we make sure that triggering the modal works and then dive into building out the content. We use a modal wrapper and set up a simple form—using Livewire—that just asks for the board title (keeping it straightforward). For speed (and style consistency), we rip some of the markup and styling from an existing modal and strip out anything unnecessary, making sure we only have the essential fields and actions for creating a board.
We make it so that when someone submits the form, the backend will validate the input, create a new board for the authenticated user, and then redirect to the new board's page. There's a hiccup with mass assignment (classic!), but we handle that in the model with a quick fix. Finally, we test it all the way through—and once it's working, a new board can be created and we're taken straight to it, ready to add columns and cards.
This episode is a great hands-on demo of extending existing modals for new features, wiring up forms, handling validation and redirection, and making sure the user flow feels intuitive and snappy.