46 lines
1.7 KiB
Vue
46 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import TimesheetApprovalEmployeeOverviewList from '../components/timesheet-approval-employee-overview-list.vue';
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
const { d } = useI18n();
|
|
const timesheet_store = useTimesheetStore();
|
|
|
|
const pay_period_label = computed(() => {
|
|
const dates = timesheet_store.current_pay_period.label.split('.');
|
|
|
|
if ( dates.length < 2 ) {
|
|
return { start_date: '—', end_date: '—' }
|
|
}
|
|
|
|
const start_date = d(new Date(dates[0] as string), { day: 'numeric', month: 'long', year: 'numeric', });
|
|
const end_date = d(new Date(dates[1] as string), { day: 'numeric', month: 'long', year: 'numeric', });
|
|
|
|
return { start_date, end_date };
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-page
|
|
padding
|
|
class="q-pa-md bg-secondary "
|
|
>
|
|
<div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
|
|
{{ $t('timesheet_approvals.page_title') }}
|
|
<div class="col row items-center justify-center full-width q-py-none q-my-none">
|
|
<div class="text-primary text-weight-bold text-h6">
|
|
{{ pay_period_label.start_date }}
|
|
</div>
|
|
<div class="text-body2 q-mx-md text-weight-medium">
|
|
{{ $t('shared.misc.to') }}
|
|
</div>
|
|
<div class="text-primary text-weight-bold text-h6">
|
|
{{ pay_period_label.end_date }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<TimesheetApprovalEmployeeOverviewList />
|
|
</q-page>
|
|
</template> |