In this episode, we wrap up the editing feature for our endpoints. We start by setting up a new controller in Laravel, appropriately named EndpointUpdateController
(for consistency with Laravel conventions), to handle PATCH requests for updating endpoints. We wire up the route with the correct HTTP verb and make sure it uses authentication middleware to secure the action.
As we work through submitting changes via the form, we initially notice that multiple requests are being fired off. This turns out to be because we're watching the whole form object in Vue, not just what's actually changed. By instead keeping an eye on the form's isDirty
property, we make sure requests are only sent when something meaningful happens. This fixes the issue of multiple rapid-fire requests with just a slight delay for the sake of user experience.
With our requests now being sent sanely, we update the back-end logic to actually save (persist) the endpoint edits in the database. Along the way, we tweak our endpoint display order so the list isn't jumping around unnecessarily after edits—defaults to ordering by the most recent.
After the happy path works, we focus on essentials: validation and authorization. We create a new form request class with validation rules similar to our create endpoint logic, ensuring only valid data gets through. Then, we update the endpoint policy to restrict who can make edits, only allowing owners to update their own endpoints.
By the end of the episode, we've got slick inline editing for endpoints fully working, validation in place to catch mistakes, and proper guards to make sure only the right people can make changes. All of this is nice and smooth with Inertia.js handling the front-end!