#init

src/components/Search.vue

@@ -1,22 +1,39 @@
 <template>
   <div class="search-form d-flex align-items-center">
-    <input type="text" name="query" placeholder="Scanner un bon de livraison" v-model="query" @input="searchDeliveries" autofocus>
+    <input type="text" placeholder="Scanner un bon de livraison" v-model="query" @input="searchDeliveries"
+           ref="orderScan">
     <button type="submit" title="Valider"><i class="fa-solid fa-barcode fa-fw"></i></button>
   </div>
 </template>
 
 <script>
-import {ref} from 'vue';
+import {nextTick, onMounted, ref, watch} from 'vue';
 import {useShipmentStore} from '@/stores/shipment.js'
 import ShipmentApi from '@/services/ShipmentApi.js'
+import {storeToRefs} from "pinia";
 
 export default {
   name: "Search",
   setup() {
     const query = ref();
-    const shipmentStore = useShipmentStore()
+    const store = useShipmentStore()
+    const {refresh} = storeToRefs(store)
+    const orderScan = ref(null)
+
+    onMounted(() => {
+      orderScan.value.focus()
+    })
+
+    watch(refresh, async (to, from) => {
+      if (!from && to) {
+        await nextTick()
+        orderScan.value.focus()
+      }
+    });
+
     return {
-      shipmentStore,
+      store,
+      orderScan,
       query
     }
   },
@@ -29,8 +46,10 @@ export default {
 
       const apiResult = await ShipmentApi.getDeliveriesByOrder(this.query)
 
-      this.shipmentStore.setIdOrder(this.query)
+      this.store.setIdOrder(this.query)
-      this.shipmentStore.setDeliveryLines(apiResult.data)
+      this.store.setIdCustomer(apiResult.id_customer)
+      this.store.setDeliveryLines(apiResult.data)
+      this.store.refreshAfterUpdate(false);
       this.query = null
     },
   }

src/services/ShipmentApi.js

@@ -4,10 +4,10 @@ export default {
 
     getApiUrl(exec, param = null) {
         const store = useGlobalStore()
-        return '/php/api/v3/?controller=ShipmentController&NUMC=' + store.idSession + '&EXEC=' + exec + ((param !== null) ? param : null)
+        return '/php/api/v3/?controller=ShipmentController&NUMC=' + store.idSession + '&EXEC=' + exec + ((param !== null) ? param : '')
     },
     async getDeliveriesByOrder(idOrder) {
-        const apiUrl = this.getApiUrl('getDeliveriesByOrder', '&query=' + idOrder)
+        const apiUrl = this.getApiUrl('getDeliveriesByOrder', '&id_order=' + idOrder)
 
         if (import.meta.env.DEV) {
             console.log(apiUrl)
@@ -21,6 +21,36 @@ export default {
                     return false
                 }
             })
+    },
+    async updateDeliveriesByOrder(idOrder, list) {
+
+        const apiUrl = this.getApiUrl('updateDeliveriesByOrder')
+        const formData = new FormData();
+        formData.append('id_order', idOrder);
+        formData.append('data', JSON.stringify(list));
+
+        return new Promise(function (resolve, reject) {
+            let xhr = new XMLHttpRequest();
+            xhr.open('POST', apiUrl);
+            xhr.onload = function () {
+                if (this.status >= 200 && this.status < 300) {
+                    resolve(JSON.parse(xhr.response));
+                } else {
+                    reject({
+                        status: this.status,
+                        statusText: xhr.statusText
+                    });
+                }
+            };
+            xhr.onerror = function () {
+                reject({
+                    status: this.status,
+                    statusText: xhr.statusText
+                });
+            };
+            xhr.send(formData);
+        });
+
     }
 }
 

src/stores/shipment.js

