Tuesday, 2 May, 2017 UTC
Summary
This is the concluding part of Build A Support Ticket Application With AdonisJs. In part 1, we setup the application, built the authentication system for users to signup, login, and logout. We created the ticket and category model as well as their migrations and also defined their relationships. Lastly, we created our first ticket and sent the ticket information mail. In case you missed it, you should check Build A Support Ticket Application With AdonisJs - Part 1 out because we will be continuing from where we stopped.
In this part, we'll give users a way to see all the tickets they have created and also ability to view a particular ticket. We'll also cover commenting on a ticket and mark ticket as closed. Finally, we'll restrict access to the application to only authenticated users.
Displaying User Tickets
We start off by allowing our users to see a list of all the tickets they have created and from there they can go on to view a particular ticket. Add the code below to
app/Http/Controllers/TicketsController.js:// app/Http/Controllers/TicketsController.js
// remember to add these to the top of file
const Mail = use('Mail')
const Validator = use('Validator')
const Ticket = use('App/Model/Ticket')
const RandomString = use('randomstring')
const Category = use('App/Model/Category')
/**
* Display all tickets by a user.
*/
* userTickets(request, response) {
// Get all the tickets created by the currently authenticated user
const tickets = yield Ticket.query().where('user_id', request.currentUser.id).fetch()
// Get all categories
const categories = yield Category.all()
yield response.sendView('tickets.user_tickets', { tickets: tickets.toJSON(), categories: categories.toJSON() })
}We are getting the tickets created by the currently authenticated user by passing
request.currentUser.id to the where(), where we also get all the categories. The tickets together with the categories are passed to a view file which we'll create shortly. Before creating the view file, let's create the route that will handle displaying all tickets created by a user. Add the line below to app/Http/routes.js:// app/Http/routes.js
Route.get('my_tickets', 'TicketsController.userTickets')With the route created, let's go on and create the view. Create a new view file named
user_tickets.njk within the resources/views/tickets directory and paste the code below to it:
<!-- resources/views/tickets/user_tickets.njk -->
{% extends 'layouts.master' %}
{% block title %} My Tickets {% endblock %}
{% block content %}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
My Tickets</i>
</div>
<div class="panel-body">
{% if tickets.length == 0 %}
<p>You have not created any tickets.</p>
{% else %}
<table class="table">
<thead>
<tr>
<th>Category</th>
<th>Title</th>
<th>Status</th>
<th>Last Updated</th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr>
<td>
{% for category in categories %}
{% if category.id == ticket.category_id %}
{{ category.name }}
{% endif %}
{% endfor %}
</td>
<td>
<a href="tickets/{{ ticket.ticket_id }}">
#{{ ticket.ticket_id }} - {{ ticket.title }}
</a>
</td>
<td>
{% if ticket.status == 'Open' %}
<span class="label label-success">{{ ticket.status }}</span>
{% else %}
<span class="label label-danger">{{ ticket.status }}</span>
{% endif %}
</td>
<td>{{ ticket.updated_at }}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}First, we check if there are tickets and then display them within a table. For the ticket category, we check if the ticket
category_id is equal to the category id then display the name of the category.Now if you visit the route
Showing A Ticket
/my_tickets you should see a page listing the tickets that have been created my the currently authenticated user like the image below:Now that users can see a list of all the tickets they have created, wouldn't it be nice if they could view a particular ticket? Of course, it will.
Let's tackle that. We want the user to be able to access a particular ticket by this route
tickets/ticket_id. Okay, let's create the route in app/Http/routes.js:// app/Http/routes.js
Route.get('tickets/:ticket_id', 'TicketsController.show')As you can see, we pass a parameter
:ticket_id (which will be the ID of a specific ticket) along with the route. When the user hits that route, the show(), which we are yet to create, will be triggered.Before we create the
User To Ticket Relationship
show(), let's define User to Ticket relationship.A Ticket can belong to a User, while a User can have many Tickets. This is a one to many relationship which we'll use Lucid to setup. Open the
app/Model/User.js model and paste the code below into it:// app/Model/User.js
/**
* A user can have many tickets
*/
tickets() {
return this.hasMany('App/Model/Ticket')
}Now let's edit the
app/Model/Ticket.js model in the same manner to add the inverse relationship:// app/Model/Ticket.js
/**
* A ticket belongs to a user
*/
user() {
return this.belongsTo('App/Model/User')
}Now add this code below to
app/Http/Controllers/TicketsController.js:// app/Http/Controllers/TicketsController.js
/**
* Display a specified ticket.
*/
* show(request, response) {
// Get the ticket with the user that created it
const ticket = yield Ticket.query()
.where('ticket_id', request.param('ticket_id'))
.with('user')
.firstOrFail()
// Get the ticket category
const category = yield ticket.category().fetch()
yield response.sendView('tickets.show', {
ticket: ticket.toJSON(),
category: category.toJSON()
})
}We get the ticket (with the ticket_id passed from the route using
request.param('ticket_id')) along with the user that created it (using the relationship defined above). Remember from Part 1 where we define our Ticket to Category relationship, so we can get the category which the ticket belongs to using ticket.category().fetch(). And finally, we pass the ticket and category to a view file.Create a view file in the
resources/views/tickets directory with the name show.njk and paste the code below into it:<!-- resources/views/tickets/show.njk -->
{% extends 'layouts.master' %}
{% block title %}
{{ ticket.title }}
{% endblock %}
{% block content %}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
#{{ ticket.ticket_id }} - {{ ticket.title }}
</div>
<div class="panel-body">
{% include 'includes.status' %}
{% include 'includes.errors' %}
<div class="ticket-info">
<p>{{ ticket.message }}</p>
<p>Categry: {{ category.name }}</p>
<p>
{% if ticket.status == 'Open' %}
Status: <span class="label label-success">{{ ticket.status }}</span>
{% else %}
Status: <span class="label label-danger">{{ ticket.status }}</span>
{% endif %}
</p>
<p>Created on: {{ ticket.created_at }}</p>
</div>
<hr>
<div class="comment-form">
{{ form.open({ url: '/comment', method: 'POST', class: 'form' }) }}
{{ csrfField }}
{{ form.hidden('ticket_id', ticket.id) }}
<div class="form-group">
{{ form.textarea('comment', null, { class: 'form-control', rows: 10 }) }}
</div>
<div class="form-group">
{{ form.button('Submit', null, { class: 'btn btn-primary' }) }}
</div>
{{ form.close() }}
</div>
</div>
</div>
</div>
</div>
{% endblock %}You should get something like the image below when you click on the link to a particular ticket.
If you noticed, there is a text box which will allow the user to reply/comment on the ticket. Don't worry, we'll get to it shortly. We'll be updating the
Commenting On A Ticket
resources/views/tickets/show.njk too to display the comments on the ticket.Now let's allow the user to comment on a ticket. But first, we need a place to store the comments. Create a
Comment model and a migration file with the command below:./ace make:model Comment --migrationOpen the migration file just created and update with the code below:
// database/migrations/...create_comment_table.js
// comments table migration showing only the up() schemas with our modifications
this.create('comments', (table) => {
table.increments()
table.integer('ticket_id').unsigned()
table.integer('user_id').unsigned()
table.text('comment')
table.timestamps()
})The schema is pretty straightforward. Run the migration:
./ace migration:runA Comment can belong to a Ticket, while a Ticket can have many Comments. This is a one to many relationship which we'll use Lucid to setup. Open the
app/Model/Comment.js model and paste the code below into it:// app/Model/Comment.js
/**
* A comment belongs to a particular ticket
*/
ticket() {
return this.belongsTo('App/Model/Ticket')
}Now let's edit the
app/Model/Ticket.js model in the same manner to add the inverse relationship:// app/Model/Ticket.js
/**
* A ticket can have many comments
*/
comments() {
return this.hasMany('App/Model/Comment')
}A Comment can belong to a User, while a User can have many Comments. This is a one to many relationship which we'll Lucid to setup. Open the
app/Model/Comment.js model and paste the code below into it:// app/Model/Comment.js
/**
* A comment belongs to a user
*/
user() {
return this.belongsTo('App/Model/User')
}Now let's edit the
app/Model/User.js model in the same manner to add the inverse relationship:// app/Model/User.js
/**
* A user can have many comments
*/
comments() {
return this.hasMany('App/Model/Comment')
}We need to create a new HTTP request controller that will handle all comments specific logics.
./ace make:controller CommentsThis will create
app/Http/Controllers/CommentsController.js. The CommentsController will have only one method called postComment().// app/Http/Controllers/CommentsController.js
// remember to add these to the top of file
const Mail = use('Mail')
const Validator = use('Validator')
const Comment = use('App/Model/Comment')
/**
* Persist comment and mail user
*/
* postComment(request, response) {
// Get the currently authenticated user
const user = request.currentUser
// validate form input
const validation = yield Validator.validateAll(request.all(), {
comment: 'required'
})
// show error messages upon validation fail
if (validation.fails()) {
yield request
.withAll()
.andWith({ errors: validation.messages() })
.flash()
return response.redirect('back')
}
// persist comment to database
const comment = yield Comment.create({
ticket_id: request.input('ticket_id'),
user_id: user.id,
comment: request.input('comment'),
})
// Get the ticket the comment was made on
const commentTicket = yield comment.ticket().fetch()
// Get the user that created the ticket that was just commentted on
const commentUser = yield commentTicket.user().fetch()
// send mail if the user commenting is not the ticket owner
if (commentUser.id != user.id) {
yield Mail.send('emails.ticket_comments', { commentUser, user, commentTicket, comment }, (message) => {
message.to(commentUser.email, commentUser.username)
message.from('[email protected]')
message.subject(`RE: ${commentTicket.title} (Ticket ID: ${commentTicket.ticket_id})`)
})
}
yield request.with({ status: 'Your comment has been submitted.' }).flash()
response.redirect('back')
}What the
postComment() does is simple; make sure the comment box is filled, store a comment in the comments table with the ticket_id, user_id and the actual comment. Then send an email, if the user commenting is not the ticket owner (that is, if the comment was made by an admin, an email will be sent to the ticket owner). And finally, display a status message.You will notice that I used the relationships defined above extensively. Let me further explain the code snippet.
// Get the ticket the comment was made on
const commentTicket = yield comment.ticket().fetch()
// Get the user that created the ticket that was just commentted on
const commentUser = yield commentTicket.user().fetch()
// send mail if the user commenting is not the ticket owner
if (commentUser.id != user.id) {
yield Mail.send('emails.ticket_comments', { commentUser, user, commentTicket, comment }, (message) => {
message.to(commentUser.email, commentUser.username)
message.from('[email protected]')
message.subject(`RE: ${commentTicket.title} (Ticket ID: ${commentTicket.ticket_id})`)
})
}We get the ticket the comment was made on, and then we get the user that created the ticket that was just commented on. Next, we check to see if the user ID of the ticket that was commented on is not equal to the currently authenticated user ID. If it is (that is, ticket owner made the comment) there is no point sending an email to the user since he/she is the one that made the comment. If it is not (that is, an admin made the comment) an email is sent to the ticket owner.
Comment Form
Let's take a closer look at the comment box included in the
resources/views/tickets/show.njk:<!-- resources/views/tickets/show.njk -->
<div class="comment-form">
{{ form.open({ url: '/comment', method: 'POST', class: 'form' }) }}
{{ csrfField }}
{{ form.hidden('ticket_id', ticket.id) }}
<div class="form-group">
{{ form.textarea('comment', null, { class: 'form-control', rows: 10 }) }}
</div>
<div class="form-group">
{{ form.button('Submit', null, { class: 'btn btn-primary' }) }}
</div>
{{ form.close() }}
</div>The form will be sent as a
POST request to the comment route which we are yet to create. Go on and add this to app/Http/routes.js:// app/Http/routes.js
Route.post('comment', 'CommentsController.postComment')Now you should be able to comment on a ticket but even after commenting, you won't see the comment yet because we haven't updated the show ticket view to display comments. First, we need to update the
TicketsController.js's show() to also fetch comments and pass it to the view.// app/Http/Controllers/TicketsController.js
/**
* Display a specified ticket.
*/
* show(request, response) {
// Get the ticket with the user that created it
const ticket = yield Ticket.query()
.where('ticket_id', request.param('ticket_id'))
.with('user')
.firstOrFail()
// Get the comments that have been made on the ticket with user that made the comments
const comments = yield ticket.comments().with('user').fetch()
const category = yield ticket.category().fetch()
yield response.sendView('tickets.show', {
ticket: ticket.toJSON(),
comments: comments.toJSON(),
category: category.toJSON()
})
}Also update
resources/views/tickets/show.njk, add the code below just after <hr> to do just that.<!-- resources/views/tickets/show.njk -->
<div class="comments">
{% for comment in comments %}
<div class="panel panel-{{ "default" if ticket.user.id == comment.user_id else "success" }}">
<div class="panel panel-heading">
{{ comment.user.username }}
<span class="pull-right">{{ comment.created_at }}</span>
</div>
<div class="panel panel-body">
{{ comment.comment }}
</div>
</div>
{% endfor %}
</div>When a comment is made on a ticket, we should get a screen similar to the image below:
Sending Comment Email
Let's take a closer look at the mail sending snippet from the
postComment() in the CommentsController:// app/Http/Controllers/CommentsController.js
yield Mail.send('emails.ticket_comments', { commentUser, user, commentTicket, comment }, (message) => {
message.to(commentUser.email, commentUser.username)
message.from('[email protected]')
message.subject(`RE: ${commentTicket.title} (Ticket ID: ${commentTicket.ticket_id})`)
})The Mail's
send() accepts a path to a view file email/ticket_comments.njk, an object of data (commentUser, user, commentTicket, and comment) we want to pass to the view file and lastly a callback. The view file will be inside the emails directory and will be used to compose the mail we want to send. The message argument passed to the callback is an instance of message builder which is used to build the mail by specifying who we want to send the mail to, who is sending the mail and the subject of the mail.Now let's create the email view file. Create a new
ticket_comments.njk file within the resources/views/email directory and add:<!-- resources/views/emails/ticket_comments.njk -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Suppor Ticket</title>
</head>
<body>
<p>
{{ comment.comment }}
</p>
---
<p>Replied by: {{ user.username }}</p>
<p>Title: {{ commentTicket.title }}</p>
<p>Ticket ID: {{ commentTicket.ticket_id }}</p>
<p>Status: {{ commentTicket.status }}</p>
<p>
You can view the ticket at any time at http://localhost:3333/tickets/{{ commentTicket.ticket_id }}
</p>
</body>
</html>The last feature of our support ticket application is the ability to mark a ticket as closed. But a ticket can only be marked as closed by an admin. So we need to setup an admin. Remember from part 1 when we created our
users table, we created a column called is_admin with a default value of 0 which indicate not an admin. A quick refresher:table.integer('is_admin').unsigned().default(0);We are going to create an
AdminMiddleware which will allow only an admin access to an admin only area. Run the command below to create AdminMiddleware:./ace make:middleware AdminMiddlewareUpdate the
handle() with:// app/Http/Middleware/AdminMiddleware.js
* handle (request, response, next) {
// Redirect to homepage if the currently authenticated user is not an admin
if (request.currentUser.is_admin !== 1) {
response.redirect('/');
}
yield next
}If the authenticated user is not an admin, he/she will be redirected to the homepage, else will proceed to the admin area. Next, we need to register our newly created middleware. Open
app/Http/kernel.js and add the new middleware to the namedMiddleware array. You should have something like below after adding:// app/Http/kernel.js
const namedMiddleware = {
...
admin: 'App/Http/Middleware/AdminMiddleware'
}Now that the admin middleware has been registered, let's go on and create our admin specific routes. Add the following to
app/Http/routes.js// app/Http/routes.js
Route.group('admin', function () {
Route.get('tickets', 'TicketsController.index');
Route.post('close_ticket/:ticket_id', 'TicketsController.close');
}).prefix('admin').middleware('admin')The code above is pretty straightforward, define some routes only an admin can access. The first route
/admin/tickets will trigger the index() (which we are yet to create) on the TicketsController which will get all the tickets that have been created and render a view file passed along the tickets.// app/Http/Controllers/TicketsController.js
/**
* Display all tickets.
*/
* index(request, response) {
// Get all tickets
const tickets = yield Ticket.all()
// Get all categories
const categories = yield Category.all()
yield response.sendView('tickets.index', {
tickets: tickets.toJSON(),
categories: categories.toJSON()
})
}For the view file, create a file
index.njk within the resources/views/tickets directory and paste the code into it:<!-- resources/views/tickets/index.njk -->
{% extends 'layouts.master' %}
{% block title %} All Tickets {% endblock %}
{% block content %}
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-ticket"> Tickets</i>
</div>
<div class="panel-body">
{% if tickets.length == 0 %}
<p>There are currently no tickets.</p>
{% else %}
<table class="table">
<thead>
<tr>
<th>Category</th>
<th>Title</th>
<th>Status</th>
<th>Last Updated</th>
<th style="text-align:center" colspan="2">Actions</th>
</tr>
</thead>
<tbody>
{% for ticket in tickets %}
<tr>
<td>
{% for category in categories %}
{% if category.id == ticket.category_id %}
{{ category.name }}
{% endif %}
{% endfor %}
</td>
<td>
<a href="/tickets/{{ ticket.ticket_id }}">
#{{ ticket.ticket_id }} - {{ ticket.title }}
</a>
</td>
<td>
{% if ticket.status == 'Open' %}
<span class="label label-success">{{ ticket.status }}</span>
{% else %}
<span class="label label-danger">{{ ticket.status }}</span>
{% endif %}
</td>
<td>{{ ticket.updated_at }}</td>
<td>
<a href="/tickets/{{ ticket.ticket_id }}" class="btn btn-primary">Comment</a>
</td>
<td>
{{ form.open({ url: '/admin/close_ticket/' + ticket.ticket_id, method: 'POST' }) }}
{{ csrfField }}
{{ form.button('Close', null, { class: 'btn btn-danger' }) }}
{{ form.close() }}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}Below is what an admin page will look like:
The second route
close_ticket/ticket_id will trigger the close() on the ticketsController. The method will handle closing a particular ticket.// app/Http/Controllers/TicketsController.js
/**
* Close the specified ticket.
*/
* close(request, response) {
// Get the ticket with the specified ticket_id
const ticket = yield Ticket.query()
.where('ticket_id', request.param('ticket_id'))
.firstOrFail()
// Change the ticket status to closed
ticket.status = 'Closed'
// Persist to database
yield ticket.save()
// Get the user that created the ticket
const ticketOwner = yield ticket.user().fetch()
// send email
yield Mail.send('emails.ticket_status', { ticketOwner, ticket }, (message) => {
message.to(ticketOwner.email, ticketOwner.username)
message.from('[email protected]')
message.subject(`RE: ${ticket.title} (Ticket ID: ${ticket.ticket_id})`)
})
yield request.with({ status: 'The ticket has been closed.' }).flash()
response.redirect('back')
}We get the ticket with the ticket_id passed from the route using
request.param('ticket_id'), and set it status to Closed and save it. Then send an email to the owner of the ticket. And finally, display a status message.We need one more view file; the
ticket_status email view file. Go on and create ticket_status.njk and add:<!-- resources/views/emails/ticket_status.njk -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Suppor Ticket Status</title>
</head>
<body>
<p>
Hello {{ ticketOwner.username }},
</p>
<p>
Your support ticket with ID #{{ ticket.ticket_id }} has been marked has resolved and closed.
</p>
</body>
</html>Only authenticated users can use our support ticket application. AdonisJs has us covered by providing authenticate middleware which will allow only authenticated users access to the routes in which the
auth middleware is added to. Open app/Http/routes.js and update the specified routes with:// app/Http/routes.js
Route.get('new_ticket', 'TicketsController.create').middleware('auth')
Route.post('new_ticket', 'TicketsController.store').middleware('auth')
Route.get('tickets/:ticket_id', 'TicketsController.show').middleware('auth')
Route.get('my_tickets', 'TicketsController.userTickets').middleware('auth')
Route.group('admin', function () {
Route.get('tickets', 'TicketsController.index');
Route.post('close_ticket/:ticket_id', 'TicketsController.close');
}).prefix('admin').middleware(['auth', 'admin'])We add the
auth middleware to some of the routes we defined earlier. This will make these routes be accessible only to authenticated users.Note: The admin routes have two middlewares:
Handle Exception Thrown For Unauthenticated Users
auth and admin (we created earlier) which means not only an authenticated user can access these routes but must also be an admin.Having set up our middlewares, when an unauthenticated user tries to access authenticated users only area, they will get the error below:
Oops! That's Awkward. Yeah, I know.
Let's give our users a nice user experience by kindly redirecting them to the login page if they are not authenticated. To do that, open
app/Listeners/Http.js and add the snippet below to it just before the DEVELOPMENT REPORTER section:// app/Listeners/Http.js
/**
* Handle exception thrown when unable to authenticate the request
*/
if (error.name === 'InvalidLoginException') {
yield response.sendView('auth.login')
return
}The
Finishing Touches
app/Listeners/Http.js will handle errors that occurred during an HTTP request so it a nice place to catch any exception errors not caught within a controller. Back to our error, noticed from the image above that a 401 InvalidLoginException exception error was thrown. All we have to do it listen for when the error name is InvalidLoginException and then handle it gracefully by redirecting the user to the login page.To finish up with our application, let's add a kind of landing page that users will see upon visiting our application. Open
app/Http/routes.js and add the line below to it:// app/Http/routes.js
Route.on('/').render('home')AdonisJs has a
render() for displaying static pages. The route above will render a home view which we'll create shortly.Create a new file named
home.njk within the resources/views and add the code below to it:// resources/views/home.njk
{% extends 'layouts.master' %}
{% block title %} Welcome {% endblock %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-body">
<p>Welcome!</p>
{% if currentUser.is_admin %}
<p>
See all <a href="/admin/tickets">tickets</a>
</p>
{% else %}
<p>
See all your <a href="/my_tickets">tickets</a> or <a href="/new_ticket">open new ticket</a>
</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}Now when we visit the homepage of our application, we will get a screen similar as below:
Below is an image of the final output of what we have built.
Conclusion
That's it. Our support ticket application is ready. In this tutorial, we have been able to see how easy and straightforward it is to build applications with AdonisJs. We have been able to utilize AdonisJs Query Builder to define our table structures without writing a single SQL command, layout our views with its built-in view engine without doing extra setup as with other Node.JS frameworks (Express, Hapi.js etc). We also saw Lucid ORM in action which makes it seamless to interact with our database irrelevant of the database type. Lastly, we saw Ace, a powerful interactive shell which we used to scaffold and perform some operations from within a terminal. Though we didn't touch all of the great features that AdonisJs provides out of the box. In subsequent tutorials, we'll be looking more at AdonisJs and how to do great stuff with it.
You can check out the project repository to view the complete source code. If you have any questions about the tutorial, let me know in the comments below.