fix: validation in locations origin & destination

src/components/FormLoadModal.vue

@@ -36,8 +36,6 @@ import AddressPreview from './AddressPreview.vue';
     const submited = ref(false);
     const { geocodeAddress, getDirections } = useDirectionsRender();
     const formRef = ref(null);
-    const checkLocationLoad = ref(false);
-    const checkLocationDownload = ref(false);
     const locationLoadSelected = ref(null)
     const locationDownloadSelected = ref(null)
     const originRef = ref('')
@@ -48,10 +46,8 @@ import AddressPreview from './AddressPreview.vue';
     const errors = ref({
         segment: null,
         truckType: null,
-        cityOrigin: null,
+        locationOrigin: null,
-        stateOrigin: null,
+        locationDestination: null,
-        cityDestination: null,
-        stateDestination: null,
     });
 
     const mapKey = import.meta.env.VITE_MAP_KEY;
@@ -99,23 +95,6 @@ import AddressPreview from './AddressPreview.vue';
             formLoad.dateLoad = dateStart.substring(0, 10);
             formLoad.dateDownload = dateEnd.substring(0, 10);
             formLoad.truckType = loadStore.currentLoad.truck_type ? {meta_value: loadStore.currentLoad.truck_type} : null;
-            origin.locationName =  loadStore.currentLoad.origin.company_name;
-            origin.address =  loadStore.currentLoad.origin.street_address1;
-            origin.state =  loadStore.currentLoad.origin?.state ? { state_name: loadStore.currentLoad.origin.state } : null;
-            origin.city = loadStore.currentLoad.origin?.city ? { city_name: loadStore.currentLoad.origin.city } : null;
-            origin.country = loadStore.currentLoad.origin.country;
-            origin.postalCode = loadStore.currentLoad.origin.zipcode;
-            originRef.value = loadStore.currentLoad.origin.landmark;
-
-            destination.locationName =  loadStore.currentLoad.destination.company_name;
-            destination.address =  loadStore.currentLoad.destination.street_address1;
-            destination.state =  loadStore.currentLoad.destination?.state ? { state_name: loadStore.currentLoad.destination.state } : null;
-            destination.city = loadStore.currentLoad.destination?.city ? { city_name: loadStore.currentLoad.destination.city } : null;
-            destination.country = loadStore.currentLoad.destination.country;
-            destination.postalCode = loadStore.currentLoad.destination.zipcode;
-            destinationRef.value = loadStore.currentLoad.destination.landmark;
-            locationLoadSelected.value = loadStore.currentLoad?.origin_warehouse || null; /// Selected warehouse origin
-            locationDownloadSelected.value = loadStore.currentLoad?.destination_warehouse || null; /// Selected warehouse destination
             emails.value = loadStore.currentLoad?.alert_list || [];
             getCoordsMap();
 		}
@@ -143,27 +122,53 @@ import AddressPreview from './AddressPreview.vue';
     })
 
     watch(locationLoadSelected, () => {
-        origin.locationName =  locationLoadSelected.value.branch_name;
+        origin.locationName =  locationLoadSelected.value?.branch_name;
-        origin.address =  locationLoadSelected.value.address;
+        origin.address =  locationLoadSelected.value?.address;
-        origin.state =  { state_name: locationLoadSelected.value.state };
+        origin.state =  { state_name: locationLoadSelected.value?.state };
-        origin.city =  { city_name: locationLoadSelected.value.city };
+        origin.city =  { city_name: locationLoadSelected.value?.city };
-        originRef.value = locationLoadSelected.value.description;
+        originRef.value = locationLoadSelected.value?.description;
     });
 
     watch(locationDownloadSelected, () => {
-        destination.locationName =  locationDownloadSelected.value.branch_name;
+        destination.locationName =  locationDownloadSelected.value?.branch_name;
-        destination.address =  locationDownloadSelected.value.address;
+        destination.address =  locationDownloadSelected.value?.address;
-        destination.state =  { state_name: locationDownloadSelected.value.state };
+        destination.state =  { state_name: locationDownloadSelected.value?.state };
-        destination.city =  { city_name: locationDownloadSelected.value.city };
+        destination.city =  { city_name: locationDownloadSelected.value?.city };
-        destinationRef.value = locationDownloadSelected.value.description;
+        destinationRef.value = locationDownloadSelected.value?.description;
     });
 
     const getLocations = async(type) => {
         loadingLocations.value = true;
         await companyStore.getLocationsLoads(type)
+        setLocations(type);
         loadingLocations.value = false;
     }
 
