141 lines
6.3 KiB
Vue
141 lines
6.3 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import type { PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
|
|
|
|
const modelApproval = defineModel<boolean>();
|
|
const { row } = defineProps<{ row: PayPeriodOverview; }>();
|
|
const emit = defineEmits<{
|
|
'clickDetails': [overview: PayPeriodOverview];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-px-sm q-pb-sm q-mt-sm col-xs-12 col-sm-6 col-md-4 col-lg-4 col-xl-3 grid-style-transition">
|
|
<q-card class="rounded-10">
|
|
<!-- 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"
|
|
>
|
|
<span class="col text-primary text-h5 text-weight-bolder q-pt-xs"> {{ row.employee_name }} </span>
|
|
|
|
<!-- 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="primary"
|
|
icon="work_history"
|
|
@click="emit('clickDetails', row)"
|
|
>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="center middle"
|
|
class="bg-primary text-uppercase text-weight-bold"
|
|
>
|
|
{{ $t('timesheet_approvals.tooltip.button_detailed_view') }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</q-card-section>
|
|
|
|
<q-separator size="2px" />
|
|
|
|
<!-- Main body of pay period card -->
|
|
<q-card-section class="q-py-none q-px-sm q-my-sm">
|
|
<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-primary text-uppercase q-pa-none q-my-none"> {{ $t('shared.shift_type.regular') }} </span>
|
|
<span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
|
|
<q-separator class="q-mx-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-primary 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-primary 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>
|
|
</div>
|
|
|
|
<div class="col column no-wrap">
|
|
<span
|
|
class="text-weight-bold text-primary 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator
|
|
color="primary"
|
|
size="2px"
|
|
/>
|
|
|
|
<!-- Validate Pay Period section -->
|
|
<q-card-section
|
|
horizontal
|
|
class="justify-between items-center text-weight-bold q-px-sm"
|
|
:class="row.is_approved ? 'text-white bg-primary' : 'bg-dark'"
|
|
>
|
|
<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>
|
|
|
|
<q-checkbox
|
|
v-model="modelApproval"
|
|
dense
|
|
left-label
|
|
size="lg"
|
|
checked-icon="lock"
|
|
unchecked-icon="lock_open"
|
|
:color="row.is_approved ? 'white' : 'primary'"
|
|
:label="row.is_approved ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
|
|
class="col-auto text-uppercase"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template> |