63 lines
2.3 KiB
Vue
63 lines
2.3 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';
|
|
import { date } from 'quasar';
|
|
|
|
const { locale } = useI18n();
|
|
const timesheet_store = useTimesheetStore();
|
|
const date_options: Intl.DateTimeFormatOptions = {
|
|
day: 'numeric',
|
|
month: "long",
|
|
year: 'numeric',
|
|
};
|
|
|
|
const pay_period_label = computed(() => {
|
|
const dates = timesheet_store.current_pay_period.label.split('.');
|
|
const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
|
|
const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
|
|
|
|
if ( dates.length === 1 ) {
|
|
return {
|
|
start_date: '—',
|
|
end_date: '—'
|
|
}
|
|
}
|
|
|
|
return { start_date, end_date };
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-page
|
|
padding
|
|
class="q-pa-md bg-secondary"
|
|
>
|
|
<div class="text-h4 row justify-center text-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
|
|
{{ $t('pageTitles.timeSheetValidations') }}
|
|
</div>
|
|
<div class="row items-center justify-center q-py-none q-my-none">
|
|
<div
|
|
class="text-primary text-uppercase text-weight-bold"
|
|
:class="$q.screen.lt.md ? '' : 'text-h6'"
|
|
>
|
|
{{ pay_period_label.start_date }}
|
|
</div>
|
|
<div
|
|
class="text-grey-8 text-uppercase q-mx-md"
|
|
:class="$q.screen.lt.md ? 'text-weight-medium text-caption' : 'text-weight-bold'"
|
|
>
|
|
{{ $t('timeSheet.dateRangesTo') }}
|
|
</div>
|
|
<div
|
|
class="text-primary text-uppercase text-center text-weight-bold"
|
|
:class="$q.screen.lt.md ? '' : 'text-h6'"
|
|
>
|
|
{{ pay_period_label.end_date }}
|
|
</div>
|
|
</div>
|
|
|
|
<TimesheetApprovalEmployeeOverviewList />
|
|
</q-page>
|
|
</template> |