86 lines
3.4 KiB
Vue
86 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
/* eslint-disable */
|
|
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 OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
|
|
import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
|
|
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
|
|
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
|
|
import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
|
|
|
|
const timesheet_approval_api = useTimesheetApprovalApi();
|
|
const timesheet_store = useTimesheetStore();
|
|
|
|
onMounted(async () => {
|
|
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-page
|
|
padding
|
|
class="column 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 ?? ''"
|
|
class="col-auto"
|
|
/>
|
|
|
|
<DetailsDialog
|
|
:is-loading="timesheet_store.is_loading"
|
|
:employee-overview="timesheet_store.current_pay_period_overview"
|
|
:timesheets="timesheet_store.timesheets"
|
|
/>
|
|
|
|
<div
|
|
class="col-auto full-width q-px-lg"
|
|
:class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
|
|
>
|
|
<PayPeriodNavigator
|
|
@date-selected="timesheet_approval_api.getTimesheetOverviews"
|
|
@pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
|
|
@pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
|
|
:class="$q.screen.lt.md ? 'q-mb-sm' : ''"
|
|
/>
|
|
|
|
<q-space />
|
|
|
|
<q-btn-toggle
|
|
v-model="timesheet_store.is_approval_grid_mode"
|
|
push
|
|
rounded
|
|
color="white"
|
|
text-color="accent"
|
|
toggle-color="accent"
|
|
:class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
|
|
:options="[
|
|
{ icon: 'grid_view', value: true },
|
|
{ icon: 'view_list', value: false },
|
|
]"
|
|
/>
|
|
|
|
<div
|
|
class="col-auto row no-wrap flex-center"
|
|
:class="$q.screen.lt.md ? 'q-mb-md' : ''"
|
|
>
|
|
<q-btn
|
|
push
|
|
rounded
|
|
icon="download"
|
|
color="accent"
|
|
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
|
|
class="col-auto q-mr-sm"
|
|
@click="timesheet_store.is_report_dialog_open = true"
|
|
/>
|
|
<QTableFilters v-model:search="timesheet_store.search_filter" />
|
|
</div>
|
|
</div>
|
|
<OverviewReport/>
|
|
<OverviewList class="col" />
|
|
</q-page>
|
|
</template> |