Change index table to DataTable

app/Http/Controllers/Moderation/TicketsController.php

@@ -59,4 +59,58 @@ class TicketsController extends Controller
         $user->notify(new ReplyNotification($ticket, $user, $newmessage));
         return redirect()->back()->with('success', __('Your comment has been submitted'));
     }
-}
+    
+    public function dataTable()
+    {
+        $query = Ticket::query();
+
+        return datatables($query)
+            ->addColumn('category', function (Ticket $tickets) {
+                return $tickets->ticketcategory->name;
+            })
+            ->editColumn('title', function (Ticket $tickets) {
+                return '<a class="text-info"  href="' . route('moderator.ticket.show', ['ticket_id' => $tickets->ticket_id]) . '">' . "#" . $tickets->ticket_id . " - " . $tickets->title . '</a>';
+            })
+            ->editColumn('user_id', function (Ticket $tickets) {
+                return '<a href="' . route('admin.users.show', $tickets->user->id) . '">' . $tickets->user->name . '</a>';
+            })
+            ->addColumn('actions', function (Ticket $tickets) {
+                return '
+                            <a data-content="'.__("View").'" data-toggle="popover" data-trigger="hover" data-placement="top" href="' . route('moderator.ticket.show', ['ticket_id' => $tickets->ticket_id]) . '" class="btn btn-sm text-white btn-info mr-1"><i class="fas fa-eye"></i></a>
+                            <form class="d-inline"  method="post" action="' . route('moderator.ticket.close', ['ticket_id' => $tickets->ticket_id ]) . '">
+                                ' . csrf_field() . '
+                                ' . method_field("POST") . '
+                            <button data-content="'.__("Close").'" data-toggle="popover" data-trigger="hover" data-placement="top" class="btn btn-sm text-white btn-warning mr-1"><i class="fas fa-times"></i></button>
+                            </form>
+                            <form class="d-inline"  method="post" action="' . route('moderator.ticket.delete', ['ticket_id' => $tickets->ticket_id ]) . '">
+                                ' . csrf_field() . '
+                                ' . method_field("POST") . '
+                            <button data-content="'.__("Delete").'" data-toggle="popover" data-trigger="hover" data-placement="top" class="btn btn-sm text-white btn-danger mr-1"><i class="fas fa-trash"></i></button>
+                            </form>
+                ';
+            })
+            ->editColumn('status', function (Ticket $tickets) {
+                switch ($tickets->status) {
+                    case 'Open':
+                        $badgeColor = 'badge-success';
+                        break; 
+                    case 'Closed':
+                        $badgeColor = 'badge-danger';
+                        break;
+                    case 'Answered':
+                        $badgeColor = 'badge-info';
+                        break;
+                    default:
+                        $badgeColor = 'badge-warning';
+                        break;
+                }
+
+                return '<span class="badge ' . $badgeColor . '">' . $tickets->status . '</span>';
+            })
+            ->editColumn('updated_at', function (Ticket $tickets) {
+                return $tickets->updated_at ? $tickets->updated_at->diffForHumans() : '';
+            })
+            ->rawColumns(['category', 'title', 'user_id', 'status', 'updated_at', 'actions'])
+            ->make(true);
+    }
+} 

app/Http/Controllers/TicketsController.php

@@ -81,4 +81,40 @@ class TicketsController extends Controller
         Notification::send($admin, new AdminReplyNotification($ticket, $user, $newmessage));
         return redirect()->back()->with('success', __('Your comment has been submitted'));
     }
+
+    public function dataTable()
+    {
+        $query = Ticket::where("user_id", Auth::user()->id)->get();
+
+        return datatables($query)
+            ->addColumn('category', function (Ticket $tickets) {
+                return $tickets->ticketcategory->name;
+            })
+            ->editColumn('title', function (Ticket $tickets) {
+                return '<a class="text-info" target="_blank" href="' . route('moderator.ticket.show', ['ticket_id' => $tickets->ticket_id]) . '">' . "#" . $tickets->ticket_id . " - " . $tickets->title . '</a>';
+            })
+            ->editColumn('status', function (Ticket $tickets) {
+                switch ($tickets->status) {
+                    case 'Open':
+                        $badgeColor = 'badge-success';
+                        break; 
+                    case 'Closed':
+                        $badgeColor = 'badge-danger';
+                        break;
+                    case 'Answered':
+                        $badgeColor = 'badge-info';
+                        break;
+                    default:
+                        $badgeColor = 'badge-warning';
+                        break;
+                }
+
+                return '<span class="badge ' . $badgeColor . '">' . $tickets->status . '</span>';
+            })
+            ->editColumn('updated_at', function (Ticket $tickets) {
+                return $tickets->updated_at ? $tickets->updated_at->diffForHumans() : '';
+            })
+            ->rawColumns(['category', 'title', 'status', 'updated_at'])
+            ->make(true);
+    }
 }

