Client portal improvements (#3607)

* Remove Html\Builder dependency from controllers

* Remove: yajra/laravel-datatables-html

- yajra/laravel-datatables-oracle as main non-dev dependency

* Added sorting to tables

app/Http/Controllers/ClientPortal/PaymentController.php

@@ -21,6 +21,8 @@ use App\Utils\Traits\MakesDates;
 use App\Utils\Traits\MakesHash;
 use Cache;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
+use Yajra\DataTables\Facades\DataTables;
 /**
  * Class PaymentController
  * @package App\Http\Controllers\ClientPortal\PaymentController

app/Http/Controllers/ClientPortal/PaymentMethodController.php

@@ -17,6 +17,7 @@ use App\Http\Requests\ClientPortal\CreatePaymentMethodRequest;
 use App\Models\ClientGatewayToken;
 use App\Utils\Traits\MakesDates;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Log;
 
 class PaymentMethodController extends Controller
 {

app/Http/Controllers/ClientPortal/RecurringInvoiceController.php

@@ -22,6 +22,7 @@ use App\Utils\Traits\MakesHash;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Mail;
 use Illuminate\Support\Facades\Notification;
+use Yajra\DataTables\Facades\DataTables;
 
 /**
  * Class InvoiceController
@@ -36,7 +37,6 @@ class RecurringInvoiceController extends Controller
     /**
      * Show the list of recurring invoices.
      *
-     * @param Builder $builder
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
     public function index()

composer.json

@@ -47,7 +47,8 @@
         "staudenmeir/eloquent-has-many-deep": "^1.11",
         "stripe/stripe-php": "^7.0",
         "superbalist/laravel-google-cloud-storage": "^2.2",
-        "webpatser/laravel-countries": "dev-master#75992ad"
+        "webpatser/laravel-countries": "dev-master#75992ad",
+        "yajra/laravel-datatables-oracle": "~9.0"
     },
     "require-dev": {
         "laravelcollective/html": "^6",

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/app.js": "/js/app.js?id=8b49701583f407403ddf",
-    "/css/app.css": "/css/app.css?id=422c8d1b7e15aa054cd7",
+    "/css/app.css": "/css/app.css?id=94397d09115c3157cc49",
     "/js/clients/invoices/action-selectors.js": "/js/clients/invoices/action-selectors.js?id=caec43815d9a13168a38",
     "/js/clients/invoices/payment.js": "/js/clients/invoices/payment.js?id=af49e24958be5fc00c92",
     "/js/clients/payment_methods/authorize-stripe-card.js": "/js/clients/payment_methods/authorize-stripe-card.js?id=f4c45f0da9868d840799",

resources/sass/app.scss

@@ -9,6 +9,7 @@
 @import 'components/inputs';
 @import 'components/alerts';
 @import 'components/badge';
+@import 'components/datatables';
 
 .active-page {
     @apply bg-blue-900 #{!important};

resources/sass/components/datatables.scss

@@ -0,0 +1,37 @@
+.dataTables_wrapper.no-footer {
+    @apply bg-gray-50 #{!important};
+}
+
+.dataTables_wrapper select,
+.dataTables_wrapper .dataTables_filter input {
+    @apply text-gray-700 px-4 py-2 #{!important};
+}
+
+.dataTables_length {
+    @apply p-3 #{!important};
+}
+
+.dataTables_filter {
+    @apply p-3 #{!important};
+
+    input {
+        @apply items-center border border-gray-300 rounded px-4 text-sm py-1 #{!important};
+    }
+}
+
+table.dataTable thead th,
+table.dataTable thead td {
+    @apply border-b border-gray-200 #{!important};
+}
+
+.dataTables_info {
+    @apply p-3 text-sm #{!important};
+}
+
+.dataTables_paginate {
+    @apply text-sm #{!important};
+}
+
+.dataTable.no-footer {
+    @apply border-none #{!important};
+}

resources/views/portal/ninja2020/credits/index.blade.php

@@ -1,6 +1,10 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.credits'))
 
+@push('head')
+    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
+@endpush
+
 @section('header')
     {{ Breadcrumbs::render('credits') }}
 
@@ -85,3 +89,14 @@
         </div>
     </div>
 @endsection
+
+@push('footer')
+    <script src="{{ asset('js/clients/quotes/action-selectors.js') }}"></script>
+    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
+
+    <script>
+        $(document).ready(function() {
+            $('table').DataTable();
+        });
+    </script>
+@endpush

resources/views/portal/ninja2020/invoices/index.blade.php

@@ -1,16 +1,20 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.invoices'))
 
+@push('head')
+    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
+@endpush
+
 @section('header')
     {{ Breadcrumbs::render('invoices') }}
 
-    @if($errors->any())
-        <div class="alert alert-failure mb-4">
-            @foreach($errors->all() as $error)
-                <p>{{ $error }}</p>
-            @endforeach
-        </div>
-    @endif
+@if($errors->any())
+    <div class="alert alert-failure mb-4">
+        @foreach($errors->all() as $error)
+        <p>{{ $error }}</p>
+        @endforeach
+    </div>
+@endif
 
     <div class="bg-white shadow rounded mb-4" translate>
         <div class="px-4 py-5 sm:p-6">
@@ -35,81 +39,74 @@
         <span>{{ ctrans('texts.with_selected') }}</span>
         <form action="{{ route('client.invoices.bulk') }}" method="post" id="bulkActions">
             @csrf
-            <button type="submit" class="button button-primary" name="action"
-                    value="download">{{ ctrans('texts.download') }}</button>
-            <button type="submit" class="button button-primary" name="action"
-                    value="payment">{{ ctrans('texts.pay_now') }}</button>
+            <button type="submit" class="button button-primary" name="action" value="download">{{ ctrans('texts.download') }}</button>
+            <button type="submit" class="button button-primary" name="action" value="payment">{{ ctrans('texts.pay_now') }}</button>
         </form>
     </div>
     <div class="flex flex-col mt-4">
         <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
-            <div
-                class="align-middle inline-block min-w-full shadow overflow-hidden rounded border-b border-gray-200">
+            <div class="align-middle inline-block min-w-full shadow overflow-hidden rounded border-b border-gray-200">
                 <table class="min-w-full">
                     <thead>
-                    <tr>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                            <label>
-                                <input type="checkbox" class="form-check form-check-parent">
-                            </label>
-                        </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                            {{ ctrans('texts.invoice_number') }}
-                        </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                            {{ ctrans('texts.invoice_date') }}
-                        </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                            {{ ctrans('texts.balance') }}
-                        </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                            {{ ctrans('texts.due_date') }}
-                        </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
-                            {{ ctrans('texts.status') }}
-                        </th>
-                        <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
-                    </tr>
+                        <tr>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                                <label>
+                                    <input type="checkbox" class="form-check form-check-parent">
+                                </label>
+                            </th>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                                {{ ctrans('texts.invoice_number') }}
+                            </th>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                                {{ ctrans('texts.invoice_date') }}
+                            </th>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                                {{ ctrans('texts.balance') }}
+                            </th>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                                {{ ctrans('texts.due_date') }}
+                            </th>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">
+                                {{ ctrans('texts.status') }}
+                            </th>
+                            <th class="px-6 py-3 border-b border-gray-200 bg-gray-50"></th>
+                        </tr>
                     </thead>
                     <tbody>
-                    @foreach($invoices as $invoice)
-                        <tr class="bg-white group hover:bg-gray-100">
-                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
-                                <label>
-                                    <input type="checkbox" class="form-check form-check-child"
-                                           data-value="{{ $invoice->hashed_id }}">
-                                </label>
-                            </td>
-                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                {{ $invoice->number }}
-                            </td>
-                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                {{ $invoice->due_date  }} <!-- $invoice->formatDate($invoice->date, $invoice->client->date_format())-->
-                            </td>
-                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                {{ App\Utils\Number::formatMoney($invoice->balance, $invoice->client) }}
-                            </td>
-                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                {{ $invoice->formatDate($invoice->due_date, $invoice->client->date_format()) }}
-                            </td>
-                            <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
-                                {!! App\Models\Invoice::badgeForStatus($invoice->status) !!}
-                            </td>
-                            <td class="px-6 py-4 whitespace-no-wrap flex items-center justify-end text-sm leading-5 font-medium">
-                                @if($invoice->isPayable())
-                                    <button
-                                        class="button button-primary py-1 px-2 text-xs uppercase mr-3 pay-now-button"
-                                        data-value="{{ $invoice->hashed_id }}">
-                                        @lang('texts.pay_now')
-                                    </button>
-                                @endif
-                                <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}"
-                                   class="button-link">
-                                    @lang('texts.view')
-                                </a>
-                            </td>
-                        </tr>
-                    @endforeach
+                        @foreach($invoices as $invoice)
+                            <tr class="bg-white group hover:bg-gray-100">
+                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 font-medium text-gray-900">
+                                    <label>
+                                        <input type="checkbox" class="form-check form-check-child ml-2" data-value="{{ $invoice->hashed_id }}">
+                                    </label>
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
+                                    {{ $invoice->number }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
+                                    {{ $invoice->due_date  }} <!-- $invoice->formatDate($invoice->date, $invoice->client->date_format())-->
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
+                                    {{ App\Utils\Number::formatMoney($invoice->balance, $invoice->client) }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
+                                    {{ $invoice->formatDate($invoice->due_date, $invoice->client->date_format()) }}
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-500">
+                                    {!! App\Models\Invoice::badgeForStatus($invoice->status) !!}
+                                </td>
+                                <td class="px-6 py-4 whitespace-no-wrap flex items-center justify-end text-sm leading-5 font-medium">
+                                    @if($invoice->isPayable())
+                                        <button class="button button-primary py-1 px-2 text-xs uppercase mr-3 pay-now-button" data-value="{{ $invoice->hashed_id }}">
+                                            @lang('texts.pay_now')
+                                        </button>
+                                    @endif
+                                    <a href="{{ route('client.invoice.show', $invoice->hashed_id) }}" class="button-link">
+                                        @lang('texts.view')
+                                    </a>
+                                </td>
+                            </tr>
+                        @endforeach
                     </tbody>
                 </table>
             </div>
@@ -121,5 +118,13 @@
 @endsection
 
 @push('footer')
+    <script src="{{ asset('js/vendor/jquery-3.3.1/jquery-3.3.1.min.js') }}"></script>
+    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
     <script src="{{ asset('js/clients/invoices/action-selectors.js') }}"></script>
-@endpush
+
+    <script>
+        $(document).ready(function() {
+            $('table').DataTable();
+        });
+    </script>
+@endpush

resources/views/portal/ninja2020/payment_methods/index.blade.php

@@ -1,6 +1,10 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.payment_methods'))
 
+@push('head')
+    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
+@endpush
+
 @section('header')
     {{ Breadcrumbs::render('payment_methods') }}
 
@@ -108,3 +112,13 @@
         </div>
     </div>
 @endsection
+
+@push('footer')
+    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
+
+    <script>
+        $(document).ready(function() {
+            $('table').DataTable();
+        });
+    </script>
+@endpush

resources/views/portal/ninja2020/payments/index.blade.php

@@ -1,6 +1,10 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.payments'))
 
+@push('head')
+    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
+@endpush
+
 @section('header')
     {{ Breadcrumbs::render('payments') }}
 
@@ -83,3 +87,13 @@
         </div>
     </div>
 @endsection
+
+@push('footer')
+    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
+
+    <script>
+        $(document).ready(function() {
+            $('table').DataTable();
+        });
+    </script>
+@endpush

resources/views/portal/ninja2020/quotes/index.blade.php

@@ -1,6 +1,10 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.quotes'))
 
+@push('head')
+    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
+@endpush
+
 @section('header')
     {{ Breadcrumbs::render('quotes') }}
 
@@ -114,4 +118,11 @@
 
 @push('footer')
     <script src="{{ asset('js/clients/quotes/action-selectors.js') }}"></script>
+    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
+
+    <script>
+        $(document).ready(function() {
+            $('table').DataTable();
+        });
+    </script>
 @endpush

resources/views/portal/ninja2020/recurring_invoices/index.blade.php

@@ -1,6 +1,10 @@
 @extends('portal.ninja2020.layout.app')
 @section('meta_title', ctrans('texts.recurring_invoices'))
 
+@push('head')
+    <link rel="stylesheet" href="{{ asset('js/vendor/datatables/datatables.min.css') }}">
+@endpush
+
 @section('header')
     {{ Breadcrumbs::render('recurring_invoices') }}
 
@@ -83,3 +87,14 @@
         </div>
     </div>
 @endsection
+
+@push('footer')
+    <script src="{{ asset('js/vendor/datatables/datatables.min.js') }}"></script>
+    <script src="{{ asset('js/clients/invoices/action-selectors.js') }}"></script>
+
+    <script>
+        $(document).ready(function() {
+            $('table').DataTable();
+        });
+    </script>
+@endpush