add: update user profile done
This commit is contained in:
Alexandro Uc Santos
@@ -4,21 +4,20 @@
|
||||
import Spiner from '../components/ui/Spiner.vue';
|
||||
import CustomInput from '../components/ui/CustomInput.vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import NotificationBadge from '../components/ui/NotificationBadge.vue';
|
||||
|
||||
const auth = useAuthStore();
|
||||
|
||||
const { user } = storeToRefs(auth);
|
||||
|
||||
const loading = ref(false)
|
||||
const msgError = ref('');
|
||||
const msgSuccess = ref('');
|
||||
|
||||
const userForm = reactive({
|
||||
name: '',
|
||||
lastName: '',
|
||||
phone1: '',
|
||||
phone2: '',
|
||||
// name: auth.user?.first_name,
|
||||
// lastName: auth.user?.last_name,
|
||||
// phone1: auth.user?.phone,
|
||||
// phone2: auth.user?.phone2,
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
@@ -37,53 +36,90 @@
|
||||
userForm.name = user.value?.first_name
|
||||
userForm.lastName = user.value?.last_name
|
||||
userForm.phone1 = user.value?.phone
|
||||
userForm.phone2 = user.value?.phone2
|
||||
}
|
||||
|
||||
const handleSave = () => {
|
||||
|
||||
const handleSave = async() => {
|
||||
const error = validatiosUser();
|
||||
if(error != '') {
|
||||
msgError.value = error;
|
||||
clearMessages();
|
||||
return;
|
||||
}
|
||||
const userData = {
|
||||
"first_name" : userForm.name,
|
||||
"last_name" : userForm.lastName,
|
||||
"phone" : userForm.phone1,
|
||||
};
|
||||
loading.value = true;
|
||||
const result = await auth.updateProfile(userData)
|
||||
loading.value = false;
|
||||
if(result === null) {
|
||||
msgError.value = 'Algo salio mal, intente más tarde';
|
||||
clearMessages();
|
||||
} else {
|
||||
msgSuccess.value = 'Usuario actualizado';
|
||||
clearMessages();
|
||||
}
|
||||
}
|
||||
|
||||
const clearMessages = () => {
|
||||
setTimeout(() => {
|
||||
msgError.value = '';
|
||||
msgSuccess.value = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
|
||||
const validatiosUser = () => {
|
||||
if(userForm.name.trim().length < 3) {
|
||||
return 'Ingresa nombre(s) valido';
|
||||
} else if(userForm.lastName.trim().length < 2) {
|
||||
return 'Ingresa apellido(s) valido';
|
||||
} else if(userForm.phone1.trim().length < 10) {
|
||||
return 'Ingresa teléfono valido';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div class="profile"> -->
|
||||
<form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" class="form-content">
|
||||
<div class="form-content">
|
||||
<div class="box-btns">
|
||||
<a class="btn-text" type="submit">Cambiar contraseña</a>
|
||||
<a class="btn-text" type="submit">Cambiar correo</a>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="divider"></div>
|
||||
<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 != ''"/>
|
||||
<NotificationBadge :msg="msgSuccess" v-if="msgSuccess != ''" :is-error="false"/>
|
||||
<CustomInput
|
||||
label="Nombres(s):"
|
||||
label="Nombres(s)*:"
|
||||
type="text"
|
||||
name="name"
|
||||
:filled="false"
|
||||
v-model:field="userForm.name"
|
||||
/>
|
||||
<CustomInput
|
||||
label="Apellidos(s):"
|
||||
label="Apellidos(s)*:"
|
||||
type="text"
|
||||
name="lastname"
|
||||
:filled="false"
|
||||
v-model:field="userForm.lastName"
|
||||
/>
|
||||
<div class="content-phone">
|
||||
<div class="phone">
|
||||
<CustomInput
|
||||
label="Teléfono 1: *"
|
||||
type="number"
|
||||
name="phone1"
|
||||
:step="1"
|
||||
:filled="false"
|
||||
v-model:field="userForm.phone1"
|
||||
/>
|
||||
</div>
|
||||
<div class="phone">
|
||||
<CustomInput
|
||||
label="Teléfono 2:"
|
||||
type="number"
|
||||
name="phone2"
|
||||
:step="1"
|
||||
:filled="false"
|
||||
v-model:field="userForm.phone2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<CustomInput
|
||||
label="Teléfono*:"
|
||||
type="number"
|
||||
name="phone1"
|
||||
:step="1"
|
||||
:filled="false"
|
||||
v-model:field="userForm.phone1"
|
||||
/>
|
||||
<div class="mt-4 text-center">
|
||||
<Spiner v-if="loading"/>
|
||||
<button
|
||||
@@ -91,7 +127,7 @@
|
||||
class="btn btn-dark btn-block" type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -99,7 +135,13 @@
|
||||
/* .profile {
|
||||
margin: 0 auto;
|
||||
} */
|
||||
.box-btns {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 2rem;
|
||||
}
|
||||
.form-content {
|
||||
margin-top: 1rem;
|
||||
max-width: 768px;
|
||||
/* width: 768px; */
|
||||
margin: 0 auto;
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
:location="locationCurrent"
|
||||
@reset-location="handleResetCurrentBudget"
|
||||
/>
|
||||
<h2 class="title">Ubicaciones</h2>
|
||||
<h2 class="title">Directorio interno</h2>
|
||||
<div class="box-filters">
|
||||
<div class="box-search">
|
||||
<input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
|
||||
|
||||
@@ -52,10 +52,10 @@ import { storeToRefs } from 'pinia';
|
||||
<div class="divider mb-4"></div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="item-company">
|
||||
<!-- <div class="item-company">
|
||||
<span class="font-weight-bold">RFC: </span>
|
||||
{{company.company?.rfc}}
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="item-company">
|
||||
<span class="font-weight-bold">Tipo de empresa: </span>
|
||||
{{getTypeCompany(company.company?.company_type)}}
|
||||
@@ -68,16 +68,16 @@ import { storeToRefs } from 'pinia';
|
||||
<span class="font-weight-bold">Empresa miembro desde: </span>
|
||||
{{getDateMonthDay(company.company?.createAt)}}
|
||||
</div>
|
||||
<div class="item-company">
|
||||
<span class="font-weight-bold">Afiliación: </span>
|
||||
{{ company.company?.membership }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="item-company">
|
||||
<span class="font-weight-bold">Segmento de empresa: </span>
|
||||
{{company.company?.categories.map((e) => e.name).join(', ')}}
|
||||
</div>
|
||||
<!-- <div class="item-company">
|
||||
<span class="font-weight-bold">Afiliación: </span>
|
||||
{{ company.company?.membership }}
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-6">
|
||||
<div class="item-company">
|
||||
<span class="font-weight-bold">Ubicación de carga por estado: </span>
|
||||
{{company.company?.company_state.map((e) => e).join(', ')}}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
const selectedCategory = ref([]);
|
||||
const selectedState = ref([]);
|
||||
const selectedCities = ref([]);
|
||||
const limit = 1;
|
||||
const limit = 10;
|
||||
const isSearch = ref(false);
|
||||
const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user