Merge branch 'migrate-alex' into 'master'

Migrate alex

See merge request jcruzbaasworkspace/enruta/webeta!11

src/components/CardCompany.vue

@@ -9,15 +9,6 @@
         }
     });
 
-
-    /*
-        - Ocultar el RFC y Afilizaicon de la empresa y en todos lados, incluso en la aplicación
-        - Editar ocultar el form de ubicicacion
-        - Form de directorio agregar un campo para tipo de ubicacion
-        - Agregar otro page para cambiar el correo y contraseña
-        - Quitar telefono 2, segmento y tipo de transporte en usuarios form
-        - Se va a cambiar el endpint para obtener las ubicaciones de usuarios form, vehiculo
-    */
 </script>
 
 <template>

src/components/CardUser.vue

@@ -70,8 +70,9 @@ import { useAuthStore } from '../stores/auth';
             <div class="col-lg-6 col-sm-12">
                 <p><span>Nombre de usuario:</span>  {{user.first_name}} {{user.last_name}}</p>
                 <p v-if="user.employee_id"><span class="font-weight-bold mr-1">Número de registro:</span> {{user.employee_id}}</p>
+                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
                 <p><span>Teléfono 1: </span>{{user.phone}}</p>
-                <p><span>Teléfono 2: </span>{{user.phone2}}</p>
+                <!-- <p><span>Teléfono 2: </span>{{user.phone2}}</p> -->
                 <p><span>Email: </span>{{user.email}}</p>
             </div>
             <div class="col-lg-6 col-sm-12" v-if="readonly">
@@ -92,7 +93,6 @@ import { useAuthStore } from '../stores/auth';
                 <p ><span>Información adicional del usuario: </span> {{user.user_description}}</p>
                 <p ><span>Miembro desde: </span>{{getDateMonthDay(user.createdAt)}}</p>
                 <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
-                <p><span>Rol del usuario: </span>{{user.job_role}}</p>
             </div>
         </div>
         <div class="btn-row" v-if="readonly === false && (authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager')">

src/components/CreateLocationModal.vue

@@ -34,6 +34,7 @@
 	    categories: [],
 	    city: "",
 	    state: "",
+        location_type: "",
 	    truck_type: [],
         address: "",
         description: "",
@@ -45,6 +46,7 @@
         address: null,
         city: null,
         state: null,
+        location_type: null,
         zipcode: null
     })
 
@@ -135,6 +137,7 @@
             address: locationForm.address.length <= 4 ? 'Ingrese dirección valida' : null,
             city: locationForm.city.length <= 0 ? 'Seleccione municipio' : null,
             state: locationForm.state.length < 0 ? 'Seleccione estado' : null,
+            location_type: locationForm.location_type.length <= 0 ? 'Seleccione el tipo de directorio' : null,
             zipcode: locationForm.zipcode.length < 5 ? 'Ingrese código postal valido' : null,
         };
     }
@@ -154,7 +157,7 @@
                         <span aria-hidden="true">&times;</span>
                     </button>
                 </div>
-                <div class="modal-body form-content">
+                <div class="modal-body form-content px-5">
                     <form @submit.prevent="saveLocation" autocomplete="off" method="post" ref="formRef">
                         <CustomInput
                             label="Nombre de la locación*"
@@ -184,6 +187,22 @@
                             />
                             <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
                         </div>
+                        <div class="d-flex flex-column mb-4">
+                            <label class="custom-label" for="role">Tipo de directorio:</label>
+                            <select 
+                                class="custom-input-light"
+                                name="type" 
+                                id="type" 
+                                v-model="locationForm.location_type"
+                            >
+                                <option disabled value="">-- Seleccionar --</option>
+                                <!-- <option value="owner">Dueño</option> -->
+                                <option value="load">Carga</option>
+                                <option value="download">Descarga</option>
+                                <option value="both">Ambas</option>
+                            </select>
+                            <span class="error-msg" v-if="errors.location_type">{{ errors.location_type }}</span>
+                        </div>
                         <CustomInput
                             label="Código postal"
                             name="zipcode"

src/components/CreateUserModal.vue

@@ -1,8 +1,6 @@
 <script setup>
     import { computed, onMounted, reactive, ref } from 'vue';
     import CustomInput from './ui/CustomInput.vue';
-    import TruckTypes from './ui/TruckTypes.vue';
-    import Segments from './ui/Segments.vue';
     import States from './ui/States.vue';
     import Cities from './ui/Cities.vue';
     import Spiner from './ui/Spiner.vue';
@@ -18,29 +16,6 @@
         }
     });
 
