vehicle info added

src/components/ProposalsModal.vue

@@ -22,6 +22,25 @@ import VehicleInfo from './VehicleInfo.vue';
         loadsStore.openProposalsModal = false;
         loadsStore.currentLoad = false; 
     }
+
+    const handleAceptedProposal = (proposal) => {
+        const index = loadsStore.proposalsOfLoads.findIndex((p) => p._id === proposal._id);
+        console.log(loadsStore.proposalsOfLoads[index])
+        loadsStore.proposalsOfLoads[index] = {
+            ...proposal, 
+            is_accepted: true
+        };
+    }
+
+    const handleCancelProposal = (proposal) => { 
+        const index = loadsStore.proposalsOfLoads.findIndex((p) => p._id === proposal._id);
+        console.log(loadsStore.proposalsOfLoads[index])
+        loadsStore.proposalsOfLoads[index] = {
+            ...proposal, 
+            is_accepted: false
+        };
+    }
+
 </script>
 
 <template>
@@ -42,24 +61,14 @@ import VehicleInfo from './VehicleInfo.vue';
                 <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">
+                        <div class="col-lg-6 col-md-12">
                             <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">
+                        <div class="col-lg-6 col-md-12">
+                            <p>Fecha: <span>{{ getDateMonthDay(proposal.createdAt) }}</span></p>
+                            <p>Tipo de Transporte: <span v-if="proposal.vehicle">{{proposal.vehicle.truck_type}}</span></p>
                             <p>Transportista: <span v-if="proposal._driver">{{proposal._driver}}</span></p>
                         </div>
                     </div>
@@ -75,14 +84,15 @@ import VehicleInfo from './VehicleInfo.vue';
                         <button  v-if="!proposal.is_accepted" 
                             type="button" 
                             class="btn-primary-sm" 
-                            @click=""
+                            @click="handleAceptedProposal(proposal)"
                         >
                             <i class="fa-solid fa-check"></i>
                             Aceptar
                         </button>
                         <button
+                            v-if="proposal.load.load_status !== 'Delivered'"
                             class="btn-primary-sm"
-                            @click=""
+                            @click="handleCancelProposal(proposal)"
                             >
                             <i class="fa-solid fa-ban clear-sm"></i>
                             Cancelar

src/components/Sidebar.vue

@@ -137,6 +137,8 @@
         flex-direction: column;
         top: 0;
         height: 100%;
+        // min-height: 100vh;
+        overflow-y: scroll;
         bottom: 0;
         width: 220px;
         left: 0;

src/components/VehicleInfo.vue

@@ -18,12 +18,29 @@ import { ref } from 'vue';
 <template>
     <a 
         @click="toogle"
-        class="btn-text mt-3"
+        class="btn-text mt-4 mb-2"
-    >Ver más <i class="fa-solid" :class="[isShow ? 'fa-chevron-up' : 'fa-chevron-down']"></i></a>
+    >Información del vehiculo <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>
+        <!-- <h2 class="my-3">Información del vehiculo</h2> -->
+        <div class="row my-2">
+            <div class="col-lg-6">
+                <p>Código: <span>{{ vehicle.vehicle_code }}</span></p>
+                <p>Tipo de transporte: <span>{{ vehicle.truck_type }}</span></p>
+                <p>Número de Serie: <span>{{ vehicle.vehicle_number }}</span></p>
+                <p>Segmento: <span>{{ vehicle._categories }}</span></p>
+            </div>
+            <div class="col-lg-6">
+                <p>Placas Tracto Camión: <span>{{ vehicle.circulation_serial_number }}</span></p>
+                <p>Placas Remolque 1: <span>{{ vehicle.trailer_plate_1 }}</span></p>
+                <p>Placas Remolque 2: <span>{{ vehicle.trailer_plate_2 }}</span></p>
+                <p>Base de carga: <span>{{ vehicle.city }}, {{ vehicle.state }}</span></p>
+            </div>
+        </div>
+        <div class="col-12">
+            <p>Información Adicional del Transporte: <span>{{ vehicle.notes }}</span></p>
+        </div>
     </div>
 </template>
 
@@ -32,4 +49,16 @@ import { ref } from 'vue';
         font-size: 1.2rem;
         font-weight: 500;
     }
+
+    p {
+        font-size: 1rem;
+        font-weight: 400;
+        color: #323032;
+        font-weight: 700;
+    }
+    
+    p span {
+        color: #323032;
+        font-weight: normal;
+    }
 </style>