add: delete load

package-lock.json

@@ -11,6 +11,7 @@
         "axios": "^1.6.2",
         "pinia": "^2.1.7",
         "sass": "^1.69.5",
+        "sweetalert2": "^11.10.1",
         "vue": "^3.3.4",
         "vue-multiselect": "^3.0.0-beta.3",
         "vue-router": "^4.2.5",
@@ -996,6 +997,15 @@
         "kdbush": "^4.0.2"
       }
     },
+    "node_modules/sweetalert2": {
+      "version": "11.10.1",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.10.1.tgz",
+      "integrity": "sha512-qu145oBuFfjYr5yZW9OSdG6YmRxDf8CnkgT/sXMfrXGe+asFy2imC2vlaLQ/L/naZ/JZna1MPAY56G4qYM0VUQ==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/sponsors/limonte"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -11,6 +11,7 @@
     "axios": "^1.6.2",
     "pinia": "^2.1.7",
     "sass": "^1.69.5",
+    "sweetalert2": "^11.10.1",
     "vue": "^3.3.4",
     "vue-multiselect": "^3.0.0-beta.3",
     "vue-router": "^4.2.5",

src/components/CardLoad.vue

@@ -3,6 +3,7 @@
     import { getStatusPublished } from '../helpers/status';
     import { getStatusLoad } from '../helpers/status';
     import { useLoadsStore } from '../stores/loads';
+    import Swal from 'sweetalert2'
 
     const loadsStore = useLoadsStore();
 
@@ -11,13 +12,55 @@
             type: Object,
             required: true,
         }
-    })
+    });
+
+
 
     const openAttachmentsModal = () => {
         loadsStore.currentLoad = props.load;
         loadsStore.openAttachmentsModal = true;
     }
 
