view proposals modal

src/components/AttachmentsModal.vue

@@ -8,10 +8,12 @@
     const { getAttachmentLoad, loading, attachments } = useAttachments();
 
     onMounted(() => {
+        console.log('se ejcyta attach');
         getAttachmentLoad();
     })
 
     const clearLoad = () => {
+        loadStore.openAttachmentsModal = false;
         loadStore.currentLoad = null;
     }
 

src/components/CardLoad.vue

@@ -13,13 +13,19 @@
         }
     })
 
-    const setLoad = () => {
+    const openAttachmentsModal = () => {
         loadsStore.currentLoad = props.load;
+        loadsStore.openAttachmentsModal = true;
     }
 
     const openEditModal = () => {
-        loadsStore.openModalEdit = true;
         loadsStore.currentLoad = props.load
+        loadsStore.openModalEdit = true;
+    }
+
+    const openProposalsModal = () => {
+        loadsStore.currentLoad = props.load
+        loadsStore.openProposalsModal = true;
     }
 
 </script>
@@ -74,7 +80,7 @@
                 type="button" 
                  data-toggle="modal" data-target="#attachmentModal" 
                 class="btn-primary-sm" 
-                @click="setLoad"
+                @click="openAttachmentsModal"
             >
                 <i class="fa-solid fa-image"></i>
                 Evidencias
@@ -86,7 +92,9 @@
             ><i class="fa-solid fa-pen-to-square clear-sm"></i> Editar carga</button>
             <button
                 class="btn-primary-sm"
-                data-toggle="modal" data-target="#editcompanymodal"
+                @click="openProposalsModal"
+                data-toggle="modal" 
+                data-target="#proposalsModal"
             >#{{ load.no_of_proposals }} Ofertas</button>
         </div>
     </div>

src/components/ProposalsModal.vue

@@ -0,0 +1,142 @@
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useLoadsStore } from '../stores/loads';
+import Spiner from './ui/Spiner.vue';
+import { getDateMonthDay } from '../helpers/date_formats';
+import VehicleInfo from './VehicleInfo.vue';
+
+    const loadsStore = useLoadsStore();
+    const isLoading = ref(false);
+
+    onMounted(() => {
+        getProposalsData()
+    });
+
+    const getProposalsData = async() => {
+        isLoading.value = true;
+        await loadsStore.getProposalsOfLoads(loadsStore.currentLoad._id);
+        isLoading.value = false;
+    }
+
+    const clearMoal = () => {
+        loadsStore.openProposalsModal = false;
+        loadsStore.currentLoad = false; 
+    }
+</script>
+
+<template>
+   <div class="modal fade" id="proposalsModal" 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="btnCloseProposalsModal" 
+                    type="button" 
+                    @click="clearMoal"
+                    class="close bg-white" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body view-proposals">
+                <Spiner v-if="isLoading"/>
+                <div v-else v-for="proposal in loadsStore.proposalsOfLoads" class="card-fixed card-proposal">
+                    <div class="row">
+                        <div class="col-4">
+                            <p>Empresa: <span>{{ proposal.carrier.company_name }}</span></p>
+                        </div>
+                        <div class="col-4">
+                            <p>Licitador: <span>{{ proposal.bidder.first_name }} {{ proposal.bidder.last_name }}</span></p>
+                        </div>
+                        <div class="col-4">
+                            <p>Fecha: <span>{{ getDateMonthDay(proposal.createdAt) }}</span></p>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-4">
+                            <p>Tipo de Transporte: <span v-if="proposal.vehicle">{{proposal.vehicle.truck_type}}</span></p>
+                        </div>
+                        <div class="col-4">
+                            <p># de registro del transportista: <span v-if="proposal.vehicle">{{proposal.vehicle.vehicle_code}}</span></p>
+                        </div>
+                        <div class="col-4">
+                            <p>Transportista: <span v-if="proposal._driver">{{proposal._driver}}</span></p>
+                        </div>
+                    </div>
+                    <div v-if="proposal.comment" class="box-note">
+                        {{ proposal.comment }}
+                    </div>
+                    <VehicleInfo v-if="proposal.vehicle" :vehicle="proposal.vehicle"/>
+                    <div class="d-flex justify-content-end gap-3">
+                        <div v-if="proposal.is_accepted" class="indicator-check">
+                            <i class="fa-solid fa-check"></i>
+                            Aceptado
+                        </div>
+                        <button  v-if="!proposal.is_accepted" 
+                            type="button" 
+                            class="btn-primary-sm" 
+                            @click=""
+                        >
+                            <i class="fa-solid fa-check"></i>
+                            Aceptar
+                        </button>
+                        <button
+                            class="btn-primary-sm"
+                            @click=""
+                            >
+                            <i class="fa-solid fa-ban clear-sm"></i>
+                            Cancelar
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button 
+                    type="button" 
+                    class="btn btn-dark" 
+                    @click="clearMoal"
+                    data-dismiss="modal">Cerrar</button>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+    .view-proposals {
+        width: 100%;
+    }
+
+    .card-proposal {
+        flex-direction: column;
+        width: 100% !important;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+        font-weight: 700;
+    }
+    
+    p span {
+        color: #323032;
+        font-weight: normal;
+    }
+
+    .indicator-check {
+        width: 120px;
+        padding: 10px 12px;
+        background: #FFF;
+        border: 1px solid green;
+        border-radius: 50px;
+        color: green;
+    }
+
+    .box-note {
+        padding: 12px 16px;
+        background-color: aqua;
+        border-radius: 13px;
+    }
+</style>

