add: retirar offer done

src/components/CardProposal.vue

@@ -1,6 +1,8 @@
 <script setup>
+    import Swal from 'sweetalert2';
 import { getDateMonthDay } from '../helpers/date_formats';
     import { getStatusLoad } from '../helpers/status';
+    import { useCompanyStore } from '../stores/company';
 
     const props = defineProps({
         proposal: {
@@ -9,6 +11,60 @@
         }
     })
 
+    const companyStore = useCompanyStore();
+
+    const handleWithdrawnProposal = async() => {
+
+        Swal.fire({
+            title: 'Retirar oferta!',
+            text: '¿Estás seguro de retirar esta oferta?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Si, Retirar',
+            cancelButtonText: 'No',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Retirando oferta...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+
+                let formData = {
+                    is_withdrawn : true
+                }
+
+                let localData = {
+                    vehicle: props.proposal.vehicle,
+                    load: props.proposal.load
+                }
+
+                const resp = await companyStore.updatePropsalLoad(props.proposal._id, formData, localData);
+
+                Swal.close();
+                
+                if(resp != null) {
+                    Swal.fire({
+                        title: "Oferta retirada!",
+                        text: "Tu oferta ha sido retirada exitosamente.",
+                        icon: "success"
+                    });
+                } else {
+                    Swal.fire({
+                        title: "Oferta no retirada!",
+                        text: "Tu oferta no se pudo retirar, intente más tarde.",
+                        icon: "error"
+                    });
+                }
+            }
+
+        });
+    }
+
     defineEmits(['set-proposal']);
 </script>
 
@@ -22,7 +78,7 @@
                 <p v-if="proposal.vehicle"><span>Tipo de transporte:</span> {{proposal.vehicle.truck_type}}</p>
                 <p v-if="proposal.vehicle"><span>Fecha de publicación:</span> {{ getDateMonthDay(proposal.vehicle.published_date) }}</p>
                 <p v-if="proposal.vehicle"><span>Fecha dispobible:</span> {{ getDateMonthDay(proposal.vehicle.available_date) }}</p>
-                <p v-if="proposal.vehicle"><span>Disponible en:</span> {{proposal.vehicle.city}}<span v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</span></p>
+                <p v-if="proposal.vehicle"><span>Disponible en:</span> {{proposal.vehicle.city}}<template v-if="proposal.vehicle.state">, {{proposal.vehicle.state}}</template></p>
                 <p v-if="proposal.vehicle"><span>Destino:</span> {{proposal.vehicle.destino}}</p>
                 <p v-if="proposal.vehicle"><span>Placas remolque 1:</span> {{proposal.vehicle.trailer_plate_1}}</p>
                 <p v-if="proposal.vehicle"><span>Placas remolque 2:</span> {{proposal.vehicle.trailer_plate_2}}</p>
@@ -40,19 +96,27 @@
             </div>
         </div>
         <div class="btn-row">
-            <button
+            <!-- <button
                 class="btn-primary-sm"
                 data-toggle="modal" data-target="#editcompanymodal"
-            ><i class="fa-solid fa-ban"></i> Retirar</button>
+            ><i class="fa-solid fa-ban"></i> Retirar</button> -->
+            <div v-if="proposal.is_withdrawn" class="indicator-cancel">
+                <i class="fa-solid fa-ban"></i>
+                Retirado
+            </div>
+            <button  v-else
+                type="button" 
+                class="btn btn-danger radius-sm" 
+                @click="handleWithdrawnProposal"
+            >
+                <i class="fa-solid fa-ban"></i>
+                Retirar
+            </button>
             <button
-                class="btn-primary-sm"
+                class="btn-primary-sm radius-sm"
                 @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"
-                data-toggle="modal" data-target="#editcompanymodal"
-            > Cancelar</button>
         </div>
     </div>
 </template>
@@ -91,6 +155,15 @@
         height: 150px;
     }
 
+    .indicator-cancel {
+        width: 120px;
+        padding: 10px 12px;
+        background: #FFF;
+        /* border: 1px solid red; */
+        border-radius: 50px;
+        color: red;
+    }
+
     .tracking-icon svg:hover{
         height: 33px;
     }

src/components/CreateVehicleModal.vue

