Tutorial: Building a support ticket in laravel lucid architecture ---Part 9

in #utopian-io7 years ago (edited)

cover-Recovered-Recovered.jpg

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.

Admin.png

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');

image.png

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) {
            
        }
    }
}

image.png

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();
    }
}

image.png

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.
image.png

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

Admin.png

curriculum

see you in the next.



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Wow nice tutorial, I hope you will be approved :v
Good luck

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

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Suggestions

  • Contribute more often to get higher and higher rewards. I wish to see you often!
  • Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

  • Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

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