+    const handleDeleteLoad = async() => {
+        Swal.fire({
+            title: 'Eliminar carga!',
+            text: '¿Estás seguro de eliminar esta carga?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Eliminar',
+            cancelButtonText: 'Cancelar',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Eliminando carga...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+                const resp = await loadsStore.deleteLoad(props.load._id);
+                if(resp != null) {
+                    loadsStore.loads = loadsStore.loads.filter(load => load._id !== props.load._id);
+                    Swal.fire({
+                        title: "Carga eliminada!",
+                        text: "Tu carga ha sido eliminada exitosamente.",
+                        icon: "success"
+                    });
+                } else {
+                    Swal.fire({
+                        title: "No eliminado!",
+                        text: "Tu carga no se pudo eliminar, intente más tarde.",
+                        icon: "error"
+                    });
+                }
+            }
+
+        });
+
+    }
+
     const openEditModal = () => {
         loadsStore.currentLoad = props.load
         loadsStore.openModalEdit = true;
@@ -74,7 +117,7 @@
         <div class="btn-row">
             <button
                 class="btn-primary-sm bg-dark"
-                data-toggle="modal" data-target="#editcompanymodal"
+                @click="handleDeleteLoad"
             ><i class="fa-solid fa-ban clear-sm"></i> Cancelar</button>
             <button  v-if="load.status !== 'Draft' && load.load_status !== 'Published' && load.load_status !== 'Loading'" 
                 type="button" 
@@ -86,11 +129,13 @@
                 Evidencias
             </button>
             <button
+                v-if="load.load_status !== 'Delivered'"
                 class="btn-primary-sm"
                 data-toggle="modal" data-target="#formLoadModal"
                 @click="openEditModal"
             ><i class="fa-solid fa-pen-to-square clear-sm"></i> Editar carga</button>
             <button
+                v-if="load.status !== 'Draft'"
                 class="btn-primary-sm"
                 @click="openProposalsModal"
                 data-toggle="modal" 

src/components/FormLoadModal.vue

@@ -6,13 +6,12 @@
     import TruckTypes from './ui/TruckTypes.vue';
     import Cities from './ui/Cities.vue';
     import States from './ui/States.vue';
+    import Spiner from './ui/Spiner.vue';
     import Products from './ui/Products.vue';
     import { GoogleMap, Marker, Polyline } from "vue3-google-map";
     import useDirectionsRender from '../composables/useDirectionRender';
     import { useAuthStore } from '../stores/auth';
-    import { useRouter } from 'vue-router';
 
-    const router = useRouter()
     const loadStore = useLoadsStore();
     const auth = useAuthStore();
     const windowWidth = ref(window.innerWidth);
@@ -22,6 +21,7 @@
     const destinationCoords = ref(null);
     const startLocation = ref(null);
     const endLocation = ref(null);
+    const isLoading = ref(false);
     const { geocodeAddress } = useDirectionsRender();
 
     
@@ -61,8 +61,8 @@
             formLoad.owner = loadStore.currentLoad.posted_by_name;
             formLoad.notes = loadStore.currentLoad.notes;
             formLoad.weight = loadStore.currentLoad.weight;
-            formLoad.dateLoad = loadStore.currentLoad.est_loading_date.substring(0, 10);
+            formLoad.dateLoad = loadStore.currentLoad.est_loading_date?.substring(0, 10);
-            formLoad.dateDownload = loadStore.currentLoad.est_unloading_date.substring(0, 10);
+            formLoad.dateDownload = loadStore.currentLoad.est_unloading_date?.substring(0, 10);
             formLoad.truckType = {meta_value: loadStore.currentLoad.truck_type};
 
             origin.locationName =  loadStore.currentLoad.origin.company_name;
@@ -84,6 +84,7 @@
 		}
 
         watch(origin, async() => {
+            console.log(origin);
             if(origin.address && origin.city && origin.state) {
                 startLocation.value = origin.address + ', ' + origin.city.city_name + ', ' + origin.state.state_name + ', ' + origin.country + ', ' +origin.postalCode;
                 originCoords.value = await geocodeAddress(startLocation.value);
@@ -103,9 +104,13 @@
     })
 
     const getCoordsMap = async() => {
+        if(loadStore.currentLoad.origin_formatted_address) {
             originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
+        }
+        if(loadStore.currentLoad.destination_formatted_address){
             destinationCoords.value = await geocodeAddress(loadStore.currentLoad.destination_formatted_address);
         }
+    }
 
 
     const formLoad = reactive({
@@ -158,8 +163,8 @@
 				country : origin.country,
 				landmark : origin.ref,
 				zipcode : origin.postalCode,
-                lat : originCoords.value.lat,
+                lat : originCoords.value?.lat,
-                lng : originCoords.value.lng
+                lng : originCoords.value?.lng
 			},
 			destination:{
                 company_name : destination.locationName,
@@ -169,8 +174,8 @@
 				country : destination.country,
 				landmark : destination.ref,
 				zipcode : destination.postalCode,
-                lat : destinationCoords.value.lat,
+                lat : destinationCoords.value?.lat,
-                lng : destinationCoords.value.lng
+                lng : destinationCoords.value?.lng
 			},
 			company: auth.user.company,
             posted_by: auth.user._id,
@@ -178,14 +183,18 @@
 		};
 
         console.log('loadData: ', loadData);
+        isLoading.value = true;
         if(loadStore.currentLoad){
             const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
 			const index = loadStore.loads.findIndex((load) => load._id === resp._id);
+            isLoading.value = false;
             loadStore.loads[index] = resp;
             document.getElementById('btnCloseFormLoadModal').click();
 		} else{
             const resp = await loadStore.saveLoad(loadData);
-            loadStore.loads.push(resp);
+            isLoading.value = false;
+            loadStore.loads.unshift(resp);
+            document.getElementById('btnCloseFormLoadModal').click();
 		}
     }
 </script>
@@ -406,6 +415,8 @@
                 </GoogleMap>
             </div>
             <div class="modal-footer custom-footer">
+                <Spiner v-if="isLoading"/>
+                <div v-else class="btns-footer">
                     <button 
                         type="button" 
                         class="btn btn-dark" 
@@ -425,6 +436,7 @@
             </div>
             </div>
         </div>
+    </div>
 </template>
 
 <style scoped>
@@ -455,6 +467,11 @@
         justify-content: center;
     }
 
+    .btns-footer {
+        display: flex;
+        gap: 1rem;
+    }
+
     .radius-sm{
         border-radius: 5px;
     }

src/components/ProposalsModal.vue

