Build An Uptime Monitor with Inertia

Sign in Get started

This episode is for members only

Sign up to access "Build An Uptime Monitor with Inertia" right now.

Already a member? Sign in to continue

Playing

17. Toggling inline editing for endpoints

Episodes

0%

Your progress

Total: 4h 59m
Played: 0m
Remaining: 4h 59m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia project

02. Sites

03. Site and dashboard setup

04. Building the site selector dropdown

05. Making use of API resources

06. Setting the default site

07. Setting up Vue modals

08. Creating a site

03. Endpoints

09. Setting up endpoints

10. Enum endpoint frequencies

11. Creating the endpoint form

12. Storing an endpoint

13. Validating and authorizing endpoint stores

14. Normalizing the endpoint location

15. Displaying endpoints

16. Deleting endpoints

17. Toggling inline editing for endpoints

18. Applying a watcher to the endpoint form

19. Storing endpoint edits

04. Checking endpoints

20. Determining endpoints to check

21. Creating a job to perform a check

22. Making an HTTP request

23. Scheduling checks every second

24. Setting up the check relationship

25. Updating the job

26. Showing the last status

27. Expanded list of checks

28. The response body modal

29. Authorizing the endpoint details

30. Calculating uptime for endpoints

05. Queuing

31. Setting up queues

32. Queuing the endpoint check

06. Email notifications

33. Setting up email in Laravel

34. Site model email notification storage

35. Adding email addresses via the UI

36. Listing and deleting email addresses

07. Downtime notifications

37. Observing when to notify

38. Creating an endpoint down notification

39. Creating an endpoint recovery notification

40. Making the emails a bit friendlier

08. Extras

41. Deleting sites

42. Eager loading

43. Recovery notification bug

44. No sites fix and placeholder

Transcript

00:00

Let's tackle the inline editing of each of our endpoints. So we need to be able to edit the location and the frequency. If of course you add any more data to here, you can just add this in.

00:12

Now the first thing that we're going to do is toggle the edit state, which will change the location over to an input and the frequency over to a select, so we can choose a different frequency. Then in the next episode we'll look at listening to these when they change

00:28

and going ahead and sending a request to the backend. So first things first, let's come over to our endpoint component and we're going to come down here and create out a ref which will hold whether this is being edited.

00:39

So this comes directly from view and let's just come down here and say editing and of course initially we want to set this to false. Now if we go up to the edit button, when we click on this, so V on click, we want to go ahead and set editing to maybe the opposite of editing

00:58

or we might include some sort of done button. So let's just set this to true for now. So what we could do is just dump out the editing value just to see that that changes and there we go, so that switches to true.

01:10

So now we've got a boolean, we can just start to toggle around if we head up to the top, the endpoint location and we can wrap this nicely in a template. So let's say that V if editing, we want to do something in here and then down here we could wrap this whole thing in a template

01:28

or just do it directly on the anchor and say V else. So really easily now what we've done is just swapped that over just by clicking edit. Okay, so what goes in here then? Well, this is just going to be a text input.

01:42

So let's go ahead and define this out now and we're going to have an ID of location, a type of text, pretty much everything we had when we created out a endpoint and let's go ahead and set some more things on here. So the class is going to be a block or width of full,

01:59

height of 9 like we did before and text of small, pretty much exactly the same as what we had before and we can add a placeholder in here as well if this is removed. So we could just say eg slash pricing.

02:10

We'll leave off the model for this because we'll tackle that in the next episode but let's just take a look at what this looks like. There we go. So we've got a form.

02:17

It doesn't look right at the moment because we're not importing this. So let's go up and of course import the text input from our components directory and text input. We should also add a label in here. So let's say input label and we will swap that out in here as well

02:36

just so we actually have a label in case someone's using a screen reader. So actually let's just copy this over from dashboard. So let's just go over to where we know that is and let's just grab the label here, pop that in there and we shouldn't see that.

02:53

There we go. Great. So that looks a lot better now. We've actually got the component in there.

02:57

Okay. So now for the frequency which is a little bit more difficult because we have to of course pull in all of our frequencies. So we need to grab them first but we also need to show the current frequency

03:10

that this endpoint is at. Not too tricky. So let's go ahead and just add in our template first to toggle this over. So wrap all of that in a template.

03:20

That's going to be the V else and the V if is just going to be whether this is editing or not. So I think we once again can pretty much copy this over from here. The only problem is we're not going to have the actual frequency itself which is fine. So let's paste all of this in here and just line everything up nicely

03:37

and let's think about what we need to include here. So we'll get rid of the model for now and we need from our page props, remember our global props over in handle inertia requests, all of the endpoint frequencies.

03:50

That's why we included that as a global. So we need to pull that in again. So let's just run through that again which we've already done. It doesn't hurt to do this again.

03:59

So we're going to go ahead and pull in the use page composable from the inertia view three package. We're going to come down here and set a page variable and just say use page. Now we have everything that's globally on our page

04:16

available that should instantly pick up our endpoint frequencies. So let's hit edit and there we go. We've got all of our frequencies in there really nicely. So at the moment when we click edit that does toggle.

04:28

So everything's working nicely but we can't get out of this state. So there's a couple of ways that we could do this. We could head over to the edit button and change the text or we could create an entirely new button.

04:38

What I'm going to do is just go ahead and set this to not editing so the opposite of editing. That's going to give us a kind of toggle functionality where we can open it and close it and what we can then do is in here just do like a little inline just output either edit or cancel or done in our case because we're going to have inline editing.

04:59

So if we are editing we're going to output done. Otherwise we're going to output edit and that should be everything we need. So edit done. There we go.

Episode summary

In this episode, we're diving into how to add inline editing to each of our endpoints. Basically, we want users to be able to edit things like the location and the frequency right from the list, making the experience much more interactive and efficient. If you have more fields in your endpoint, you can extend this pattern to those as well.

We start by figuring out how to toggle the edit state for each endpoint—so when you hit the "edit" button, the display changes from static text to input fields. Specifically, the location will become a text input, and the frequency turns into a dropdown select. We use a simple editing boolean to track whether we're in edit mode, and set it to true or false when you click the button.

You'll see me set up those input elements (using reusable components if you've got them), and make sure things like labels, classes, and accessibility are all in place. We also import the list of possible frequencies globally, so the select box always gets the right options.

At this point, we've got everything toggling back and forth smoothly—clicking "edit" lets you start editing, and clicking again takes you back to view mode. For a bit of extra polish, we make the button text change from "Edit" to "Done" depending on the state.

In the next episode, we'll get these inputs actually saving changes to the backend. For now, you've got a nice, user-friendly inline editor set up!

Episode discussion

No comments, yet. Be the first!