<script
    setup
    lang="ts"
>
    import EmployeeListTable from 'src/modules/employee-list/components/employee-list-table.vue';
    import AddModifyDialog from 'src/modules/employee-list/components/add-modify-dialog.vue';

    import { onMounted, ref, computed } from 'vue';
    import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';

    const employee_list_api = useEmployeeListApi();

    const page_height = ref(0);
    const table_max_height = computed(() => page_height.value);

    const tableStyleFunction = (offset: number, height: number) => {
        page_height.value = height - offset;

        return { minHeight: height - offset + 'px' };
    };

    onMounted(async () => {
        await employee_list_api.getEmployeeList();
    })
</script>

<template>
    <q-page
        class="column items-center bg-secondary"
        :style-fn="tableStyleFunction"
    >
        <AddModifyDialog />

        <EmployeeListTable :max-height="table_max_height" />
    </q-page>
</template>