@@ -4,6 +4,8 @@
     import Spiner from './ui/Spiner.vue';
     import { getDateMonthDay } from '../helpers/date_formats';
     import VehicleInfo from './VehicleInfo.vue';
+    import Swal from 'sweetalert2'
+
 
     const loadsStore = useLoadsStore();
     const isLoading = ref(false);
@@ -32,7 +34,16 @@
         };
     }
 
-    const handleCancelProposal = (proposal) => { 
+    const handleCancelProposal = async(proposal) => { 
+        const {isConfirmed} = await Swal.fire({
+            title: 'Cancelar oferta!',
+            text: '¿Estás seguro de cancelar esta oferta?',
+            icon: 'question',
+            showCancelButton: true,
+            confirmButtonText: 'Si',
+            cancelButtonText: 'No'
+        })
+        if( isConfirmed ) {
             const index = loadsStore.proposalsOfLoads.findIndex((p) => p._id === proposal._id);
             // console.log(loadsStore.proposalsOfLoads[index])
             loadsStore.proposalsOfLoads[index] = {
@@ -40,6 +51,7 @@
                 is_accepted: false
             };
         } 
+    }
 
 </script>
 
@@ -59,7 +71,8 @@
             </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 v-else>
+                    <div v-if="loadsStore.proposalsOfLoads.length > 0" v-for="proposal in loadsStore.proposalsOfLoads" class="card-fixed card-proposal">
                         <div class="row">
                             <div class="col-lg-6 col-md-12">
                                 <p>Empresa: <span>{{ proposal.carrier.company_name }}</span></p>
@@ -90,7 +103,7 @@
                                 Aceptar
                             </button>
                             <button
-                            v-if="proposal.load.load_status !== 'Delivered'"
+                                v-if="proposal.load.load_status !== 'Delivered' && proposal.is_accepted"
                                 class="btn-primary-sm"
                                 @click="handleCancelProposal(proposal)"
                                 >
@@ -99,6 +112,10 @@
                             </button>
                         </div>
                     </div>
+                    <div v-else>
+                        No hay ofertas
+                    </div>
+                </div>
             </div>
             <div class="modal-footer">
                 <button 

src/helpers/status.js

@@ -23,8 +23,8 @@ export const getStatusLoad = (load) => {
             color = "#000000";
             break;
         default:
-            status = 'Publicado';
+            status = 'Sin publicar';
-            color = "#428502";
+            color = "#000000";
             break;
     }
     return {

src/stores/loads.js

@@ -23,7 +23,7 @@ export const useLoadsStore = defineStore('load', () => {
         try {
             const endpoint = `/loads?company=${companyid}&${filterStr}`;
             const {data} = await api.get(endpoint);
-            console.log(data);
+            // console.log(data);
             loads.value = data.data;
         } catch (error) {
             loads.value = [];
@@ -34,9 +34,8 @@ 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);
+            // console.log(data);
             proposalsOfLoads.value = data.data;
         } catch (error) {
             proposalsOfLoads.value = [];
@@ -47,9 +46,8 @@ export const useLoadsStore = defineStore('load', () => {
     const saveLoad = async(load) => {
         try {
             const endpoint = `/loads/`;
-            console.log(endpoint);
             const {data} = await api.post(endpoint, load);
-            console.log(data);
+            // console.log(data);
             return data;
         } catch (error) {
             console.log(error);
@@ -60,8 +58,20 @@ export const useLoadsStore = defineStore('load', () => {
     const updateLoad = async(loadId, load) => {
         try {
             const endpoint = `/loads/${loadId}`;
-            console.log(endpoint);
             const {data} = await api.patch(endpoint, load);
+            // console.log(data);
+            return data;
+        } catch (error) {
+            console.log(error);
+            return null;
+        }
+    }
+
+    const deleteLoad = async(loadId) => {
+        try {
+            const endpoint = `/loads/${loadId}`;
+            console.log(endpoint);
+            const {data} = await api.delete(endpoint);
             console.log(data);
             return data;
         } catch (error) {
@@ -77,6 +87,7 @@ export const useLoadsStore = defineStore('load', () => {
        openAttachmentsModal,
        getProposalsOfLoads,
        getCompanyLoads,
+       deleteLoad,
        saveLoad,
        updateLoad,
        loads,