88 lines
3.0 KiB
Vue
88 lines
3.0 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
/* eslint-disable */
|
|
import { provide, ref } from 'vue';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import DetailsDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue';
|
|
import DetailsDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue';
|
|
import DetailsDialogChartExpenses from 'src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue';
|
|
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
|
|
import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
|
|
|
|
const { employeeEmail } = defineProps<{
|
|
employeeEmail: string;
|
|
}>();
|
|
|
|
const dialog_model = defineModel<boolean>('dialog', { default: false });
|
|
const timesheet_store = useTimesheetStore();
|
|
const render_key = ref(1);
|
|
|
|
provide('employeeEmail', employeeEmail);
|
|
</script>
|
|
|
|
<template>
|
|
<q-dialog
|
|
v-model="dialog_model"
|
|
full-width
|
|
full-height
|
|
transition-show="jump-down"
|
|
transition-hide="jump-down"
|
|
@show="render_key += 1"
|
|
>
|
|
<q-card
|
|
class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
|
|
:style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
|
|
>
|
|
|
|
<!-- employee name -->
|
|
<q-card-section
|
|
class="text-h5 text-weight-bolder text-center bg-primary q-pa-none text-uppercase text-white col-auto"
|
|
>
|
|
<span>TODO: Name goes here</span>
|
|
</q-card-section>
|
|
|
|
<!-- employee pay period details using chart -->
|
|
<q-card-section
|
|
:horizontal="!$q.screen.lt.md"
|
|
class=" col-auto q-px-sm no-wrap"
|
|
>
|
|
<DetailsDialogChartHoursWorked
|
|
:key="render_key"
|
|
class="col"
|
|
/>
|
|
|
|
<DetailsDialogChartShiftTypes
|
|
:key="render_key + 1"
|
|
class="col-2 q-ma-lg"
|
|
/>
|
|
|
|
<DetailsDialogChartExpenses
|
|
:key="render_key + 2"
|
|
class="col"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="col-auto">
|
|
<q-separator />
|
|
<ExpenseDialogList
|
|
horizontal
|
|
:employee-email="employeeEmail"
|
|
/>
|
|
<q-separator />
|
|
</q-card-section>
|
|
|
|
<!-- list of shifts -->
|
|
<q-card-section
|
|
:horizontal="$q.screen.gt.sm"
|
|
class="col-auto q-px-sm rounded-5 no-wrap"
|
|
>
|
|
<TimesheetWrapper
|
|
dense
|
|
:employee-email="employeeEmail"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template> |