add: delete load

2023-12-14 21:59:45 -06:00
parent 292d125216
commit 4228ba5129
7 changed files with 179 additions and 78 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/components/CardLoad.vue
+++ b/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" 
--- a/src/components/FormLoadModal.vue
+++ b/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.dateDownload = loadStore.currentLoad.est_unloading_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.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,8 +104,12 @@
    })

    const getCoordsMap = async() => {
-        originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
-        destinationCoords.value = await geocodeAddress(loadStore.currentLoad.destination_formatted_address);
+        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);
+        }
    }


@@ -158,8 +163,8 @@
 				country : origin.country,
 				landmark : origin.ref,
 				zipcode : origin.postalCode,
-                lat : originCoords.value.lat,
-                lng : originCoords.value.lng
+                lat : originCoords.value?.lat,
+                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,
-                lng : destinationCoords.value.lng
+                lat : destinationCoords.value?.lat,
+                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,21 +415,24 @@
                </GoogleMap>
            </div>
            <div class="modal-footer custom-footer">
-                <button 
-                    type="button" 
-                    class="btn btn-dark" 
-                    @click="clearLoad"
-                    data-dismiss="modal">Cerrar</button>
-                <button 
-                    type="button" 
-                    class="btn btn-dark" 
-                    @click="handleSave"
-                >Guardar</button>
-                <button 
-                    type="button" 
-                    class="btn-primary-sm radius-sm" 
-                    @click=""
-                >Publicar</button>
+                <Spiner v-if="isLoading"/>
+                <div v-else class="btns-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        @click="clearLoad"
+                        data-dismiss="modal">Cerrar</button>
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        @click="handleSave"
+                    >Guardar</button>
+                    <button 
+                        type="button" 
+                        class="btn-primary-sm radius-sm" 
+                        @click=""
+                    >Publicar</button>
+                </div>
            </div>
            </div>
        </div>
@@ -455,6 +467,11 @@
        justify-content: center;
    }

+    .btns-footer {
+        display: flex;
+        gap: 1rem;
+    }
+
    .radius-sm{
        border-radius: 5px;
    }
--- a/src/components/ProposalsModal.vue
+++ b/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,13 +34,23 @@
        };
    }

-    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
-        };
+    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] = {
+                ...proposal, 
+                is_accepted: false
+            };
+        } 
    }

 </script>
@@ -59,44 +71,49 @@
            </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-lg-6 col-md-12">
-                            <p>Empresa: <span>{{ proposal.carrier.company_name }}</span></p>
-                            <p>Licitador: <span>{{ proposal.bidder.first_name }} {{ proposal.bidder.last_name }}</span></p>
-                            <p># de registro del transportista: <span v-if="proposal.vehicle">{{proposal.vehicle.vehicle_code}}</span></p>
+                <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>
+                                <p>Licitador: <span>{{ proposal.bidder.first_name }} {{ proposal.bidder.last_name }}</span></p>
+                                <p># de registro del transportista: <span v-if="proposal.vehicle">{{proposal.vehicle.vehicle_code}}</span></p>
+                            </div>
+                            <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>
-                        <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 v-if="proposal.comment" class="box-note">
+                            {{ proposal.comment }}
                        </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="handleAceptedProposal(proposal)"
-                        >
-                            <i class="fa-solid fa-check"></i>
-                            Aceptar
-                        </button>
-                        <button
-                            v-if="proposal.load.load_status !== 'Delivered'"
-                            class="btn-primary-sm"
-                            @click="handleCancelProposal(proposal)"
+                        <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="handleAceptedProposal(proposal)"
                            >
-                            <i class="fa-solid fa-ban clear-sm"></i>
-                            Cancelar
-                        </button>
+                                <i class="fa-solid fa-check"></i>
+                                Aceptar
+                            </button>
+                            <button
+                                v-if="proposal.load.load_status !== 'Delivered' && proposal.is_accepted"
+                                class="btn-primary-sm"
+                                @click="handleCancelProposal(proposal)"
+                                >
+                                <i class="fa-solid fa-ban clear-sm"></i>
+                                Cancelar
+                            </button>
+                        </div>
+                    </div>
+                    <div v-else>
+                        No hay ofertas
                    </div>
                </div>
            </div>
--- a/src/helpers/status.js
+++ b/src/helpers/status.js
@@ -23,8 +23,8 @@ export const getStatusLoad = (load) => {
            color = "#000000";
            break;
        default:
-            status = 'Publicado';
-            color = "#428502";
+            status = 'Sin publicar';
+            color = "#000000";
            break;
    }
    return {
--- a/src/stores/loads.js
+++ b/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,