+    const setLocations = (type) => {
+      if(loadStore.currentLoad) {
+        if(type === 'loading') {
+            locationLoadSelected.value = companyStore.locationsLoad.find( (l) => l._id === loadStore.currentLoad?.origin_warehouse?._id);
+            origin.locationName =  loadStore.currentLoad.origin.company_name;
+            origin.address =  loadStore.currentLoad.origin.street_address1;
+            origin.state =  loadStore.currentLoad.origin?.state ? { state_name: loadStore.currentLoad.origin.state } : null;
+            origin.city = loadStore.currentLoad.origin?.city ? { city_name: loadStore.currentLoad.origin.city } : null;
+            origin.country = loadStore.currentLoad.origin.country;
+            origin.postalCode = loadStore.currentLoad.origin.zipcode;
+            originRef.value = loadStore.currentLoad.origin.landmark;
+        } else {
+            locationDownloadSelected.value = companyStore.locationsDowload.find( (l) => l._id === loadStore.currentLoad?.destination_warehouse?._id)
+            destination.locationName =  loadStore.currentLoad.destination.company_name;
+            destination.address =  loadStore.currentLoad.destination.street_address1;
+            destination.state =  loadStore.currentLoad.destination?.state ? { state_name: loadStore.currentLoad.destination.state } : null;
+            destination.city = loadStore.currentLoad.destination?.city ? { city_name: loadStore.currentLoad.destination.city } : null;
+            destination.country = loadStore.currentLoad.destination.country;
+            destination.postalCode = loadStore.currentLoad.destination.zipcode;
+            destinationRef.value = loadStore.currentLoad.destination.landmark;
+        }
+      }
+    }
+    
+
     const getCoordsMap = async() => {
         const destinationLat = loadStore.currentLoad.destination?.lat;
         const destinationLng = loadStore.currentLoad.destination?.lng;
@@ -258,9 +263,6 @@ import AddressPreview from './AddressPreview.vue';
             destination_warehouse: locationDownloadSelected.value?._id || null,
             alert_list: emails.value.length > 0 ? emails.value : null
 		};
-
-        console.log(loadData);
-
         return loadData;
     }
 
@@ -328,10 +330,8 @@ import AddressPreview from './AddressPreview.vue';
         errors.value = {
             segment: (!formLoad.segment || formLoad.segment?.length <= 0) ? t('errors.segment') : null,
             truckType: formLoad.truckType ? null : t('errors.truck'),
-            cityOrigin: origin.city ? null : t('errors.city'),
+            locationOrigin: locationLoadSelected.value ? null : 'Seleccione una ubicación de origen',
-            stateOrigin: origin.state ? null : t('errors.state'),
+            locationDestination: locationDownloadSelected.value ? null : 'Seleccione una ubicación de destino',
-            cityDestination: destination.city ? null : t('errors.city'),
-            stateDestination: destination.state ? null : t('errors.state'),
         };
 
     }
@@ -538,11 +538,11 @@ import AddressPreview from './AddressPreview.vue';
                                     name="locationLoad" 
                                     id="locationLoad" 
                                     v-model="locationLoadSelected"
-                                    onclick="() => getLocations('loading')"
                                 >
                                     <option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
                                     <option v-for="loc in companyStore.locationsLoad" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
+                                <span class="error-msg" v-if="submited && errors.locationOrigin">{{ errors.locationOrigin }}</span>
                             </div>
                             <AddressPreview 
                                 v-if="origin.locationName"
@@ -562,6 +562,7 @@ import AddressPreview from './AddressPreview.vue';
                                     <option disabled value="">-- {{ t('loads.selectedLocation') }} --</option>
                                     <option v-for="loc in companyStore.locationsDowload" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
+                                <span class="error-msg" v-if="submited && errors.locationDestination">{{ errors.locationDestination }}</span>
                             </div>
                             <AddressPreview 
                                 v-if="destination.locationName"