ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: transaltion sidebar & home & company

Browse Source
This commit is contained in:
Alexandro Uc Santos
2024-05-22 20:42:42 -06:00
parent 6aa95a6bd1
commit 264a6c6dfc
9 changed files with 190 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Header.vue
View File

@@ -4,16 +4,19 @@ import CustomPopup from './CustomPopup.vue';
import { ref } from 'vue'; import { ref } from 'vue';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
import { watch } from 'vue'; import { watch } from 'vue';
// import { useAuthStore } from '../stores/auth';
const { t, locale } = useI18n(); const { t, locale } = useI18n();
const openPopup = ref(false); const openPopup = ref(false);
const options = ref([]); const options = ref([]);
const lang = ref(null); const lang = ref(null);
// const auth = useAuthStore();
onMounted(() => { onMounted(() => {
const langInit = localStorage.getItem('lang') ?? locale.value; const langInit = localStorage.getItem('lang') ?? locale.value;
locale.value = langInit locale.value = langInit
// auth.lang = langInit;
lang.value = {value: langInit, label: langInit == 'en' ? t('global.en') : t('global.es')} lang.value = {value: langInit, label: langInit == 'en' ? t('global.en') : t('global.es')}
options.value = [ options.value = [
{value: 'es',label: t('global.es')}, {value: 'es',label: t('global.es')},

12
src/components/NavBar.vue
View File

@@ -1,8 +1,8 @@
<script setup> <script setup>
import { RouterLink } from 'vue-router'; import { RouterLink } from 'vue-router';
import { useAuthStore } from '../stores/auth'; import { useAuthStore } from '../stores/auth';
import { ref } from 'vue'; import { useNotificationsStore } from '../stores/notifications';
import { useNotificationsStore } from '../stores/notifications'; import { useI18n } from 'vue-i18n';
const auth = useAuthStore(); const auth = useAuthStore();
const noty = useNotificationsStore(); const noty = useNotificationsStore();
@@ -12,6 +12,8 @@ import { useNotificationsStore } from '../stores/notifications';
$('#custom-navbar').toggleClass('active'); $('#custom-navbar').toggleClass('active');
}); });
}); });
const { t } = useI18n()
</script> </script>
<template> <template>
@@ -24,15 +26,15 @@ import { useNotificationsStore } from '../stores/notifications';
<RouterLink <RouterLink
v-if="auth.user?.permissions === 'role_shipper'" v-if="auth.user?.permissions === 'role_shipper'"
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">Transportistas</span></RouterLink> class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">{{ t('global.carriers') }}</span></RouterLink>
<RouterLink <RouterLink
v-if="auth.user?.permissions === 'role_carrier'" v-if="auth.user?.permissions === 'role_carrier'"
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">Cargas</span></RouterLink> class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.loads') }}</span></RouterLink>
<RouterLink <RouterLink
v-if="auth.user?.permissions === 'role_carrier'" v-if="auth.user?.permissions === 'role_carrier'"
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">Embarcadores</span></RouterLink> class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
<a <a
active-class="router-link-active" active-class="router-link-active"
@click="noty.toggleProfile" @click="noty.toggleProfile"

47
src/components/ProfilePopup.vue
View File

