71 lines
2.5 KiB
Vue
71 lines
2.5 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
/* eslint-disable */
|
|
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 OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
|
|
|
|
import { date } from 'quasar';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
const timesheet_approval_api = useTimesheetApprovalApi();
|
|
const timesheet_store = useTimesheetStore();
|
|
|
|
const page_height = ref(0);
|
|
const headerComponent = ref<HTMLElement | null>(null);
|
|
|
|
const table_max_height = computed(() => {
|
|
const height = page_height.value - Math.min(headerComponent.value?.clientHeight ?? 0, headerComponent.value?.offsetHeight ?? 0);
|
|
return height;
|
|
});
|
|
|
|
const tableStyleFunction = (offset: number, height: number) => {
|
|
page_height.value = height - offset;
|
|
|
|
return { minHeight: height - offset + 'px' };
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-page
|
|
class="bg-secondary"
|
|
:style-fn="tableStyleFunction"
|
|
>
|
|
<DetailsDialog
|
|
:is-loading="timesheet_store.is_loading"
|
|
:employee-overview="timesheet_store.current_pay_period_overview"
|
|
:timesheets="timesheet_store.timesheets"
|
|
/>
|
|
|
|
<OverviewReport />
|
|
|
|
<div
|
|
class="column items-center scroll q-px-sm full-width"
|
|
style="min-height: inherit;"
|
|
>
|
|
<div
|
|
ref="headerComponent"
|
|
class="col-auto"
|
|
>
|
|
<PageHeaderTemplate
|
|
title="timesheet_approvals.page_title"
|
|
:start-date="timesheet_store.pay_period?.period_start ?? ''"
|
|
:end-date="timesheet_store.pay_period?.period_end ?? ''"
|
|
/>
|
|
</div>
|
|
|
|
<div class="col-grow full-width">
|
|
<OverviewList :max-height="table_max_height" />
|
|
</div>
|
|
</div>
|
|
</q-page>
|
|
</template> |