origin_warehouse & destination_warehouse new data

src/components/AddressPreview.vue

@@ -0,0 +1,42 @@
+<script setup>
+    import { useI18n } from 'vue-i18n';
+    
+    const props = defineProps({
+        address: {
+            type: Object,
+            required: true
+        }
+    });
+
+    const { t } = useI18n()
+</script>
+
+<template>
+    <div class="card-fixed addresx-box">
+        <p>{{ t('loads.addressNameLoad') }}:  <span>{{ address.locationName }}</span></p>
+        <p>{{ t('global.country') }}:  <span>{{ address?.country || 'Sin definir' }}</span></p>
+        <p>{{ t('global.state') }}:  <span>{{ address?.state?.state_name }}</span></p>
+        <p>{{ t('global.city') }}:  <span>{{ address?.city?.city_name }}</span></p>
+        <p>{{ t('directory.zipCode') }}:  <span>{{ address?.postalCode }}</span></p>
+        <p>{{ t('directory.address') }}:  <span>{{ address?.address }}</span></p>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+    .addresx-box {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+    }
+
+    p {
+        margin: 0.2rem 0;
+        font-size: 1rem;
+        color: #323032;
+    }
+
+     p span {
+        color: #323032;
+        font-weight: 700;
+    }
+</style>

src/components/FormLoadModal.vue

@@ -4,8 +4,6 @@
     import Custominput from './ui/CustomInput.vue';
     import Segments from './ui/Segments.vue';
     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";
@@ -18,6 +16,7 @@
     import { computed } from 'vue';
     import {getDateTime } from '../helpers/date_formats';
     import { validateEmail } from '../helpers/validations';
+import AddressPreview from './AddressPreview.vue';
 
 
     const loadStore = useLoadsStore();
@@ -81,6 +80,8 @@ import { validateEmail } from '../helpers/validations';
             zoom.value = 4;
             heightMap.value = 420;
         }
+        getLocations('unloading');
+        getLocations('loading');
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         if(loadStore.currentLoad){
             const dateStart = getDateTime(loadStore.currentLoad.est_loading_date, 0);
@@ -113,7 +114,8 @@ import { validateEmail } from '../helpers/validations';
             destination.country = loadStore.currentLoad.destination.country;
             destination.postalCode = loadStore.currentLoad.destination.zipcode;
             destinationRef.value = loadStore.currentLoad.destination.landmark;
-            locationLoadSelected.value = loadStore.currentLoad?.shipper_warehouse || null; /// Selected warehouse
+            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();
 		}
@@ -252,10 +254,13 @@ import { validateEmail } from '../helpers/validations';
 			company: auth.user.company,
             posted_by: auth.user._id,
             posted_by_name: formLoad.owner,
-            shipper_warehouse: locationLoadSelected.value?._id || null,
+            origin_warehouse: locationLoadSelected.value?._id || null,
+            destination_warehouse: locationDownloadSelected.value?._id || null,
             alert_list: emails.value.length > 0 ? emails.value : null
 		};
 
+        console.log(loadData);
+
         return loadData;
     }
 
@@ -268,7 +273,8 @@ import { validateEmail } from '../helpers/validations';
                 company: auth.user.company,
                 categories: formLoad.segment || null,
                 product: formLoad.terms?.length <= 0 ? null :  formLoad.terms,
-                shipper_warehouse: locationLoadSelected.value,
+                origin_warehouse: locationLoadSelected.value,
+                destination_warehouse: locationDownloadSelected.value,
             };
             if(resp) {
                 const index = loadStore.loads.findIndex((load) => load._id === resp._id);
@@ -289,7 +295,8 @@ import { validateEmail } from '../helpers/validations';
                     ...resp,
                     ...loadData,
                     categories: [loadData.categories],
-                    shipper_warehouse: locationLoadSelected.value,
+                    origin_warehouse: locationLoadSelected.value,
+                    destination_warehouse: locationDownloadSelected.value,
                 }
 
                 loadStore.loads.unshift(load);
@@ -523,88 +530,29 @@ import { validateEmail } from '../helpers/validations';
                     </div>
                     <div class="form-box">
                         <div class="form-section">
-                            <h2>{{ t('loads.addressOrigin') }}</h2>
-
-                            <div class="form-check my-4" @click="getLocations('loading')">
-                                <input class="form-check-input chekmark" type="checkbox" id="directoryOrigin" v-model="checkLocationLoad">
-                                <label class="form-check-label custom-label" for="directoryOrigin">
-                                    {{ t('loads.checkAddress') }}
-                                </label>
-                            </div>
                             <Spiner v-if="loadingLocations"/>
