151 lines
6.0 KiB
Vue
151 lines
6.0 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
|
|
import DetailedShiftList from 'src/modules/timesheet-approval/components/detailed-shift-list.vue';
|
|
import DetailedChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
|
|
import DetailedChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
|
|
import DetailedChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
|
|
import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
|
|
import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
|
|
import { shift_type_legend } from 'src/modules/timesheet-approval/types/detailed-shift-color';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
const dialog_model = defineModel<boolean>('dialog', { default: false });
|
|
|
|
defineProps<{
|
|
isLoading: boolean;
|
|
employeeOverview: PayPeriodEmployeeOverview;
|
|
employeeDetails: PayPeriodEmployeeDetails;
|
|
}>();
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
const is_showing_graph = ref<boolean>(true);
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog
|
|
v-model="dialog_model"
|
|
full-width
|
|
transition-show="jump-down"
|
|
transition-hide="jump-down"
|
|
>
|
|
<q-card
|
|
class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
|
|
:style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
|
|
>
|
|
<!-- loader -->
|
|
<q-card-section
|
|
v-if="isLoading"
|
|
class="column flex-center text-center"
|
|
>
|
|
<q-spinner
|
|
color="primary"
|
|
size="5em"
|
|
:thickness="10"
|
|
class="col-auto"
|
|
/>
|
|
<div class="col-auto text-primary text-h6 text-weight-bold text-center ">
|
|
{{ $t('shared.loading') }}
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<!-- employee name -->
|
|
<q-card-section
|
|
v-if="!isLoading"
|
|
class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
|
|
>
|
|
<span> {{ employeeDetails.employee_full_name }} </span>
|
|
|
|
<q-separator
|
|
spaced
|
|
size="2px"
|
|
/>
|
|
|
|
<q-card-actions
|
|
align="center"
|
|
class="q-pa-none"
|
|
>
|
|
<q-btn-toggle
|
|
v-model="is_showing_graph"
|
|
color="white"
|
|
text-color="primary"
|
|
toggle-color="primary"
|
|
:options="[
|
|
{ icon: 'bar_chart', value: true },
|
|
{ icon: 'edit', value: false },
|
|
]"
|
|
/>
|
|
</q-card-actions>
|
|
</q-card-section>
|
|
|
|
<!-- employee timesheet details edit -->
|
|
<q-card-section
|
|
v-if="!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, index in shift_type_legend"
|
|
:key="index"
|
|
:color="shift_type.background_color"
|
|
:label="$t(shift_type.type_label)"
|
|
:text-color="shift_type.font_color"
|
|
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"
|
|
>
|
|
<DetailedShiftList
|
|
:raw-data="employeeDetails"
|
|
:current-pay-period="timesheet_store.pay_period"
|
|
/>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
|
|
<!-- employee timesheet details with chart -->
|
|
<q-card-section
|
|
v-if="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;"
|
|
>
|
|
<DetailedChartHoursWorked
|
|
:raw-data="employeeDetails"
|
|
class="col-7"
|
|
/>
|
|
|
|
<q-separator
|
|
spaced
|
|
:vertical="!$q.screen.lt.md"
|
|
/>
|
|
|
|
<div class="column col justify-center no-wrap q-pa-none">
|
|
<DetailedChartShiftTypes
|
|
:raw-data="employeeOverview"
|
|
class="col-5"
|
|
/>
|
|
|
|
<q-separator
|
|
spaced
|
|
:vertical="!$q.screen.lt.md"
|
|
/>
|
|
|
|
<DetailedChartExpenses
|
|
:raw-data="employeeDetails"
|
|
class="col"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template> |