160 lines
6.7 KiB
Vue
160 lines
6.7 KiB
Vue
<script setup lang="ts">
|
|
import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
|
|
|
|
type TableColumn = {
|
|
name: string;
|
|
label: string;
|
|
value: unknown;
|
|
};
|
|
|
|
const { cols, row, initialState } = defineProps<{
|
|
cols: TableColumn[];
|
|
row: PayPeriodOverviewEmployee;
|
|
initialState: boolean;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
clickDetails: [ email: string ];
|
|
updateApproval: [ value: boolean ];
|
|
}>();
|
|
</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-pl-md relative"
|
|
>
|
|
<div class="text-primary text-h5 text-weight-bolder q-pt-xs overflow-hidden">
|
|
{{ row.employee_name }}
|
|
</div>
|
|
|
|
<q-space />
|
|
|
|
<!-- Buttons to view detailed shifts or view employee timesheet -->
|
|
<q-btn
|
|
flat
|
|
dense
|
|
square
|
|
unelevated
|
|
class="q-py-none q-my-xs"
|
|
color="primary"
|
|
icon="work_history"
|
|
@click="emit('clickDetails', row.email)"
|
|
>
|
|
<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-pa-none q-mt-xs q-mb-sm">
|
|
<div class="row no-wrap">
|
|
<!-- left portion of pay period card -->
|
|
<div
|
|
class="column no-wrap"
|
|
:class="$q.screen.lt.md ? 'col' : 'col-8'"
|
|
>
|
|
<!-- Regular hours segment -->
|
|
<q-item
|
|
dense
|
|
class="column"
|
|
:class="$q.screen.lt.md ? 'col' : 'col-8'"
|
|
>
|
|
<q-item-label class="text-weight-bold text-primary q-pa-none text-uppercase text-caption">
|
|
{{ cols.find(c => c.name === 'regular_hours')?.label }}
|
|
</q-item-label>
|
|
<q-item-label class="text-weight-bolder text-h3 q-py-none">
|
|
{{ cols.find(c => c.name === 'regular_hours')?.value }}
|
|
</q-item-label>
|
|
</q-item>
|
|
|
|
<q-separator class="q-mx-sm" />
|
|
|
|
<!-- Other hour types segment -->
|
|
<div :class="$q.screen.lt.md ? 'column' : 'row no-wrap'">
|
|
<q-item
|
|
dense
|
|
class="column ellipsis "
|
|
v-for="col in cols.slice(3, 6)"
|
|
:key="col.label"
|
|
>
|
|
<q-item-label
|
|
class="text-weight-bold text-primary q-pa-none text-uppercase text-caption"
|
|
style="font-size: 0.65em;"
|
|
>
|
|
{{ col.label }}
|
|
</q-item-label>
|
|
<q-item-label class="text-weight-bolder q-pa-none text-h6 ">
|
|
{{ col.value }}
|
|
</q-item-label>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
|
|
<q-separator
|
|
vertical
|
|
class="q-mt-xs q-mb-none"
|
|
/>
|
|
|
|
<!-- Right portion of pay period card -->
|
|
<div class="no-wrap ellipsis col">
|
|
<q-item
|
|
dense
|
|
class="column"
|
|
v-for="col in cols.slice(6, )"
|
|
:key="col.label"
|
|
>
|
|
<q-item-label
|
|
class="text-weight-bold text-primary q-pa-none text-uppercase text-caption ellipsis"
|
|
style="font-size: 0.8em;"
|
|
>
|
|
{{ col.label }}
|
|
</q-item-label>
|
|
<q-item-label class="text-weight-bolder q-pa-none text-h6 ">
|
|
{{ col.value }}
|
|
</q-item-label>
|
|
</q-item>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-separator
|
|
color="primary"
|
|
style="height: 2px;"
|
|
/>
|
|
|
|
<!-- Validate entire Pay Period section -->
|
|
<q-card-section
|
|
horizontal
|
|
class="q-pa-sm text-weight-bold"
|
|
:class="initialState ? 'text-white bg-primary' : 'bg-dark'"
|
|
>
|
|
<q-item-label class="text-uppercase text-h6 q-ml-sm text-weight-bolder"> {{ row.total_hours + ' h' }} </q-item-label>
|
|
<q-item-label class="text-uppercase text-weight-bold q-ml-xs"> total </q-item-label>
|
|
<q-space />
|
|
<q-checkbox
|
|
dense
|
|
left-label
|
|
size="lg"
|
|
checked-icon="lock"
|
|
unchecked-icon="lock_open"
|
|
:color="initialState ? 'white' : 'primary'" keep-color
|
|
:model-value="initialState"
|
|
@update:model-value="val => emit('updateApproval', val)"
|
|
:label="initialState ? $t('timesheet_approvals.table.verified') : $t('timesheet_approvals.table.unverified')"
|
|
class="text-uppercase"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template> |