@@ -61,7 +61,7 @@
             vehicleForm.trailer_plate_2 = props.vehicle.trailer_plate_2;
             vehicleForm.circulation_serial_number = props.vehicle.circulation_serial_number;
             vehicleForm.notes = props.vehicle.notes;
-            vehicleForm.destino = {city_name: props.vehicle.destino};
+            vehicleForm.destino = props.vehicle.destino;
         }
     })
 
@@ -86,7 +86,7 @@
 	    	notes: vehicleForm.notes,
 	    	company: authStore.user.company,
 	    	categories: vehicleForm.categories.length <= 0 ? null : vehicleForm.categories?.map((e) => e._id),
-	    	destino: vehicleForm.destino?.city_name,
+	    	destino: vehicleForm.destino,
 	    	available_date: new Date()
 	    };
         let localData = {};
@@ -130,7 +130,7 @@
             vehicle_number: (!vehicleForm.vehicle_number) ? 'Campo es requerido' : null,
             state: (!vehicleForm.state) ? 'Seleccione estado' : null,
             city: (!vehicleForm.city) ? 'Seleccione municipio' : null,
-            destino: (!vehicleForm.destino) ? 'Seleccione municipio destino' : null,
+            destino: (!vehicleForm.destino) ? 'Ingrese destino' : null,
         };
     }
 </script>
@@ -222,11 +222,14 @@
                             </div>
                         </div>
                         <div class="col-lg-6 col-12 mt-4">
-                            <label class="custom-label">Destino*</label>
+                            <CustomInput
-                            <Cities
+                                label="Destino*"
-                                v-model="vehicleForm.destino" 
+                                type="text"
+                                :filled="false"
+                                name="destino"
+                                :error="errors.destino"
+                                v-model:field="vehicleForm.destino"
                             />
-                            <span class="error-msg" v-if="errors.destino">{{ errors.destino }}</span>
                         </div>
                         <div class="d-flex flex-column mt-4">
                             <label class="custom-label" for="notes">Información Adicional del Transporte:</label>

src/components/MakeProposalModal.vue

@@ -120,6 +120,7 @@
             console.log(vehicleSelected);
             const localData = {
                 vehicle: vehicleSelected,
+                load: props.load,
                 _driver: vehicleSelected?.driver.first_name + ' ' + vehicleSelected?.driver.last_name
             }
             loadingSubmit.value = true;

src/components/StatusVehicleModal.vue

@@ -21,7 +21,7 @@
     onMounted(() => {   
         statusSelected.value = props.vehicle.is_available === true ? 'Availiable' : 'Booked'
         formAvailiable.state = {state_name: props.vehicle.state};
-        formAvailiable.destino = {city_name: props.vehicle.destino};
+        formAvailiable.destino = props.vehicle.destino;
         formAvailiable.city = {city_name: props.vehicle.city};
         formAvailiable.available_date = props.vehicle.available_date?.substring(0, 10);
     });
@@ -50,7 +50,7 @@
             if(errors.value.city || errors.value.state || errors.value.destino ) return;
             vehicleData = {
 				available_date : formAvailiable.available_date,
-                destino: formAvailiable.destino.city_name,
+                destino: formAvailiable.destino,
                 city : formAvailiable.city.city_name,
 				state : formAvailiable.state.state_name,
                 is_available : true
@@ -86,7 +86,7 @@
         errors.value = {
             state: (!formAvailiable.state) ? 'Seleccione estado' : null,
             city: (!formAvailiable.city) ? 'Seleccione municipio' : null,
-            destino: (!formAvailiable.destino) ? 'Seleccione municipio destino' : null,
+            destino: (!formAvailiable.destino) ? 'Ingrese destino' : null,
         };
     }
 
@@ -150,13 +150,14 @@
                                 />
                                 <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
                             </div>
-                            <div class="mb-4 mt-3">
+                            <CustomInput
-                                <label class="custom-label">Destino</label>
+                                label="Destino*"
-                                <Cities
+                                type="text"
-                                    v-model="formAvailiable.destino" 
+                                :filled="false"
+                                name="destino"
+                                v-model:field="formAvailiable.destino"
+                                :error="errors.destino"
                             />
-                                <span class="error-msg" v-if="errors.destino">{{ errors.destino }}</span>
-                            </div>
                         </div>
                         <div class="mt-4 text-center">
                             <Spiner v-if="loading === true"/>