add: post load

src/components/CardLoad.vue

@@ -92,8 +92,25 @@
     <div class="card-fixed card-load mt-4">
         <div class="row">
             <div class="col-lg-6 col-sm-12">
-                <p><span>Origen:</span> {{ load.origin.company_name }}, {{ load.origin_formatted_address }}</p>
+                <p>
-                <p><span>Destino:</span> {{ load.destination.company_name }}, {{ load.destination_formatted_address }}</p>
+                    <span>Origen: </span> 
+                    <template v-if="load.origin.company_name"> {{ load.origin.company_name }}, </template> 
+                    <template v-if="load.origin.street_address1">{{ load.origin.street_address1 }}, </template>
+                    <template v-if="load.origin.city">{{ load.origin.city }}, </template>
+                    <template v-if="load.origin.state">{{ load.origin.state }}, </template>
+                    <template v-if="load.origin.country">{{ load.origin.country }}, </template>
+                    <template v-if="load.origin.zipcode">{{ load.origin.zipcode }} </template>
+                </p>
+                <p>
+                    <span>Destino: </span> 
+                    <template v-if="load.destination.company_name"> {{ load.destination.company_name }}, </template> 
+                    <template v-if="load.destination.street_address1">{{ load.destination.street_address1 }}, </template>
+                    <template v-if="load.destination.city">{{ load.destination.city }}, </template>
+                    <template v-if="load.destination.state">{{ load.destination.state }}, </template>
+                    <template v-if="load.destination.country">{{ load.destination.country }}, </template>
+                    <template v-if="load.destination.zipcode">{{ load.destination.zipcode }} </template>
+                </p>
+                
             </div>
             <div class="col-lg-6 col-sm-12">
                 <p><span>Status de la publicación:</span> <span>{{ getStatusPublished(load) }}</span></p>

src/components/FormLoadModal.vue

@@ -12,8 +12,10 @@
     import useDirectionsRender from '../composables/useDirectionRender';
     import { useAuthStore } from '../stores/auth';
     import Swal from 'sweetalert2';
+    import { useNotificationsStore } from '../stores/notifications';
 
     const loadStore = useLoadsStore();
+    const notyStore = useNotificationsStore();
     const auth = useAuthStore();
     const windowWidth = ref(window.innerWidth);
     const zoom = ref(6);
@@ -23,7 +25,18 @@
     const startLocation = ref(null);
     const endLocation = ref(null);
     const isLoading = ref(false);
+    const submited = ref(false);
     const { geocodeAddress } = useDirectionsRender();
+    const formRef = ref(null);
+    const errors = ref({
+        segment: null,
+        product: null,
+        truckType: null,
+        cityOrigin: null,
+        stateOrigin: null,
+        cityDestination: null,
+        stateDestination: null,
+    });
 
     
     const clearLoad = () => {
@@ -85,12 +98,12 @@
 		}
 
         watch(origin, async() => {
-            console.log(origin);
+            // 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);
-                console.log('Origin:')
+                // console.log('Origin:')
-                console.log(originCoords.value)
+                // console.log(originCoords.value)
             }
         })
 
@@ -98,8 +111,8 @@
             if(destination.address && destination.city && destination.state) {
                 endLocation.value = destination.address + ', ' + destination.city.city_name + ', ' + destination.state.state_name + ', ' + destination.country + ', ' +destination.postalCode;
                 destinationCoords.value = await geocodeAddress(endLocation.value);
-                console.log('Destination:')
+                // console.log('Destination:')
-                console.log(destinationCoords.value);
+                // console.log(destinationCoords.value);
             }
         })
     })
@@ -154,7 +167,7 @@
 			est_unloading_date : formLoad.dateDownload,
 			notes : formLoad.notes,
 			weight : formLoad.weight,
