commandes list : lazy loading customer infos

app/Http/Controllers/Bo/OrdersController.php

@@ -370,9 +370,18 @@ class OrdersController extends Controller
      * ajx : affichage d'infos sur un client
      * @todo : déplacer dans le controller idoine
      */
-    public function getCustomerInfo($id)
+    public function getCustomerInfo($id, $mode = null)
     {
         $cust = Customers::findOrFail($id);
+        if(!is_null($mode)) {
+            if($mode=="tippy") {
+                return view('bo.customer.tippy-card', compact('cust'));
+            }
+            if($mode=="json") {
+                return $cust;
+            }
+            return view('bo.customer.info-card', compact('cust'));
+        }
         return view('bo.customer.info-popup', compact('cust'));
     }
 

public/mix-manifest.json

@@ -1,6 +1,6 @@
 {
     "/b-o/js/app.js": "/b-o/js/app.js",
+    "/b-o/css/app.css": "/b-o/css/app.css",
     "/canard/css/app.css": "/canard/css/app.css",
-    "/canard/js/app.js": "/canard/js/app.js",
-    "/b-o/css/app.css": "/b-o/css/app.css"
+    "/canard/js/app.js": "/canard/js/app.js"
 }

resources/sass/app.scss

@@ -6,6 +6,9 @@
 @import "@fancyapps/fancybox/dist/jquery.fancybox";
 @import '~tippy.js/dist/tippy.css';
 @import '~tippy.js/animations/scale.css';
+@import '~tippy.js/themes/light.css';
+@import '~tippy.js/themes/light-border.css';
+@import '~tippy.js/themes/translucent.css';
 
 // Variables
 @import 'variables';

resources/views/bo/customer/tippy-card.blade.php

@@ -0,0 +1,10 @@
+    <div class="modal-title">{{$cust->apiData->firstname}} {{$cust->apiData->lastname}}</div>
+    <div class="modal-body">
+      <p>
+        {{$cust->apiData->email}} {{$cust->apiData->phone}}
+    </p>
+    <p>
+        {{$cust->apiData->address}}<br/>
+        {{$cust->apiData->city}} {{$cust->apiData->postcode}}
+    </p>
+    </div>

resources/views/bo/orders/index.blade.php

@@ -22,9 +22,10 @@
             @foreach ($orders as $order)
             <tr>
                 <td>
-                    <a data-fancybox data-trigger="customer-info" data-type="ajax" data-src="{{ route('bo.get-customer-info', $order->customer->id) }}" data-src="#customer-info" href="javascript:;">
+                    {{--<a data-fancybox data-trigger="customer-info" data-type="ajax" data-src="{{ route('bo.get-customer-info', $order->customer->id) }}" data-src="#customer-info" href="javascript:;">
                         Infos Client
-                    </a>
+                    </a>--}}
+                    <a class="ajax-tippy-cust" id="tippy-{{$order->customer->id}}" data-custid="{{$order->customer->id}}" href="javascript:">Infos Client</a>
                 </td>
                 <td>{{$order->reference}}</td>
                 <td>{{\Carbon\Carbon::parse($order->date)->format('d/m/Y')}}</td>
@@ -60,4 +61,80 @@
 @endsection
 
 @section('scripts')
+    <script type="text/javascript">
+        var tippyContents = [];
+        var customerInfo = [];
+
+        clientLinks = $('.ajax-tippy-cust');
+        clientLinks.each(function(index,element){
+            if(typeof customerInfo[element.dataset.custid] === 'undefined') {
+                //carry on
+            } else {
+                //leave
+                element.innerHTML = customerInfo[element.dataset.custid].firstname + ' ' + customerInfo[element.dataset.custid].lastname;
+                return;
+            }
+            fetch('/bo/customer-info/'+element.dataset.custid+'/json')
+                .then(response => {
+                    return response.json();
+                })
+                .then(data => {
+                    customerInfo[element.dataset.custid] = data;
+                    element.innerHTML = data.firstname + ' ' + data.lastname;
+                })
+        });
+
+
+        tippy('.ajax-tippy-cust', {
+            content: '<i class="fas fa-circle-notch fa-spin"></i>',
+            allowHTML: true,
+            theme: 'light-border',
+            //trigger: "click",
+            //hide upon clicking
+            //hideOnClick: true,
+            onCreate(instance) {
+                // Setup our own custom state properties
+                instance._isFetching = false;
+                instance._src = null;
+                instance._error = null;
+                instance._custID = instance.reference.dataset.custid;
+            },
+            onShow(instance) {
+                if (instance._isFetching || instance._src || instance._error) {
+                  return;
+                }
+
+                if(typeof tippyContents[instance._custID] === 'undefined') {
+                    //carry on
+                } else {
+                    instance.setContent(tippyContents[instance._custID]);
+                    return;
+                }
+
+                instance._isFetching = true;
+                fetch('/bo/customer-info/'+instance._custID+'/tippy')
+                .then(response => {
+                    return response.text();
+                })
+                .then(data => {
+                    instance.setContent(data);
+                    //save for reusability
+                    tippyContents[instance._custID] = data;
+                })
+                .catch((error) => {
+                    // Fallback if the network request failed
+                    instance.setContent(`Request failed. ${error}`);
+                })
+                .finally(() => {
+                    instance._isFetching = false;
+                });
+            },
+            onHidden(instance) {
+                instance.setContent('Loading...');
+                // Unset these properties so new network requests can be initiated
+                instance._src = null;
+                instance._error = null;
+            },
+        });
+    </script>
 @endsection

routes/web.php

@@ -105,7 +105,7 @@ Route::namespace('App\Http\Controllers\Bo')
         ]);
         Route::get('/slide/change-order/{id}/{action}', [App\Http\Controllers\Bo\SlidesController::class,'changeOrder'])->name('slides.change-order');
 
-        Route::get('/customer-info/{id}', [OrdersController::class, 'getCustomerInfo'])->name('get-customer-info');
+        Route::get('/customer-info/{id}/{mode?}', [OrdersController::class, 'getCustomerInfo'])->name('get-customer-info');
         Route::get('/magasin-info/{id}', [App\Http\Controllers\Bo\MagasinsController::class, 'getMagasinInfo'])->name('get-magasin-info');
 
         // Commandes