125 lines
6.1 KiB
Vue
125 lines
6.1 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];
|
|
}>();
|
|
|
|
const stack_label_class = "text-weight-bold text-primary text-uppercase text-caption q-pa-none q-my-none ellipsis";
|
|
</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-mt-sm q-mb-md">
|
|
<div class="row no-wrap">
|
|
|
|
<!-- left portion of pay period card -->
|
|
<div class="col column no-wrap q-px-sm">
|
|
|
|
<!-- Regular hours segment -->
|
|
<div class="column" :class="$q.screen.lt.md ? 'col' : 'col-8'">
|
|
<span :class="stack_label_class"> {{ $t('shared.shift_type.regular') }} </span>
|
|
<span class="text-weight-bolder text-h3 q-py-none"> {{ row.regular_hours }} </span>
|
|
</div>
|
|
|
|
<q-separator class="q-mx-sm" />
|
|
|
|
<!-- Other hour types segment -->
|
|
<div class="row q-px-xs">
|
|
<div class="col column no-wrap">
|
|
<span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.evening') }} </span>
|
|
<span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.evening_hours }} </span>
|
|
</div>
|
|
|
|
<div class="col column no-wrap">
|
|
<span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.emergency') }} </span>
|
|
<span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.emergency_hours }} </span>
|
|
</div>
|
|
|
|
<div class="col column no-wrap">
|
|
<span :class="stack_label_class" style="font-size: 0.65em;"> {{ $t('shared.shift_type.overtime') }} </span>
|
|
<span class="text-weight-bolder text-h6 q-pa-none" style="line-height: 0.9em;"> {{ row.overtime_hours }} </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="stack_label_class" 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="stack_label_class" 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> |