Hello, @sirfreeman is here again, this time we are working on part 9 of building a support ticket with lucid architecture and laravel.
In our last part, we built the CloseTicketFeature which was responsible for closing a particular ticket from its id the status of the ticket was changed from its default which was opened to closed. by setting it to the new value.
Requirements
the following are the requirements for this tutorial
- Download php 7.2.1
- Download Composer.exe
- Download xampp or wamp for windows.
Difficulty level
This tutorial is rated as intermediate
Overview of the task.
In this series, we are going start setting up the interface for retrieving all the tickets to a particular view which would be set to our admin interface in the last series. This particular interface should show the route to close tickets and access a particular ticket, its category and status.
This how the interface would look like.
Lets begin
We would start by initiating the rout for this view by adding the code below to the web.php
Route::get('tickets', 'TicketController@index');
Next we are going to open are TicketController and add the index function we initiated at the route.
This code is going to serve a feature which we are yet to create.
public function index()
{
return $this->serve(ListTicketFeature::class);
}
After adding the code remember to use the served feature at the top.
Generating and initiating the LIstTicketFeature
Okay lets generate our feature from lucid CLI with the command below
lucid make:feature ListTicket web
open up the generated feature and add the code below.
<?php
namespace App\Services\Web\Features;
use Lucid\Foundation\Feature;
use Illuminate\Http\Request;
use Illuminate\Validation\ValidationException;
use App\Domains\Categories\Jobs\ListAllCategoryJob;
use App\Domains\Tickets\Jobs\ListAllTicketJob;
class ListTicketFeature extends Feature
{
public function handle(Request $request)
{
try {
$tickets = $this->run(ListAllTicketJob::class)->paginate(10);
$categories = $this->run(ListAllCategoryJob::class);
return view('tickets.index', compact('tickets', 'categories'));
} catch (ValidationException $e) {
}
}
}
In this feature, we are using to jobs for specific task, the jobs include the following
1. ListAllTicketJob
The job goes to the model and fetches all the tickets in the database
We create the job by entering the command below in the Lucid CLI
lucid make:job ListAllTicket ticket
Open up the newly created jod and add the code below.
<?php
namespace App\Domains\Tickets\Jobs;
use Lucid\Foundation\Job;
use App\Data\Repositories\TicketRepository;
class ListAllTicketJob extends Job
{
/**
* Create a new job instance.
*
* @return void
*/
public function __construct()
{
}
/**
* Execute the job.
*
* @return void
*/
public function handle(TicketRepository $repo)
{
return $repo->model->firstOrFail();
}
}
The code below interfaces with the TicketRepository and connects to the model to fetch all ticket
return $repo->model->firstOrFail();
2. ListAllCategoryJob
This job does the same function as the ListAllTicketJob, the job fetches all the tickets in the same category.
lets generate this job with the command below
lucid make:job ListAllCategory ticket
open the generated file and add the code below
<?php
namespace App\Domains\Tickets\Jobs;
use Lucid\Foundation\Job;
use App\Data\Repository\CategoryRepository;
class ListAllCategoryJob extends Job
{
/**
* Create a new job instance.
*
* @return void
*/
protected $data;
public function __construct()
{
$this->data = $data;
}
/**
* Execute the job.
*
* @return void
*/
public function handle(CategoryRepository $repo)
{
$repo->model->all();
}
}
the snippet of code below is the core of this job
$repo->model->all();
which fetches all the tickets from the category.
In the feature, we send the data to the view. the snippet in the feature is responsiple for the action
return view('tickets.index', compact('tickets', 'categories'));
All we need is to create our view file in the resources/views/tickets folder and add a file index.blade.php
Add the code below for the view
@extends('layouts.app')
@section('title', 'All Tickets')
@section('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>
@include('includes.flash')
<div class="panel-body">
@if ($tickets->isEmpty())
<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>
@foreach ($tickets as $ticket)
<tr>
<td>
@foreach ($categories as $category)
@if ($category->id === $ticket->category_id)
{{ $category->name }}
@endif
@endforeach
</td>
<td>
<a href="{{ url('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="{{ url('tickets/' . $ticket->ticket_id) }}" class="btn btn-primary">Comment</a>
</td>
<td>
<form action="{{ url('admin/close_ticket/' . $ticket->ticket_id) }}" method="POST">
{!! csrf_field() !!}
<button type="submit" class="btn btn-danger">Close</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $tickets->render() }}
@endif
</div>
</div>
</div>
</div>
@endsection
Now if we hit the url localhost:8000/tickets we should get the demo below
curriculum
see you in the next.
Posted on Utopian.io - Rewarding Open Source Contributors
Wow nice tutorial, I hope you will be approved :v
Good luck
Thank you
Youre welcome
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @sirfreeman I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x