@@ -2,10 +2,29 @@
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth'; import { useAuthStore } from '../stores/auth';
import { useNotificationsStore } from '../stores/notifications'; import { useNotificationsStore } from '../stores/notifications';
import { useI18n } from 'vue-i18n';
import { ref } from 'vue';
import { onMounted } from 'vue';
import CustomRadioInput from './ui/CustomRadioInput.vue';
import { watch } from 'vue';
const noty = useNotificationsStore(); const noty = useNotificationsStore();
const auth = useAuthStore(); const auth = useAuthStore();
const router = useRouter(); const router = useRouter();
const lang = ref(null);
const { t, locale } = useI18n();
onMounted(() => {
console.log('INIT popup');
lang.value = localStorage.getItem('lang') ?? 'es';
locale.value = lang.value;
});
watch(lang, () => {
console.log('change lang')
locale.value = lang.value
localStorage.setItem('lang', lang.value)
})
const closePopup = () => { const closePopup = () => {
noty.toggleProfile() noty.toggleProfile()
@@ -32,7 +51,21 @@
<h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3> <h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3>
<p>{{ auth.user?.email }}</p> <p>{{ auth.user?.email }}</p>
<p>{{ auth.user?.phone }}</p> <p>{{ auth.user?.phone }}</p>
<br/> <p class="section-prefs">Preferencias de usuario</p>
<p class="label-item">Idioma:</p>
<CustomRadioInput
value="es"
:label="t('global.es')"
name="lang"
v-model:typeselected="lang"
/>
<CustomRadioInput
value="en"
:label="t('global.en')"
name="lang"
v-model:typeselected="lang"
/>
<br>
<button <button
class="btn btn-dark" class="btn btn-dark"
data-toggle="modal" data-toggle="modal"
@@ -75,6 +108,18 @@
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10)); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
} }
.section-prefs {
margin-top: 20px !important;
font-size: 1rem !important;
color: grey;
}
.label-item {
font-weight: 900 !important;
font-size: 1.2rem !important;
margin-bottom: 1rem;
}
.profile-card h3 { .profile-card h3 {
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;

33
src/components/Sidebar.vue
View File

@@ -2,20 +2,21 @@
import { RouterLink, useRoute, useRouter } from 'vue-router'; import { RouterLink, useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth'; import { useAuthStore } from '../stores/auth';
import Swal from 'sweetalert2'; import Swal from 'sweetalert2';
import { useI18n } from 'vue-i18n';
const route = useRoute(); const route = useRoute();
const router = useRouter();
const auth = useAuthStore(); const auth = useAuthStore();
const { t } = useI18n()
const handleLogout = () => { const handleLogout = () => {
Swal.fire({ Swal.fire({
title: 'Cerrar sesión', title: t('buttons.closeSesion'),
text: '¿Estás seguro de cerrar sesión?', text: t('labels.questionSignOut'),
icon: 'question', icon: 'question',
showCancelButton: true, showCancelButton: true,
cancelButtonColor: "#d33", cancelButtonColor: "#d33",
confirmButtonText: 'Si', confirmButtonText: t('buttons.yes'),
cancelButtonText: 'No', cancelButtonText: t('buttons.no'),
}).then(async(result) => { }).then(async(result) => {
if(result.isConfirmed) { if(result.isConfirmed) {
auth.logout(); auth.logout();
@@ -50,7 +51,7 @@
<i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i> <i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'company'}">Empresa</RouterLink> class="nav-link" :to="{name: 'company'}">{{ t('global.company') }}</RouterLink>
</div> </div>
</li> </li>
<li :class="[route.name === 'users' ? 'bg-nav-active' : '']"> <li :class="[route.name === 'users' ? 'bg-nav-active' : '']">
@@ -58,7 +59,7 @@
<i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i> <i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'users'}">Usuarios</RouterLink> class="nav-link" :to="{name: 'users'}">{{ t('global.users') }}</RouterLink>
</div> </div>
</li> </li>
<li :class="[route.name === 'locations' ? 'bg-nav-active' : '']"> <li :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
@@ -66,7 +67,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'}">Directorio interno</RouterLink> class="nav-link" :to="{name: 'locations'}">{{ t('global.directory') }}</RouterLink>
</div> </div>
</li> </li>
<li <li
@@ -76,7 +77,7 @@
<i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i> <i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="" active-class=""
class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink> class="nav-link" :to="{name: 'vehicles'}">{{t('global.vehicles')}}</RouterLink>
</div> </div>
</li> </li>
<li v-if="auth.user?.permissions === 'role_shipper'" :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']"> <li v-if="auth.user?.permissions === 'role_shipper'" :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
@@ -84,7 +85,7 @@
<i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i> <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="" active-class=""
class="nav-link" :to="{name: 'published-loads'}">Publicaciones</RouterLink> class="nav-link" :to="{name: 'published-loads'}">{{t('global.publications')}}</RouterLink>
</div> </div>
</li> </li>
<li v-if="auth.user?.permissions === 'role_carrier'" :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']"> <li v-if="auth.user?.permissions === 'role_carrier'" :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
@@ -92,7 +93,7 @@
<i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i> <i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="" active-class=""
class="nav-link" :to="{name: 'published-trucks'}">Ofertas aceptadas</RouterLink> class="nav-link" :to="{name: 'published-trucks'}">{{ t('global.acceptedOffers') }}</RouterLink>
</div> </div>
</li> </li>
<li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']"> <li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
@@ -100,7 +101,7 @@
<i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i> <i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'calendar'}">Calendario</RouterLink> class="nav-link" :to="{name: 'calendar'}">{{ t('global.calendar') }}</RouterLink>
</div> </div>
</li> </li>
<li <li
@@ -110,7 +111,7 @@
<i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i> <i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i>
<RouterLink <RouterLink
active-class="router-link-active" active-class="router-link-active"
class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink> class="nav-link" :to="{name: 'calculator'}">{{ t('global.calculator') }}</RouterLink>
</div> </div>
</li> </li>
<!-- <li <!-- <li
@@ -144,15 +145,15 @@
</ul> </ul>
<div class="eta-info"> <div class="eta-info">
<div class="divider"></div> <div class="divider"></div>
<RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">Aviso de privaciadad</RouterLink> <RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">{{ t('buttons.noticePrivacity') }}</RouterLink>
<RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">Términos y condiciones</RouterLink> <RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">{{ t('buttons.terms') }}</RouterLink>
<RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink> <RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center">
<i class="fa-solid fa-right-from-bracket"></i> <i class="fa-solid fa-right-from-bracket"></i>
<a @click="handleLogout" <a @click="handleLogout"
active-class="" active-class=""
class="nav-link m-2"> class="nav-link m-2">
Cerrar sesión {{ t('buttons.closeSesion') }}
</a> </a>
</div> </div>
</div> </div>

80
src/i18n/i18n.js
View File

@@ -15,6 +15,7 @@ const messages = {
questionCities: "What are the company's loading locations by city?", questionCities: "What are the company's loading locations by city?",
questionTrucks: "What type of transport does the company use?", questionTrucks: "What type of transport does the company use?",
infoCompanies: 'Additional company information', infoCompanies: 'Additional company information',
questionSignOut: 'Are you sure to sign out?',
selectSegment: 'Search by segment', selectSegment: 'Search by segment',
selectTruck: 'Search by type of transport', selectTruck: 'Search by type of transport',
selectState: 'Search by state', selectState: 'Search by state',
@@ -23,6 +24,14 @@ const messages = {
lastnames: 'Last name', lastnames: 'Last name',
phone1: 'Phone 1', phone1: 'Phone 1',
phone2: 'Phone 2', phone2: 'Phone 2',
typeCompany: 'Type of company',
codeId: 'Code',
dateMembership: 'Company member since',
segmentCompany: 'Company segment',
locationLoadState: 'Load location by state',
locationLoadCity: 'Load location by city',
truckUsed: 'Transports used',
infoCompany: 'General company information'
}, },
buttons: { buttons: {
enter: "Enter here", enter: "Enter here",
@@ -33,6 +42,9 @@ const messages = {
terms: 'Terms and Conditions', terms: 'Terms and Conditions',
noticePrivacity: 'Privacy notice', noticePrivacity: 'Privacy notice',
save: 'save', save: 'save',
closeSesion: 'Sign out',
yes: 'Yes',
no: 'No'
}, },
errors: { errors: {
requireds: "All fields required", requireds: "All fields required",
@@ -74,6 +86,20 @@ const messages = {
notFound: 'Oops! No matches found.', notFound: 'Oops! No matches found.',
infoUser: 'Personal information', infoUser: 'Personal information',
footer: 'ETA VIAPORTE ALL RIGHTS RESERVED', footer: 'ETA VIAPORTE ALL RIGHTS RESERVED',
company: 'Company',
users: 'Users',
directory: 'Internal directory',
publications: 'Publications',
calendar: 'Calendar',
carriers: 'Carriers',
shippers: 'Shippers',
vehicles: 'Vehicles',
loads: 'Loads',
acceptedOffers: 'Accepted offers',
calculator: 'Calculator',
cities: 'Cities',
states: 'States',
segments: 'Segments',
}, },
login: { login: {
title: 'Sign in', title: 'Sign in',
@@ -90,6 +116,19 @@ const messages = {
forgotPassword: "Forgot your password?", forgotPassword: "Forgot your password?",
notice: 'By registering you accept our', notice: 'By registering you accept our',
questionAccount: 'Do you already have an account?', questionAccount: 'Do you already have an account?',
},
dashboard: {
title: 'Administrative Dashboard',
totalLoads: 'Total loads this month',
activeLoads: 'Active loads',
segmentsChart: 'Most used segments',
statesChart: 'Most used states',
citiesChart: 'Most used cities',
trucksChart: 'Most used type of transport'
},
company: {
title: 'My company',
edit: 'Edit company',
} }
}, },
es: { es: {
@@ -105,6 +144,7 @@ es: {
questionSates: '¿Cuáles son las locaciones de carga de la empresa por estado?', questionSates: '¿Cuáles son las locaciones de carga de la empresa por estado?',
questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?', questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?',
questionTrucks: '¿Qué tipo de transportes utiliza la empresa?', questionTrucks: '¿Qué tipo de transportes utiliza la empresa?',
questionSignOut: '¿Estás seguro de cerrar sesión?',
infoCompanies: 'Información adicional de la empresa', infoCompanies: 'Información adicional de la empresa',
selectSegment: 'Busca por segmento', selectSegment: 'Busca por segmento',
selectTruck: 'Busca por tipo de transporte', selectTruck: 'Busca por tipo de transporte',
@@ -114,6 +154,14 @@ es: {
lastnames: 'Apellido(s)', lastnames: 'Apellido(s)',
phone1: 'Teléfono 1', phone1: 'Teléfono 1',
phone2: 'Teléfono 2', phone2: 'Teléfono 2',
typeCompany: 'Tipo de empresa',
codeId: 'Código',
dateMembership: 'Empresa miembro desde',
segmentCompany: 'Segmento de empresa',
locationLoadState: 'Ubicación de carga por estado',
locationLoadCity: 'Ubicación de carga por municipio',
truckUsed: 'Transportes utilizados',
infoCompany: 'Información general de la empresa'
}, },
buttons: { buttons: {
enter: "Ingresa aqui", enter: "Ingresa aqui",
@@ -123,7 +171,10 @@ es: {
resendCode: "Reenviar código", resendCode: "Reenviar código",
terms: 'Términos y condiciones', terms: 'Términos y condiciones',
noticePrivacity: 'Aviso de privaciadad', noticePrivacity: 'Aviso de privaciadad',
save: 'Guardar' save: 'Guardar',
closeSesion: 'Cerrar sesión',
yes: 'Si',
no: 'No'
}, },
errors: { errors: {
requireds: 'Todos los campos con obligatorios', requireds: 'Todos los campos con obligatorios',
@@ -165,6 +216,20 @@ es: {
notFound: 'Oops! No se encontro coincidencias.', notFound: 'Oops! No se encontro coincidencias.',
infoUser: 'Información personal', infoUser: 'Información personal',
footer: 'ETA VIAPORTE TODOS LOS DERECHOS RESERVADOS', footer: 'ETA VIAPORTE TODOS LOS DERECHOS RESERVADOS',
company: 'Empresa',
users: 'Usuarios',
directory: 'Directorio interno',
publications: 'Publicaciones',
calendar: 'Calendario',
carriers: 'Transportistas',
shippers: 'Embarcadores',
vehicles: 'Vehiculos',
loads: 'Cargas',
acceptedOffers: 'Ofertas aceptadas',
calculator: 'Calculadora',
cities: 'Ciudades',
states: 'Estados',
segments: 'Segmentos',
}, },
login: { login: {
title: 'Iniciar sesión', title: 'Iniciar sesión',
@@ -181,6 +246,19 @@ es: {
notHaveAccount: '¿No tienes una cuenta?', notHaveAccount: '¿No tienes una cuenta?',
notice: 'Al registrarte aceptas nuestros', notice: 'Al registrarte aceptas nuestros',
questionAccount: '¿Ya tienes una cuenta?', questionAccount: '¿Ya tienes una cuenta?',
},
dashboard: {
title: 'Dashboard Administrativo',
totalLoads: 'Total de cargas este mes',
activeLoads: 'Cargas activas',
segmentsChart: 'Segmentos más usados',
statesChart: 'Estados más usados',
citiesChart: 'Ciudades más usadas',
trucksChart: 'Tipo de transporte más usados'
},
company: {
title: 'Mi empresa',
edit: 'Editar empresa',
} }
} }
} }

17
src/services/auth.js
View File

@@ -24,8 +24,7 @@ export const login = async(body) => {
}; };
} }
} catch (error) { } catch (error) {
console.log(error.response) const errStr = error.response?.data?.error ?? 'Algo salio mal, intente más tarde';
const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde';
return { return {
msg: messagesError(errStr), msg: messagesError(errStr),
data: null data: null
@@ -50,7 +49,7 @@ export const renewToken = async() => {
}; };
} }
} catch (error) { } catch (error) {
const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde'; const errStr = error.response?.data?.error ?? 'Algo salio mal, intente más tarde';
return { return {
msg: 'Sesion expiro', msg: 'Sesion expiro',
data: null data: null
@@ -68,7 +67,7 @@ export const regiter = async(body) => {
}; };
} catch (error) { } catch (error) {
return { return {
msg: error.response.data.error ?? 'Algo salio mal, intente más tarde', msg: error.response?.data?.error ?? 'Algo salio mal, intente más tarde',
data: null data: null
}; };
} }
@@ -85,10 +84,10 @@ export const regiterConfirm = async(body) => {
} catch (error) { } catch (error) {
let msg = 'Algo salio mal, intente más tarde'; let msg = 'Algo salio mal, intente más tarde';
if(error.response.data.error) { if(error.response.data.error) {
if(error.response.data.error === 'Wrong OTP'){ if(error?.response?.data?.error === 'Wrong OTP'){
msg = 'Codigo ingresado incorrecto'; msg = 'Codigo ingresado incorrecto';
} else { } else {
msg = error.response.data.error; msg = error?.response?.data?.error;
} }
} }
return { return {
@@ -107,7 +106,7 @@ export const recoveryPassword = async(body) => {
data data
}; };
} catch (error) { } catch (error) {
const errStr = error.response.data.error ?? 'Algo salio mal, intente más tarde'; const errStr = error?.response?.data?.error ?? 'Algo salio mal, intente más tarde';
return { return {
msg: messagesError(errStr), msg: messagesError(errStr),
data: null data: null
@@ -126,7 +125,7 @@ export const recoveryPasswordConfirm = async(body) => {
} catch (error) { } catch (error) {
let msg = 'Algo salio mal, intente más tarde'; let msg = 'Algo salio mal, intente más tarde';
if(error.response.data.error) { if(error.response.data.error) {
if(error.response.data.error === 'Wrong OTP'){ if(error.response?.data?.error === 'Wrong OTP'){
msg = 'Codigo ingresado incorrecto'; msg = 'Codigo ingresado incorrecto';
} else { } else {
msg = error.response.data.error; msg = error.response.data.error;
@@ -149,7 +148,7 @@ export const complete_registry = async (body) => {
}; };
} catch (error) { } catch (error) {
return { return {
msg: error.response.data.error ?? 'Algo salio mal, intente más tarde', msg: error?.response?.data?.error ?? 'Algo salio mal, intente más tarde',
data: null data: null
}; };
} }

4
src/stores/auth.js
View File

@@ -20,6 +20,7 @@ export const useAuthStore = defineStore('auth', () => {
const checking = ref(false); const checking = ref(false);
const authStatus = ref('checking'); const authStatus = ref('checking');
const token = ref('') const token = ref('')
const lang = ref('es');
const user = ref(null); const user = ref(null);
const publicNames = [ const publicNames = [
'terms-conditions', 'terms-conditions',
@@ -107,6 +108,7 @@ export const useAuthStore = defineStore('auth', () => {
authStatus, authStatus,
checkSession, checkSession,
authenticationPromise, authenticationPromise,
updateProfile updateProfile,
lang
} }
}); });

24
src/views/HomeView.vue
View File

@@ -9,6 +9,7 @@
import CardEmpty from '../components/CardEmpty.vue'; import CardEmpty from '../components/CardEmpty.vue';
import { useAuthStore } from '../stores/auth'; import { useAuthStore } from '../stores/auth';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
const auth = useAuthStore(); const auth = useAuthStore();
@@ -21,6 +22,7 @@
const states = ref([]); const states = ref([]);
const vehicles = ref([]); const vehicles = ref([]);
const nOfLoads = ref(0); const nOfLoads = ref(0);
const { t, locale } = useI18n()
onMounted(() => { onMounted(() => {
if(user.value) { if(user.value) {
@@ -74,10 +76,10 @@
</script> </script>
<template> <template>
<h1 class="title my-4">Dashboard Administrativo</h1> <h1 class="title my-4">{{ t('dashboard.title') }}</h1>
<div class="container-dashboard" v-if="nOfLoads > 0"> <div class="container-dashboard" v-if="nOfLoads > 0">
<div class="card-fixed card-dashboard"> <div class="card-fixed card-dashboard">
<h3>Total de cargas este mes</h3> <h3>{{ t('dashboard.totalLoads') }}</h3>
<div class="main-info"> <div class="main-info">
{{ nOfLoads }} {{ nOfLoads }}
<div class="indicator-text" style="color: green;"> <div class="indicator-text" style="color: green;">
@@ -89,7 +91,7 @@
</div> </div>
<!-- <ChartLoad/> --> <!-- <ChartLoad/> -->
<div class="card-fixed card-dashboard"> <div class="card-fixed card-dashboard">
<h3>Cargas activas</h3> <h3>{{ t('dashboard.activeLoads') }}</h3>
<div class="card-chart"> <div class="card-chart">
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<DoughnutChartStatistics <DoughnutChartStatistics
@@ -97,12 +99,12 @@
:data="loadsData" :data="loadsData"
:data-model="loadsType" :data-model="loadsType"
target-find="name" target-find="name"
target-label="status" :target-label="(locale == 'es') ? 'status' : 'name'"
/> />
</div> </div>
</div> </div>
<div class="card-fixed card-dashboard"> <div class="card-fixed card-dashboard">
<h3>Segmentos más usados</h3> <h3>{{ t('dashboard.segmentsChart') }}</h3>
<div class="card-chart"> <div class="card-chart">
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<DoughnutChartStatistics <DoughnutChartStatistics
@@ -114,34 +116,34 @@
</div> </div>
</div> </div>
<div class="card-fixed card-dashboard"> <div class="card-fixed card-dashboard">
<h3>Estados más usados</h3> <h3>{{ t('dashboard.statesChart') }}</h3>
<div class="card-chart"> <div class="card-chart">
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<BarChartStatistics <BarChartStatistics
v-else v-else
label="Estados" :label="t('global.states')"
:data="states" :data="states"
/> />
</div> </div>
</div> </div>
<div class="card-fixed card-dashboard"> <div class="card-fixed card-dashboard">
<h3>Ciudades más usadas</h3> <h3>{{ t('dashboard.citiesChart') }}</h3>
<div class="card-chart"> <div class="card-chart">
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<BarChartStatistics <BarChartStatistics
v-else v-else
label="Ciudades" :label="t('global.cities')"
:data="cities" :data="cities"
/> />
</div> </div>
</div> </div>
<div class="card-fixed card-dashboard"> <div class="card-fixed card-dashboard">
<h3>Tipo de transporte más usados</h3> <h3>{{ t('dashboard.trucksChart') }}</h3>
<div class="card-chart"> <div class="card-chart">
<Spiner v-if="loading"/> <Spiner v-if="loading"/>
<BarChartStatistics <BarChartStatistics
v-else v-else
label="Vehiculos" :label="t('global.vehicles')"
:data="vehicles" :data="vehicles"
/> />
</div> </div>

27
src/views/MyCompanyView.vue
View File

@@ -6,12 +6,13 @@
import {getTypeCompany} from '../helpers/type_company' import {getTypeCompany} from '../helpers/type_company'
import {getDateMonthDay} from '../helpers/date_formats' import {getDateMonthDay} from '../helpers/date_formats'
import EditCompanyModal from '../components/ui/EditCompanyModal.vue'; import EditCompanyModal from '../components/ui/EditCompanyModal.vue';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
const auth = useAuthStore() const auth = useAuthStore()
const company = useCompanyStore(); const company = useCompanyStore();
const { user, authStatus } = storeToRefs(auth); const { user } = storeToRefs(auth);
const { t } = useI18n()
onMounted(() => { onMounted(() => {
if(user.value) { if(user.value) {
@@ -37,7 +38,7 @@ import { storeToRefs } from 'pinia';
<template> <template>
<EditCompanyModal v-if="company.loading === false"/> <EditCompanyModal v-if="company.loading === false"/>
<div> <div>
<h2 class="title my-5">Mi empresa</h2> <h2 class="title my-5">{{ t('company.title') }}</h2>
<div class="card-info"> <div class="card-info">
<Spiner v-if="company.loading"/> <Spiner v-if="company.loading"/>
<div v-else class="view"> <div v-else class="view">
@@ -47,7 +48,7 @@ import { storeToRefs } from 'pinia';
v-if="auth.user?.job_role === 'owner'" v-if="auth.user?.job_role === 'owner'"
class="btn-primary-sm" class="btn-primary-sm"
data-toggle="modal" data-target="#editcompanymodal" data-toggle="modal" data-target="#editcompanymodal"
><i class="fa-solid fa-pen-to-square"></i> Editar empresa</button> ><i class="fa-solid fa-pen-to-square"></i> {{ t('company.edit') }}</button>
</div> </div>
<div class="divider mb-4"></div> <div class="divider mb-4"></div>
<div class="row"> <div class="row">
@@ -57,19 +58,19 @@ import { storeToRefs } from 'pinia';
{{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">{{ t('labels.typeCompany') }}: </span>
{{getTypeCompany(company.company?.company_type)}} {{getTypeCompany(company.company?.company_type)}}
</div> </div>
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Código: </span> <span class="font-weight-bold">{{ t('labels.codeId') }}: </span>
{{company.company?.company_code}} {{company.company?.company_code}}
</div> </div>
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Empresa miembro desde: </span> <span class="font-weight-bold">{{ t('labels.dateMembership') }}: </span>
{{getDateMonthDay(company.company?.createAt)}} {{getDateMonthDay(company.company?.createAt)}}
</div> </div>
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Segmento de empresa: </span> <span class="font-weight-bold">{{ t('labels.segmentCompany') }}: </span>
{{company.company?.categories.map((e) => e.name).join(', ')}} {{company.company?.categories.map((e) => e.name).join(', ')}}
</div> </div>
<!-- <div class="item-company"> <!-- <div class="item-company">
@@ -79,19 +80,19 @@ import { storeToRefs } from 'pinia';
</div> </div>
<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">Ubicación de carga por estado: </span> <span class="font-weight-bold">{{ t('labels.locationLoadState') }}: </span>
{{company.company?.company_state.map((e) => e).join(', ')}} {{company.company?.company_state.map((e) => e).join(', ')}}
</div> </div>
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Ubicación de carga por municipio: </span> <span class="font-weight-bold">{{ t('labels.locationLoadCity') }}: </span>
{{company.company?.company_city.map((e) => e).join(', ')}} {{company.company?.company_city.map((e) => e).join(', ')}}
</div> </div>
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Transportes utilizados: </span> <span class="font-weight-bold">{{ t('labels.truckUsed') }}: </span>
{{company.company?.truck_type.map((e) => e).join(', ')}} {{company.company?.truck_type.map((e) => e).join(', ')}}
</div> </div>
<div class="item-company"> <div class="item-company">
<span class="font-weight-bold">Información general de la empresa: </span> <span class="font-weight-bold">{{ t('labels.infoCompany') }}: </span>
{{ company.company?.company_description }} {{ company.company?.company_description }}
</div> </div>
</div> </div>