add: completed register view
This commit is contained in:
Alexandro Uc Santos
@@ -1,94 +1,307 @@
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import CustomRadioInput from '../components/ui/CustomRadioInput.vue';
|
||||
import Custominput from '../components/ui/CustomInput.vue'
|
||||
import Segments from '../components/ui/Segments.vue';
|
||||
import States from '../components/ui/States.vue';
|
||||
import Cities from '../components/ui/Cities.vue';
|
||||
import TruckTypes from '../components/ui/TruckTypes.vue';
|
||||
import NotificationBadge from '../components/ui/NotificationBadge.vue';
|
||||
import {validRFC} from '../helpers/validations';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { useNotificationsStore } from '../stores/notifications';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
|
||||
const notifications = useNotificationsStore();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
const step = ref(1);
|
||||
const loading = ref(false);
|
||||
const msgError = ref('');
|
||||
const msgSuccess = ref('');
|
||||
|
||||
const typeCompany = reactive({
|
||||
typeCompany: 'shipper',
|
||||
typeRFC: 'fisica'
|
||||
});
|
||||
|
||||
const company = reactive({
|
||||
name: '',
|
||||
rfc: 'USAL950402D96',
|
||||
segments: [],
|
||||
states: [],
|
||||
cities: [],
|
||||
truckTypes: [],
|
||||
description: '',
|
||||
});
|
||||
|
||||
const user = reactive({
|
||||
name: '',
|
||||
lastName: '',
|
||||
phone1: '',
|
||||
phone2: '',
|
||||
})
|
||||
|
||||
const handleSelectedTypeCompany = () => {
|
||||
if(typeCompany.typeCompany === null || typeCompany.typeRFC === null) {
|
||||
msgError.value = 'Todos los campos con obligatorios';
|
||||
clearMessages();
|
||||
return;
|
||||
}
|
||||
console.log(typeCompany);
|
||||
step.value = 2;
|
||||
}
|
||||
|
||||
const handleDataCompany = () => {
|
||||
const error = validatiosCompany();
|
||||
if(error != '') {
|
||||
msgError.value = error;
|
||||
clearMessages();
|
||||
return;
|
||||
}
|
||||
step.value = 3;
|
||||
console.log(company);
|
||||
}
|
||||
|
||||
const handleSendRegister = () => {
|
||||
const error = validatiosUser();
|
||||
if(error != '') {
|
||||
msgError.value = error;
|
||||
clearMessages();
|
||||
return;
|
||||
}
|
||||
console.log(user);
|
||||
/////// Datos debug ///////
|
||||
notifications.show = true;
|
||||
notifications.text = 'Los datos se llenaron correctamente';
|
||||
localStorage.setItem('session', 'jssksksksk2skskkskskkskss');
|
||||
auth.$patch({
|
||||
sesion: 'jssksksksk2skskkskskkskss',
|
||||
token: 'jkdkdkdkeoee00kelldd',
|
||||
user: {
|
||||
first_name: user.name,
|
||||
last_name: user.lastName
|
||||
},
|
||||
})
|
||||
router.push({name: 'home'});
|
||||
///////////////////////////
|
||||
}
|
||||
|
||||
const handleBack = (val) => {
|
||||
step.value = val;
|
||||
}
|
||||
|
||||
const clearMessages = () => {
|
||||
setTimeout(() => {
|
||||
msgError.value = '';
|
||||
msgSuccess.value = '';
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
const validatiosCompany = () => {
|
||||
if(company.name.trim().length <= 2) {
|
||||
return 'Ingresa nombre de empresa valido';
|
||||
} else if(!validRFC(company.rfc, typeCompany.typeRFC)) {
|
||||
return 'Ingresa RFC valido';
|
||||
} else if(company.segments.length === 0) {
|
||||
return 'Selecciona al menos un segmento';
|
||||
} else if(company.states.length === 0) {
|
||||
return 'Selecciona al menos un estado';
|
||||
} else if(company.cities.length === 0) {
|
||||
return 'Selecciona al menos un municipio';
|
||||
} else if(company.truckTypes.length === 0) {
|
||||
return 'Selecciona al menos un tipo de transporte';
|
||||
}
|
||||
else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
const validatiosUser = () => {
|
||||
if(user.name.trim().length < 3) {
|
||||
return 'Ingresa nombre(s) valido';
|
||||
} else if(user.lastName.trim().length < 2) {
|
||||
return 'Ingresa apellido(s) valido';
|
||||
} else if(user.phone1.trim().length < 10) {
|
||||
return 'Ingresa teléfono valido';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h2 class="title">Complete su registro</h2>
|
||||
<h2 class="title my-5">Complete su registro</h2>
|
||||
|
||||
<div class="card-info flex-column">
|
||||
<p>¿Como te quieres registrar?</p>
|
||||
<label class="container">Embarcador
|
||||
<input type="radio" checked="checked" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="container">Transportista
|
||||
<input type="radio" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="container">Broker (Embarcador)
|
||||
<input type="radio" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<label class="container">Broker (Transportista)
|
||||
<input type="radio" name="radio">
|
||||
<span class="checkmark"></span>
|
||||
</label>
|
||||
<div class="card-info flex-column justify-content-center align-items-center mb-5">
|
||||
<form @submit.prevent="handleSelectedTypeCompany" v-if="step === 1" class="form-view">
|
||||
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
||||
<h2 class="mt-4">¿Como te quieres registrar?*</h2>
|
||||
<CustomRadioInput
|
||||
value="shipper"
|
||||
label="Embarcador"
|
||||
name="type-company"
|
||||
v-model:typeselected="typeCompany.typeCompany"
|
||||
/>
|
||||
<CustomRadioInput
|
||||
value="carrier"
|
||||
label="Transportista"
|
||||
name="type-company"
|
||||
v-model:typeselected="typeCompany.typeCompany"
|
||||
/>
|
||||
<CustomRadioInput
|
||||
value="b-shipper"
|
||||
label="Broker (Embarcador)"
|
||||
name="type-company"
|
||||
v-model:typeselected="typeCompany.typeCompany"
|
||||
/>
|
||||
<CustomRadioInput
|
||||
value="b-carrier"
|
||||
label="Broker (Transportista)"
|
||||
name="type-company"
|
||||
v-model:typeselected="typeCompany.typeCompany"
|
||||
/>
|
||||
|
||||
<h2 class="mt-5">¿Como trabajas?*</h2>
|
||||
<CustomRadioInput
|
||||
value="fisica"
|
||||
label="Persona fisica"
|
||||
name="type-rfc"
|
||||
v-model:typeselected="typeCompany.typeRFC"
|
||||
/>
|
||||
<CustomRadioInput
|
||||
value="moral"
|
||||
label="Persona moral"
|
||||
name="type-rfc"
|
||||
v-model:typeselected="typeCompany.typeRFC"
|
||||
/>
|
||||
|
||||
<input type="submit" value="Continuar" class="btn-primary-lg btn-lg-block my-4">
|
||||
</form>
|
||||
<form @submit.prevent="handleDataCompany" v-if="step === 2">
|
||||
<div class="d-flex justify-content-center align-items-center my-4">
|
||||
<a
|
||||
@click="handleBack(1)"
|
||||
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
|
||||
</div>
|
||||
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
||||
<h2>Datos de la empresa</h2>
|
||||
<div class="divider mt-2 mb-4"></div>
|
||||
<Custominput
|
||||
label="¿Cuál es el nombre de la empresa? *"
|
||||
type="text"
|
||||
name="name"
|
||||
:filled="false"
|
||||
v-model:field="company.name"
|
||||
/>
|
||||
<Custominput
|
||||
label="¿Cuál es el RFC de la empresa? *"
|
||||
type="text"
|
||||
name="rfc"
|
||||
:filled="false"
|
||||
v-model:field="company.rfc"
|
||||
/>
|
||||
<div class="mb-4">
|
||||
<label class="custom-label">¿A que segmentos pertenece la empresa? *</label>
|
||||
<Segments
|
||||
v-model="company.segments"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="custom-label">¿Cuáles son las locaciones de carga de la empresa por estado? *</label>
|
||||
<States
|
||||
v-model="company.states"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="custom-label">¿Cuáles son las locaciones de carga de la empresa por municipio? *</label>
|
||||
<Cities
|
||||
v-model="company.cities"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="custom-label">¿Qué tipo de transportes utiliza la empresa? *</label>
|
||||
<TruckTypes
|
||||
v-model="company.truckTypes"
|
||||
:multiple="true"
|
||||
/>
|
||||
</div>
|
||||
<Custominput
|
||||
label="Información adicional de la empresa:"
|
||||
type="text"
|
||||
name="description"
|
||||
:filled="false"
|
||||
v-model:field="company.description"
|
||||
/>
|
||||
|
||||
<input type="submit" value="Continuar" class="btn-primary-lg btn-lg-block my-4">
|
||||
</form>
|
||||
<form @submit.prevent="handleSendRegister" v-if="step === 3" class="form-view">
|
||||
<div class="d-flex justify-content-center align-items-center mb-4">
|
||||
<a
|
||||
@click="handleBack(2)"
|
||||
class="btn-text ms-2"><i class="fa-solid fa-arrow-left"></i> Volver</a>
|
||||
</div>
|
||||
<NotificationBadge :msg="msgError" v-if="msgError != ''"/>
|
||||
<h2>Información personal</h2>
|
||||
<div class="divider mt-2 mb-4"></div>
|
||||
<Custominput
|
||||
label="Nombres(s):"
|
||||
type="text"
|
||||
name="name"
|
||||
:filled="false"
|
||||
v-model:field="user.name"
|
||||
/>
|
||||
<Custominput
|
||||
label="Apellidos(s):"
|
||||
type="text"
|
||||
name="lastname"
|
||||
:filled="false"
|
||||
v-model:field="user.lastName"
|
||||
/>
|
||||
<div class="content-phone">
|
||||
<Custominput
|
||||
label="Teléfono 1: *"
|
||||
type="number"
|
||||
name="phone1"
|
||||
:filled="false"
|
||||
v-model:field="user.phone1"
|
||||
/>
|
||||
<Custominput
|
||||
label="Teléfono 2:"
|
||||
type="number"
|
||||
name="phone2"
|
||||
:filled="false"
|
||||
v-model:field="user.phone2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<input type="submit" value="Guardar" class="btn-primary-lg btn-lg-block my-4">
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 22px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.content-phone{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
/* Hide the browser's default radio button */
|
||||
.container input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.form-view {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
/* Create a custom radio button */
|
||||
.checkmark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background-color: #eee;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
/* On mouse-over, add a grey background color */
|
||||
.container:hover input ~ .checkmark {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
/* When the radio button is checked, add a blue background */
|
||||
.container input:checked ~ .checkmark {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
/* Create the indicator (the dot/circle - hidden when not checked) */
|
||||
.checkmark:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show the indicator (dot/circle) when checked */
|
||||
.container input:checked ~ .checkmark:after {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Style the indicator (dot/circle) */
|
||||
.container .checkmark:after {
|
||||
top: 9px;
|
||||
left: 9px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
@media (max-width: 568px) {
|
||||
.content-phone{
|
||||
flex-direction: column;
|
||||
gap: 1rem
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user