add: validations in change email form

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

@@ -2,7 +2,7 @@
     import Swal from 'sweetalert2';
     import { getDateMonthDay } from '../helpers/date_formats';
     import { useCompanyStore } from '../stores/company';
-import { useAuthStore } from '../stores/auth';
+    import { useAuthStore } from '../stores/auth';
 
     const props = defineProps({
         user: {
@@ -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>

src/components/FormChangeEmail.vue

@@ -3,6 +3,8 @@
     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';
     const emailForm = reactive({
         email: '',
         email2: '',
@@ -13,7 +15,60 @@
     const msgSuccess = ref('');
 
     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 resp = await companyStore.deleteUserCompany(props.user._id)
 
+                    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>
 
@@ -45,7 +100,10 @@
             v-model:field="emailForm.email2"
         />
         <div class="warning-info">
-            <div><i class="fa-solid fa-triangle-exclamation warning"></i></div> Esta acción cambiara su correo electrónico, se le enviara un código al correo proporcionado lo cual deberas colocarlo para confirmar la acción, una vez confirmada la accion, se cerrara su sesión y debera volver a iniciar sesión con su nuevo correo.
+            <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"/>