bo détail commande

app/Http/Controllers/Bo/OrdersController.php

@@ -32,7 +32,8 @@ class OrdersController extends Controller
         $order->status_id = $order->status_id + 1;
         $order->save();
 
-        return redirect()->route('bo.orders')->with('success', "Changement de status enregistré pour la commande " . $order->reference . ".");
+        //return redirect()->route('bo.orders')->with('success', "Changement de status enregistré pour la commande " . $order->reference . ".");
+        return back()->with('success', "Changement de status enregistré pour la commande " . $order->reference . ".");
     }
 
     public function cancelOrder($reference) {
@@ -40,7 +41,8 @@ class OrdersController extends Controller
         $order->status_id = 7;
         $order->save();
 
-        return redirect()->route('bo.orders')->with('success', "La commande à été annulée.");
+        //return redirect()->route('bo.orders')->with('success', "La commande à été annulée.");
+        return back()->with('success', "La commande " . $order->reference . " à été annulée.");
     }
 
     public function addProduct($orderReference, $productId, $quantity) {
@@ -240,6 +242,11 @@ class OrdersController extends Controller
 
     public function getCustomerInfo($id) {
         $cust = Customers::findOrFail($id);
-        return view('bo.customer.info-card', compact('cust'));
+        return view('bo.customer.info-popup', compact('cust'));
+    }
+
+    public function orderDetail($reference) {
+        $order = Order::where('reference', '=', $reference)->firstOrFail();
+        return view('bo.order.detail', compact('order'));
     }
 }

public/b-o/css/app.css

@@ -6998,6 +6998,54 @@ p:first-child {
   margin-top: 0;
 }
 
+.tooltip {
+  background: #333;
+  color: white;
+  font-weight: bold;
+  padding: 4px 8px;
+  font-size: 13px;
+  border-radius: 4px;
+}
+
+.tooltip[data-show] {
+  display: block;
+  opacity: 1;
+}
+
+.arrow,
+.arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.arrow {
+  visibility: hidden;
+}
+
+.arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}
+
+.tooltip[x-placement^=top] > .arrow {
+  bottom: -4px;
+}
+
+.tooltip[x-placement^=bottom] > .arrow {
+  top: -4px;
+}
+
+.tooltip[x-placement^=left] > .arrow {
+  right: -4px;
+}
+
+.tooltip[x-placement^=right] > .arrow {
+  left: -4px;
+}
+
 /*!
  * Bootstrap v4.6.0 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors

public/b-o/js/app.js

@@ -62903,9 +62903,12 @@ var app = new Vue({
 /*!***********************************!*\
   !*** ./resources/js/bootstrap.js ***!
   \***********************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
+/*! no exports provided */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var popper_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! popper.js */ "./node_modules/popper.js/dist/esm/popper.js");
 window._ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -62914,13 +62917,15 @@ window._ = __webpack_require__(/*! lodash */ "./node_modules/lodash/lodash.js");
  */
 
 window.axios = __webpack_require__(/*! axios */ "./node_modules/axios/index.js");
-window.Popper = __webpack_require__(/*! popper.js */ "./node_modules/popper.js/dist/esm/popper.js")["default"];
+ //window.Popper = require('popper.js').default;
+
 window.$ = window.jQuery = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js");
 
 __webpack_require__(/*! @fortawesome/fontawesome-free/js/all */ "./node_modules/@fortawesome/fontawesome-free/js/all.js");
 
 __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js");
 
+window.Popper = popper_js__WEBPACK_IMPORTED_MODULE_0__["default"];
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 /**
  * Echo exposes an expressive API for subscribing to channels and listening

resources/js/bootstrap.js

@@ -7,10 +7,12 @@ window._ = require('lodash');
  */
 
 window.axios = require('axios');
