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;
+            if(resp) {
-            document.getElementById('btnCloseFormLoadModal').click();
+                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);
+            if(resp) {
-            document.getElementById('btnCloseFormLoadModal').click();
+                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>
+                    <CardEmpty v-else text="No hay ofertas"/>
-                        No hay ofertas
-                    </div>
                 </div>
             </div>
             <div class="modal-footer">

src/router/index.js

@@ -100,6 +100,11 @@ const router = createRouter({
           name: 'shippers',
           component: () => import('../views/ShippersView.vue'),
         },
+        {
+          path: 'tracking/:code',
+          name: 'tracking-load',
+          component: () => import('../views/TrackingLoadView.vue'),
+        },
       ]
     }
   ]

src/stores/loads.js

@@ -104,6 +104,18 @@ export const useLoadsStore = defineStore('load', () => {
         }
     }
 
+    const getLoad = async(filterQuery) => {
+        try {
+            const endpoint = `/loads/${filterQuery}`;
+            const {data} = await api.get(endpoint);
+            console.log(data);
+            return data;
+        } catch (error) {
+            console.log(error);
+            return [];
+        }
+    }
+
 
    return {
        openModalEdit,
@@ -112,6 +124,7 @@ export const useLoadsStore = defineStore('load', () => {
        getProposalsOfLoads,
        getCompanyLoads,
        deleteLoad,
+       getLoad,
        saveLoad,
        updateLoad,
        updateProposal,

src/views/LoadsPublishedView.vue

@@ -1,14 +1,13 @@
 <script setup>
     import { onMounted, ref, watch } from 'vue';
-    import { useCompanyStore } from '../stores/company';
     import Spiner from '../components/ui/Spiner.vue';
     import CardLoad from '../components/CardLoad.vue';
     import AttachmentsModal from '../components/AttachmentsModal.vue';
     import { useLoadsStore } from '../stores/loads';
     import FormLoadModal from '../components/FormLoadModal.vue';
 import ProposalsModal from '../components/ProposalsModal.vue';
+import CardEmpty from '../components/CardEmpty.vue';
 
-    const companyStore = useCompanyStore();
     const loadStore = useLoadsStore();
     const loading = ref(false);
     const query = ref('');
@@ -92,12 +91,15 @@ import ProposalsModal from '../components/ProposalsModal.vue';
                 ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Crear</span><span class="clear-md"> carga</span></button>
             </div>
             <Spiner v-if="loading"/>
-            <CardLoad 
+            <div v-else>
-                v-else
+                <CardLoad 
-                v-for="load in loadStore.loads"
+                    v-if="loadStore.loads.length > 0"
-                :key="load._id"
+                    v-for="load in loadStore.loads"
-                :load="load" 
+                    :key="load._id"
-            />
+                    :load="load" 
+                />
+                <CardEmpty v-else text="No hay cargas agregadas"/>
+            </div>
         </div>
     </div>
 </template>

src/views/TrackingLoadView.vue

@@ -0,0 +1,128 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useLoadsStore } from '../stores/loads';
+    import { useRoute } from 'vue-router';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardLoad from '../components/CardLoad.vue';
+    import useDirectionsRender from '../composables/useDirectionRender';
+    import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
+import CardEmpty from '../components/CardEmpty.vue';
+
+    const isLoading = ref(true);
+    const loadStore = useLoadsStore();
+    const { geocodeAddress } = useDirectionsRender()
+    const route = useRoute();
+    const load = ref(null);
+    const zoom = ref(6);
+    const heightMap = ref(768);
+    const vehicleLastLocation = ref(null);
+    const originCoords = ref(null);
+    const destinationCoords = ref(null);
+    const isLoadActive = ref(false);
+
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+        if(window.innerWidth <= 1024) {
+            zoom.value = 4;
+            heightMap.value = 420;
+        }
+        initData();
+    });
+
+    const initData = async() => {
+        isLoading.value = true;
+        const filter = "?shipment_code[$in]=" + route.params['code'];
+        const resp = await loadStore.getLoad(filter);
+        if(resp.total > 0) {
+            load.value = resp.data[0];
+            originCoords.value = await geocodeAddress(load.value.origin_formatted_address);
+            destinationCoords.value = await geocodeAddress(load.value.destination_formatted_address);
+            if(load.value.vehicle) {
+                vehicleLastLocation.value = {
+                    lat: parseFloat(load.value.vehicle.last_location_lat),
+                    lng: parseFloat(load.value.vehicle.last_location_lng)
+                }
+            }
+
+            switch (load.value.load_status) {
+                case 'Loading':
+                    isLoadActive.value = true;
+                    break;
+                case 'Transit':
+                    isLoadActive.value = true;
+                    break;
+                case 'Downloading':
+                    isLoadActive.value = true;
+                    break;
+            
+                default:
+                    isLoadActive.value = false;
+                    break;
+            }
+
+        }
+        isLoading.value = false;
+    }
+
+    const handleResize = () => {
+        windowWidth.value = window.innerWidth
+        if(windowWidth.value <= 1024){
+            zoom.value = 4
+            heightMap.value = 420;
+        } else {
+            zoom.value = 6;
+            heightMap.value = 768;
+        }
+    }
+</script>
+
+<template>
+    <Spiner v-if="isLoading"/>
+    <div v-else>
+        <div v-if="load">
+            <CardLoad :load="load" :read-only="true"/>
+            <GoogleMap
+                    api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
+                    :center="{lat:19.432600, lng:-99.133209}"
+                    :zoom="zoom" 
+                    :min-zoom="2"
+                    :max-zoom="12"
+                    :style="{width: 100 + '%', height: heightMap + 'px'}"
+                    :options="{
+                        zoomControl: true,
+                        mapTypeControl: true,
+                        scaleControl: true,
+                        streetViewControl: true,
+                        rotateControl: true,
+                        fullscreenControl: true
+                    }"
+                > 
+                    <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
+                    <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
+                    <CustomMarker
+                        v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
+                        :options="{position: vehicleLastLocation}"
+                        :clickable="false"
+                        :draggable="false"
+                        >
+                        <div style="text-align: center">
+                            <!-- <img src="/images/freeTruck.png" width="25" height="25" /> -->
+                            <i class="fa-solid fa-truck" :style="{fontSize: 25 + 'px', color: 'green'}"></i>
+                        </div>
+                    </CustomMarker>
+                    <!-- <Polyline :options="{
+                        path: polyline,
+                        // geodesic: true,
+                        strokeColor: '#FF0000',
+                        strokeOpacity: 1.0,
+                        strokeWeight: 2
+                    }" /> -->
+                </GoogleMap>
+        </div>
+        <CardEmpty text="No hay información disponible"/>
+    </div>
+</template>
+
+<style scoped>
+
+</style>