-                            <div class="d-flex flex-column mb-4" v-if="checkLocationLoad && !loadingLocations">
+                            <div class="d-flex flex-column mb-4" v-if="!loadingLocations">
-                                <label class="custom-label mb-2" for="locationLoad">{{ t('loads.locationsRegistered') }}:</label>
+                                <label class="custom-label mb-2" for="locationLoad">{{ t('loads.addressOrigin') }}:</label>
                                 <select 
                                     class="custom-input-light"
                                     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>
                             </div>
-                            <Custominput
+                            <AddressPreview 
-                                :label="t('loads.addressNameLoad')"
+                                v-if="origin"
-                                type="text"
+                                :address="origin" 
-                                :filled="false"
-                                name="name-location-origin"
-                                v-model:field="origin.locationName"
-                            />
-                            <Custominput
-                                :label="t('directory.address')"
-                                type="text"
-                                :filled="false"
-                                name="address-origin"
-                                v-model:field="origin.address"
-                            />
-                            <div class="mb-4 mt-3">
-                                <label class="custom-label required">{{ t('global.city') }}*</label>
-                                <Cities
-                                    v-model="origin.city" 
-                                />
-                                <span class="error-msg" v-if="submited && errors.cityOrigin">{{ errors.cityOrigin }}</span>
-                            </div>
-                            <div class="mb-4 mt-3">
-                                <label class="custom-label required">{{ t('global.state') }}*</label>
-                                <States
-                                    v-model="origin.state" 
-                                />
-                                <span class="error-msg" v-if="submited && errors.stateOrigin">{{ errors.stateOrigin }}</span>
-                            </div>
-                            <Custominput
-                                :label="t('global.country')"
-                                type="text"
-                                :filled="false"
-                                name="country-origin"
-                                v-model:field="origin.country"
-                            />
-                            <Custominput
-                                :label="t('directory.zipCode')"
-                                type="text"
-                                :filled="false"
-                                name="postalCode-origin"
-                                v-model:field="origin.postalCode"
-                            />
-                            <Custominput
-                                :label="t('global.ref')"
-                                type="text"
-                                :filled="false"
-                                name="ref-origin"
-                                v-model:field="originRef"
                             />
                         </div>
                         <div class="form-section">
-                            <h2>{{ t('loads.addressDestination') }}</h2>
-                            <div class="form-check my-4" @click="getLocations('unloading')">
-                                <input class="form-check-input chekmark" type="checkbox" id="directoryDestination" v-model="checkLocationDownload">
-                                <label class="form-check-label custom-label" for="directoryDestination">
-                                    {{ t('loads.checkAddress') }}
-                                </label>
-                            </div>
                             <Spiner v-if="loadingLocations"/>
-                            <div class="d-flex flex-column mb-4" v-if="checkLocationDownload && !loadingLocations">
+                            <div class="d-flex flex-column mb-4" v-if="!loadingLocations">
-                                <label class="custom-label mb-2" for="locationDownload">{{ t('loads.locationsRegistered') }}:</label>
+                                <label class="custom-label mb-2" for="locationDownload">{{ t('loads.addressDestination') }}:</label>
                                 <select 
                                     class="custom-input-light"
                                     name="locationDownload" 
@@ -615,54 +563,9 @@ import { validateEmail } from '../helpers/validations';
                                     <option v-for="loc in companyStore.locationsDowload" :value="loc">{{ loc.branch_name }}</option>
                                 </select>
                             </div>
-                            <Custominput
+                            <AddressPreview 
-                                :label="t('loads.addressNameDownload')"
+                                v-if="destination"
-                                type="text"
+                                :address="destination" 
-                                :filled="false"
-                                name="name-location-destination"
-                                v-model:field="destination.locationName"
-                            />
-                            <Custominput
-                                :label="t('directory.address')"
-                                type="text"
-                                :filled="false"
-                                name="address-destination"
-                                v-model:field="destination.address"
-                            />
-                            <div class="mb-4 mt-3">
-                                <label class="custom-label required">{{t('global.city')}}*</label>
-                                <Cities
-                                    v-model="destination.city" 
-                                />
-                                <span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span>
-                            </div>
-                            <div class="mb-4 mt-3">
-                                <label class="custom-label required">{{t('global.state')}}*</label>
-                                <States
-                                    v-model="destination.state" 
-                                />
-                                <span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span>
-                            </div>
-                            <Custominput
-                                :label="t('global.country')"
-                                type="text"
-                                :filled="false"
-                                name="country-destination"
-                                v-model:field="destination.country"
-                            />
-                            <Custominput
-                                :label="t('directory.zipCode')"
-                                type="text"
-                                :filled="false"
-                                name="postalCode-destination"
-                                v-model:field="destination.postalCode"
-                            />
-                            <Custominput
-                                :label="t('global.ref')"
-                                type="text"
-                                :filled="false"
-                                name="ref-destination"
-                                v-model:field="destinationRef"
                             />
                         </div>
                     </div>