326 lines
11 KiB
Vue
326 lines
11 KiB
Vue
<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'}">{{ t('global.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> |