133 lines
4.1 KiB
Vue
133 lines
4.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { date} from 'quasar';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
const NEXT = 1;
|
|
const PREVIOUS = -1;
|
|
const PAY_PERIOD_DATE_LIMIT = '2023/12/17';
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
|
|
const is_showing_calendar_picker = ref(false);
|
|
const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' ));
|
|
const is_disabled = computed(() => timesheet_store.pay_period === undefined);
|
|
|
|
const emit = defineEmits<{
|
|
'date-selected': [ value: string ]
|
|
'pressed-previous-button': []
|
|
'pressed-next-button': []
|
|
}>();
|
|
|
|
const is_previous_pay_period_limit = computed( ()=>
|
|
( timesheet_store.pay_period?.pay_year === 2024 &&
|
|
timesheet_store.pay_period?.pay_period_no <= 1 ) ?? false
|
|
);
|
|
|
|
const onDateSelected = (value: string) => {
|
|
calendar_date.value = value;
|
|
is_showing_calendar_picker.value = false;
|
|
emit('date-selected', value);
|
|
};
|
|
|
|
const getNextOrPreviousPayPeriod = (direction: number) => {
|
|
const pay_period = timesheet_store.pay_period;
|
|
if (!pay_period) return;
|
|
|
|
pay_period.pay_period_no += direction;
|
|
|
|
if (pay_period.pay_period_no > 26) {
|
|
pay_period.pay_period_no = 1;
|
|
pay_period.pay_year += direction;
|
|
}
|
|
|
|
if (pay_period.pay_period_no < 1) {
|
|
pay_period.pay_period_no = 26;
|
|
pay_period.pay_year += direction;
|
|
}
|
|
};
|
|
|
|
const getNextPayPeriod = () => {
|
|
getNextOrPreviousPayPeriod(NEXT);
|
|
emit('pressed-next-button');
|
|
}
|
|
|
|
const getPreviousPayPeriod = () => {
|
|
getNextOrPreviousPayPeriod(PREVIOUS);
|
|
emit('pressed-previous-button');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="row" >
|
|
<!-- navigation to previous week -->
|
|
<q-btn
|
|
push rounded
|
|
icon="keyboard_arrow_left"
|
|
color="accent"
|
|
@click="getPreviousPayPeriod"
|
|
:disable="is_previous_pay_period_limit || timesheet_store.is_loading || is_disabled"
|
|
class="q-mr-sm q-px-sm"
|
|
>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="center middle"
|
|
class="bg-primary text-uppercase text-weight-bold"
|
|
>
|
|
{{ $t( 'timesheet.nav_button.previous_week' )}}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
|
|
<!-- navigation through calendar date picker -->
|
|
<q-btn
|
|
push rounded
|
|
icon="calendar_month"
|
|
color="accent"
|
|
@click="is_showing_calendar_picker = true"
|
|
:disable="timesheet_store.is_loading || is_disabled"
|
|
class="q-px-xl"
|
|
>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="center middle"
|
|
class="bg-primary text-uppercase text-weight-bold"
|
|
>
|
|
{{ $t('timesheet.nav_button.calendar_date_picker') }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
|
|
<!-- navigation to next week -->
|
|
<q-btn
|
|
push rounded
|
|
icon="keyboard_arrow_right"
|
|
color="accent"
|
|
@click="getNextPayPeriod"
|
|
:disable="timesheet_store.is_loading || is_disabled"
|
|
class="q-ml-sm q-px-sm"
|
|
>
|
|
<q-tooltip
|
|
anchor="top middle"
|
|
self="center middle"
|
|
class="bg-primary text-uppercase text-weight-bold"
|
|
> {{ $t('timesheet.nav_button.next_week') }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
|
|
<!-- date picker calendar -->
|
|
<q-dialog
|
|
v-model="is_showing_calendar_picker"
|
|
transition-show="jump-down"
|
|
transition-hide="jump-up"
|
|
position="top">
|
|
<q-date
|
|
v-model="calendar_date"
|
|
color="primary"
|
|
class="q-mt-xl"
|
|
today-btn
|
|
mask="YYYY-MM-DD"
|
|
:options="date => date >= PAY_PERIOD_DATE_LIMIT"
|
|
@update:model-value="onDateSelected"
|
|
/>
|
|
</q-dialog>
|
|
</template> |