-    /*
-        Usuarios: Staff solo puede ver los usuarios. 
-
-        Ubicaciones: Staff puede hacer todas las acciones
-
-        Cargas: Staff: solo puede elimianr y editar sus propias cargas, y puede crear cargas  
-                Gerente: de todos
-                Staff puede aceptar ofertas de las cargas de sus demas compañeros
-
-        Calendario: Gerente, Staff, puede ver sus eventos propios y las de la empresa,
-
-        Vehiculos: Staff: solo puede elimianr y editar sus propias vehiculos, y puede crear vehiculo  
-                Gerente: de todos
-                Staff puede asignar conductores al vehiculo, puede igual cambiar el estado del vehiculo
-
-        Ofertas aceptadas: tiene todos los privilegios de un gerente.
-
-        Calculadora: El staff tiene todo los privigelios
-
-        Empresa: Manager 
-        
-    */
-
     onMounted(() => {
         if(props.user) {
             console.log(props.user)
@@ -48,18 +23,18 @@
             userForm.last_name = props.user.last_name;
             userForm.email = props.user.email;
             userForm.phone = props.user.phone;
-            userForm.phone2 = props.user.phone2;
+            // userForm.phone2 = props.user.phone2;
             userForm.job_role = props.user.job_role;
-            userForm.categories = props.user.categories;
+            // userForm.categories = props.user.categories;
             userForm.user_city = props.user.user_city?.map(m =>{
 				return { city_name: m };
 			});
             userForm.user_state = props.user.user_state?.map(m =>{
 				return { state_name:m };
 			});
-            userForm.truck_type = props.user.truck_type?.map(m =>{
+            // userForm.truck_type = props.user.truck_type?.map(m =>{
-				return { meta_value:m };
+			// 	return { meta_value:m };
-			});
+			// });
             userForm.user_description = props.user.user_description;
         } else {
             Object.assign(userForm, initState);
@@ -74,12 +49,12 @@
 		last_name: '',
 		email: '',
 		phone: '',
-		phone2: '',
+		// phone2: '',
 		job_role: '',
-		categories: [],
+		// categories: [],
 		user_city: [],
 		user_state: [],
-		truck_type: [],
+		// truck_type: [],
 		user_description: '',
     };
 
@@ -113,21 +88,20 @@
 				last_name: userForm.last_name,
 				email: userForm.email,
 				phone: userForm.phone,
-				phone2: userForm.phone2,
+				// phone2: userForm.phone2,
 				job_role: userForm.job_role,
 				permissions: authStore.user.permissions,
 				company: authStore.user.company,
-				categories: userForm.categories?.length <= 0 ? null : userForm.categories?.map((e) => e._id),
+				// categories: userForm.categories?.length <= 0 ? null : userForm.categories?.map((e) => e._id),
 				user_city: userForm.user_city?.length <= 0 ? null : userForm.user_city?.map((e) => e.city_name),
 				user_state: userForm.user_state?.length <= 0 ? null : userForm.user_state?.map((e) => e.state_name),
-				truck_type: userForm.truck_type?.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
+				// truck_type: userForm.truck_type?.length <= 0 ? null : userForm.truck_type?.map((e) => e.meta_value),
 				user_description: userForm.user_description
 			}
 
-            console.log(userData);
 
             const dataUpdate = {
-                categories: userForm.categories,
+                // categories: userForm.categories,
                 name: userForm.name + ' ' + userForm.last_name
             }
 
@@ -200,7 +174,7 @@
                             :error="errors.last_name"
                         />
                         <CustomInput
-                            label="Teléfono 1*"
+                            label="Teléfono*"
                             name="phone1"
                             type="number"
                             v-model:field="userForm.phone"
@@ -233,29 +207,26 @@
                                 <option v-if="authStore.user?.permissions === 'role_carrier'" value="driver">Conductor</option>
                             </select>
                         </div>
-                        <div class="mb-4 mt-3">
+                        <!-- <div class="mb-4 mt-3">
                             <label class="custom-label">Segmento</label>
                             <Segments
                                 v-model="userForm.categories" 
                                 :multiple="true"
                             />
-                            <!-- <span class="error-msg" v-if="submited && errors.segment">{{ errors.segment }}</span> -->
+                        </div> -->
-                        </div>
+                        <!-- <div class="mb-4 mt-3">
-                        <div class="mb-4 mt-3">
                             <label class="custom-label">Tipo de transporte que utiliza</label>
                             <TruckTypes
                                 v-model="userForm.truck_type" 
                                 :multiple="true"
                             />
-                            <!-- <span class="error-msg" v-if="submited && errors.truckType">{{ errors.truckType }}</span> -->
+                        </div> -->
-                        </div>
                         <div class="mb-4 mt-3">
                             <label class="custom-label">Locaciones de carga por estado</label>
                             <States
                                 v-model="userForm.user_state" 
                                 :multiple="true"
                             />
-                            <!-- <span class="error-msg" v-if="submited && errors.stateDestination">{{ errors.stateDestination }}</span> -->
                         </div>
                         <div class="mb-4 mt-3">
                             <label class="custom-label">Locaciones de carga por municipio</label>
@@ -263,7 +234,6 @@
                                 v-model="userForm.user_city" 
                                 :multiple="true"
                             />
-                            <!-- <span class="error-msg" v-if="submited && errors.cityDestination">{{ errors.cityDestination }}</span> -->
                         </div>
                         <div class="d-flex flex-column">
                             <label class="custom-label" for="description">Información adicional del usuario:</label>
@@ -275,6 +245,12 @@
                                 v-model="userForm.user_description"
                             ></textarea>
                         </div>
+                        <div class="box-info" v-if="!props.user">
+                            <div>
+                                <i class="fa-solid fa-circle-info info"></i>
+                            </div>
+                            <span>Al crear un nuevo usuario, informa al beneficiario de la cuenta, que debe utilizar su correo electrónico para establecer una contraseña en la sección <span class="font-bold">Olvidé mi contraseña</span> y así poder iniciar sesión.</span>
+                        </div>
                         <div class="mt-4 text-center">
                             <Spiner v-if="loading"/>
                             <button 
@@ -300,4 +276,19 @@
         margin: 0 auto;
         width: 80%;
     }
