140 lines
4.8 KiB
Vue
140 lines
4.8 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';
|
|
import { ModuleNames } from 'src/modules/shared/models/user.models';
|
|
|
|
const auth_store = useAuthStore();
|
|
const ui_store = useUiStore();
|
|
const router = useRouter();
|
|
const is_mini = ref(true);
|
|
|
|
const goToPageName = (page_name: string) => {
|
|
router.push({ name: page_name }).catch(err => {
|
|
console.error('Error with Vue Router: ', err);
|
|
});
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
auth_store.logout();
|
|
|
|
router.push({ name: 'login' }).catch(err => {
|
|
console.error('could not log you out: ', err);
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<q-drawer
|
|
v-model="ui_store.is_left_drawer_open"
|
|
:persistent="!$q.platform.is.mobile"
|
|
mini-to-overlay
|
|
elevated
|
|
side="left"
|
|
:mini="is_mini"
|
|
@mouseenter="is_mini = false"
|
|
@mouseleave="is_mini = true"
|
|
class="bg-dark z-max column no-wrap"
|
|
:class="!$q.platform.is.mobile && is_mini ? 'items-center' : 'items-start'"
|
|
>
|
|
<!-- Home -->
|
|
<q-btn
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="home"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.home')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
|
|
@click="goToPageName(RouteNames.DASHBOARD)"
|
|
/>
|
|
|
|
<!-- Timesheet Validation -->
|
|
<q-btn
|
|
v-if="auth_store.user?.user_module_access.includes(ModuleNames.TIMESHEETS_APPROVAL)"
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="event_available"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.timesheet_approvals')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
|
|
@click="goToPageName(RouteNames.TIMESHEET_APPROVALS)"
|
|
/>
|
|
|
|
<!-- Employee List -->
|
|
<q-btn
|
|
v-if="auth_store.user?.user_module_access.includes(ModuleNames.EMPLOYEE_LIST)"
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="groups"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.employee_list')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
|
|
@click="goToPageName(RouteNames.EMPLOYEE_LIST)"
|
|
/>
|
|
|
|
<!-- Employee Timesheet -->
|
|
<q-btn
|
|
v-if="auth_store.user?.user_module_access.includes(ModuleNames.TIMESHEETS)"
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="punch_clock"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.timesheet')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
|
|
@click="goToPageName(RouteNames.TIMESHEET)"
|
|
/>
|
|
|
|
<!-- Profile -->
|
|
<q-btn
|
|
v-if="auth_store.user?.user_module_access.includes(ModuleNames.PERSONAL_PROFILE)"
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="account_box"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.profile')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
|
|
@click="goToPageName(RouteNames.PROFILE)"
|
|
/>
|
|
|
|
<!-- Help -->
|
|
<q-btn
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="contact_support"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.help')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? '': 'q-px-sm'"
|
|
@click="goToPageName(RouteNames.HELP)"
|
|
/>
|
|
|
|
<!-- Logout -->
|
|
<q-btn
|
|
flat
|
|
dense
|
|
no-wrap
|
|
size="lg"
|
|
icon="exit_to_app"
|
|
:label="!$q.platform.is.mobile && is_mini ? '' : $t('nav_bar.logout')"
|
|
class="col-auto text-uppercase text-weight-bold q-my-xs"
|
|
:class="!$q.platform.is.mobile && is_mini ? 'absolute-bottom': 'absolute-bottom-left'"
|
|
@click="handleLogout"
|
|
/>
|
|
</q-drawer>
|
|
</template> |