3.6 Displaying More Dynamic Data

In the previous lesson we created the component for displaying our tickets so that we can edit it. But right now we just have really the same information that we have seen before. Now, we want to be able to make the status changeable so that we can change it from pending to completed or any other statuses that we might have. And we also want to add the ability to assign the tickets to a user. So, let's start with the Status since that's going to be a little bit easier. Now ideally, we would have more than two statuses. So, we want something that's going to allow us to choose from multiple values and a select element is perfect for that. So let's just add a select element. Now we don't need a name or an id, instead what we want to do is, bind this to a value. So we are going to use the v-model attribute. And here we have the "status" already, so we can just bind it to that status. Now, this means that we are no longer going to rely upon the JavaScript to set the pending or the completed string. Because what we are going to do is have two options in here. So our first option is going to be for pending. The value is going to be "1". And of course, the text is Pending. And then for the completed, we'll have the value of "2". And then the text Completed. So that means our status property needs to be numeric. So, we can get rid of just about everything here. We are going to assign our status property the value that came from the server. But we can also initialize it as 1, because you know, the default status of a ticket is pending so it just makes sense to have the default status be 1 and then we change it to whatever is coming from the server. So if we go and look at this in the browser now, we are going to have a drop down box and it is automatically selected as Pending. And if we were to change this. Let's change it to the value of 2. Then we will have the value of Completed in the drop down box. So great, we have that set up. Now we just need to have the user assignment. So as far as our placement, it kind of makes sense to do this. Before status and after email. So let's add another row here. Our heading is going to be assigned too. Then we will have another drop down box. Because we want to list all of our users. Now, in the previous lesson We went ahead and passed that data. So if we look at the show method we are supplying our users. So we will essentially do the same thing except that we are going to bind The drop down box, the select element to that data. So, once again we will start with a select element. And we will use the V model attribute once again. But here we aren't going to use users, we want something that is going to be representative Of the selected user so let's just call it selected user. And then inside we are going to generate our option elements. Now, to do that we are going to loop over our users that we are getting from the server so we are going to use v-for and for each user in users We're going to set the value to user ID. So we're going to bind that to our user ID. We should also go ahead and key=user ID. So I'm now using the shorter hand syntax here. All right, we could say v binds and all that stuff but it's just easier to use. The colon. And this is going to generate an option element for every user that we have. But we also need to specify the name as well so that we see that. So here we will have user name. And so let us add this selected user to our data. So that we will have that and we can initialize this however we want. We also need to specify our users as well, but let's make that an empty array. And then we want to say this users = data.users And we're not going to do anything with the selected user yet. Let's go to the browser, let's refresh the page. We have our Assigned To, and then we have a drop down box, and we have Admin Joe. So let's say that the admin user has already been assigned to these tickets. While we would have selectedUser = 1. And if we refresh this, we're going to see that admin is going to be automatically selected. So this means that all we really need is to provide the user id from the server. So we could say selected user. And then, that value will be $ticket and then user_id. Now, this could be null but that's fine. Null just means that inside of the browser it is going to not have anything selected, at least I think so. We will at least find out, so We're going to set our selected user equal to the selected user that's coming from the server, and let's refresh. So assigned to is not assigned to anyone. And we still have our users, so Everything is working as it should. We just need to add a button so that we can submit the update request. So let us go ahead and add that button. I am going to cheat and just add another row I am going to add a td element with a colspan of two and we will put the button in here. Now, since we don't have a form we are going to have to handle the click event for this button, but that just fine, nothing out of the ordinary. So we say, click and just like what we did with our forms, we want to prevent the default action from recurring. And let's call the method that this is going to call, sendRequest, because well, that's what it's going to do. Let's put the text to Save, and then let's write this method. Now this method is going to be rather straightforward because the request is rather straightforward. Forward. All we really need to do is send the selectedUser and the status and that's it. So we will have our event object, which we aren't going to use. And we're going to make a put request because we want to update this ticket. And our request is going to go to our tickets controller, but we do need to specify Our ticket ID and we have that as one of our props. And then the data that we pass is as I said, very simply we pass in the status and we pass in the selected user. Although, we could just call it user underscore ID Because that is kind of what we would expect to use on the server. So that is going to be all set up and ready to go so that if this is a successful request Then we just want to navigate, I guess, back to the dashboard. So we will use our router to do just that. And the URL is just a slash there. But if we have an error, then we. Well, I'm gonna cheat. We're just gonna alert the error. And there we go. So, now, we just need the code in the controller that is going to save those pieces of information. So, in the update method, cause that is what is going to be called. The first thing we want to do is retrieve the ticket. And then we will just update the necessary properties. And that is simply the status. So let's do that first, and then the user Id. And of course after we have saved, or after we have changed this We want to save. And that should be it. So, lets try it out. Let's go back to the browser. let's refresh the page and we need to log in so lets do that. Now I'm noticing that we do need to finish our table here but that should be easy enough. Let's try to edit this. Let's assign it to Joe. Let's change it to completed. And let's save. And there we go. We see that the status changed. And assigned to, well we didn’t put anything there anyway, but if we look at this you’ll see that it is assigned Joe and the status is completed. So let’s go back and let’s modify our dashboard. So as far as the status Is concern. That's going to be pretty easy to do. All we need is to check to see what the value is. If it is equal to 1 then of course pending otherwise it's completed. Now, as far as the user is concerned we do need to include the user. Now, we didn't setup any of the relationships But that's easy enough to fix, let's just open up our ticket model and we are going to add the relationship for our user. Now we are going to use the "belongs to" method because that is going to allow us To the withDefault because remember a ticket may or may not have a user associated with it. So if we don't we will at least have a default user there to work with. So now inside of our controller we need to. Include the user. And then, get them. And that should be that. Now, inside of the Dashboard, we need to take that into account so that we may or may not have a user. So, if the ticket has a user, then we, of course. Want to use that to get the name, otherwise we will just output an empty string. So let's see what this looks like in the browser. Let's refresh the page, and there we go. We can see that that has It's been assigned to Joe. So if we change any of these others, which I should have been a little bit more creative with the titles because they're all practically the same, we can see that once again the assigned to appears. And we can easily see what has been assigned, what hasn't, what has been completed, and what hasn't. And so now we can finally edit our tickets. We can assign them to our users and complete them when they are completed.