add: modal set proposals

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);