-window.Popper = require('popper.js').default;
+import Popper from 'popper.js'
+//window.Popper = require('popper.js').default;
 window.$ = window.jQuery = require('jquery');
 require('@fortawesome/fontawesome-free/js/all');
 require('bootstrap');
+window.Popper = Popper;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 

resources/sass/_popup.scss

@@ -30,3 +30,53 @@
     margin-top: 0;
   }
 
+
+  //tooltips
+  .tooltip {
+    background: #333;
+    color: white;
+    font-weight: bold;
+    padding: 4px 8px;
+    font-size: 13px;
+    border-radius: 4px;
+    //display: none;
+  }
+
+  .tooltip[data-show] {
+    display: block;
+    opacity: 1;
+  }
+
+.arrow,
+.arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.arrow {
+  visibility: hidden;
+}
+
+.arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.tooltip[x-placement^='top'] > .arrow {
+    bottom: -4px;
+}
+
+.tooltip[x-placement^='bottom'] > .arrow {
+    top: -4px;
+}
+
+.tooltip[x-placement^='left'] > .arrow {
+    right: -4px;
+}
+
+.tooltip[x-placement^='right'] > .arrow {
+    left: -4px;
+}

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

@@ -10,5 +10,4 @@
         {{$cust->apiData->postcode}}
     </p>
     </div>
-    <div class="modal-footer"><a href="javascript:;" class="btn btn-primary" data-fancybox-close="">{{__('Fermer')}}</a></div>
-  <button type="button" data-fancybox-close="" class="fancybox-button fancybox-close-small" title="Close"><svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path></svg></button></div>
+</div>

resources/views/bo/customer/info-popup.blade.php

@@ -0,0 +1,15 @@
+<div class="modal-container fancybox-content" style="">
+    <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}}
+        {{$cust->apiData->city}}
+        {{$cust->apiData->postcode}}
+    </p>
+    </div>
+    <div class="modal-footer"><a href="javascript:;" class="btn btn-primary" data-fancybox-close="">{{__('Fermer')}}</a></div>
+  <button type="button" data-fancybox-close="" class="fancybox-button fancybox-close-small" title="Close"><svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 24 24"><path d="M13 12l5-5-1-1-5 5-5-5-1 1 5 5-5 5 1 1 5-5 5 5 1-1z"></path></svg></button>
+</div>

resources/views/bo/order/detail.blade.php

