165 lines
7.9 KiB
Vue
165 lines
7.9 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import type { TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
|
|
|
|
const modelApproval = defineModel<boolean>();
|
|
|
|
const { row, index = 0 } = defineProps<{
|
|
row: TimesheetOverview;
|
|
index?: number;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'clickDetails': [overview: TimesheetOverview];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-px-sm q-pb-md col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
|
|
<transition
|
|
appear
|
|
enter-active-class="animated fadeInUp"
|
|
>
|
|
<q-card
|
|
class="rounded-10 shadow-5"
|
|
:style="`animation-delay: ${index / 15}s;`"
|
|
>
|
|
<!-- Card header with employee name and details button-->
|
|
<q-card-section
|
|
horizontal
|
|
class="q-py-none q-px-sm q-ma-none justify-between items-center bg-primary text-white"
|
|
>
|
|
<div>
|
|
<span class="text-h5 text-uppercase text-weight-medium text-accent q-mr-xs">{{ row.employee_name.split(' ')[0]
|
|
}}</span>
|
|
<span class="text-uppercase text-weight-light">{{ row.employee_name.split(' ')[1] }}</span>
|
|
</div>
|
|
|
|
<!-- Buttons to view detailed shifts or view employee timesheet -->
|
|
<q-btn
|
|
flat
|
|
dense
|
|
square
|
|
unelevated
|
|
class="col-auto q-pa-none q-ma-none"
|
|
color="accent"
|
|
icon="work_history"
|
|
@click="emit('clickDetails', row)"
|
|
>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="center middle"
|
|
class="bg-accent text-uppercase text-weight-bold"
|
|
>
|
|
{{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</q-card-section>
|
|
|
|
<!-- Main body of pay period card -->
|
|
<q-card-section class="q-py-none q-px-sm q-py-sm bg-dark">
|
|
<div class="row">
|
|
<!-- left portion of pay period card -->
|
|
<div class="col column q-px-sm">
|
|
<!-- Regular hours segment -->
|
|
<div class="col column">
|
|
<span
|
|
class="text-weight-bold text-uppercase q-pa-none q-my-none"
|
|
:class="row.regular_hours > 80 ? 'text-negative' : 'text-accent'"
|
|
> {{
|
|
$t('shared.shift_type.regular') }} </span>
|
|
<span
|
|
class="text-weight-bolder text-h3 q-py-none"
|
|
:class="row.regular_hours > 80 ? 'text-negative' : ''"
|
|
> {{ row.regular_hours }} </span>
|
|
<q-separator class="q-mr-sm" />
|
|
</div>
|
|
|
|
<!-- Other hour types segment -->
|
|
<div class="col-auto row ellipsis q-mt-xs">
|
|
<div
|
|
v-for="hour_type, index in row.other_hours"
|
|
:key="index"
|
|
class="col-4 column ellipsis"
|
|
:class="hour_type === 0 ? 'invisible' : ''"
|
|
>
|
|
<span
|
|
class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
|
|
style="font-size: 0.7em;"
|
|
> {{ $t(`shared.shift_type.${index.replace('_hours', '')}`) }} </span>
|
|
<span
|
|
class="text-weight-bolder q-pa-none q-mb-xs"
|
|
style="font-size: 1.2em; line-height: 1em;"
|
|
> {{ hour_type }} </span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator
|
|
vertical
|
|
class="q-mt-xs q-mb-none"
|
|
/>
|
|
|
|
<!-- Right portion of pay period card -->
|
|
<div class="col-auto column q-px-sm">
|
|
<div class="col column no-wrap">
|
|
<span
|
|
class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
|
|
style="font-size: 0.8em;"
|
|
> {{ $t('timesheet.expense.types.EXPENSES') }} </span>
|
|
<span
|
|
class="text-weight-bolder text-h6 q-pa-none"
|
|
style="line-height: 0.9em;"
|
|
> {{ row.expenses }} <span class="text-weight-light">$</span> </span>
|
|
</div>
|
|
|
|
<div class="col column no-wrap">
|
|
<span
|
|
class="text-weight-bold text-accent text-uppercase q-pa-none q-my-none"
|
|
style="font-size: 0.8em;"
|
|
> {{ $t('timesheet.expense.types.MILEAGE') }} </span>
|
|
<span
|
|
class="text-weight-bolder text-h6 q-pa-none"
|
|
style="line-height: 0.9em;"
|
|
> {{ row.mileage }} <span class="text-weight-light text-body2">km</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- Validate Pay Period section -->
|
|
<q-card-section
|
|
horizontal
|
|
class="justify-between items-center text-weight-bold q-pa-none"
|
|
:class="row.is_approved ? 'text-white bg-accent' : 'bg-dark text-accent'"
|
|
>
|
|
<div class="col-auto">
|
|
<span class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours }} </span>
|
|
<span class="text-uppercase text-weight-bold text-caption q-ml-xs"> total </span>
|
|
</div>
|
|
|
|
<div
|
|
class="col-auto q-py-xs q-px-md"
|
|
style="border: 1px solid var(--q-accent);"
|
|
>
|
|
<q-checkbox
|
|
v-model="modelApproval"
|
|
dense
|
|
left-label
|
|
keep-color
|
|
size="lg"
|
|
checked-icon="lock"
|
|
unchecked-icon="lock_open"
|
|
:color="row.is_approved ? 'white' : 'accent'"
|
|
:label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
|
|
class="text-uppercase"
|
|
:class="row.is_approved ? '' : 'text-accent'"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</transition>
|
|
</div>
|
|
</template> |