108 lines
5.0 KiB
Vue
108 lines
5.0 KiB
Vue
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router';
|
|
import { useAuthStore } from 'src/stores/auth-store';
|
|
import { useUiStore } from 'src/stores/ui-store';
|
|
import { ref } from 'vue';
|
|
import { RouteNames } from 'src/router/router-constants';
|
|
|
|
const authStore = useAuthStore();
|
|
const uiStore = useUiStore();
|
|
const router = useRouter();
|
|
const miniState = ref(true);
|
|
|
|
const goToPageName = (pageName: string) => {
|
|
router.push({ name: pageName }).catch(err => {
|
|
console.error('Error with Vue Router: ', err);
|
|
});
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
authStore.logout();
|
|
|
|
router.push({ name: 'login' }).catch(err => {
|
|
console.log('could not log you out: ', err);
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer overlay elevated side="left" :mini="miniState" @mouseenter="miniState = false"
|
|
@mouseleave="miniState = true" v-model="uiStore.isRightDrawerOpen">
|
|
<q-scroll-area class="fit">
|
|
<q-list>
|
|
<!-- Home -->
|
|
<q-item v-ripple clickable side @click="goToPageName(RouteNames.DASHBOARD)">
|
|
<q-item-section avatar>
|
|
<q-icon name="home" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.home') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<!-- Timesheet Validation -- Supervisor and Accounting only -->
|
|
<q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
|
|
v-if="['supervisor', 'accounting'].includes(authStore.user.role)">
|
|
<q-item-section avatar>
|
|
<q-icon name="event_available" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet_approvals') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<!-- Employee List -- Supervisor, Accounting and HR only -->
|
|
<q-item v-ripple clickable side @click="goToPageName(RouteNames.EMPLOYEE_LIST)"
|
|
v-if="['supervisor', 'accounting', 'human_resources'].includes(authStore.user.role)">
|
|
<q-item-section avatar>
|
|
<q-icon name="view_list" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.employee_list') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<!-- Employee Timesheet temp -- Employee, Supervisor, Accounting only -->
|
|
<q-item v-ripple clickable side @click="goToPageName(RouteNames.TIMESHEET_TEMP)"
|
|
v-if="['supervisor', 'accounting', 'employee'].includes(authStore.user.role)">
|
|
<q-item-section avatar>
|
|
<q-icon name="punch_clock" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.timesheet') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<!-- Profile -->
|
|
<q-item v-ripple clickable side @click="goToPageName(RouteNames.PROFILE)">
|
|
<q-item-section avatar>
|
|
<q-icon name="account_box" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.profile') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<!-- Help -->
|
|
<q-item v-ripple clickable @click="goToPageName('help')">
|
|
<q-item-section avatar>
|
|
<q-icon name="contact_support" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.help') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
|
|
<!-- Logout -->
|
|
<q-item v-ripple clickable @click="handleLogout" class="absolute-bottom">
|
|
<q-item-section avatar>
|
|
<q-icon name="exit_to_app" color="primary" />
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label class="text-uppercase text-weight-bold">{{ $t('nav_bar.logout') }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-scroll-area>
|
|
</q-drawer>
|
|
</template> |