add: modal set proposals

src/components/CardLoad.vue

@@ -23,6 +23,7 @@
         }
     });
 
+    defineEmits(['set-load'])
 
 
     const openAttachmentsModal = () => {
@@ -179,8 +180,9 @@
         <div class="btn-row" v-if="authStore.user?.permissions.includes('role_carrier')">
             <button
                 class="btn-primary-sm bg-dark"
-                data-toggle="modal" data-target="#formLoadModal"
+                data-toggle="modal" 
-                @click=""
+                data-target="#makeProposalModal"
+                @click="event => $emit('set-load')"
             >Hacer oferta</button>
             <button
                 class="btn-primary-sm"

src/components/MakeProposalModal.vue

@@ -0,0 +1,177 @@
+<script setup>
+    import { ref, onMounted } from 'vue';
+    import CardEmpty from './CardEmpty.vue';
+    import Spiner from './ui/Spiner.vue';
+    import { GoogleMap, Marker } from 'vue3-google-map';
+    import useDirectionsRender from '../composables/useDirectionRender';
+    import { useAuthStore } from '../stores/auth';
+    import { useVehiclesStore } from '../stores/vehicles';
+
+
+    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 authStore = useAuthStore();
+    const vehiclesStore = useVehiclesStore();
+    const vehicle = ref(null);
+    const comments = ref('');
+
+    const { geocodeAddress } = useDirectionsRender()
+
+    const props = defineProps({
+        load: {
+            type: Object,
+            required: true,
+        }
+    })
+
+
+    defineEmits(['reset-load'])
+
+    onMounted(() => {
+        window.addEventListener('resize', handleResize);
+        if(window.innerWidth <= 1024) {
+            zoom.value = 4;
+            heightMap.value = 420;
+        }
+        initData();
+    });
+    
+    const initData = async() => {
+        isLoading.value = true;
+        await vehiclesStore.fetchVehicles("?company="+ authStore.user.company);
+        originCoords.value = await geocodeAddress(props.load.origin_formatted_address);
+        destinationCoords.value = await geocodeAddress(props.load.destination_formatted_address);
+        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="makeProposalModal" 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">Ofertas</h2>
+                    <button 
+                        id="btnClosemakeProposalModal" 
+                        type="button" 
+                        class="close bg-white" 
+                        data-dismiss="modal" 
+                        aria-label="Close"
+                        @click="$emit('reset-load')"
+                    >
+                        <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">
+                            <form class="box-form mb-4">
+                                <div class="custom-selected-field">
+                                    <label class="custom-label" for="vehicle">Vehiculo:</label>
+                                    <select 
+                                        class="custom-input-light"
+                                        name="vehicle" 
+                                        id="vehicle" 
+                                        :value="vehicle"
+                                        @input="$event => $emit('update:vehicle', $event.target.value)"
+                                    >
+                                        <option disabled value="">-- Seleccionar vehículo --</option>
+                                        <option v-for="vehicle in vehiclesStore.vehicles" :value="vehicle._id">{{vehicle.vehicle_code}}</option>
+                                    </select>
+                                </div>
+                                <div class="custom-selected-field">
+                                    <label class="custom-label" for="comment">Comentario:</label>
+                                    <textarea 
+                                        class="custom-input-light"
+                                        name="comment" 
+                                        id="comment" 
+                                        placeholder="Escribe aqui..."
+                                        :value="comments"
+                                        @input="$event => $emit('update:comments', $event.target.value)"
+                                    ></textarea>
+                                </div>
+                                <div class="box-btns">
+                                    <input 
+                                        type="submit"
+                                        class="btn-primary-sm"
+                                        value="Enviar"
+                                    />
+                                </div>
+                            </form>
+                            <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'}" />
+                                <!-- <Polyline :options="{
+                                    path: polyline,
+                                    // geodesic: true,
+                                    strokeColor: '#FF0000',
+                                    strokeOpacity: 1.0,
+                                    strokeWeight: 2
+                                }" /> -->
+                            </GoogleMap>
+                        </div>
+                        <CardEmpty v-else text="No hay coincidencia"/>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        data-dismiss="modal">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/services/company.js

@@ -23,6 +23,7 @@ export const editCompany = async(companyId, formData) => {
     }
 }
 
+
 // export const editCompany = async(companyId, formData) => {
 //     try {
 //         const endpoint = `/companies/${companyId}`;

src/services/vehicles.js

@@ -0,0 +1,13 @@
+import api from "../lib/axios";
+
+
+export const getVehicles = async(filter) => {
+    try {
+        const endpoint = `/vehicles/${filter}`;
+        const {data} = await api.get(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}

src/stores/vehicles.js

@@ -0,0 +1,22 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { getVehicles } from "../services/vehicles";
+export const useVehiclesStore = defineStore('vehicles', () => {
+    
+    const vehicles = ref([]);
+
+    const fetchVehicles = async(filter) => {
+        if(vehicles.value.length <= 0) {
+            const resp = await getVehicles(filter);
+            console.log(resp.data);
+            if(resp !== null) {
+                vehicles.value = resp.data;
+            }
+        }
+    }
+
+   return {
+        fetchVehicles,
+        vehicles
+   }
+});

src/views/PublicUsersCompanyView.vue

@@ -1,5 +1,5 @@
 <script setup>
-    import { onMounted } from 'vue';
+    import { onMounted, ref } from 'vue';
     import Spiner from '../components/ui/Spiner.vue';
     import { useRoute } from 'vue-router';
     import { getDateMonthDay } from '../helpers/date_formats';

src/views/SearchLoadsView.vue

@@ -8,6 +8,7 @@
     import Segments from '../components/ui/Segments.vue';
     import States from '../components/ui/States.vue';
     import Cities from '../components/ui/Cities.vue';
+    import MakeProposalModal from '../components/MakeProposalModal.vue';
     const filterQuery = ref([]);
     const query = ref('');
     const selectedTruckType = ref([]);
@@ -113,10 +114,28 @@
         filterQuery.value.status = "status=Published",
         await getLoadsPublished(filterQuery.value);
     }
+
+    const currentLoad = ref(null);
+
+    const handleSetCurrentLoad = (load) => {
+        console.log(load);
+        currentLoad.value = load
+    }
+
+    const handleResetCurrentLoad = () => {
+        console.log('se resear');
+        currentLoad.value = null
+    }
 </script>
 
 <template>
     <h2 class="title mb-5">Buscar cargas</h2>
+    <MakeProposalModal 
+        v-if="currentLoad" 
+        :load="currentLoad"
+        @reset-load="handleResetCurrentLoad"
+    />
+
     <div class="card-filters">
         <div class="d-flex mb-2">
             <input class="form-control me-2" type="search" name="" placeholder="Buscar embarcador" id="" @:input="search()" v-model="query" aria-label="Search">
@@ -150,6 +169,7 @@
             v-for="load in loads"
             :load="load"
             :read-only="true"
+            @set-load="handleSetCurrentLoad(load)"
         />
         <CardEmpty 
             v-else

src/views/TrackingLoadView.vue

@@ -6,7 +6,7 @@
     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';
+    import CardEmpty from '../components/CardEmpty.vue';
 
     const isLoading = ref(true);
     const loadStore = useLoadsStore();
@@ -19,6 +19,7 @@ import CardEmpty from '../components/CardEmpty.vue';
     const originCoords = ref(null);
     const destinationCoords = ref(null);
     const isLoadActive = ref(false);
+    const windowWidth = ref(window.innerWidth);
 
     onMounted(() => {
         window.addEventListener('resize', handleResize);