add: tracking load & clean code save load

src/components/CardEmpty.vue

@@ -0,0 +1,35 @@
+<script setup>
+    defineProps({
+        text: {
+            type: String,
+            required: true
+        }
+    })
+</script>
+
+<template>
+    <div class="card-info card-empty">
+        <img src="/images/logo.png" alt="logo" class="img-empty">
+
+        <p class="message">{{ text }}</p>
+    </div>
+</template>
+
+<style scoped>
+
+    .card-empty {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+    }
+    .img-empty {
+        width: 200px;
+    }
+
+    .message {
+        margin-top: 2rem;
+        font-size: 1.4rem;
+        color: #323032;
+        font-weight: 500;
+    }
+</style>

src/components/CardLoad.vue

@@ -1,16 +1,23 @@
 <script setup>
+    import { useRouter } from 'vue-router';
     import { getDateMonthDay } from '../helpers/date_formats';
     import { getStatusPublished } from '../helpers/status';
     import { getStatusLoad } from '../helpers/status';
     import { useLoadsStore } from '../stores/loads';
     import Swal from 'sweetalert2'
 
+    const router = useRouter();
     const loadsStore = useLoadsStore();
 
     const props = defineProps({
         load: {
             type: Object,
             required: true,
+        },
+        readOnly: {
+            type: Boolean,
+            required: false,
+            default: false
         }
     });
 
@@ -71,6 +78,14 @@
         loadsStore.openProposalsModal = true;
     }
 
+    const handleTracking = () => {
+        let code = props.load.shipment_code;
+		router.push({
+            name: 'tracking-load',
+            params: {code}
+        });
+    }
+
 </script>
 
 <template>
@@ -101,7 +116,7 @@
             <div class="col-lg-4 col-sm-12">
                 <p><span>Segmento: </span> {{ load._categories }}</p>
                 <p><span>Código de carga: </span> {{ load.shipment_code }}
-                    <span v-if="load.load_status !== 'Draft'" class="tracking-icon">
+                    <span v-if="load.load_status !== 'Draft' && !readOnly" class="tracking-icon" @click="handleTracking">
                         <svg xmlns="http://www.w3.org/2000/svg"  fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
                         <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
                         </svg>
@@ -114,7 +129,7 @@
         <div v-if="load.notes" class="box-note">
             {{ load.notes }}
         </div>
-        <div class="btn-row">
+        <div class="btn-row" v-if="!readOnly">
             <button
                 class="btn-primary-sm bg-dark"
                 @click="handleDeleteLoad"

src/components/FormLoadModal.vue

@@ -11,6 +11,7 @@
     import { GoogleMap, Marker, Polyline } from "vue3-google-map";
     import useDirectionsRender from '../composables/useDirectionRender';
     import { useAuthStore } from '../stores/auth';
+    import Swal from 'sweetalert2';
 
     const loadStore = useLoadsStore();
     const auth = useAuthStore();
@@ -145,7 +146,7 @@
         ref: '',
     });
 
-    const handleSave = async() => {
+    const setLoadData = () => {
         let loadData = {
 			actual_cost: formLoad.price,
 			truck_type: formLoad.truckType.meta_value || null,
@@ -182,21 +183,75 @@
             posted_by_name: formLoad.owner
 		};
 
-        console.log('loadData: ', loadData);
+        return loadData;
+    }
+
+    const updateLoad = async(loadData) => {
         isLoading.value = true;
         if(loadStore.currentLoad){
             const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
-			const index = loadStore.loads.findIndex((load) => load._id === resp._id);
+            console.log({resp});
             isLoading.value = false;
-            loadStore.loads[index] = resp;
-            document.getElementById('btnCloseFormLoadModal').click();
+            if(resp) {
+                const index = loadStore.loads.findIndex((load) => load._id === resp._id);
+                loadStore.loads[index] = {
+                    ...loadStore.loads[index],
+                    resp
+                };
+                return 'success';
+            } else {
+                return 'error';
+            }
 		} else{
             const resp = await loadStore.saveLoad(loadData);
             isLoading.value = false;
-            loadStore.loads.unshift(resp);
-            document.getElementById('btnCloseFormLoadModal').click();
+            if(resp) {
+                loadStore.loads.unshift(resp);
+                return 'success';
+            } else {
+                return 'error';
+            }
 		}
     }
+
+    const handleSave = async() => {
+        
+        const loadData = setLoadData();
+
+        // console.log('loadData: ', loadData);
+        const resp = await updateLoad(loadData);
+        if(resp === 'success') {
+            document.getElementById('btnCloseFormLoadModal').click();
+        } else {
+            Swal.fire({
+                title: "Error!",
+                text: "No se pudo guardar carga, intente más tarde",
+                icon: "error"
+            });
+        }
+    }
+
+    const handlePostLoad = async() => {
+        let loadData = setLoadData();
+
+        loadData = {
+            ...loadData,
+            status: "Published",
+            load_status: "Published"
+        }
+
+        const resp = await updateLoad(loadData);
+        if(resp === 'success') {
+            document.getElementById('btnCloseFormLoadModal').click();
+        } else {
+            Swal.fire({
+                title: "Error!",
+                text: "No se pudo publicar carga, intente más tarde",
+                icon: "error"
+            });
+        }
+        
+    }
 </script>
 
 <template>
@@ -430,7 +485,7 @@
                     <button 
                         type="button" 
                         class="btn-primary-sm radius-sm" 
-                        @click=""
+                        @click="handlePostLoad"
                     >Publicar</button>
                 </div>
             </div>

src/components/ProposalsModal.vue

@@ -6,7 +6,7 @@
     import { getDateMonthDay } from '../helpers/date_formats';
     import VehicleInfo from './VehicleInfo.vue';
     import Swal from 'sweetalert2'
-
+import CardEmpty from './CardEmpty.vue';
 
     const loadsStore = useLoadsStore();
     const authStore = useAuthStore();
@@ -202,9 +202,7 @@
                             </button>
                         </div>
                     </div>
-                    <div v-else>
-                        No hay ofertas
-                    </div>
+                    <CardEmpty v-else text="No hay ofertas"/>
                 </div>
             </div>
             <div class="modal-footer">