164 lines
6.4 KiB
Vue
164 lines
6.4 KiB
Vue
<script setup lang="ts">
|
|
/*eslint-disable*/
|
|
import { ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import TimesheetApprovalEmployeeDetailsShifts from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts.vue';
|
|
import TimesheetApprovalEmployeeDetailsHoursWorkedChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-hours-worked-chart.vue';
|
|
import TimesheetApprovalEmployeeDetailsShiftTypesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-details-shift-types-chart.vue';
|
|
import TimesheetApprovalEmployeeExpensesChart from 'src/modules/timesheet-approval/components/graphs/timesheet-approval-employee-expenses-chart.vue';
|
|
import type { PayPeriodOverviewEmployee } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-overview-employee-interface';
|
|
import type { PayPeriodEmployeeDetails } from '../types/timesheet-approval-pay-period-employee-details-interface';
|
|
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
|
|
|
|
const props = defineProps<{
|
|
isLoading: boolean;
|
|
employeeName: string;
|
|
employeeOverview: PayPeriodOverviewEmployee;
|
|
employeeDetails: PayPeriodEmployeeDetails;
|
|
currentPayPeriod: PayPeriod;
|
|
updateKey: number;
|
|
}>();
|
|
|
|
const { t } = useI18n();
|
|
const is_showing_graph = ref<boolean>(true);
|
|
|
|
type shiftColor = {
|
|
type: string;
|
|
color: string;
|
|
text_color?: string;
|
|
}
|
|
|
|
const shift_type_legend: shiftColor[] = [
|
|
{
|
|
type: t('shared.shift_type.regular'),
|
|
color: 'secondary',
|
|
text_color: '',
|
|
},
|
|
{
|
|
type: t('shared.shift_type.evening'),
|
|
color: 'warning',
|
|
},
|
|
{
|
|
type: t('shared.shift_type.emergency'),
|
|
color: 'amber-10',
|
|
},
|
|
{
|
|
type: t('shared.shift_type.overtime'),
|
|
color: 'negative',
|
|
},
|
|
{
|
|
type: t('shared.shift_type.vacation'),
|
|
color: 'purple-10',
|
|
},
|
|
{
|
|
type: t('shared.shift_type.holiday'),
|
|
color: 'purple-8',
|
|
},
|
|
{
|
|
type: t('shared.shift_type.sick'),
|
|
color: 'grey-8',
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<q-card
|
|
class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
|
|
:style="$q.screen.lt.md ? '' : 'width: 60vw !important; height: 70vh !important;' "
|
|
>
|
|
<!-- loader -->
|
|
<q-card-section
|
|
v-if="props.isLoading"
|
|
class="absolute-center text-center"
|
|
>
|
|
<q-spinner
|
|
color="primary"
|
|
size="5em"
|
|
:thickness="10"
|
|
/>
|
|
<div class="text-primary text-h6 text-weight-bold">
|
|
{{ $t('shared.loading') }}
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- employee name -->
|
|
<q-card-section
|
|
v-if="!props.isLoading"
|
|
class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
|
|
>
|
|
{{ props.employeeName }}
|
|
|
|
<q-separator spaced size="2px" />
|
|
<q-card-actions align="center" class="q-pa-none">
|
|
<q-card flat class="bg-secondary rounded-5 q-pa-xs">
|
|
<q-btn-toggle
|
|
color="white"
|
|
text-color="primary"
|
|
toggle-color="primary"
|
|
v-model="is_showing_graph"
|
|
:options="[
|
|
{icon: 'bar_chart', value: true},
|
|
{icon: 'edit', value: false},
|
|
]"
|
|
/>
|
|
</q-card>
|
|
</q-card-actions>
|
|
</q-card-section>
|
|
|
|
<!-- employee timesheet details edit -->
|
|
<q-card-section
|
|
v-if="!props.isLoading && !is_showing_graph"
|
|
class="q-pa-none"
|
|
>
|
|
<!-- shift type color legend -->
|
|
<q-card-section class="q-py-xs q-px-none text-center q-my-s">
|
|
<q-badge
|
|
v-for="shift_type in shift_type_legend"
|
|
:color="shift_type.color"
|
|
:label="shift_type.type"
|
|
:text-color="shift_type.text_color || 'white'"
|
|
class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
|
|
style="width: 120px; font-size: 0.8em;"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<!-- list of shifts, broken down into weekly columns -->
|
|
<q-card-section
|
|
:horizontal="$q.screen.gt.sm"
|
|
class="q-pa-none bg-secondary rounded-10"
|
|
>
|
|
<TimesheetApprovalEmployeeDetailsShifts
|
|
:raw-data="props.employeeDetails"
|
|
:current-pay-period="props.currentPayPeriod"
|
|
/>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<!-- employee timesheet details with graphs -->
|
|
<q-card-section v-if="!props.isLoading && is_showing_graph" class="q-pa-md col column full-width no-wrap">
|
|
<q-card-section :horizontal="!$q.screen.lt.md" class="q-pa-none col no-wrap" style="min-height: 300px;">
|
|
<TimesheetApprovalEmployeeDetailsHoursWorkedChart
|
|
:raw-data="props.employeeDetails"
|
|
class="col-7"
|
|
/>
|
|
|
|
<q-separator vertical spaced />
|
|
|
|
<div class="column col justify-center no-wrap q-pa-none">
|
|
<TimesheetApprovalEmployeeDetailsShiftTypesChart
|
|
:raw-data="props.employeeOverview"
|
|
class="col-5"
|
|
/>
|
|
|
|
<q-separator :vertical="$q.screen.lt.md" spaced />
|
|
|
|
<TimesheetApprovalEmployeeExpensesChart
|
|
:raw-data="props.employeeDetails"
|
|
class="col"
|
|
/>
|
|
|
|
</div>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
</q-card>
|
|
</template> |