src/components/VehicleInfo.vue

@@ -0,0 +1,35 @@
+<script setup>
+import { ref } from 'vue';
+
+    defineProps({
+        vehicle: {
+            type: Object,
+            required: true
+        }
+    })
+
+    const isShow = ref(false);
+
+    const toogle = () => {
+        isShow.value = !isShow.value;
+    }
+</script>
+
+<template>
+    <a 
+        @click="toogle"
+        class="btn-text mt-3"
+    >Ver más <i class="fa-solid" :class="[isShow ? 'fa-chevron-up' : 'fa-chevron-down']"></i></a>
+
+    <div v-if="isShow">
+        <div class="divider"></div>
+        <h2 class="my-3">Información del vehiculo</h2>
+    </div>
+</template>
+
+<style scoped>
+    h2 {
+        font-size: 1.2rem;
+        font-weight: 500;
+    }
+</style>

src/stores/loads.js

@@ -4,9 +4,12 @@ import api from "../lib/axios";
 
 export const useLoadsStore = defineStore('load', () => {
     const companyid = localStorage.getItem('id');
-   const currentLoad = ref(null);
-   const loads = ref([])
-   const openModalEdit = ref(false);
+    const currentLoad = ref(null);
+    const loads = ref([])
+    const proposalsOfLoads = ref([]);
+    const openModalEdit = ref(false);
+    const openAttachmentsModal = ref(false);
+    const openProposalsModal = ref(false);
 
 
     const getCompanyLoads = async(filterQuery) => {
@@ -19,7 +22,6 @@ export const useLoadsStore = defineStore('load', () => {
         console.log(filterStr);
         try {
             const endpoint = `/loads?company=${companyid}&${filterStr}`;
-            console.log(endpoint);
             const {data} = await api.get(endpoint);
             loads.value = data.data;
         } catch (error) {
@@ -28,11 +30,28 @@ export const useLoadsStore = defineStore('load', () => {
         }
     }
 
+    const getProposalsOfLoads = async(filterQuery) => {
+        try {
+            const endpoint = `/proposals/?load=${filterQuery}`;
+            console.log(endpoint);
+            const {data} = await api.get(endpoint);
+            console.log(data);
+            proposalsOfLoads.value = data.data;
+        } catch (error) {
+            proposalsOfLoads.value = [];
+            console.log(error);
+        }
+    }
+
 
    return {
-       currentLoad,
        openModalEdit,
+       openProposalsModal,
+       openAttachmentsModal,
+       getProposalsOfLoads,
        getCompanyLoads,
        loads,
+       currentLoad,
+       proposalsOfLoads,
    }
 });

src/views/LoadsPublishedView.vue

@@ -6,6 +6,7 @@
     import AttachmentsModal from '../components/AttachmentsModal.vue';
     import { useLoadsStore } from '../stores/loads';
     import FormLoadModal from '../components/FormLoadModal.vue';
+import ProposalsModal from '../components/ProposalsModal.vue';
 
     const companyStore = useCompanyStore();
     const loadStore = useLoadsStore();
@@ -65,8 +66,9 @@
 </script>
 
 <template>
-    <AttachmentsModal v-if="loadStore.currentLoad"/>
+    <AttachmentsModal v-if="loadStore.openAttachmentsModal"/>
     <FormLoadModal v-if="loadStore.openModalEdit"/>
+    <ProposalsModal v-if="loadStore.openProposalsModal"/>
     <div>
         <h2 class="title mb-5">Mis cargas publicadas</h2>
         <div>