111 lines
3.1 KiB
Vue
111 lines
3.1 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { useAuthStore } from 'src/modules/stores/auth.store';
|
|
// import { getInitials } from 'src/helpers/object';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const authStore = useAuthStore();
|
|
|
|
const userConnected = authStore.user;
|
|
const userRole: string = userConnected.role;
|
|
const leftDrawerOpen = ref(false);
|
|
|
|
function toggleLeftDrawer() {
|
|
leftDrawerOpen.value = !leftDrawerOpen.value;
|
|
}
|
|
|
|
const goToUsers = () => {
|
|
router.replace('/users');
|
|
};
|
|
|
|
const goToShiftsValidations = () => {
|
|
router.replace('/time_sheet_validations');
|
|
};
|
|
|
|
const goToHome = () => {
|
|
router.replace('/');
|
|
};
|
|
|
|
// const goToHelp = () => {
|
|
// router.replace('/help');
|
|
// };
|
|
</script>
|
|
|
|
<template>
|
|
<q-footer bordered class="bg-white">
|
|
<q-tabs
|
|
no-caps
|
|
active-color="primary"
|
|
indicator-color="transparent"
|
|
class="text-grey-8"
|
|
>
|
|
<q-tab name="home" icon="home" @click="goToHome" />
|
|
<!-- <q-tab name="help" icon="help" @click="goToHelp" /> -->
|
|
<q-tab name="menu" icon="menu" @click="toggleLeftDrawer" />
|
|
<q-drawer v-model="leftDrawerOpen" side="right">
|
|
<q-scroll-area
|
|
style="
|
|
height: calc(100% - 150px);
|
|
margin-top: 150px;
|
|
border-right: 1px solid #ddd;
|
|
"
|
|
>
|
|
<q-list padding>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="route.path === '/users'"
|
|
active-class="bg-primary text-white"
|
|
@click="goToUsers"
|
|
v-if="userRole === 'admin'"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="list" />
|
|
</q-item-section>
|
|
|
|
<q-item-section> {{ $t('navBar.navItem_1') }} </q-item-section>
|
|
</q-item>
|
|
<q-item
|
|
clickable
|
|
v-ripple
|
|
:active="route.path === '/time_sheet_validations'"
|
|
active-class="bg-primary text-white"
|
|
@click="goToShiftsValidations"
|
|
v-if="userRole === 'admin'"
|
|
>
|
|
<q-item-section avatar>
|
|
<q-icon name="supervisor_account" />
|
|
</q-item-section>
|
|
|
|
<q-item-section>{{ $t('navBar.navItem_2') }} </q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-scroll-area>
|
|
|
|
<q-img
|
|
class="absolute-top"
|
|
src="https://cdn.quasar.dev/img/material.png"
|
|
style="height: 150px"
|
|
>
|
|
<div class="absolute-bottom bg-transparent">
|
|
<!-- <q-avatar color="primary" size="68px" class="q-mb-sm">
|
|
{{
|
|
getInitials(
|
|
`${userConnected.first_name} ${userConnected.last_name}`,
|
|
)
|
|
}}</q-avatar -->
|
|
>
|
|
|
|
<div class="text-weight-bold">
|
|
{{ userConnected.firstName }} {{ userConnected.lastName }}
|
|
</div>
|
|
<div>{{ userConnected.email }}</div>
|
|
</div>
|
|
</q-img>
|
|
</q-drawer>
|
|
</q-tabs>
|
|
</q-footer>
|
|
</template>
|