Client portal improvements (1/2) (#3649)

- Fix for building dependencies
- Fixes for data table sorting
- Improved styling of tables
- Improved buttons padding, position

app/Http/Controllers/ClientPortal/InvoiceController.php

@@ -46,11 +46,8 @@ class InvoiceController extends Controller
      */
     public function index(InvoiceFilters $filters)
     {
-        $client_id = auth('contact')->user()->client->id;
+        $invoices = Invoice::filter($filters)->get(); // @for-now
 
-        $invoices = Invoice::where('client_id', $client_id)->paginate(10);
-
-       // $invoices = Invoice::filter($filters);
         return $this->render('invoices.index', ['invoices' => $invoices]);
     }
 

package-lock.json

@@ -11,11 +11,11 @@
             }
         },
         "@babel/compat-data": {
-            "version": "7.8.6",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.8.6.tgz",
-            "integrity": "sha512-CurCIKPTkS25Mb8mz267vU95vy+TyUpnctEX2lV33xWNmHAfjruztgiPBbXZRh3xZZy1CYvGx6XfxyTVS+sk7Q==",
+            "version": "7.9.0",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.9.0.tgz",
+            "integrity": "sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==",
             "requires": {
-                "browserslist": "^4.8.5",
+                "browserslist": "^4.9.1",
                 "invariant": "^2.2.4",
                 "semver": "^5.5.0"
             }

package.json

@@ -10,6 +10,7 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@babel/compat-data": "7.9.0",
         "laravel-mix-purgecss": "^5.0.0-rc.1",
         "vue-template-compiler": "^2.6.11"
     },

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/js/app.js": "/js/app.js?id=8b49701583f407403ddf",
-    "/css/app.css": "/css/app.css?id=adcfc72ac9afb077fdb4",
+    "/css/app.css": "/css/app.css?id=9015e72c9d7c1403f034",
     "/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/components/datatables.scss

@@ -1,37 +1,45 @@
-.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};
-}
+    @screen sm {
+        @apply my-5 #{!important};
+    }
 
-.dataTables_filter {
-    @apply p-3 #{!important};
+    @screen lg {
+        @apply my-4 #{!important};
+    }
 
-    input {
-        @apply items-center border border-gray-300 rounded px-4 text-sm py-1 #{!important};
+    select {
+        @apply bg-white input py-2 mx-2 px-2 #{!important};
     }
 }
 
-table.dataTable thead th,
-table.dataTable thead td {
-    @apply border-b border-gray-200 #{!important};
-}
+.dataTables_filter {
+    @apply mb-4;
 
-.dataTables_info {
-    @apply p-3 text-sm #{!important};
+    input {
+        @apply form-input input #{!important};
+    }
+
+    @screen lg {
+        @apply -mt-12 #{!important};
+    }
 }
 
 .dataTables_paginate {
+    @apply pb-6 pt-2 #{!important};
+
+    .paginate_button {
+        @apply button bg-white border border-gray-300 text-sm leading-4 font-medium rounded text-gray-700 mr-1 py-2 cursor-pointer #{!important};
+    }
+
+    .current {
+        @apply bg-blue-600 text-white #{!important};
+    }
+}
+
+.dataTables_info {
     @apply text-sm #{!important};
 }
 
-.dataTable.no-footer {
-    @apply border-none #{!important};
-}
+.dataTables_empty {
+    @apply py-4 #{!important};
+}

resources/sass/components/inputs.scss

@@ -1,5 +1,5 @@
 .input {
-    @apply items-center border border-gray-300 rounded mt-2 w-full py-2 px-4 text-sm;
+    @apply items-center border border-gray-300 rounded mt-2 py-2 px-4 text-sm;
 
     &:focus {
         @apply outline-none border-blue-500;

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

@@ -38,8 +38,8 @@
     <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">
-                <table class="min-w-full">
+                class="align-middle inline-block min-w-full overflow-hidden rounded">
+                <table class="min-w-full shadow rounded border border-gray-200">
                     <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">
@@ -84,9 +84,6 @@
                 </table>
             </div>
         </div>
-        <div class="my-6">
-            {{ $credits->links('portal.ninja2020.vendor.pagination') }}
-        </div>
     </div>
 @endsection
 

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

@@ -45,8 +45,8 @@
     </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">
-                <table class="min-w-full">
+            <div class="align-middle inline-block min-w-full overflow-hidden rounded">
+                <table class="min-w-full shadow rounded border border-gray-200">
                     <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">
@@ -54,7 +54,7 @@
                                     <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">
+                            <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">
@@ -77,7 +77,7 @@
                             <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 }}">
+                                        <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">
@@ -111,9 +111,6 @@
                 </table>
             </div>
         </div>
-        <div class="my-6">
-            {{ $invoices->links('portal.ninja2020.vendor.pagination') }}
-        </div>
     </div>
 @endsection
 

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

@@ -39,8 +39,8 @@
     <div class="flex flex-col">
         <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">
-                <table class="min-w-full">
+                class="align-middle inline-block min-w-full overflow-hidden rounded">
+                <table class="min-w-full shadow rounded border border-gray-200">
                     <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">
@@ -107,9 +107,6 @@
                 </table>
             </div>
         </div>
-        <div class="my-6">
-            {{ $payment_methods->links('portal.ninja2020.vendor.pagination') }}
-        </div>
     </div>
 @endsection
 

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

@@ -30,8 +30,8 @@
     <div class="flex flex-col">
         <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">
-                <table class="min-w-full">
+                class="align-middle inline-block min-w-full overflow-hidden rounded">
+                <table class="min-w-full shadow rounded border border-gray-200">
                     <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">
@@ -82,9 +82,6 @@
                 </table>
             </div>
         </div>
-        <div class="my-6">
-            {{ $payments->links('portal.ninja2020.vendor.pagination') }}
-        </div>
     </div>
 @endsection
 

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

@@ -47,8 +47,8 @@
     </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">
-                <table class="min-w-full">
+            <div class="align-middle inline-block min-w-full overflow-hidden rounded">
+                <table class="min-w-full shadow rounded border border-gray-200">
                     <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">
@@ -110,9 +110,6 @@
                 </table>
             </div>
         </div>
-        <div class="my-6">
-            {{ $quotes->links('portal.ninja2020.vendor.pagination') }}
-        </div>
     </div>
 @endsection
 

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

@@ -30,8 +30,8 @@
     <div class="flex flex-col">
         <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">
-                <table class="min-w-full">
+                class="align-middle inline-block min-w-full overflow-hidden rounded">
+                <table class="min-w-full shadow rounded border border-gray-200">
                     <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">
@@ -82,9 +82,6 @@
                 </table>
             </div>
         </div>
-        <div class="my-6">
-            {{ $invoices->links('portal.ninja2020.vendor.pagination') }}
-        </div>
     </div>
 @endsection