@@ -3,7 +3,9 @@ import {defineStore} from 'pinia'
 export const useShipmentStore = defineStore('shipment', {
     state: () => ({
         idOrder: null,
-        deliveryLines: []
+        idCustomer : null,
+        deliveryLines: [],
+        refresh : false,
     }),
     getters: {
         deliveriesCounter: (state) => state.deliveryLines.length,
@@ -18,5 +20,11 @@ export const useShipmentStore = defineStore('shipment', {
         setIdOrder(idOrder) {
             this.idOrder = idOrder
         },
+        setIdCustomer(idCustomer) {
+            this.idCustomer = idCustomer
+        },
+        refreshAfterUpdate(bool){
+            this.refresh = bool
+        }
     },
 })

src/views/index.vue

@@ -26,7 +26,7 @@
       </div>
 
       <div class="ps-4" v-if="store.deliveriesCounter === deliveryLines.filter(line=>line.scan).length">
-        <button class="btn btn-primary ms-10">Valider</button>
+        <button class="btn btn-primary ms-10" @click="sendNewStatus">Valider</button>
       </div>
     </div>
 
@@ -60,7 +60,8 @@
       </tr>
       <tr v-for="line in store.deliveryLines.filter(obj => obj.physical_location === location)"
           :class="(line.scan) ? 'table-primary' : null">
-        <td class="text-center"><input class="form-check-input" type="checkbox" role="switch" :checked="line.scan">
+        <td class="text-center"><input class="form-check-input" type="checkbox" role="switch" :checked="line.scan"
+                                       @click="updateLine(line)">
         </td>
         <td>{{ line.product_name }}</td>
         <td>{{ line.ean }}</td>
@@ -72,7 +73,9 @@
             <input class="form-control to_edit" type="text" name="line_1_ean_winpharma" value="" disabled=""
                    required="required"></div>
         </td>
-        <td><span :class="getStatusInfo(line.status).hasOwnProperty('color') ? 'bg-'+getStatusInfo(line.status).color : 'bg-info'"  class="text-nowrap badge label_status_initial">{{ getStatusInfo(line.status).label }}</span>
+        <td><span
+            :class="getStatusInfo(line.status).hasOwnProperty('color') ? 'bg-'+getStatusInfo(line.status).color : 'bg-info'"
+            class="text-nowrap badge label_status_initial">{{ getStatusInfo(line.status).label }}</span>
 
           <select
               class="form-select form-select-sm to_edit d-none" name="line_1_new_status" required="required" disabled=""
@@ -105,13 +108,14 @@ import {useShipmentStore} from '@/stores/shipment.js'
 import {nextTick, onMounted, reactive, ref, watch} from "vue";
 import {storeToRefs} from "pinia";
 import {Modal} from 'bootstrap'
+import ShipmentApi from '@/services/ShipmentApi.js'
 
 const shipmentStatus = [
   {
     code: "0",
     label: 'En attente',
     allowStatus: [3, 80, 39, 37],
-    color: 'danger'
+    color: 'warning'
 
   },
   {
@@ -123,21 +127,25 @@ const shipmentStatus = [
   {
     code: "3",
     label: 'A livrer',
+    color: 'success',
     allowStatus: []
   },
   {
     code: "31",
     label: 'A livrer Dépôt',
+    color: 'success',
     allowStatus: [3, 80, 39, 37]
   },
   {
     code: "80",
     label: 'Manquant à rembourser',
+    color: 'danger',
     allowStatus: []
   },
   {
     code: "39",
     label: 'Produit en commande',
+    color: 'warning',
     allowStatus: [30, 3, 80, 39, 37]
   },
 ]
@@ -154,7 +162,7 @@ export default {
     const productScan = ref(null)
 
     watch(idOrder, async (to, from) => {
-      if (from === null && to !== null) {
+      if (from !== to) {
         await nextTick()
         productScan.value.focus()
       }
@@ -163,6 +171,7 @@ export default {
 
     return {
       store,
+      idOrder,
       locationGroup,
       deliveryLines,
       productScan,
@@ -180,19 +189,38 @@ export default {
       if (this.eanScan.length === 13) {
         const findLine = this.deliveryLines.filter(line => line.ean === this.eanScan)
         if (findLine.length > 0) {
+          findLine[0].rollBackStatus = findLine[0].status
           findLine[0].scan = true
           findLine[0].status = "3"
-          findLine[0].labelStatus = "A livrer"
           this.eanScan = null
         } else {
           this.modal.show()
         }
       }
 
+    },
+    updateLine(line) {
+      if (!line.scan) {
+        line.rollBackStatus = line.status
+        line.scan = true
+        line.status = "3"
+      } else {
+        line.scan = false
+        line.status = line.rollBackStatus
+        line.rollBackStatus = null
+      }
+
     },
     getStatusInfo(code) {
       let labelFinder = shipmentStatus.filter(status => status.code === code)
       return (labelFinder.length > 0) ? labelFinder[0] : {label: 'unknow'}
+    },
+    async sendNewStatus() {
+      const newList = await ShipmentApi.updateDeliveriesByOrder(this.idOrder, this.deliveryLines)
+      this.store.setDeliveryLines(newList.data);
+      this.store.setDeliveryLines(newList.data);
+      this.store.refreshAfterUpdate(true);
+
     }
   },
   mounted() {