resources/views/layouts/main.blade.php

@@ -238,7 +238,7 @@
                             <li class="nav-header">{{ __('Moderation') }}</li>
 
                             <li class="nav-item">
-                                <a href="{{ route('moderator.ticket.index') }}" class="nav-link @if (Request::routeIs('mod.ticket.*')) active @endif">
+                                <a href="{{ route('moderator.ticket.index') }}" class="nav-link @if (Request::routeIs('moderator.ticket.*')) active @endif">
                                     <i class="nav-icon fas fa-ticket-alt"></i>
                                     <p>{{ __('Ticket List') }}</p>
                                 </a>

resources/views/moderator/ticket/index.blade.php

@@ -37,70 +37,52 @@
                     <table id="datatable" class="table table-striped">
                         <thead>
                         <tr>
-                            <th>Category</th>
-                            <th>Title</th>
-                            <th>User</th>
-                            <th>Status</th>
-                            <th>Last Updated</th>
-                            <th>Actions</th>
+                            <th>{{__('Category')}}</th>
+                            <th>{{__('Title')}}</th>
+                            <th>{{__('User')}}</th>
+                            <th>{{__('Status')}}</th>
+                            <th>{{__('Last Updated')}}</th>
+                            <th>{{__('Actions')}}</th>
                         </tr>
                         </thead>
                         <tbody>
-                            @foreach ($tickets as $ticket)
-                                <tr>
-                                    <td>
-                                        {{ $ticket->ticketcategory->name }}
-                                    </td>
-                                    <td>
-                                        <a href="{{ route('moderator.ticket.show', ['ticket_id' => $ticket->ticket_id]) }}">
-                                            #{{ $ticket->ticket_id }} - {{ $ticket->title }}
-                                        </a>
-                                    </td>
-                                    <td>
-                                        <a href="/admin/users/{{$ticket->user->id}}">
-                                            {{ $ticket->user->name }}
-                                        </a>
-                                    </td>
-                                    <td>
-                                        @if ($ticket->status === 'Open')
-                                        <span class="badge badge-success">Open</span>
-                                        @elseif ($ticket->status === 'Closed')
-                                        <span class="badge badge-danger">Closed</span>
-                                        @elseif ($ticket->status === 'Answered')
-                                        <span class="badge badge-info">Answered</span>
-                                        @elseif ($ticket->status === 'Client Reply')
-                                        <span class="badge badge-warning">Client Reply</span>
-                                        @endif
-                                    </td>
-                                    <td>{{ $ticket->updated_at }}</td>
-                                    <td>
-                                        <a data-content="View" data-toggle="popover" data-trigger="hover" data-placement="top" href="{{ route('moderator.ticket.show', ['ticket_id' => $ticket->ticket_id]) }}" class="btn btn-sm text-white btn-info mr-1"><i class="fas fa-eye"></i></a>
-                                        <form class="d-inline" action="{{ route('moderator.ticket.close', ['ticket_id' => $ticket->ticket_id ]) }}" method="POST">
-                                        @csrf
-                                        <button data-content="Close" data-toggle="popover" data-trigger="hover" data-placement="top" type="submit" class="btn btn-sm text-white btn-warning mr-1"><i class="fas fa-times"></i></button>
-                                        </form>
-                                        <form class="d-inline" action="{{ route('moderator.ticket.delete', ['ticket_id' => $ticket->ticket_id ]) }}" method="POST">
-                                            @csrf
-                                            <button data-content="Delete" data-toggle="popover" data-trigger="hover" data-placement="top" type="submit" class="btn btn-sm text-white btn-danger mr-1"><i class="fas fa-trash"></i></button>
-                                        </form>
-                                    </td>
-                                </tr>
-                            @endforeach
                         </tbody>
                     </table>
+                    
                 </div>
-                @if($tickets->hasPages())
-                <div class="card-footer">
-                    {{ $tickets->links() }}
-                </div>
-                @endif
             </div>
+            
+
+
         </div>
         <!-- END CUSTOM CONTENT -->
 
     </section>
     <!-- END CONTENT -->