@@ -0,0 +1,100 @@
+@extends('layouts.bo-layout')
+
+@section('content')
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2"><a href="{{route('bo.orders')}}" class="h2 text-decoration-none"><</a>Commande - {{ $order->reference }}</h1>
+    @if (session('success'))
+        <span class="float-center text-success">{{ session('success') }}</span>
+    @endif
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <div id="tooltip" role="tooltip" class="tooltip">
+            Faire avancer le statut de la commande
+            <div id="arrow" class="arrow" data-popper-arrow></div>
+        </div>
+        <a id="button" class="btn btn-sm btn-primary" href="{{route('bo.change-order-status', $order->reference)}}" title=""><i class="fas fa-forward"></i>{{$order->status->label}}</a>
+    </div>
+</div>
+<div class="flex">
+    @include('bo.customer.info-card', ['cust' => $order->customer])
+    <div class="modal-container fancybox-content" style="">
+        <div class="modal-title">Total de la commande : {{number_format($order->total, 2, ',', ' ')}}€</div>
+        <div class="modal-body">
+          <p>
+              Créneau de collecte : {{$order->timeslot->day}} {{$order->timeslot->time}}
+        </p>
+        <p>
+            Statut de la commande : {{$order->status->label}}
+        </p>
+        </div>
+    </div>
+</div>
+
+
+<table class="table">
+    <thead>
+        <th scope="col">Produit</th>
+        <th scope="col">Quantité</th>
+        <th scope="col">Prix unitaire HT</th>
+        <th scope="col">Prix Total HT</th>
+        <th scope="col">TVA</th>
+        <th scope="col">Total TTC</th>
+        <th></th>
+    </thead>
+    <tbody>
+        @foreach ($order->lines as $line)
+            <tr>
+                <td>
+                    @include('bo.products.product-card', ['product' => $line->product])
+                </td>
+                <td>{{$line->quantity}}</td>
+                <td>{{number_format($line->unit_price - $line->discount, 2, ',', ' ')}}€</td>
+                <td>{{number_format($line->total_ht - $line->total_discount, 2, ',', ' ')}}€</td>
+                <td>{{number_format($line->total_tax, 2, ',', ' ')}}€</td>
+                <td>{{number_format($line->total_ttc, 2, ',', ' ')}}€</td>
+            </tr>
+        @endforeach
+    </tbody>
+</table>
+@endsection
+
+@section('scripts')
+<script>
+    const button = document.querySelector('#button');
+    const tooltip = document.querySelector('#tooltip');
+
+    const popperInstance = new Popper(button, tooltip, {
+    modifiers: [
+            {
+            name: 'offset',
+            options: {
+                    offset: [10, 16],
+                },
+            },
+        ],
+    });
+
+    function show() {
+        console.log('test');
+    tooltip.setAttribute('data-show', '');
+
+    // We need to tell Popper to update the tooltip position
+    // after we show the tooltip, otherwise it will be incorrect
+    popperInstance.update();
+    }
+
+    function hide() {
+    tooltip.removeAttribute('data-show');
+    }
+
+    const showEvents = ['mouseenter', 'focus'];
+    const hideEvents = ['mouseleave', 'blur'];
+
+    showEvents.forEach(event => {
+    button.addEventListener(event, show);
+    });
+
+    hideEvents.forEach(event => {
+    button.addEventListener(event, hide);
+    });
+</script>
+@endsection

resources/views/bo/orders.blade.php

@@ -30,6 +30,7 @@
                 <td>{{$order->status->label}}</td>
                 <td class="text-center">
                     {{-- L'id du status 6 est le status "Retirée", la dernière étape d'une commande --}}
+                    <a href="{{route('bo.order-detail', $order->reference)}}" class="btn btn-sm btn-primary"><i class="fas fa-info"></i></a>
                     @if ($order->status_id < 6)
                     <a href="{{route('bo.change-order-status', $order->reference)}}" class="btn btn-sm btn-primary"><i class="fas fa-forward"></i></a>
                     <a href="{{route('bo.cancel-order', $order->reference)}}" class="btn btn-sm btn-danger"><i class="fas fa-times"></i></a>

resources/views/bo/products/product-card.blade.php

@@ -0,0 +1,10 @@
+<div class="card col-md-3">
+    <img class="card-img-top" src="/images/produits/{{$product->picture}}" alt="{{$product->name}}">
+    <div class="card-body">
+        <h5 class="card-title"><a href="{{route('bo.products.edit', $product->id)}}">{{$product->name}}</a></h5>
+        <small class="text-muted">Prix HT avant promo : {{$product->price}}</small>
+        <p class="card-text">
+            {!! $product->description !!}
+        </p>
+    </div>
+</div>

routes/web.php

@@ -90,7 +90,8 @@ Route::namespace('App\Http\Controllers\Bo')
 
         // Commandes
         Route::get('/orders', [OrdersController::class, 'index'])->name('orders');
-        Route::get('/orders/{reference}', [OrdersController::class, 'changeStatus'])->name('change-order-status');
+        Route::get('/orders/{reference}', [OrdersController::class, 'orderDetail'])->name('order-detail');
+        Route::get('/orders/{reference}/advance', [OrdersController::class, 'changeStatus'])->name('change-order-status');
         Route::get('/orders/{reference}/cancel', [OrdersController::class, 'cancelOrder'])->name('cancel-order');
         Route::post('/orders/add', [OrdersController::class, 'addProduct'])->name('order-add-product');
     });