add: delete load

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;
     }