69 lines
2.5 KiB
Vue
69 lines
2.5 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import type { EmployeeProfile } from 'src/modules/employee-list/models/employee-profile.models';
|
|
|
|
// const getEmployeeAvatar = (first_name: string, last_name: string) => {
|
|
// // add logic here to see if user has an avatar image and return that instead of initials
|
|
// return first_name.charAt(0) + last_name.charAt(0);
|
|
// };
|
|
|
|
const { row, index = -1 } = defineProps<{
|
|
row: EmployeeProfile
|
|
index?: number
|
|
}>()
|
|
const emit = defineEmits<{
|
|
onProfileClick: [email: string]
|
|
}>();
|
|
</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 cursor-pointer bg-dark rounded-15 shadow-12"
|
|
style="max-width: 230px; height: 275px;"
|
|
:style="(row.last_work_day === null ? ' ' : 'opacity: 0.6; ') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
|
|
@click="emit('onProfileClick', row.email)"
|
|
>
|
|
<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> |