+
+    .box-info {
+        margin-top: 20px;
+        align-items: center;
+        background-color: aqua;
+        display: flex;
+        padding: 16px 24px;
+        border-radius: 13px;
+        font-size: 1rem;
+    }
+
+    .info {
+        font-size: 32px;
+        margin-right: 1rem;
+    }
 </style>

src/components/FormChangeEmail.vue

@@ -0,0 +1,198 @@
+<script setup>
+    import {reactive, ref} from 'vue';
+    import CustomInput from './ui/CustomInput.vue';
+    import Spiner from './ui/Spiner.vue';
+    import NotificationBadge from './ui/NotificationBadge.vue';
+    import { validateEmail } from '../helpers/validations';
+    import Swal from 'sweetalert2';
+    import { useAuthStore } from '../stores/auth';
+import { useNotificationsStore } from '../stores/notifications';
+import { useRouter } from 'vue-router';
+
+    const emailForm = reactive({
+        email: '',
+        email2: '',
+    })
+
+    const loading = ref(false)
+    const msgError = ref('');
+    const msgSuccess = ref('');
+    const auth = useAuthStore();
+    const notifications = useNotificationsStore();
+    const router = useRouter();
+
+    const hangleSave = () => {
+        msgError.value = '';
+        msgSuccess.value = '';
+        let resp = validations();
+        if(resp !== '') {
+            msgError.value = resp;
+            clearMessages();
+            return;
+        } else {
+            Swal.fire({
+                title: '¿Estás seguro de cambiar el correo electrónico?',
+                // text: '',
+                html: '<span>Al confirmar esta acción, cerraremos tu sesión actual para actualizar tu correo electrónico. Serás redirigido a la página de inicio de sesión. Recuerda que tu contraseña se restablecerá. Necesitaras recuperarla, puedes hacerlo en la sección <span class="font-bold">¿Olvidaste tu contraseña?</span>.</span>',
+                icon: 'warning',
+                showCancelButton: true,
+                cancelButtonColor: "#d33",
+                confirmButtonText: 'Confirmar',
+                cancelButtonText: 'Cancelar',
+            }).then( async(result) => {
+                if(result.isConfirmed) {
+                    Swal.fire({
+                        title: 'Por favor espere!',
+                        html: 'Guardando cambios...',
+                        allowOutsideClick: false,
+                        didOpen: () => {
+                            Swal.showLoading()
+                        },
+                    });
+
+                    const userData = {
+                        "email" : emailForm.email,
+                    };
+                    console.log(userData);
+                    loading.value = true;
+                    const response = await auth.updateProfile(userData)
+                    loading.value = false;
+                    if (response.msg !== 'success') {
+                        msgError.value = response.msg;
+                        clearMessages();
+                    } else {
+                        clearMessages();
+                        notifications.$patch({
+                            text : 'Correo electrónico se ha cambiando exitosamente!',
+                            show : true,
+                            error: false
+                        });
+                        auth.logout();
+                        router.push({name: 'login'});
+                    }
+                    Swal.close()
+
+                }
+
+            });
+        }
+    }
+
+    const validations = () => {
+        if(emailForm.email.trim() == '') {
+            return 'Todos los campos con obligatorios';
+        } else if (!validateEmail(emailForm.email)) {
+            return 'Correo electrónico no es valido'
+        } else if (emailForm.email !== emailForm.email2) {
+            return 'Los correos electrónico no coinciden'
+        } else {
+            return '';
+        }
+   }
+
+   const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+            msgSuccess.value = '';
+        }, 3000);
+   }
+</script>
+
+<template>
+    <form 
+        @submit.prevent="hangleSave" 
+        autocomplete="off" 
+        method="post" 
+        ref="formRef1"
+    >
+        <br/>
+        <h3 class="title">Cambiar correo electrónico</h3>
+        <br/>
+        <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+        <NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
+        <CustomInput
+            label=" Nuevo Correo electrónico*:"
+            type="email"
+            name="email"
+            :filled="false"
+            v-model:field="emailForm.email"
+        />
+        <CustomInput
+            label="Confirmar Correo electrónico*:"
+            type="email"
+            name="email2"
+            :step="1"
+            :filled="false"
+            v-model:field="emailForm.email2"
+        />
+        <div class="warning-info">
+            <div>
+                <i class="fa-solid fa-triangle-exclamation warning"></i>
+            </div>
+            <span>Al confirmar esta acción, cerraremos tu sesión actual para actualizar tu correo electrónico. Serás redirigido a la página de inicio de sesión. Recuerda que tu contraseña se restablecerá. Necesitaras recuperarla, puedes hacerlo en la sección <span class="font-bold">¿Olvidaste tu contraseña?</span>.</span>
+        </div>
+        <div class="mt-5 text-center">
+            <Spiner v-if="loading"/>
+            <button 
+                v-else
+                class="btn btn-dark btn-block" type="submit">Guardar</button>
+        </div> 
+    </form>
+</template>
+
+<style scoped>
+     /* .box-back-btn {
+        display: flex;
+        justify-content: center;
+        padding: 16px 0px;
+    } */
+
+    .warning-info {
+        display: flex;
+        padding: 16px;
+        background: rgb(223, 223, 161);
+        font-size: 0.9rem;
+        justify-items: center;
+        align-items: center;
+        font-weight: 400;
+        color: rgb(86, 57, 57);
+        border-radius: 13px;
+    }
+
+    .warning {
+        font-size: 33px;
+        margin-right: 12px;
+        /* color: white; */
+    }
+
+    .btn-block {
+        width: 80%;
+    }
+
+    @media (max-width: 1024px) {
+        .form-content {
+            margin: 24px 16px;
+            background-color: #FFF;
+            padding: 32px 32px;
+            border-radius: 13px;
+        }
+    }
+
+    @media (max-width: 568px) {
+        .form-content {
+            margin: 24px 8px;
+            background-color: #FFF;
+            padding: 20px 20px;
+            border-radius: 13px;
+        }
+
+        .phone {
+            width: 100%;
+        }
+
+        .content-phone{
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>

src/components/FormChangePassword.vue

@@ -0,0 +1,265 @@
+<script setup>
+    import {reactive, ref} from 'vue';
+    import CustomInput from './ui/CustomInput.vue';
+    import Spiner from './ui/Spiner.vue';
+    import NotificationBadge from './ui/NotificationBadge.vue';
+    import { recoveryPassword, recoveryPasswordConfirm, regiter } from '../services/auth';
+    import { useAuthStore } from '../stores/auth';
+    import { useRouter } from 'vue-router';
+    import { useNotificationsStore } from '../stores/notifications';
+    
+    const pwdForm = reactive({
+        pwd: '',
+        pwd2: '',
+        code: '',
+        checksum: '',
+    })
+
+    const step = ref(1);
+
+    const auth = useAuthStore();
+    const router = useRouter();
+    const notifications = useNotificationsStore()
+
+    const loading = ref(false)
+    const msgError = ref('');
+    const msgSuccess = ref('');
+
+    const hangleSave = async() => {
+        msgError.value = '';
+        msgSuccess.value = '';
+        let resp = validations();
+        if(resp !== '') {
+            msgError.value = resp;
+            clearMessages();
+            return;
+        } else {
+            loading.value = true;
+            msgError.value = '';
+            const data = {
+                email: auth.user.email,
+                password: pwdForm.pwd
+            }
+            const result = await recoveryPassword(data);
+            if(result.msg === 'success' && result.data !== null) {
+                msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
+                pwdForm.checksum = result.data.checksum;
+                step.value = 2;
+                clearMessages();
+            } else {
+                msgError.value = result.msg;
+                clearMessages();
+            }
+            loading.value = false;
+        }
+    }
+
+    const handleConfirmChange = async() => {
+        msgError.value = '';
+        msgSuccess.value = '';
+        if(pwdForm.code.length < 6) {
+            msgError.value = 'Ingresa código valido';
+            clearMessages();
+            return;
+        } else {
+            loading.value = true;
+            msgError.value = '';
+            const data = {
+                email: auth.user.email,
+                password: pwdForm.pwd,
+                otp: pwdForm.code,
+                checksum: pwdForm.checksum
+            }
+            const result = await recoveryPasswordConfirm(data);
+            // console.log(result);
+            if(result.msg === 'success' && result.data !== null){
+                Object.assign(pwdForm, {
+                    pwd: '',
+                    retryPwd: '',
+                    code: '',
+                    checksum: '',
+                });
+                clearMessages();
+                notifications.$patch({
+                    text : 'Contraseña se ha cambiando exitosamente!',
+                    show : true,
+                    error: false
+                });
+                auth.logout();
+                router.push({name: 'login'});
+            } else {
+                msgError.value = result.msg;
+               clearMessages()
+            }
+            loading.value = false;
+        }
+    }
+
+    const resendCode = async() => {
+        // loading.value = true;
+        // const data = {
+        //     email: pwdForm.email,
+        //     password: pwdForm.pwd
+        // }
+        // const result = await regiter(data);
+        // if(result.msg === 'success' && result.data !== null) {
+        //     msgSuccess.value = 'Te enviamos un código al correo, ingresado!';
+        //     checksum.value = result.data.checksum;
+        //     clearMessages();
+        // } else {
+        //     msgError.value = result.msg;
+        //     clearMessages();
+        // }
+        // loading.value = false;
+   }
+
+    const handleBack = (val) => {
+        step.value = val;
+   }
+
+    const validations = () => {
+        const pass = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/;
+
+        if(!pass.test(pwdForm.pwd)) {
+            return 'Contraseña poco segura';
+        } else if (pwdForm.pwd !== pwdForm.pwd2) {
+            return 'Las contraseñas no coinciden';
+        } else {
+            return '';
+        }
+   }
+
+   const clearMessages = () => {
+        setTimeout(() => {
+            msgError.value = '';
+            msgSuccess.value = '';
+        }, 3000);
+   }
+</script>
+
+<template>
+    <form 
+        @submit.prevent="hangleSave" 
+        autocomplete="off" 
+        method="post" 
+        ref="formRef1"
+        v-if="step === 1"
+    >
+        <br/>   
+        <h3 class="title">Cambiar contraseña</h3>
+        <br/>
+        <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+        <NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
+        <CustomInput
+            label=" Nueva contraseña*:"
+            type="password"
+            name="pwd"
+            :filled="false"
+            v-model:field="pwdForm.pwd"
+            help-text="La Contraseña debe ser mínimo 8 caracteres, al menos una mayúscula, al menos una minúscula, y un digito."
+        />
+        <CustomInput
+            label="Confirme contraseña*:"
+            type="password"
+            name="pwd2"
+            :step="1"
+            :filled="false"
+            v-model:field="pwdForm.pwd2"
+        />
+        <div class="warning-info">
+            <div><i class="fa-solid fa-triangle-exclamation warning"></i></div>
+            Esta acción cerrara su sesión actual y debera volver a iniciar sesión con su nueva contraseña
+        </div>
+        <div class="mt-5 text-center">
+            <Spiner v-if="loading"/>
+            <button 
+                v-else
+                class="btn btn-dark btn-block" type="submit">Continuar</button>
+        </div> 
+    </form>
+    <form v-if="step === 2" @submit.prevent="handleConfirmChange" class="mx-5">
+        <div class="d-flex justify-content-center align-items-center mb-4 mt-4">
+            <a  
+                @click="handleBack(1)"
+                class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
+        </div>
+        <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
+        <NotificationBadge :msg="msgSuccess" :is-error="false" v-if="msgSuccess != ''"/>
+        <p class="help-info">Te enviamos un código de verificación al correo electrónico, ingresalo para confirmar la recuperacion de contraseña. No olvides revisar en la carpeta spam</p>
+        <CustomInput 
+            label="Ingresa el código"
+            name="code"
+            :filled="false"
+            type="text"
+            v-model:field="pwdForm.code"
+        />
+        <!-- <div v-if="!loading" class="d-flex justify-content-center align-items-center mt-4">
+            <a  
+                @click="resendCode()"
+                class="btn-text ms-2"><i class="fa-solid fa-rotate-right"></i> Reenviar código</a>
+        </div> -->
+        <div class="mt-5 text-center">
+            <Spiner v-if="loading"/>
+            <button 
+                v-else
+                class="btn btn-dark btn-block" type="submit">Confirmar</button>
+        </div> 
+    </form>
+</template>
+
+<style scoped>
+     /* .box-back-btn {
+        display: flex;
+        justify-content: center;
+        padding: 16px 0px;
+    } */
+
+    .warning-info {
+        display: flex;
+        padding: 16px;
+        background: rgb(223, 223, 161);
+        font-size: 0.9rem;
+        justify-items: center;
+        align-items: center;
+        font-weight: 400;
+        color: rgb(86, 57, 57);
+        border-radius: 13px;
+    }
+
+    .warning {
+        font-size: 33px;
+        margin-right: 12px;
+        /* color: white; */
+    }
+
+    .btn-block {
+        width: 80%;
+    }
+
+    @media (max-width: 1024px) {
+        .form-content {
+            margin: 24px 16px;
+            background-color: #FFF;
+            padding: 32px 32px;
+            border-radius: 13px;
+        }
+    }
+
+    @media (max-width: 568px) {
+        .form-content {
+            margin: 24px 8px;
+            background-color: #FFF;
+            padding: 20px 20px;
+            border-radius: 13px;
+        }
+
+        .phone {
+            width: 100%;
+        }
+
+        .content-phone{
+            display: flex;
+            flex-direction: column;
+        }
+    }
+</style>

src/components/FormLoadModal.vue

@@ -79,6 +79,7 @@
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         //origin_formatted_address
         if(loadStore.currentLoad){
+            console.log(loadStore.currentLoad);
             formLoad.price = loadStore.currentLoad.actual_cost;
 			formLoad.segment = loadStore.currentLoad.categories?.length <= 0 ? [] : loadStore.currentLoad.categories.map(m =>{
 				return m;
@@ -130,7 +131,7 @@
 
         watch([originCoords, destinationCoords], async() => {
             if(originCoords.value && destinationCoords.value) {
-                console.log('Se llama api direcciones ')
+                // console.log('Se llama api direcciones ')
                 polylines.value = await getDirections(originCoords.value, destinationCoords.value);
             }
         })
@@ -160,12 +161,26 @@
     }
 
     const getCoordsMap = async() => {
-        if(loadStore.currentLoad.origin_formatted_address) {
+        const destinationLat = loadStore.currentLoad.destination?.lat;
-            originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
+        const destinationLng = loadStore.currentLoad.destination?.lng;
+        const originLat = loadStore.currentLoad.origin?.lat;
+        const originLng = loadStore.currentLoad.origin?.lng;
+        if(destinationLat && destinationLng) {
+            destinationCoords.value = {lat: Number.parseFloat(destinationLat), lng: Number.parseFloat(destinationLng)}
         }
-        if(loadStore.currentLoad.destination_formatted_address){
+        if(originLat && originLng) {
-            destinationCoords.value = await geocodeAddress(loadStore.currentLoad.destination_formatted_address);
+            originCoords.value = {lat: Number.parseFloat(originLat), lng: Number.parseFloat(originLng)}
         }
+
+        if(originCoords.value && destinationCoords.value) {
+            polylines.value = await getDirections(originCoords.value, destinationCoords.value);
+        }
+        // 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);
+        // }
     }
 
 

src/layouts/AuthLayout.vue

@@ -36,11 +36,16 @@
         min-height: 700px;
     }
 
-    @media (max-width: 1024px) {
+    @media (max-width: 1200px) {
         .auth-layout {
-            width: 70%;
+            width: 80%;
         }
     }
+    /* @media (max-width: 1024px) {
+        .auth-layout {
+            width: 80%;
+        }
+    } */
 
     @media (max-width: 768px) {
         .auth-layout {

src/services/auth.js

@@ -79,7 +79,6 @@ export const regiterConfirm = async(body) => {
     try {
         const endpoint = "/v1/account/signup";
         const {data} = await apiPublic.patch(endpoint, body);
-        console.log('register auth: ', data);
         return {
             msg: 'success',
             data

src/services/company.js

@@ -60,10 +60,16 @@ export const updateMyUserProfile = async(formData) => {
     try {
         const endpoint = `/v1/users/profile`;
         const {data} = await api.patch(endpoint, formData);
-        return data;
+        return {
+            msg: "success",
+            data: data
+        };
     } catch (error) {
         console.log(error);
-        return null;
+        return {
+            msg: error.response.data.error,
+            data: null
+        };
     }
 }
 

src/stores/auth.js

@@ -59,12 +59,12 @@ export const useAuthStore = defineStore('auth', () => {
 
     const updateProfile = async(data) => {
         const response = await updateMyUserProfile(data);
-        console.log(response);
+        // console.log(response);
-        if( response !== null) {
+        if( response.msg === 'success') {
-            user.value = response;
+            user.value = response.data;
             return response;
         } else {
-            return null;
+            return response;
         }
     }
 

src/views/CarriersView.vue

@@ -17,7 +17,7 @@ import Pagination from '../components/Pagination.vue';
     const selectedCities = ref([]);
     const filterQuery = ref([]);
 
-    const limit = 5;
+    const limit = 10;
 
     onMounted(() => {
         filterQuery.value.company_type = 'carrier';

src/views/CompleteRegisterView.vue

@@ -107,11 +107,11 @@
             "phone2" : user.phone2,
         };
         let respUser = await updateMyUserProfile( userData );
-        console.log('User create: ', respUser);
+        // console.log('User create: ', respUser);
-        if(respUser === null) {
+        if(respUser.msg === 'success') {
-            auth.user = userData;
+            auth.user = respUser.data;
         } else {
-            auth.user = respUser;
+            auth.user = userData;
         }
         /////// Datos debug ///////
         notifications.show = true;

src/views/EditProfileView.vue

@@ -5,6 +5,8 @@
     import CustomInput from '../components/ui/CustomInput.vue';
     import { storeToRefs } from 'pinia';
     import NotificationBadge from '../components/ui/NotificationBadge.vue';
+    import FormChangePassword from '../components/FormChangePassword.vue';
+    import FormChangeEmail from '../components/FormChangeEmail.vue';
 
     const auth = useAuthStore();
 
@@ -13,6 +15,7 @@
     const loading = ref(false)
     const msgError = ref('');
     const msgSuccess = ref('');
+    const form = ref(0);
 
     const userForm = reactive({
         name: '',
@@ -36,6 +39,7 @@
         userForm.name = user.value?.first_name  
         userForm.lastName = user.value?.last_name  
         userForm.phone1 = user.value?.phone
+
     }
 
     const handleSave = async() => {
@@ -53,11 +57,11 @@
         loading.value = true;
         const result = await auth.updateProfile(userData)
         loading.value = false;
-        if(result === null) {
+        if(result.msg === 'success') {
-            msgError.value = 'Algo salio mal, intente más tarde';
+            msgSuccess.value = 'Usuario actualizado';
             clearMessages();
         } else {
-            msgSuccess.value = 'Usuario actualizado';
+            msgError.value = 'Algo salio mal, intente más tarde';
             clearMessages();
         }
     }
@@ -82,18 +86,38 @@
         }
    }
 
+   const setForm = (val) => {
+        form.value = val
+   }
+
 </script>
 
 <template>
     <div class="form-content">
         <div class="box-btns">
-            <a class="btn-text" type="submit">Cambiar contraseña</a>
+            <a class="btn-text" 
-            <a class="btn-text" type="submit">Cambiar correo</a>
+                :class="[(form === 0) ? 'selection' : '']"
+                @click="setForm(0)"
+            >Datos usuario</a>
+            <a class="btn-text" 
+                :class="[(form === 1) ? 'selection' : '']"
+                @click="setForm(1)"
+            >Cambiar correo</a>
+            <a class="btn-text" 
+                :class="[(form === 2) ? 'selection' : '']"
+                @click="setForm(2)"
+            >Cambiar contraseña</a>
         </div>
         <br/>
         <div class="divider"></div>
+        <form 
+            @submit.prevent="handleSave" 
+            autocomplete="off" 
+            method="post" 
+            ref="formRef"
+            v-if="form === 0"
+        >
             <br/>
-        <form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef">
             <h3 class="title">Datos de usuario</h3>
             <br/>
             <NotificationBadge :msg="msgError" v-if="msgError != ''"/>
@@ -120,13 +144,15 @@
                 :filled="false"
                 v-model:field="userForm.phone1"
             />
-            <div class="mt-4 text-center">
+            <div class="mt-5 text-center">
                 <Spiner v-if="loading"/>
                 <button 
                     v-else
                     class="btn btn-dark btn-block" type="submit">Guardar</button>
             </div> 
         </form>
+        <FormChangeEmail v-if="form === 1"/>
+        <FormChangePassword v-if="form === 2"/>
     </div>
            
 </template>
@@ -135,11 +161,16 @@
     /* .profile {
         margin: 0 auto;
     } */
+
     .box-btns {
         display: flex;
         justify-content: flex-end;
         gap: 2rem;
     }
+
+    .selection {
+        color: #333;
+    }
     .form-content {
         margin-top: 1rem;
         max-width: 768px;

src/views/LoadsPublishedView.vue

@@ -13,7 +13,7 @@
     const loading = ref(false);
     const query = ref('');
     const filterQuery = ref([]);
-    const limit = 5;
+    const limit = 10;
 
     onMounted(() =>{
         console.log('init')

src/views/LocationsView.vue

@@ -19,7 +19,7 @@
         getInitData();
     })
 
-    const limit = 5;
+    const limit = 10;
 
     const getInitData = async() => {
         loading.value = true;

src/views/RecoveryPasswordView.vue

@@ -192,11 +192,11 @@
                         type="text"
                         v-model:field="form.code"
                     />
-                    <div v-if="!loading" class="d-flex justify-content-center align-items-center mt-4">
+                    <!-- <div v-if="!loading" class="d-flex justify-content-center align-items-center mt-4">
                         <a  
                             @click="resendCode()"
                             class="btn-text ms-2"><i class="fa-solid fa-rotate-right"></i> Reenviar código</a>
-                    </div>
+                    </div> -->
                     <Spiner v-if="loading" class="mt-5"/>
                     <input 
                         v-else

src/views/ShippersView.vue

@@ -17,7 +17,7 @@
     const selectedCities = ref([]);
     const filterQuery = ref([]);
 
-    const limit = 5;
+    const limit = 10;
 
     onMounted(() => {
         filterQuery.value.company_type = 'shipper';

src/views/TrackingLoadView.vue

@@ -35,15 +35,17 @@
         const id = route.params['code'];
         await getLoadTracking(id)
         if(load.value !== null) {
-            const addressOrigin = load.value.origin_geo?.coordinates;
+            console.log(load.value)
-            const addressDestination = load.value.destination_geo?.coordinates;
+            const addressOrigin = load.value?.origin_geo?.coordinates;
-            if(addressOrigin !== null) {
+            const addressDestination = load.value?.destination_geo?.coordinates;
+            if(addressOrigin && addressDestination) {
                 originCoords.value = {lat: Number.parseFloat(addressOrigin[0]), lng: Number.parseFloat(addressOrigin[1])};
+                destinationCoords.value = {lat: Number.parseFloat(addressDestination[0]), lng: Number.parseFloat(addressDestination[1])};
+
+                polylines.value = await getDirections(originCoords.value, destinationCoords.value);
+
             }
             
-            if(addressDestination !== null) {
-                destinationCoords.value = {lat: Number.parseFloat(addressDestination[0]), lng: Number.parseFloat(addressDestination[1])};
-            }
             if(load.value.vehicle) {
                 vehicleLastLocation.value = {
                     lat: parseFloat(load.value.vehicle.last_location_lat),
@@ -52,7 +54,6 @@
                 console.log(vehicleLastLocation);
             }
 
-            polylines.value = await getDirections(originCoords.value, destinationCoords.value);
 
             console.log(load.value.load_status);
             switch (load.value.load_status) {
@@ -109,8 +110,8 @@
                         fullscreenControl: true
                     }"
                 > 
-                    <Marker :options="{position: originCoords, label: 'O', title: 'Destino'}" />
+                    <Marker v-if="originCoords" :options="{position: originCoords, label: 'O', title: 'Destino'}" />
-                    <Marker :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
+                    <Marker v-if="destinationCoords" :options="{position: destinationCoords, label: 'D', title: 'Origen'}" />
                     <CustomMarker
                         v-if="vehicleLastLocation && load.vehicle.background_tracking && isLoadActive"
                         :options="{position: vehicleLastLocation}"

src/views/TrucksPublishedView.vue

@@ -12,7 +12,7 @@
     const proposalCurrent = ref(null);
     const openModal = ref(false);
     const openModalProposal = ref(false);
-    const limit = 5;
+    const limit = 10;
 
     onMounted(() =>{
         getInitData();

src/views/UsersView.vue

@@ -16,7 +16,7 @@ import { useAuthStore } from '../stores/auth';
 
     const currentUser = ref(null);
     const openModal = ref(false);
-    const limit = 3;
+    const limit = 10;
 
     const getInitData = async() => {
         console.log('callll')

src/views/VehiclesView.vue

@@ -21,7 +21,7 @@
     const editStatusVehicle = ref(false);
     const editDriverVehicle = ref(false);
 
-    const limit = 3;
+    const limit = 10;
 
     onMounted(() => {
         getInitData();