146 lines
5.8 KiB
Vue
146 lines
5.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
// import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import { shift_type_legend } from 'src/modules/timesheet-approval/models/detailed-dialog-shift-color.model';
|
|
import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
|
|
import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
|
|
import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
|
|
import type { TimesheetApprovalOverviewCrewMember } from 'src/modules/timesheet-approval/models/timesheet-approval-overview.models';
|
|
import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
|
|
|
|
const dialog_model = defineModel<boolean>('dialog', { default: false });
|
|
|
|
defineProps<{
|
|
isLoading: boolean;
|
|
employeeOverview: TimesheetApprovalOverviewCrewMember;
|
|
timesheetDetails: TimesheetDetails;
|
|
}>();
|
|
|
|
// const timesheet_store = useTimesheetStore();
|
|
const is_showing_graph = ref(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> {{ timesheetDetails.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 for supervisor editting -->
|
|
<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"
|
|
>
|
|
<!-- IMPORTANT: Timesheet shift list goes here!!! -->
|
|
</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;"
|
|
>
|
|
<DetailedDialogChartHoursWorked
|
|
:raw-data="timesheetDetails"
|
|
class="col-7"
|
|
/>
|
|
|
|
<q-separator
|
|
spaced
|
|
:vertical="!$q.screen.lt.md"
|
|
/>
|
|
|
|
<div class="column col justify-center no-wrap q-pa-none">
|
|
<DetailedDialogChartShiftTypes
|
|
:raw-data="employeeOverview"
|
|
class="col-5"
|
|
/>
|
|
|
|
<q-separator
|
|
spaced
|
|
:vertical="!$q.screen.lt.md"
|
|
/>
|
|
|
|
<DetailedDialogChartExpenses
|
|
:raw-data="timesheetDetails"
|
|
class="col"
|
|
/>
|
|
</div>
|
|
</q-card-section>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template> |