-
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            $('#datatable').DataTable({
+                language: {
+                    url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/{{config("app.datatable_locale")}}.json'
+                },
+                processing: true,
+                serverSide: true,
+                stateSave: true,
+                ajax: "{{route('moderator.ticket.datatable')}}",
+                columns: [
+                    {data: 'category'},
+                    {data: 'title'},
+                    {data: 'user_id'},
+                    {data: 'status'},
+                    {data: 'updated_at'},
+                    {data: 'actions', sortable: false},
+                ],
+                fnDrawCallback: function( oSettings ) {
+                    $('[data-toggle="popover"]').popover();
+                }
+            });
+        });
+    </script>
 
 
 @endsection

resources/views/ticket/index.blade.php

@@ -39,45 +39,16 @@
                             <table id="datatable" class="table table-striped">
                                 <thead>
                                 <tr>
-                                    <th>Category</th>
-                                    <th>Title</th>
-                                    <th>Status</th>
-                                    <th>Last Updated</th>
+                                    <th>{{__('Category')}}</th>
+                                    <th>{{__('Title')}}</th>
+                                    <th>{{__('Status')}}</th>
+                                    <th>{{__('Last Updated')}}</th>
                                 </tr>
                                 </thead>
                                 <tbody>
-                                    @foreach ($tickets as $ticket)
-                                    <tr>
-                                        <td>
-                                            {{ $ticket->ticketcategory->name }}
-                                        </td>
-                                        <td>
-                                            <a href="{{ route('ticket.show', ['ticket_id' => $ticket->ticket_id]) }}">
-                                                #{{ $ticket->ticket_id }} - {{ $ticket->title }}
-                                            </a>
-                                        </td>
-                                        <td>
-                                            @if ($ticket->status === 'Open')
-                                            <span class="badge badge-success">Open</span>
-                                            @elseif ($ticket->status === 'Closed')
-                                            <span class="badge badge-danger">Closed</span>
-                                            @elseif ($ticket->status === 'Answered')
-                                            <span class="badge badge-info">Answered</span>
-                                            @elseif ($ticket->status === 'Client Reply')
-                                            <span class="badge badge-warning">Client Reply</span>
-                                            @endif
-                                        </td>
-                                        <td>{{ $ticket->updated_at }}</td>
-                                    </tr>
-                                    @endforeach
                                 </tbody>
                             </table>
                         </div>
-                        @if($tickets->hasPages())
-                        <div class="card-footer">
-                            {{ $tickets->links() }}
-                        </div>
-                        @endif
                     </div>
                 </div>
                 <div class="col-lg-4">
@@ -100,5 +71,27 @@
         </div>
     </section>
     <!-- END CONTENT -->
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            $('#datatable').DataTable({
+                language: {
+                    url: '//cdn.datatables.net/plug-ins/1.11.3/i18n/{{config("app.datatable_locale")}}.json'
+                },
+                processing: true,
+                serverSide: true,
+                stateSave: true,
+                ajax: "{{route('ticket.datatable')}}",
+                columns: [
+                    {data: 'category'},
+                    {data: 'title'},
+                    {data: 'status'},
+                    {data: 'updated_at', sortable: false},
+                ],
+                fnDrawCallback: function( oSettings ) {
+                    $('[data-toggle="popover"]').popover();
+                }
+            });
+        });
+    </script>
 @endsection
 

routes/web.php

@@ -95,6 +95,7 @@ Route::middleware(['auth', 'checkSuspended'])->group(function () {
     #ticket user
     if(config("SETTINGS::TICKET:ENABLED")) {
         Route::get('ticket', [TicketsController::class, 'index'])->name('ticket.index');
+        Route::get('ticket/datatable', [TicketsController::class, 'datatable'])->name('ticket.datatable');
         Route::get('ticket/new', [TicketsController::class, 'create'])->name('ticket.new');
         Route::post('ticket/new', [TicketsController::class, 'store'])->name('ticket.new.store');
         Route::get('ticket/show/{ticket_id}', [TicketsController::class, 'show'])->name('ticket.show');
@@ -178,6 +179,7 @@ Route::middleware(['auth', 'checkSuspended'])->group(function () {
     Route::prefix('moderator')->name('moderator.')->middleware('moderator')->group(function () {
         #ticket moderation
         Route::get('ticket', [ModTicketsController::class, 'index'])->name('ticket.index');
+        Route::get('ticket/datatable', [ModTicketsController::class, 'datatable'])->name('ticket.datatable');
         Route::get('ticket/show/{ticket_id}', [ModTicketsController::class, 'show'])->name('ticket.show');
         Route::post('ticket/reply', [ModTicketsController::class, 'reply'])->name('ticket.reply');
         Route::post('ticket/close/{ticket_id}', [ModTicketsController::class, 'close'])->name('ticket.close');