add: edit proposal

src/components/CardLoad.vue

@@ -177,7 +177,7 @@
                 data-target="#proposalsModal"
             >#{{ load.no_of_proposals }} Ofertas</button>
         </div>
-        <div class="btn-row" v-if="authStore.user?.permissions.includes('role_carrier')">
+        <div class="btn-row" v-if="!readOnly && authStore.user?.permissions.includes('role_carrier')">
             <button
                 class="btn-primary-sm bg-dark"
                 data-toggle="modal" 

src/components/CardProposal.vue

@@ -2,12 +2,14 @@
     import { getDateMonthDay } from '../helpers/date_formats';
     import { getStatusLoad } from '../helpers/status';
 
-    defineProps({
+    const props = defineProps({
         proposal: {
             type: Object,
             required: true,
         }
     })
+
+    defineEmits(['set-proposal']);
 </script>
 
 <template>
@@ -31,6 +33,8 @@
                 <p v-if="proposal.load"> Código de carga: 
                     <span 
                         class="code-enruta"
+                        @click="$emit('set-proposal', {proposal: proposal, modal: 'detail'})"
+                        data-toggle="modal" data-target="#loadDetailModal"
                     >{{proposal.load.shipment_code}}</span></p>
                 <p v-if="proposal._driver">Operator: {{proposal._driver}}</p>
             </div>
@@ -42,7 +46,8 @@
             ><i class="fa-solid fa-ban"></i> Retirar</button>
             <button
                 class="btn-primary-sm"
-                data-toggle="modal" data-target="#editcompanymodal"
+                @click="$emit('set-proposal', {proposal: proposal, modal: 'edit'})"
+                data-toggle="modal" data-target="#makeProposalModal"
             ><i class="fa-solid fa-pen-to-square"></i> Editar</button>
             <button
                 class="btn-primary-sm"
@@ -64,6 +69,15 @@
         justify-content: space-between;
     }
 
+    .code-enruta {
+        cursor: pointer;
+        color: rgb(107, 107, 227);
+    }
+    
+    .code-enruta:hover{
+        color: rgb(75, 75, 228);
+    }
+
     .tracking-icon {
         cursor: pointer;
         color: #f2a23f;

src/components/CreateBudgetModal.vue

@@ -268,7 +268,7 @@
                                 <div class="calculator-card">
                                     <div class="calculator-card__title">
                                         <h2>CALCULADOR DE TARIFAS</h2>   
-                                        <img src="/images/logo-eta.png" alt="Eta viaporte" width="120">             
+                                        <img src="/images/logo-eta.png" alt="Eta viaporte" width="110">             
                                     </div>
                                     <div class="calculator-card__subtitle">
                                         <h4>DATOS DE CARGA</h4>
@@ -572,7 +572,7 @@
     .calculator-card__subtitle {
         // background-color: #50b1e5;
         background-color: #FBBA33;
-        padding: 10px 20px;
+        padding: 8px 20px;
         color: #FFF;
         text-align: center;
         font-size: 1.2rem;
@@ -580,7 +580,7 @@
     }
 
     .calculator-card__loads_data {
-        padding: 24px 24px;
+        padding: 20px 24px;
     }
    
    .calculator-card__totals {

src/components/LoadDetailModal.vue

@@ -0,0 +1,188 @@
+<script setup>
+    import { ref, onMounted } from 'vue';
+    import CardEmpty from './CardEmpty.vue';
+    import Spiner from './ui/Spiner.vue';
+    import { GoogleMap, Marker, CustomMarker } from 'vue3-google-map';
+    import useDirectionsRender from '../composables/useDirectionRender';
+    import Cardload from './cardload.vue';
+    import { useLoadsStore } from '../stores/loads';
+
+
+    const zoom = ref(6);
+    const heightMap = ref(768);
+    const originCoords = ref(null);
+    const destinationCoords = ref(null);
+    const isLoading = ref(false);
+    const windowWidth = ref(window.innerWidth);
+    const load = ref(null);
+    const vehicleLastLocation = ref(null);
+    const isLoadActive = ref(false);
+
+    const { geocodeAddress } = useDirectionsRender()
+
+    const props = defineProps({
+        proposal: {
+            type: Object,
+            required: true,
+        }
+    })
+
+
+    defineEmits(['reset-proposal'])
+    const loadStore = useLoadsStore();
+
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+        if(window.innerWidth <= 1024) {
+            zoom.value = 4;
+            heightMap.value = 420;
+        }
+
+        initData()
+    });
+
+    const initData = async() => {
+        isLoading.value = true;
+        const code = props.proposal.load.shipment_code;
+        const filter = "?shipment_code[$in]=" + 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>
+    <div class="modal fade" id="loadDetailModal" tabindex="-1" role="dialog" aria-labelledby="editcompany" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">Detalles de carga</h2>
+                    <button 
+                        id="btnCloseloadDetailModal" 
+                        type="button" 
+                        class="close bg-white" 
+                        data-dismiss="modal" 
+                        aria-label="Close"
+                        @click="$emit('reset-proposal')"
+                    >
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body view-proposals">
+                    <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 v-else text="No hay información disponible"/>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        data-dismiss="modal"
+                        @click="$emit('reset-proposal')"
+                    >Cerrar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .box-form {
+        width: 90%;
+        align-items: center;
+        align-content: center;
+        justify-content: center;
+        margin: 0 auto;
+    }
+    .custom-selected-field {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 16px;
+    }
+
+    .box-btns {
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+    }
+</style>

src/components/MakeProposalModal.vue

@@ -1,11 +1,12 @@
 <script setup>
-    import { ref, onMounted, reactive } from 'vue';
+    import { ref, onMounted, reactive, computed } from 'vue';
     import CardEmpty from './CardEmpty.vue';
     import Spiner from './ui/Spiner.vue';
     import BadgeError from './ui/BadgeError.vue';
     import { GoogleMap, Marker } from 'vue3-google-map';
     import useDirectionsRender from '../composables/useDirectionRender';
     import { useAuthStore } from '../stores/auth';
+    import { useCompanyStore } from '../stores/company';
     import { useVehiclesStore } from '../stores/vehicles';
     import { saveProposal } from '../services/vehicles'
     import Swal from 'sweetalert2';
@@ -33,9 +34,14 @@
         load: {
             type: Object,
             required: true,
+        },
+        proposal: {
+            type: Object,
         }
     })
 
