3.4 Displaying the List of Tickets
Now that we've protected our admin portal, let's build out our dashboard. In this lesson, we'll simply code a list of tickets.
1.Introduction1 lesson, 01:24
2.The Application's Front-End8 lessons, 1:06:02
3.Ticket Administration6 lessons, 56:09
4.Conclusion1 lesson, 01:13
3.4 Displaying the List of Tickets
Now that we have all of the user authentication stuff done, we can finally focus on our views. And the main view is going to be our dashboards. So let's work on that. This is going to display our list of tickets. So let's create a controller that we are going to use to manage our tickets. We already have a tickets controller, but we need another one. One for our admin section. So we're going to make a controller. And I'm going to call it TicketsController, but it's going to be inside of an Admin folder, just so there is that separation. And this is also going to be a resource controller because we are going to need some of those methods. It makes sense to go ahead and have that. And let's go ahead and set up our routes, because we can't really do anything until we have our routes set up. So, let's do that and we need to group these, well, we don't need to, but it makes sense to group them together. Because we are going to have several routes that are using the auth:api. Now, this first route for /user, this was given to us by the scaffolding, let's just not use that. Instead we will say Route::middleware('auth:api') and then we will have our group. And we will have a function, and inside of this function we will define our routes. So, inside of here we can have Route and then get for our profile. And we will essentially do the same thing that we did for our old TicketsController. We will use the apiResource method. But once again, we need to segregate this. This is going to be admin/tickets. And the controller is going to be admin/TicketsController. But other than that, we should be good to go. So, now let's go to our views, or our view components rather. So inside of our admin folder, we have that Dashboard. Now is the time for us to make a request to retrieve our tickets. So let's have our methods, and let's call this method getTickets for the lack of a better thing. We are going to need to make an HTTP request, so let's go ahead and import axios so that we have that. And then we will simply make a get request for our new route. And that is going to be api/admin/tickets. We don't need to supply any other information. And so then, hopefully we will get a response. And, let's do this. We will have some data called tickets, and we will get that data from the response. That makes perfect sense to me. So, let's define our data. And we will return an object that has tickets. So let's initialize it as an empty array because it just makes sense to do that. Let's go ahead and also write the mounted method so that we can go ahead and kick off the call to getTickets. So now we just need our mark up. And this is going to be a table. So let's have our table, and let's have a thead, and inside of the thead we will of course have our row of headers. So as far as the individual pieces of information, we want the Email. We want the Title. We don't want the content, because the content could be very long, and that's just not going to work within a table. But we do need the Status, so we can display that. And the date that it was created would be useful as well. And, we can also include who is assigned. So let's put that in between Title and Status, and that will simply be Assigned To. And let's give this a class of table and table-striped. So then all we need is our body. So let's add a tbody. And we are going to have a tr element. And here, we are going to put our for attribute, and we will say for each ticket in tickets, and then we will simply display that information. And Visual Studio does not like that line. It says, Elements in iteration expect to have 'v-bind:key' directives. Well, that kinda makes sense. We don't have to have it, at least I don't think we do, but we're going to add it anyway. And in this case, let's make it ticket.id. That just makes sense, because it needs to be unique. And, we do have the slug but the ID is actually going to be a little bit better there. Now, it comes to the individual pieces of informations. So, here we are going to have ticket.email for the email address. The title is going to be very similar. So we'll just copy and paste several lines. The Assigned To, for right now, let's just leave that blank. And for the Status right now, let's just output what we have within the database. And then, the created_at for the Created field. Now, of course, we need to write the code inside of our controller, so let's go and do that. So Controllers, I need to refresh that, and there we have Admin > TicketsController. So let's add a use statement for our ticket model, so that we can use that very easily. And inside of the index method, we are going to retrieve our tickets. So let's say tickets = Ticket::all, and then we will simply return json_encode( $tickets) and everything should be good to go. So let's make sure we have a server running, we do. Let's refresh the page. And, well, something's not right. Let's see what we get as far as our request is concerned. Tickets returns a 500, and the TicketsController does not exist. That's because I used the wrong slash. Can never remember which slash. I wish there was just one slash, that would make everybody's life easier, including mine, but it is what it is. All right, so now let's refresh the page. What do we get? And we get our table, but it looks rather ugly. So let's add an S to the CSS class. That's the problem there. Let's refresh. There we go. Now unfortunately, whenever we saved the tickets, the email was set to store the content. So we have some issues there. However, whenever we edit an individual ticket, we probably are going to leave the email address alone, because we don't really want to edit that, because if we do, then we lose who that ticket belongs to. But that's a discussion for the next lesson, when we write the code for editing a ticket.