add: services
This commit is contained in:
Alexandro Uc
99
src/layouts/components/ConfigPopup.vue
Normal file
99
src/layouts/components/ConfigPopup.vue
Normal file
@@ -0,0 +1,99 @@
|
||||
<script setup>
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
import CustomSwitch from '../../components/CustomSwitch.vue'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { ref } from 'vue';
|
||||
import { onMounted } from 'vue';
|
||||
import { watch } from 'vue';
|
||||
import { usePrivacyStore } from '../../stores/privacy';
|
||||
|
||||
const lang = ref(null);
|
||||
const privacy = ref(false);
|
||||
|
||||
const noty = useNotificationsStore();
|
||||
const privacyStore = usePrivacyStore();
|
||||
const { t, locale } = useI18n();
|
||||
|
||||
onMounted(() => {
|
||||
lang.value = localStorage.getItem('lang') ?? 'es';
|
||||
locale.value = lang.value;
|
||||
privacy.value = privacyStore.privacy;
|
||||
});
|
||||
|
||||
watch(lang, () => {
|
||||
locale.value = lang.value
|
||||
localStorage.setItem('lang', lang.value)
|
||||
})
|
||||
|
||||
watch(privacy, () => {
|
||||
privacyStore.updatePrivacy(privacy.value);
|
||||
})
|
||||
|
||||
const closePopup = () => {
|
||||
noty.toggleConfig();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="noty.openConfig"
|
||||
>
|
||||
<div
|
||||
class="content-popup"
|
||||
@click="closePopup()"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="profile-card">
|
||||
<i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
|
||||
<br>
|
||||
<CustomSwitch
|
||||
label="Activar configuracion de privacidad"
|
||||
v-model="privacy"
|
||||
name="privacity"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.content-popup {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 100wv;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer;
|
||||
bottom: 0px;
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
position: fixed;
|
||||
flex: 1;
|
||||
right: 20px;
|
||||
top: 70px;
|
||||
z-index: 2000;
|
||||
width: 340px;
|
||||
background-color: #FFF;
|
||||
opacity: 1;
|
||||
border-radius: 13px;
|
||||
padding: 20px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
}
|
||||
</style>
|
||||
184
src/layouts/components/NavBar.vue
Normal file
184
src/layouts/components/NavBar.vue
Normal file
@@ -0,0 +1,184 @@
|
||||
<script setup>
|
||||
import { RouterLink } from 'vue-router';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import { getNotificationsCompany } from '../../services/company';
|
||||
|
||||
const auth = useAuthStore();
|
||||
const noty = useNotificationsStore();
|
||||
const permission = auth.user.permissions;
|
||||
const jobRole = auth.user.job_role;
|
||||
const { t } = useI18n()
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#sidebarCollapse').on('click', function () {
|
||||
$('#sidebar').toggleClass('active');
|
||||
$('#custom-navbar').toggleClass('active');
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
getNotifications();
|
||||
setInterval(() => {
|
||||
getNotifications();
|
||||
}, 600000); // 5 minutos
|
||||
});
|
||||
|
||||
const getNotifications = async () => {
|
||||
const resp = await getNotificationsCompany();
|
||||
if(resp.data.length > 0) {
|
||||
noty.newNoty = true;
|
||||
}
|
||||
noty.notifications = resp.data;
|
||||
}
|
||||
|
||||
const roleCheck = 'warehouse';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="navbar navbar-expand-lg navbar-light custom-navbar" id="custom-navbar">
|
||||
<div class="nav-items">
|
||||
<button type="button" id="sidebarCollapse" class="btn btn-info btn-menu">
|
||||
<i class="fas fa-align-left"></i>
|
||||
</button>
|
||||
<div class="nav-options">
|
||||
<RouterLink
|
||||
v-if="permission === 'role_shipper' && jobRole !== roleCheck"
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'search-vehicles'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.vehicles') }}</span></RouterLink>
|
||||
<RouterLink
|
||||
v-if="permission === 'role_shipper' && jobRole !== roleCheck"
|
||||
active-class="router-link-active"
|
||||
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="permission === 'role_carrier' && jobRole !== roleCheck"
|
||||
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">{{ t('global.loads') }}</span></RouterLink>
|
||||
<RouterLink
|
||||
v-if="permission === 'role_carrier' && jobRole !== roleCheck"
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
|
||||
<div
|
||||
class="nav-link noty"
|
||||
@click="noty.toggleNotifications"
|
||||
>
|
||||
<i class="fa-regular fa-bell icon"></i>
|
||||
<div
|
||||
class="box-badge"
|
||||
v-if="noty.newNoty"
|
||||
>
|
||||
<span class="badge bg-danger custom-badge">{{ noty.notifications.length }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a
|
||||
active-class="router-link-active"
|
||||
@click="noty.toggleProfile"
|
||||
class="nav-link"><i class="fa-regular fa-user"></i></a>
|
||||
<a
|
||||
active-class="router-link-active"
|
||||
@click="noty.toggleConfig"
|
||||
class="nav-link">
|
||||
<i class="fa-solid fa-gear"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-items {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
display: block;
|
||||
width: calc(100vw - 236px);
|
||||
background-color: #FFF;
|
||||
padding: 16px 0px;
|
||||
}
|
||||
|
||||
.nav-options {
|
||||
display: flex;
|
||||
margin-left: 32px;
|
||||
gap: 1rem;
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.btn-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
cursor: pointer;
|
||||
color: #323030;
|
||||
font-size: 1.3rem;
|
||||
margin-right: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.nav-link:hover{
|
||||
color: #282727;
|
||||
}
|
||||
.nav-link:focus{
|
||||
color: #282727;
|
||||
}
|
||||
|
||||
.router-link-active{
|
||||
color: #282727;
|
||||
}
|
||||
|
||||
#custom-navbar.active {
|
||||
margin-left: 220px;
|
||||
display: block;
|
||||
width: calc(100% - 220px) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.nav-options {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
font-size: 1.1rem;
|
||||
margin-right: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.custom-navbar {
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
.nav-items {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.btn-menu {
|
||||
margin-left: 8px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
font-size: 1.5rem;
|
||||
color: #323030;
|
||||
}
|
||||
.noty {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.box-badge {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
}
|
||||
.custom-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: normal;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
</style>
|
||||
135
src/layouts/components/NotificationCard.vue
Normal file
135
src/layouts/components/NotificationCard.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import {getDateTime} from '../../helpers/date_formats';
|
||||
import { deleteNotification } from '../../services/company';
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
import Spiner from '../../components/ui/Spiner.vue';
|
||||
|
||||
const props = defineProps({
|
||||
noty: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
})
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
const { t } = useI18n();
|
||||
const router = useRouter();
|
||||
const notyStore = useNotificationsStore();
|
||||
|
||||
const title = computed(() => {
|
||||
return props.noty.tag == 'new_proposal' ? t('noty.newProposalTitle') : props.noty.tag == 'accepted_proposal' ? t('noty.acceptedProposalTitle') : t('noty.rejectedProposalTitle');
|
||||
})
|
||||
|
||||
const description = computed(() => {
|
||||
return props.noty.tag == 'new_proposal'
|
||||
? t('noty.newProposalDesc')
|
||||
: props.noty.tag == 'accepted_proposal' ? t('noty.acceptedProposalDesc')
|
||||
: t('noty.rejectedProposalDesc')
|
||||
})
|
||||
|
||||
const deleteNoty = async() => {
|
||||
loading.value = true;
|
||||
const resp = await deleteNotification(props.noty._id);
|
||||
if(resp.msg === 'Done') {
|
||||
notyStore.removeNoty(props.noty._id);
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const openNoty = () => {
|
||||
notyStore.toggleNotifications();
|
||||
if(props.noty.tag === 'new_proposal') {
|
||||
router.push({name: 'published-loads', params: {id: props.noty.proposalId}});
|
||||
} else {
|
||||
router.push({name: 'published-trucks', params: {id: props.noty.proposalId}});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="noty-card"
|
||||
@click="openNoty"
|
||||
>
|
||||
<div
|
||||
class="noty-icon"
|
||||
:style="{
|
||||
background: (noty.tag === 'accepted_proposal') ? '#4CAF50' : (noty.tag === 'new_proposal') ? '#FFC107' : 'red'
|
||||
}"
|
||||
>
|
||||
<i v-if="noty.tag === 'reject_proposal'" class="fa-solid fa-ban"></i>
|
||||
<i v-if="noty.tag === 'accepted_proposal'" class="fa-solid fa-clipboard-check"></i>
|
||||
<i v-if="noty.tag === 'new_proposal'" class="fa-solid fa-envelope-open-text"></i>
|
||||
</div>
|
||||
<div class="noty-body">
|
||||
<h3>{{ title }}</h3>
|
||||
<p>{{ description }} <span class="font-bold">{{props.noty.description.toUpperCase()}}</span></p>
|
||||
<p class="date">{{ getDateTime(noty.createdAt, 0) }}</p>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<p
|
||||
class="noty-action"
|
||||
@click="deleteNoty"
|
||||
v-if="!loading"
|
||||
>{{ t('buttons.delete') }}</p>
|
||||
<Spiner v-else/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.noty-card {
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 8px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noty-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 100%;
|
||||
color: white;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
.noty-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 1rem;
|
||||
flex: 1;
|
||||
/* width: 220px; */
|
||||
}
|
||||
.noty-body h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.noty-body p {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
margin: 0;
|
||||
}
|
||||
.noty-body .date {
|
||||
margin: 5px 0px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
.noty-action {
|
||||
margin-left: 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
color: #f4505e;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
122
src/layouts/components/NotificationsPopup.vue
Normal file
122
src/layouts/components/NotificationsPopup.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import NotificationCard from './NotificationCard.vue';
|
||||
|
||||
const noty = useNotificationsStore();
|
||||
const { t } = useI18n();
|
||||
|
||||
const closePopup = () => {
|
||||
noty.toggleNotifications()
|
||||
noty.newNoty = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="noty.openNotifications"
|
||||
>
|
||||
<div
|
||||
class="background"
|
||||
@click="closePopup()"
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="noty-content"
|
||||
>
|
||||
<i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
|
||||
<h3 class="ps-1">{{ t('noty.title') }}</h3>
|
||||
<div class="body">
|
||||
<NotificationCard
|
||||
v-if="noty.notifications.length > 0"
|
||||
v-for="notification in noty.notifications"
|
||||
:key="notification._id"
|
||||
:noty="notification"
|
||||
/>
|
||||
<div v-else>
|
||||
<p class="text-center">{{ t('noty.empty') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.background {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
width: 100wv;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer;
|
||||
bottom: 0px;
|
||||
background-color: #000;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.noty-content {
|
||||
position: fixed;
|
||||
right: 10px;
|
||||
top: 70px;
|
||||
z-index: 2000;
|
||||
width: 420px;
|
||||
background-color: #FFF;
|
||||
opacity: 1;
|
||||
border-radius: 13px;
|
||||
padding: 20px 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
||||
}
|
||||
|
||||
.body {
|
||||
overflow-y: auto;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.noty-content h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.noty-content p {
|
||||
margin-top: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
@media (max-width: 568px) {
|
||||
.noty-content {
|
||||
right: 5px;
|
||||
top: 50px;
|
||||
width: 95%;
|
||||
padding: 16px 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
326
src/layouts/components/Sidebar.vue
Normal file
326
src/layouts/components/Sidebar.vue
Normal file
@@ -0,0 +1,326 @@
|
||||
<script setup>
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '../../stores/auth';
|
||||
import Swal from 'sweetalert2';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useCompanyStore } from '../../stores/company';
|
||||
import { useVehiclesStore } from '../../stores/vehicles';
|
||||
import { useLoadsStore } from '../../stores/loads';
|
||||
import { useNotificationsStore } from '../../stores/notifications';
|
||||
|
||||
const route = useRoute();
|
||||
const auth = useAuthStore();
|
||||
const company = useCompanyStore();
|
||||
const vehicles = useVehiclesStore();
|
||||
const loads = useLoadsStore();
|
||||
const noty = useNotificationsStore();
|
||||
const router = useRouter();
|
||||
const permission = auth.user?.permissions;
|
||||
const jobRole = auth.user?.job_role;
|
||||
const { t } = useI18n()
|
||||
|
||||
const handleLogout = () => {
|
||||
Swal.fire({
|
||||
title: t('buttons.closeSesion'),
|
||||
text: t('labels.questionSignOut'),
|
||||
icon: 'question',
|
||||
showCancelButton: true,
|
||||
cancelButtonColor: "#d33",
|
||||
confirmButtonText: t('buttons.yes'),
|
||||
cancelButtonText: t('buttons.no'),
|
||||
}).then(async(result) => {
|
||||
if(result.isConfirmed) {
|
||||
auth.logout();
|
||||
company.clear();
|
||||
vehicles.clear();
|
||||
loads.clear();
|
||||
noty.clear();
|
||||
router.push({name: 'login'});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const roleCheck = 'warehouse';
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<a href="https://etaviaporte.com/" target="_blank">
|
||||
<img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
|
||||
</a>
|
||||
</div>
|
||||
<p class="my-4"><i class="fa-regular fa-building icon-header"></i> <span class="company-name">{{auth.user?.company?.company_name}}</span></p>
|
||||
<!-- <p><i class="fa-regular fa-user icon-header"></i> <span>{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p> -->
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<ul class="list-unstyled components">
|
||||
<li
|
||||
v-if="jobRole !== roleCheck"
|
||||
:class="[route.name === 'home' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-gauge-high" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'home'}">Dashboard</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="jobRole !== roleCheck"
|
||||
:class="[route.name === 'company' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<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'}">{{ t('global.company') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="jobRole !== roleCheck"
|
||||
:class="[route.name === 'users' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<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'}">{{ t('global.users') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="jobRole !== roleCheck"
|
||||
:class="[route.name === 'locations' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class=""
|
||||
class="nav-link" :to="{name: 'locations'}">{{ t('global.directory') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="permission === 'role_carrier' && jobRole !== roleCheck"
|
||||
:class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class=""
|
||||
class="nav-link" :to="{name: 'vehicles'}">{{t('global.vehicles')}}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="permission === 'role_shipper' && jobRole !== roleCheck"
|
||||
:class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<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'}">{{t('global.publications')}}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="permission === 'role_carrier' && jobRole !== roleCheck"
|
||||
:class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<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'}">{{ t('global.acceptedOffers') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="jobRole !== roleCheck"
|
||||
:class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<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'}">{{ t('global.calendar') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="jobRole === roleCheck"
|
||||
:class="[route.name === 'store' ? 'bg-nav-active' : '']"
|
||||
>
|
||||
<div>
|
||||
<i class="fa-solid fa-shop-lock" :class="[route.name === 'store' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class="router-link-active"
|
||||
class="nav-link" :to="{name: 'store'}">{{ t('store.title') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="permission === 'role_carrier' && jobRole !== roleCheck"
|
||||
:class="[route.name === 'calculator' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<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'}">{{ t('global.calculator') }}</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="permission === 'role_shipper' && jobRole !== roleCheck"
|
||||
:class="[route.name === 'groups' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-regular fa-address-book" :class="[route.name === 'groups' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class=""
|
||||
class="nav-link" :to="{name: 'groups'}">Lista privada</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="eta-info">
|
||||
<div class="divider"></div>
|
||||
<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">
|
||||
{{ t('buttons.closeSesion') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
#sidebar {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
// min-height: 100vh;
|
||||
overflow-y: scroll;
|
||||
bottom: 0;
|
||||
width: 220px;
|
||||
left: 0;
|
||||
z-index: 1030;
|
||||
background: #323030;
|
||||
color: #FFF;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
#sidebar .sidebar-header {
|
||||
padding: 20px;
|
||||
/* background: #FFF;
|
||||
color: #323030; */
|
||||
background: #323030;
|
||||
color: #FFF;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.icon-header {
|
||||
font-size: 24px;
|
||||
// color: #FBBA33;
|
||||
color: #FFF;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.company-name {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin-top: 16px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#sidebar.active {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
#sidebar ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #323030;
|
||||
}
|
||||
|
||||
.bg-nav-active {
|
||||
opacity: 0.4;
|
||||
transition: opacity 500ms ease-in-out;
|
||||
}
|
||||
|
||||
#sidebar ul li div{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#sidebar ul li i{
|
||||
font-size: 20px;
|
||||
color: #897c7c;
|
||||
}
|
||||
|
||||
#sidebar ul li.active > a, a[aria-expanded="true"] {
|
||||
color: #fff;
|
||||
background: #6d7fcc;
|
||||
}
|
||||
|
||||
a[data-toggle="collapse"] {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
cursor: pointer;
|
||||
color: #ebd6d6;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.router-link-active{
|
||||
color: #FFF;
|
||||
}
|
||||
.nav-link:hover{
|
||||
color: #FFF;
|
||||
}
|
||||
.nav-link:focus{
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
.eta-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
bottom: 10px;
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
|
||||
.link-eta {
|
||||
font-size: 14px;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
color: #FFF;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
#sidebar {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
width: 220px;
|
||||
z-index: 4;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user