add: update user profile done

This commit is contained in:
Alexandro Uc Santos
2024-04-06 14:48:13 -06:00
parent 84f71b98d1
commit e0a4cf4abb
10 changed files with 120 additions and 64 deletions

View File

@@ -8,6 +8,16 @@
required: true, required: true,
} }
}); });
/*
- 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> </script>
<template> <template>
@@ -16,14 +26,14 @@
<div class="divider"></div> <div class="divider"></div>
<div class="row mt-4"> <div class="row mt-4">
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<p><span>RFC:</span> {{ company.rfc }}</p> <!-- <p><span>RFC:</span> {{ company.rfc }}</p> -->
<p><span>Tipo de empresa:</span> {{ company.company_type || 'No definido' }}</p> <!-- <p><span>Tipo de empresa:</span> {{ company.company_type || 'No definido' }}</p> -->
<p><span>Código:</span> {{ company.company_code }}</p> <p><span>Código:</span> {{ company.company_code }}</p>
<p><span>Empresa miembro desde: </span>{{getDateMonthDay(company.createdAt)}}</p> <p><span>Empresa miembro desde: </span>{{getDateMonthDay(company.createdAt)}}</p>
<p><span>Afiliación: </span> {{company.membership}}</p> <p><span>Segmento empresa:</span> {{ company._categories }}</p>
<!-- <p><span>Afiliación: </span> {{company.membership}}</p> -->
</div> </div>
<div class="col-lg-6 col-sm-12"> <div class="col-lg-6 col-sm-12">
<p><span>Segmento empresa:</span> {{ company._categories }}</p>
<p><span>Locaciones de carga por estado: </span>{{company._company_state}}</p> <p><span>Locaciones de carga por estado: </span>{{company._company_state}}</p>
<p><span>Locaciones de carga por municipio: </span>{{company._company_city}}</p> <p><span>Locaciones de carga por municipio: </span>{{company._company_city}}</p>
<p><span>Transportes utilizados: </span>{{company._truck_types}}</p> <p><span>Transportes utilizados: </span>{{company._truck_types}}</p>

View File

@@ -209,14 +209,6 @@
:error="errors.phone" :error="errors.phone"
/> />
<CustomInput
label="Teléfono 2"
name="phone2"
type="number"
v-model:field="userForm.phone2"
:step="1"
:filled="false"
/>
<CustomInput <CustomInput
label="Correo electronico*" label="Correo electronico*"
name="email" name="email"

View File

@@ -66,7 +66,7 @@
<i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i> <i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="" active-class=""
class="nav-link" :to="{name: 'locations'}">Ubicaciones</RouterLink> class="nav-link" :to="{name: 'locations'}">Directorio interno</RouterLink>
</div> </div>
</li> </li>
<li <li

View File

@@ -1,10 +1,8 @@
<script setup> <script setup>
import { onMounted, reactive, ref } from 'vue'; import { onMounted, reactive, ref } from 'vue';
import Spiner from '../ui/Spiner.vue'; import Spiner from '../ui/Spiner.vue';
import Cities from './Cities.vue';
import NotificationBadge from './NotificationBadge.vue'; import NotificationBadge from './NotificationBadge.vue';
import Segments from './Segments.vue'; import Segments from './Segments.vue';
import States from './States.vue';
import TruckTypes from './TruckTypes.vue'; import TruckTypes from './TruckTypes.vue';
import Custominput from './CustomInput.vue'; import Custominput from './CustomInput.vue';
import { useCompanyStore } from '../../stores/company'; import { useCompanyStore } from '../../stores/company';
@@ -123,7 +121,7 @@
:multiple="true" :multiple="true"
/> />
</div> </div>
<div class="mb-4"> <!-- <div class="mb-4">
<label class="custom-label">Ubicaciones de carga por estado</label> <label class="custom-label">Ubicaciones de carga por estado</label>
<States <States
v-model="company.states" v-model="company.states"
@@ -136,7 +134,7 @@
v-model="company.cities" v-model="company.cities"
:multiple="true" :multiple="true"
/> />
</div> </div> -->
<div class="mb-4"> <div class="mb-4">
<label class="custom-label">Tipo de transportes que utiliza</label> <label class="custom-label">Tipo de transportes que utiliza</label>
<TruckTypes <TruckTypes

View File

@@ -6,6 +6,7 @@ import {useNotificationsStore} from './notifications';
import {useCompanyStore} from './company'; import {useCompanyStore} from './company';
import { useLoadsStore } from "./loads"; import { useLoadsStore } from "./loads";
import { useVehiclesStore } from "./vehicles"; import { useVehiclesStore } from "./vehicles";
import { updateMyUserProfile } from "../services/company";
export const useAuthStore = defineStore('auth', () => { export const useAuthStore = defineStore('auth', () => {
@@ -56,6 +57,17 @@ export const useAuthStore = defineStore('auth', () => {
}); });
}); });
const updateProfile = async(data) => {
const response = await updateMyUserProfile(data);
console.log(response);
if( response !== null) {
user.value = response;
return response;
} else {
return null;
}
}
const logout = () => { const logout = () => {
localStorage.removeItem('access'); localStorage.removeItem('access');
localStorage.removeItem('id'); localStorage.removeItem('id');
@@ -82,6 +94,7 @@ export const useAuthStore = defineStore('auth', () => {
checking, checking,
authStatus, authStatus,
checkSession, checkSession,
authenticationPromise authenticationPromise,
updateProfile
} }
}); });

View File

@@ -67,8 +67,9 @@ export const useLoadsStore = defineStore('load', () => {
const getProposalsOfLoads = async(filterQuery) => { const getProposalsOfLoads = async(filterQuery) => {
try { try {
const endpoint = `/v1/proposals/find?load=${filterQuery}`; const endpoint = `/v1/proposals/find?load=${filterQuery}`;
console.log(endpoint)
const {data} = await api.get(endpoint); const {data} = await api.get(endpoint);
// console.log(data); console.log(data);
proposalsOfLoads.value = data.data; proposalsOfLoads.value = data.data;
} catch (error) { } catch (error) {
proposalsOfLoads.value = []; proposalsOfLoads.value = [];

View File

@@ -4,21 +4,20 @@
import Spiner from '../components/ui/Spiner.vue'; import Spiner from '../components/ui/Spiner.vue';
import CustomInput from '../components/ui/CustomInput.vue'; import CustomInput from '../components/ui/CustomInput.vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import NotificationBadge from '../components/ui/NotificationBadge.vue';
const auth = useAuthStore(); const auth = useAuthStore();
const { user } = storeToRefs(auth); const { user } = storeToRefs(auth);
const loading = ref(false) const loading = ref(false)
const msgError = ref('');
const msgSuccess = ref('');
const userForm = reactive({ const userForm = reactive({
name: '', name: '',
lastName: '', lastName: '',
phone1: '', phone1: '',
phone2: '',
// name: auth.user?.first_name,
// lastName: auth.user?.last_name,
// phone1: auth.user?.phone,
// phone2: auth.user?.phone2,
}) })
onMounted(() => { onMounted(() => {
@@ -37,53 +36,90 @@
userForm.name = user.value?.first_name userForm.name = user.value?.first_name
userForm.lastName = user.value?.last_name userForm.lastName = user.value?.last_name
userForm.phone1 = user.value?.phone 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> </script>
<template> <template>
<!-- <div class="profile"> --> <div class="form-content">
<form @submit.prevent="handleSave" autocomplete="off" method="post" ref="formRef" 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 <CustomInput
label="Nombres(s):" label="Nombres(s)*:"
type="text" type="text"
name="name" name="name"
:filled="false" :filled="false"
v-model:field="userForm.name" v-model:field="userForm.name"
/> />
<CustomInput <CustomInput
label="Apellidos(s):" label="Apellidos(s)*:"
type="text" type="text"
name="lastname" name="lastname"
:filled="false" :filled="false"
v-model:field="userForm.lastName" v-model:field="userForm.lastName"
/> />
<div class="content-phone"> <CustomInput
<div class="phone"> label="Teléfono*:"
<CustomInput type="number"
label="Teléfono 1: *" name="phone1"
type="number" :step="1"
name="phone1" :filled="false"
:step="1" v-model:field="userForm.phone1"
: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>
<div class="mt-4 text-center"> <div class="mt-4 text-center">
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<button <button
@@ -91,7 +127,7 @@
class="btn btn-dark btn-block" type="submit">Guardar</button> class="btn btn-dark btn-block" type="submit">Guardar</button>
</div> </div>
</form> </form>
<!-- </div> --> </div>
</template> </template>
@@ -99,7 +135,13 @@
/* .profile { /* .profile {
margin: 0 auto; margin: 0 auto;
} */ } */
.box-btns {
display: flex;
justify-content: flex-end;
gap: 2rem;
}
.form-content { .form-content {
margin-top: 1rem;
max-width: 768px; max-width: 768px;
/* width: 768px; */ /* width: 768px; */
margin: 0 auto; margin: 0 auto;

View File

@@ -103,7 +103,7 @@
:location="locationCurrent" :location="locationCurrent"
@reset-location="handleResetCurrentBudget" @reset-location="handleResetCurrentBudget"
/> />
<h2 class="title">Ubicaciones</h2> <h2 class="title">Directorio interno</h2>
<div class="box-filters"> <div class="box-filters">
<div class="box-search"> <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"> <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">

View File

@@ -52,10 +52,10 @@ import { storeToRefs } from 'pinia';
<div class="divider mb-4"></div> <div class="divider mb-4"></div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6 col-lg-6"> <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> <span class="font-weight-bold">RFC: </span>
{{company.company?.rfc}} {{company.company?.rfc}}
</div> </div> -->
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Tipo de empresa: </span> <span class="font-weight-bold">Tipo de empresa: </span>
{{getTypeCompany(company.company?.company_type)}} {{getTypeCompany(company.company?.company_type)}}
@@ -68,16 +68,16 @@ import { storeToRefs } from 'pinia';
<span class="font-weight-bold">Empresa miembro desde: </span> <span class="font-weight-bold">Empresa miembro desde: </span>
{{getDateMonthDay(company.company?.createAt)}} {{getDateMonthDay(company.company?.createAt)}}
</div> </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"> <div class="item-company">
<span class="font-weight-bold">Segmento de empresa: </span> <span class="font-weight-bold">Segmento de empresa: </span>
{{company.company?.categories.map((e) => e.name).join(', ')}} {{company.company?.categories.map((e) => e.name).join(', ')}}
</div> </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"> <div class="item-company">
<span class="font-weight-bold">Ubicación de carga por estado: </span> <span class="font-weight-bold">Ubicación de carga por estado: </span>
{{company.company?.company_state.map((e) => e).join(', ')}} {{company.company?.company_state.map((e) => e).join(', ')}}

View File

@@ -17,7 +17,7 @@
const selectedCategory = ref([]); const selectedCategory = ref([]);
const selectedState = ref([]); const selectedState = ref([]);
const selectedCities = ref([]); const selectedCities = ref([]);
const limit = 1; const limit = 10;
const isSearch = ref(false); const isSearch = ref(false);
const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads(); const { getLoadsPublished, loads, loading, currentPage, total } = useSearchLoads();