This episode is for members only
Sign up to access "Build An Uptime Monitor with Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
17. Toggling inline editing for endpoints
Episodes
01. Introduction
02. Sites
03. Endpoints
09. Setting up endpoints
4m 23s
0%
10. Enum endpoint frequencies
3m 50s
0%
11. Creating the endpoint form
12m 58s
0%
12. Storing an endpoint
7m 21s
0%
13. Validating and authorizing endpoint stores
7m 6s
0%
14. Normalizing the endpoint location
6m 4s
0%
15. Displaying endpoints
6m 22s
0%
16. Deleting endpoints
6m 21s
0%
17. Toggling inline editing for endpoints
5m 12s
0%
18. Applying a watcher to the endpoint form
5m 31s
0%
19. Storing endpoint edits
8m 56s
0%
04. Checking endpoints
20. Determining endpoints to check
2m 57s
0%
21. Creating a job to perform a check
3m 21s
0%
22. Making an HTTP request
3m 39s
0%
23. Scheduling checks every second
4m 27s
0%
24. Setting up the check relationship
3m 14s
0%
25. Updating the job
2m 10s
0%
26. Showing the last status
12m 50s
0%
27. Expanded list of checks
14m 10s
0%
28. The response body modal
2m 49s
0%
29. Authorizing the endpoint details
2m 27s
0%
30. Calculating uptime for endpoints
8m 29s
0%
06. Email notifications
07. Downtime notifications
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.
44 episodes•4 hrs 59 mins•1 year ago
Overview
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects.
This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down.
In this course, you'll learn to:
- Build a real app from scratch with Inertia
- Work with Laravel queues
- Perform actions on models at user-defined intervals
- Work with sub-minute schedules in Laravel
- Send out channel notifications with Laravel
- Use API resources to simplify Inertia data
- Organise apps with events and observers
- Create modals in Vue
- Perform inline editing with Inertia forms
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.