+    const companyStore = useCompanyStore();
+
 
     defineEmits(['reset-load'])
 
@@ -56,6 +62,11 @@
         originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
         destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
         isLoading.value = false;
+        console.log(props.proposal);
+        if(props.proposal) {
+            form.vehicle = props.proposal.vehicle._id;
+            form.comments = props.proposal.comment;
+        }
     }
 
     const handleResize = () => {
@@ -86,30 +97,53 @@
         }
 
         msgError.value = '';
-        let formData = {
+        let result;
-            carrier: authStore.user.company,
+        let action;
-            bidder : authStore.user._id,
+        if(!props.proposal) {
-            comment: form.comments,
+            let formData = {
-            vehicle : form.vehicle,
+                carrier: authStore.user.company,
-            load : props.load._id
+                bidder : authStore.user._id,
+                comment: form.comments,
+                vehicle : form.vehicle,
+                load : props.load._id
+            }
+            loadingSubmit.value = true;
+            action = 'creada';
+            result = await companyStore.createPropsal(formData);
+        } else {
+            let formData = {
+                comment: form.comments,
+                vehicle : form.vehicle,
+            }
+            const index = vehiclesStore.vehicles.findIndex((prop) => prop._id === form.vehicle);
+            const vehicleSelected  = vehiclesStore.vehicles[index];
+            console.log(vehicleSelected);
+            const localData = {
+                vehicle: vehicleSelected,
+                _driver: vehicleSelected?.driver.first_name + ' ' + vehicleSelected?.driver.last_name
+            }
+            loadingSubmit.value = true;
+            action = 'actualizada'
+            result = await companyStore.updatePropsalLoad(props.proposal._id, formData, localData);
         }
 
-        loadingSubmit.value = true;
+        if(result === 'success') {
-        const result = await saveProposal(formData);
-        if(result !== null) {
             document.getElementById('btnClosemakeProposalModal').click();
             Swal.fire({
-                title: '<strong>Oferta creada con éxito!</strong>',
+                title: `<strong>Oferta ${action} con éxito!</strong>`,
                 icon: 'success'
             })
         } else {
             Swal.fire({
-                title: '<strong>Oferta no se pudo crear!</strong>',
+                title: result,
                 icon: 'error'
             })
         }
         loadingSubmit.value = false;
     }
+
+    const title = computed(() => (props.proposal) ? 'Modificar oferta' : 'Realizar oferta');
+    const btnSubmit = computed(() => (props.proposal) ? 'Guardar' : 'Enviar');
 </script>
 
 <template>
@@ -117,7 +151,7 @@
         <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h2 class="title mt-2 mb-3">Realizar oferta</h2>
+                    <h2 class="title mt-2 mb-3">{{ title }}</h2>
                     <button 
                         id="btnClosemakeProposalModal" 
                         type="button" 
@@ -163,11 +197,12 @@
                                         v-else 
                                         type="submit"
                                         class="btn-primary-sm"
-                                        value="Enviar"
+                                        :value="btnSubmit"
                                     />
                                 </div>
                             </form>
                             <GoogleMap
+                                v-if="!proposal"
                                 api-key="AIzaSyAJtfvrAKy7vnUSv2nzk4dYQkOs3OP4MMs"
                                 :center="{lat:19.432600, lng:-99.133209}"
                                 :zoom="zoom" 

src/services/vehicles.js

@@ -55,3 +55,14 @@ export const saveProposal = async(formData) => {
         return null;
     }
 }