-			product: formLoad.terms || null,
+			product: formLoad.terms.length <= 0 ? null : formLoad.terms,
 			categories: formLoad.segment || null,
 			origin:{
                 company_name : origin.locationName,
@@ -190,13 +203,12 @@
         isLoading.value = true;
         if(loadStore.currentLoad){
             const resp = await loadStore.updateLoad(loadStore.currentLoad._id, loadData);
-            console.log({resp});
             isLoading.value = false;
             if(resp) {
                 const index = loadStore.loads.findIndex((load) => load._id === resp._id);
                 loadStore.loads[index] = {
                     ...loadStore.loads[index],
-                    resp
+                    ...resp
                 };
                 return 'success';
             } else {
@@ -206,7 +218,10 @@
             const resp = await loadStore.saveLoad(loadData);
             isLoading.value = false;
             if(resp) {
-                loadStore.loads.unshift(resp);
+                loadStore.loads.push({
+                    ...resp,
+                    ...loadData
+                });
                 return 'success';
             } else {
                 return 'error';
@@ -215,12 +230,12 @@
     }
 
     const handleSave = async() => {
-        
+        submited.value = false;
         const loadData = setLoadData();
-
-        // console.log('loadData: ', loadData);
         const resp = await updateLoad(loadData);
         if(resp === 'success') {
+            notyStore.show = 'true';
+            notyStore.text = 'Carga guardada!'
             document.getElementById('btnCloseFormLoadModal').click();
         } else {
             Swal.fire({
@@ -231,7 +246,21 @@
         }
     }
 
+    const validations = () => {
+        errors.value = {
+            segment: formLoad.segment.length <= 0 ? 'Seleccione segmento' : null,
+            product: formLoad.terms.length <= 0 ? 'Seleccione producto' : null,
+            truckType: formLoad.truckType.length <= 0 ? 'Seleccione tipo de transporte' : null,
+            cityOrigin: origin.city.length <= 0 ? 'Seleccione ciudad' : null,
+            stateOrigin: origin.state.length <= 0 ? 'Seleccione estado' : null,
+            cityDestination: destination.city.length <= 0 ? 'Seleccione ciudad' : null,
+            stateDestination: destination.state.length <= 0 ? 'Seleccione estado' : null,
+        };
+    }
+
+
     const handlePostLoad = async() => {
+        submited.value = true;
         let loadData = setLoadData();
 
         loadData = {
@@ -240,16 +269,31 @@
             load_status: "Published"
         }
 
-        const resp = await updateLoad(loadData);
+        setTimeout(async() => {
-        if(resp === 'success') {
+            const formValid = formRef.value.checkValidity();
-            document.getElementById('btnCloseFormLoadModal').click();
+            validations()
-        } else {
+            console.log(formValid);
-            Swal.fire({
+            if(formValid){
-                title: "Error!",
+                const hasError = Object.values(errors.value).some(val => val != null);
-                text: "No se pudo publicar carga, intente más tarde",
+                console.log(hasError);
-                icon: "error"
+                if(!hasError) {
-            });
+                    const resp = await updateLoad(loadData);
-        }
+                    if(resp === 'success') {
+                        notyStore.show = 'true';
+                        notyStore.text = 'Carga publicada!'
+                        document.getElementById('btnCloseFormLoadModal').click();
+                    } else {
+                        Swal.fire({
+                            title: "Error!",
+                            text: "No se pudo publicar carga, intente más tarde",
+                            icon: "error"
+                        });
+                    }
+                } else {
+                    console.log('Hay errores');
+                }
+            }
+        }, 200)
         
     }
 </script>
@@ -271,7 +315,7 @@
                 </button>
             </div>
             <div class="modal-body">
-                <form class="form-content">
+                <form class="form-content" ref="formRef">
                     <div class="form-box">
                         <div class="form-section">
                             <div class="mb-4 mt-3">
@@ -279,18 +323,22 @@
                                 <Segments
                                     v-model="formLoad.segment" 
                                 />
+                                <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span>
                             </div>
                             <div class="mb-4 mt-3">
                                 <label class="custom-label">Tipo de transporte*</label>
                                 <TruckTypes
                                     v-model="formLoad.truckType" 
                                 />
+                                <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span>
                             </div>
                             <Custominput
                                 label="Fecha de carga*"
                                 type="date"
                                 :filled="false"
                                 name="date-load"
+                                :required="submited ? true : false"
+                                :error="(submited && !formLoad.dateLoad) ? 'Fecha es requerida' : null"
                                 v-model:field="formLoad.dateLoad"
                             />
                             <Custominput
@@ -298,6 +346,8 @@
                                 type="date"
                                 :filled="false"
                                 name="date-download"
+                                :required="submited ? true : false"
+                                :error="(submited && !formLoad.dateDownload) ? 'Fecha es requerida' : null"
                                 v-model:field="formLoad.dateDownload"
                             />
                             <Custominput
@@ -305,6 +355,8 @@
                                 type="number"
                                 :filled="false"
                                 name="weight"
+                                :required="submited ? true : false"
+                                :error="(submited && !formLoad.weight) ? 'Ingrese peso en KG' : null"
                                 v-model:field="formLoad.weight"
                             />
                         </div>
@@ -314,6 +366,7 @@
                                 <Products
                                     v-model="formLoad.terms" 
                                 />
+                                <span class="error-msg" v-if="submited && errors.product">{{ errors.product }}</span>
                             </div>
                             <Custominput
                                 label="Precio*"
@@ -321,6 +374,8 @@
                                 :filled="false"
                                 name="price"
                                 v-model:field="formLoad.price"
+                                :required="submited ? true : false"
+                                :error="(submited && !formLoad.price) ? 'Ingrese precio en MXN' : null"
                             />
                             <Custominput
                                 label="Notas"
@@ -348,6 +403,8 @@
                                 :filled="false"
                                 name="name-location-origin"
                                 v-model:field="origin.locationName"
+                                :required="submited ? true : false"
+                                :error="(submited && !origin.locationName) ? 'Ingrese nombre' : null"
                             />
                             <Custominput
                                 label="Dirección*"
@@ -355,18 +412,22 @@
                                 :filled="false"
                                 name="address-origin"
                                 v-model:field="origin.address"
+                                :required="submited ? true : false"
+                                :error="(submited && !origin.address) ? 'Ingrese dirección' : null"
                             />
                             <div class="mb-4 mt-3">
                                 <label class="custom-label">Ciudad*</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">Estado*</label>
                                 <States
                                     v-model="origin.state" 
                                 />
+                                <span class="error-msg" v-if="submited && errors.stateOrigin">{{ errors.stateOrigin }}</span>
                             </div>
                             <Custominput
                                 label="País*"
@@ -374,6 +435,8 @@
                                 :filled="false"
                                 name="country-origin"
                                 v-model:field="origin.country"
+                                :required="submited ? true : false"
+                                :error="(submited && !origin.country) ? 'Ingrese país' : null"
                             />
                             <Custominput
                                 label="Código Postal*"
@@ -381,6 +444,8 @@
                                 :filled="false"
                                 name="postalCode-origin"
                                 v-model:field="origin.postalCode"
+                                :required="submited ? true : false"
+                                :error="(submited && !origin.postalCode) ? 'Ingrese Código postal' : null"
                             />
                             <Custominput
                                 label="Punto de referencia"
@@ -398,6 +463,8 @@
                                 :filled="false"
                                 name="name-location-destination"
                                 v-model:field="destination.locationName"
+                                :required="submited ? true : false"
+                                :error="(submited && !destination.locationName) ? 'Ingrese nombre' : null"
                             />
                             <Custominput
                                 label="Dirección"
@@ -405,18 +472,22 @@
                                 :filled="false"
                                 name="address-destination"
                                 v-model:field="destination.address"
+                                :required="submited ? true : false"
+                                :error="(submited && !destination.address) ? 'Ingrese dirección' : null"
                             />
                             <div class="mb-4 mt-3">
                                 <label class="custom-label">Ciudad*</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">Estado*</label>
                                 <States
                                     v-model="destination.state" 
                                 />
+                                <span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span>
                             </div>
                             <Custominput
                                 label="País*"
@@ -424,6 +495,8 @@
                                 :filled="false"
                                 name="country-destination"
                                 v-model:field="destination.country"
+                                :required="submited ? true : false"
+                                :error="(submited && !destination.country) ? 'Ingrese país' : null"
                             />
                             <Custominput
                                 label="Código Postal*"
@@ -431,6 +504,8 @@
                                 :filled="false"
                                 name="postalCode-destination"
                                 v-model:field="destination.postalCode"
+                                :required="submited ? true : false"
+                                :error="(submited && !destination.postalCode) ? 'Ingrese código postal' : null"
                             />
                             <Custominput
                                 label="Punto de referencia"
@@ -483,9 +558,9 @@
                         @click="handleSave"
                     >Guardar</button>
                     <button 
-                        type="button" 
+                        type="submit" 
+                        @click.prevent="handlePostLoad"
                         class="btn-primary-sm radius-sm" 
-                        @click="handlePostLoad"
                     >Publicar</button>
                 </div>
             </div>
@@ -522,6 +597,12 @@
         justify-content: center;
     }
 
+    .error-msg {
+        color: red;
+        font-size: 12px;
+        font-weight: 300;
+    }
+
     .btns-footer {
         display: flex;
         gap: 1rem;

src/components/ui/CustomInput.vue

@@ -28,6 +28,13 @@
         helpText: {
             type: String,
             default: '',
+        },
+        required: {
+            type: Boolean,
+            default: false,
+        },
+        error: {
+            type: String,
         }
     })
 
@@ -47,8 +54,10 @@
             :value="field"
             :disabled="readonly"
             :readonly="readonly"
+            :required="required"
             @input="$event => $emit('update:field', $event.target.value)">
         <span class="help" v-if="helpText.length > 0">{{ helpText }}</span>
+        <span class="error-msg" v-if="error">{{ error }}</span>
     </div>
 </template>
 
@@ -58,4 +67,10 @@
         font-weight: 300;
         color: rgb(108, 92, 92);
     }
+
+    .error-msg {
+        color: red;
+        font-size: 12px;
+        font-weight: 300;
+    }
 </style>

src/stores/loads.js

@@ -23,7 +23,6 @@ export const useLoadsStore = defineStore('load', () => {
         try {
             const endpoint = `/loads?company=${companyid}&${filterStr}`;
             const {data} = await api.get(endpoint);
-            // console.log(data);
             loads.value = data.data;
         } catch (error) {
             loads.value = [];
@@ -47,7 +46,6 @@ export const useLoadsStore = defineStore('load', () => {
         try {
             const endpoint = `/loads/`;
             const {data} = await api.post(endpoint, load);
-            // console.log(data);
             return data;
         } catch (error) {
             console.log(error);
@@ -96,7 +94,6 @@ export const useLoadsStore = defineStore('load', () => {
             const endpoint = `/loads/${loadId}`;
             console.log(endpoint);
             const {data} = await api.delete(endpoint);
-            console.log(data);
             return data;
         } catch (error) {
             console.log(error);
@@ -108,7 +105,6 @@ export const useLoadsStore = defineStore('load', () => {
         try {
             const endpoint = `/loads/${filterQuery}`;
             const {data} = await api.get(endpoint);
-            console.log(data);
             return data;
         } catch (error) {
             console.log(error);