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 { onMounted } from 'vue';
import { watch } from 'vue';
// import { useAuthStore } from '../stores/auth';
const { t, locale } = useI18n();
const openPopup = ref(false);
const options = ref([]);
const lang = ref(null);
// const auth = useAuthStore();
onMounted(() => {
const langInit = localStorage.getItem('lang') ?? locale.value;
locale.value = langInit
// auth.lang = langInit;
lang.value = {value: langInit, label: langInit == 'en' ? t('global.en') : t('global.es')}
options.value = [
{value: 'es',label: t('global.es')},

12
src/components/NavBar.vue
View File

@@ -1,8 +1,8 @@
<script setup>
import { RouterLink } from 'vue-router';
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 noty = useNotificationsStore();
@@ -12,6 +12,8 @@ import { useNotificationsStore } from '../stores/notifications';
$('#custom-navbar').toggleClass('active');
});
});
const { t } = useI18n()
</script>
<template>
@@ -24,15 +26,15 @@ import { useNotificationsStore } from '../stores/notifications';
<RouterLink
v-if="auth.user?.permissions === 'role_shipper'"
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
v-if="auth.user?.permissions === 'role_carrier'"
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
v-if="auth.user?.permissions === 'role_carrier'"
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
active-class="router-link-active"
@click="noty.toggleProfile"

47
src/components/ProfilePopup.vue
View File

@@ -2,10 +2,29 @@
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';
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 auth = useAuthStore();
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 = () => {
noty.toggleProfile()
@@ -32,7 +51,21 @@
<h3>{{auth.user?.first_name}} {{ auth.user?.last_name }}</h3>
<p>{{ auth.user?.email }}</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
class="btn btn-dark"
data-toggle="modal"
@@ -75,6 +108,18 @@
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 {
margin-top: 20px;
margin-bottom: 20px;

33
src/components/Sidebar.vue
View File

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