88 lines
3.2 KiB
Vue
88 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
|
|
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
|
|
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
|
|
import { pay_period_overview_columns, type PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
const filter = ref<string | number | null>('');
|
|
|
|
const employeeEmail = defineModel();
|
|
|
|
const emit = defineEmits<{
|
|
'clickedDetailsButton': [email: string];
|
|
}>();
|
|
|
|
const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
|
|
[] :
|
|
timesheet_store.pay_period_overviews
|
|
)
|
|
|
|
const onClickedDetails = async (employee_email: string, row: PayPeriodOverview) => {
|
|
employeeEmail.value = employee_email;
|
|
emit('clickedDetailsButton', employee_email);
|
|
timesheet_store.current_pay_period_overview = row;
|
|
await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="q-pa-md">
|
|
<q-table
|
|
:rows="overview_rows"
|
|
:columns="pay_period_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' : 'row'"
|
|
>
|
|
<PayPeriodNavigator />
|
|
|
|
<q-space />
|
|
|
|
<!-- Grid-or-List toggle goes here -->
|
|
|
|
<QTableFilters v-model="filter" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- Template for individual employee cards -->
|
|
<template #item="props: { row: PayPeriodOverview, key: string }">
|
|
<OverviewListItem
|
|
v-model="props.row.is_approved"
|
|
:row="props.row"
|
|
@click-details="overview => onClickedDetails(props.row.email, overview)"
|
|
/>
|
|
</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">
|
|
<q-icon
|
|
size="4em"
|
|
:name="filter ? 'filter_alt_off' : 'error_outline'"
|
|
/>
|
|
|
|
<span class="text-h6">
|
|
{{ message }}
|
|
</span>
|
|
</div>
|
|
</template>
|
|
</q-table>
|
|
</div>
|
|
</template> |