<script setup lang="ts">
import { onMounted, ref } 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 DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';

const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const is_details_dialog_open = ref(false);
const employee_email = ref('');

const onDetailsClicked = (email: string) => {
    employee_email.value = email;
    is_details_dialog_open.value = true;
};

onMounted(async () => {
    await timesheet_approval_api.getPayPeriodOverviewsByDate(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"
        />

        <DetailscrudDialog
            v-model:dialog="is_details_dialog_open"
            :employee-email="employee_email"
            :is-loading="timesheet_store.is_loading"
            :employee-overview="timesheet_store.current_pay_period_overview"
            :timesheet-details="timesheet_store.pay_period_details"
        />

        <OverviewList @clickedDetailsButton="onDetailsClicked" />
    </q-page>
</template>