add: update user profile done
This commit is contained in:
@@ -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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -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 = [];
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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(', ')}}
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user