Nicolas Drolet
f738a5872a
Timesheet: fix UI spaces with scrolling, change ui to not show preset apply if no preset set to employee. Layout Drawer: fix display of options according to user permissions, fix highlight of menu item to match current route name. Employee list: add functionality to prevent users without user management permissions to see or edit user info and prevent seeing inactive users, add remote to shifts for preset editor, add hover effect to employee items when management mode to visually hint at clickable item.
88 lines
3.1 KiB
Vue
88 lines
3.1 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { useQuasar } from 'quasar';
|
|
import type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
|
|
import { ref } from 'vue';
|
|
|
|
const q = useQuasar();
|
|
const is_mouseover = ref(false);
|
|
|
|
const { row, index = -1, isManagement = false } = defineProps<{
|
|
row: EmployeeProfile
|
|
index?: number
|
|
isManagement?: boolean;
|
|
}>()
|
|
|
|
defineEmits<{
|
|
onProfileClick: [email: string]
|
|
}>();
|
|
|
|
const getItemStyle = (): string => {
|
|
const active_style = row.last_work_day === null ? '' : 'opacity: 0.6;';
|
|
const dark_style = q.dark.isActive ? 'border: 2px solid var(--q-accent);' : '';
|
|
const hover_style = isManagement ? (is_mouseover.value ? `transform: scale(1.1); z-index: 2;` :'transform: scale(1) skew(0)') : '';
|
|
|
|
return `${active_style} ${dark_style} ${hover_style}`;
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="col-xs-6 col-sm-4 col-md-3 col-lg-3 col-xl-2 q-pa-sm row flex-center"
|
|
:style="`animation-delay: ${index / 25}s;`"
|
|
>
|
|
<div
|
|
class="column col no-wrap bg-dark rounded-15 shadow-12"
|
|
:class="isManagement ? 'cursor-pointer item-mouse-hover' : ''"
|
|
style="max-width: 230px; height: 275px;"
|
|
:style="getItemStyle()"
|
|
@click="$emit('onProfileClick', row.email)"
|
|
@mouseenter="is_mouseover = true"
|
|
@mouseleave="is_mouseover = false"
|
|
>
|
|
<div class="col-auto column flex-center q-pt-md">
|
|
<q-avatar
|
|
:color="row.last_work_day === null ? 'accent' : 'negative'"
|
|
size="8em"
|
|
class="col-auto shadow-3"
|
|
>
|
|
<img
|
|
src="src/assets/targo-default-avatar.png"
|
|
alt="employee avatar"
|
|
class="q-pa-xs"
|
|
>
|
|
</q-avatar>
|
|
</div>
|
|
|
|
<div
|
|
class="col column items-center justify-start text-center text-weight-medium text-uppercase q-pa-sm no-wrap"
|
|
style="line-height: 1.2em; font-size: 1.3em;"
|
|
>
|
|
<div
|
|
class="ellipsis-2-lines"
|
|
:class="row.last_work_day === null ? 'text-accent' : 'text-negative'"
|
|
>
|
|
{{ row.first_name }} {{ row.last_name }}
|
|
|
|
<q-separator class="q-mb-xs q-mx-md" />
|
|
</div>
|
|
<div class=" ellipsis-2-lines text-caption no-wrap">{{ row.job_title }}</div>
|
|
</div>
|
|
|
|
<div
|
|
class="col-auto bg-primary text-white text-caption text-center text-weight-medium q-py-sm"
|
|
style="border-radius: 0 0 15px 15px;"
|
|
>
|
|
{{ row.email }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="css" scoped>
|
|
.item-mouse-hover {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
</style> |