Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
FREELessons:16Length:2.1 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Viewing the Ticket for Editing

We are getting to the point to where we want to edit our ticket. But before we can do that, we need to create a component for displaying the ticket and we need to be able to navigate from the dashboard to that displaying component, for lack of a better phrase. Now, we have a component for displaying a ticket, we wrote it many lessons ago and I changed it off screen. If you'll remember, we had an h3 for the ticket ID and then just a bunch of p elements for all of the other pieces of information. Right now, this is just a table, now you could argue that this isn't tabular data, and you may be right, but at this point in time I don't really care, this looks a lot better. So we have this component and we could technically use it in the admin section as well. However, that's going to add more complexity to this component. And I want to keep our component as clean and simple as possible. But that doesn't mean that we can't copy and paste it. So that's what I'm going to do. And I'm going to call this new one just view ticket, because that's a little bit easier to type. And let's go ahead and define the route for this. Now, we first of all need to pull in the component so we will do that. And then when it comes to the path, we can do just about anything that we want here. One of those would be to have the ticketID, just right there off of the root. However, think about this, we are in the administration portion of our application. And ideally, we would have several other pieces of information to work with. Like not just tickets, but users, and anything else. So it kind of makes sense to have a segment to categorize whatever we are working with. So, in this case, our path is going to be tickets and then the ticket ID. And we need to specify the component, so let's do that. We also need to set props to true. Because if you'll remember from a few lessons ago, since we have the ticker id and we are passing that to our view component. Well, then we have to set that props to true otherwise we can't get that data. But then we also need to give this route a name, and you will find out why here in a few moments. But this is going to be something called view ticket. You can call it whatever you want, just as long as you remember what you call it because we are about to use it whenever we create our link. So let's go to our dashboard and let's look at the dashboard. So we have email, title, assigned t, status, and created. Now you could argue that title is really more important than email especially if you think that what ever is going to be the first column is going to have a link that is going to take us to our ticket. So let's swap those two values. So title will be first and then email will be second. And then we will create a link here for the title and we will use that to navigate to our view ticket component. So we're going to use that router link element and we are still going to use the two attributes, however, we aren't going to pass in a path here. The reason being, because we have some dynamic data. We have a ticker ID that we need to specify and in this case, what we want to use is binding syntax, we could say v-bind and then two. Or we could just say colon two, and that would give us the same thing. Now, this is going to allow us to pass in what is essentially going to be a JavaScript object. And then we just specify the different pieces that we want this link to have. So the link itself is going to be based off of our route called view-ticket. So we're going to say the name is view-ticket. But then we need to pass params to this, and we have a property called params. This is going to be an object that has the keys and values for the params that we want to pass. So the only param that we have for this URL is our ticket ID. So we're going to say ticketId, and it's value is going to be from the ticket that we have in this loop and the id property. And I think all of our curly braces match up, so then for the text. You'll just have the title there and we should be good to go there. So we can go back to the browser, let's refresh the page, and here we have our links. If we click on any one of these, it will take us to our view. Now the view works, but none of the data does, and that's because we didn't change any code and sort of the component. So we need to hit a completely different resource. It's admin API admin ticket and everything else is okay, but there are some more pieces of information that we need. We definitely need the title, we're not going to be able to change the email address or the title. Because from a worker standpoint it doesn't make much sense to change those things. However, the status we can definitely do, the user that is assigned is something else that we would want to do. But let's take this one step at a time. I'm going to create a variable called data just so that it makes it easier to get to the data that we want and we're gonna add title down here, so let's quickly do that. And as far as displaying the information, I want to use the title at the top. It doesn't really make much sense to have the ticket ID there. So our tittle is there and we'll go with that for now. Let's go to our controller and we need to write the code for our show method. However, we could rob the code from our other tickets controller and just use that as a basis. Now, as far as our query is concerned, we want to use the find or fail method. We can do that and then ID. Now, eventually we want to pull in the user information and really all of the users. Because we want to be able to assign whoever is going to get that ticket and in order to do that, we need all the users available. So we're going to make other queries here. In fact, let's just go ahead and do that. So we'll say User::all();. Let's make sure that we are pulling in the user class so that we can have that here. And then let's just go ahead and let's say users and we will supply the users there. Now we do need to have the title, because we are expecting that now and then we will go from there. So let's test this and everything looks okay. In the next lesson, we are going to continue adding more to this component. We want to be able to select a user to assign the ticket to and we also want to change the status. And so we will add that capability in the next lesson

Back to the top