72 lines
2.8 KiB
Vue
72 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import OverviewListItem from 'src/modules/timesheet-approval/components/employee-overview/overview-list-item.vue';
|
|
import QTableFilters from 'src/modules/shared/components/utils/q-table-filters.vue';
|
|
import { pay_period_employee_overview_columns, type PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
|
|
// const FORWARD = 1
|
|
// const BACKWARD = -1
|
|
const filter = ref<string | number | null>('');
|
|
|
|
const onClickedDetails = async ( employee_email: string ) => {
|
|
await timesheet_store.getPayPeriodEmployeeDetailsByEmployeeEmail(employee_email);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-pa-md">
|
|
<q-table
|
|
:rows="timesheet_store.pay_period_employee_overview_list"
|
|
:columns="pay_period_employee_overview_columns"
|
|
row-key="email"
|
|
:filter="filter"
|
|
grid
|
|
dense
|
|
hide-pagination
|
|
color="primary"
|
|
:rows-per-page-options="[0]"
|
|
card-container-class="justify-center"
|
|
:loading="timesheet_store.is_loading"
|
|
:no-data-label="$t('shared.error.no_data_found')"
|
|
:no-results-label="$t('shared.error.no_search_results')"
|
|
:loading-label="$t('shared.label.loading')"
|
|
>
|
|
<template #top>
|
|
<div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
|
|
<!-- Calendar Picker goes here -->
|
|
|
|
<q-space />
|
|
|
|
<!-- Grid-or-List toggle goes here -->
|
|
|
|
<QTableFilters v-model="filter"/>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Template for individual employee cards -->
|
|
<template #item="props: { row: PayPeriodEmployeeOverview, key: string }">
|
|
<OverviewListItem
|
|
v-model="props.row.is_approved"
|
|
:row="props.row"
|
|
@click-details="onClickedDetails(props.row.email)"
|
|
/>
|
|
</template>
|
|
|
|
<!-- Template for custome failed-to-load state -->
|
|
<template #no-data="{ message, filter }">
|
|
<div class="full-width column items-center text-primary q-gutter-sm">
|
|
<span class="text-h6 q-mt-xl">
|
|
{{ message }}
|
|
</span>
|
|
<q-icon
|
|
size="4em"
|
|
:name="filter ? 'filter_alt_off' : 'error_outline'"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</template> |