add: tracking load & clean code save load

2023-12-15 21:24:52 -06:00
parent 09386547ae
commit 106349f9a2
8 changed files with 273 additions and 22 deletions
--- a/src/components/CardEmpty.vue
+++ b/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>
--- a/src/components/CardLoad.vue
+++ b/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"
--- a/src/components/FormLoadModal.vue
+++ b/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>
--- a/src/components/ProposalsModal.vue
+++ b/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">
--- a/src/router/index.js
+++ b/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'),
+        },
      ]
    }
  ]
--- a/src/stores/loads.js
+++ b/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,
--- a/src/views/LoadsPublishedView.vue
+++ b/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 
-                v-else
-                v-for="load in loadStore.loads"
-                :key="load._id"
-                :load="load" 
-            />
+            <div v-else>
+                <CardLoad 
+                    v-if="loadStore.loads.length > 0"
+                    v-for="load in loadStore.loads"
+                    :key="load._id"
+                    :load="load" 
+                />
+                <CardEmpty v-else text="No hay cargas agregadas"/>
+            </div>
        </div>
    </div>
 </template>
--- a/src/views/TrackingLoadView.vue
+++ b/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>