targo-frontend/src/modules/timesheet-approval/pages/timesheet-approval-page.vue

37 lines
1.5 KiB
Vue

<script setup lang="ts">
import { onMounted } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
import DetailedDialog from 'src/modules/timesheet-approval/components/detailed-dialog.vue';
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
onMounted( async () => {
await timesheet_approval_api.getPayPeriodOverviewByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding
class="q-pa-md bg-secondary "
>
<PageHeaderTemplate
title="timesheet_approvals.page_title"
:start-date="timesheet_store.pay_period.period_start"
:end-date="timesheet_store.pay_period.period_end"
/>
<DetailedDialog
:is-loading="timesheet_store.is_loading"
:employee-overview="timesheet_store.pay_period_employee_overview"
:timesheet-details="timesheet_store.pay_period_employee_details"
/>
<EmployeeOverviewList />
</q-page>
</template>