From f026e568f6a6a2576239810b128ef78dc8b5cad6 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Fri, 12 Apr 2024 20:01:26 -0600
Subject: [PATCH] add: validations in change email form

---
 src/components/CardCompany.vue         |  9 ----
 src/components/CardUser.vue            |  6 +--
 src/components/CreateLocationModal.vue | 21 ++++++++-
 src/components/CreateUserModal.vue     | 64 +++++++-------------------
 src/components/FormChangeEmail.vue     | 60 +++++++++++++++++++++++-
 5 files changed, 99 insertions(+), 61 deletions(-)

diff --git a/src/components/CardCompany.vue b/src/components/CardCompany.vue
index 0b7173d..823c35e 100644
--- a/src/components/CardCompany.vue
+++ b/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>
diff --git a/src/components/CardUser.vue b/src/components/CardUser.vue
index 6532d38..305a434 100644
--- a/src/components/CardUser.vue
+++ b/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')">
diff --git a/src/components/CreateLocationModal.vue b/src/components/CreateLocationModal.vue
index ff751da..bed6060 100644
--- a/src/components/CreateLocationModal.vue
+++ b/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"
diff --git a/src/components/CreateUserModal.vue b/src/components/CreateUserModal.vue
index 04c9c1d..95e5f3e 100644
--- a/src/components/CreateUserModal.vue
+++ b/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 =>{
-				return { meta_value:m };
-			});
+            // userForm.truck_type = props.user.truck_type?.map(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 class="mb-4 mt-3">
+                        </div> -->
+                        <!-- <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>
diff --git a/src/components/FormChangeEmail.vue b/src/components/FormChangeEmail.vue
index 0c6baff..912c15f 100644
--- a/src/components/FormChangeEmail.vue
+++ b/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,8 +15,61 @@
     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>
 
 <template>
@@ -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"/>