+
+export const updateProposal = async(id, formData) => {
+    try {
+        const endpoint = `/proposals/${id}`;
+        const {data} = await api.patch(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}

src/stores/company.js

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers, updateUser, createUser, deleteUser, getLocations, createLocation, updateLocation, deleteLocation } from "../services/company";
 import api from "../lib/axios";
+import { saveProposal, updateProposal } from "../services/vehicles";
 
 export const useCompanyStore = defineStore('company', () => {
 
@@ -123,6 +124,32 @@ export const useCompanyStore = defineStore('company', () => {
         }
     }
 
+    const createPropsal = async(formData) => {
+        const data = await saveProposal(formData);
+        console.log(data);
+        if(data) {
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+    const updatePropsalLoad = async(id, formData, localData) => {
+        const data = await updateProposal(id, formData);
+        if(data) {
+            console.log(data);
+            const index = proposals.value.findIndex((prop) => prop._id === id);
+            proposals.value[index] = {
+                ...proposals.value[index],
+                ...data,
+                ...localData
+            };
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
     const getBudgetsCompany = async(filterQuery, reload = false) => {
         let filterArr = Object.values(filterQuery);
 
@@ -261,6 +288,8 @@ export const useCompanyStore = defineStore('company', () => {
    return {
        getCompanyData,
        getProposalsCompany,
+       createPropsal,
+       updatePropsalLoad,
        getBudgetsCompany,
        getUsersCompany,
        createUserCompany,

src/views/SearchLoadsView.vue

@@ -168,7 +168,7 @@
             v-if="loads.length > 0" 
             v-for="load in loads"
             :load="load"
-            :read-only="true"
+            :read-only="false"
             @set-load="handleSetCurrentLoad(load)"
         />
         <CardEmpty 

src/views/TrucksPublishedView.vue

@@ -3,9 +3,14 @@
     import { useCompanyStore } from '../stores/company';
     import Spiner from '../components/ui/Spiner.vue';
     import CardProposal from '../components/CardProposal.vue';
+    import LoadDetailModal from '../components/LoadDetailModal.vue';
+import MakeProposalModal from '../components/MakeProposalModal.vue';
 
     const companyStore = useCompanyStore();
     const loading = ref(false);
+    const proposalCurrent = ref(null);
+    const openModal = ref(false);
+    const openModalProposal = ref(false);
 
     onMounted(() =>{
         getInitData();
@@ -16,17 +21,45 @@
         await companyStore.getProposalsCompany();
         loading.value = false;
     }
+
+    const handleSetCurrentProposal = (data) => {
+        if(data.modal === 'detail') {
+            openModal.value = true;
+        } else {
+            openModalProposal.value = true;
+        }
+        proposalCurrent.value = data.proposal;
+    }
+
+    const handleResetCurrentProposal = () => {
+        openModal.value = false;
+        openModalProposal.value = false;
+        proposalCurrent.value = null;
+        console.log('clear proposal');
+    }
 </script>
 
 <template>
+    <LoadDetailModal 
+        v-if="openModal"
+        :proposal="proposalCurrent"
+        @reset-proposal="handleResetCurrentProposal"
+    />
+    <MakeProposalModal
+        v-if="openModalProposal"
+        :proposal="proposalCurrent"
+        :load="proposalCurrent.load"
+        @reset-load="handleResetCurrentProposal"
+    />
     <div>
-        <h2 class="title mb-5">Mis vehiculos publicadas</h2>
+        <h2 class="title mb-5">Mis ofertas aceptadas</h2>
         <Spiner v-if="loading"/>
         <CardProposal 
             v-else
             v-for="proposal in companyStore.proposals"
             :key="proposal._id"
             :proposal="proposal" 
+            @set-proposal="handleSetCurrentProposal"
         />
     </div>
 </template>