95 lines
3.5 KiB
Vue
95 lines
3.5 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
|
|
|
|
import { computed, ref } from 'vue';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
|
|
import type { QScrollArea, TouchSwipeValue } from 'quasar';
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
const timesheet_api = useTimesheetApi();
|
|
|
|
const { mode = 'normal' } = defineProps<{
|
|
mode: 'normal' | 'approval';
|
|
}>();
|
|
|
|
const mobile_animation_direction = ref('fadeInLeft');
|
|
|
|
const timesheet_page = ref<QScrollArea | null>(null);
|
|
|
|
const scroll_y = computed(() => timesheet_page.value?.getScrollPosition().top ?? 0);
|
|
|
|
const handleSwipe: TouchSwipeValue = (details) => {
|
|
mobile_animation_direction.value = details.direction === 'left' ? 'fadeInRight' : 'fadeInLeft';
|
|
if (details.distance && details.distance.x && Math.abs(details.distance.x) > 15) {
|
|
timesheet_api.getTimesheetsBySwiping(details.direction === 'left' ? 1 : -1).catch(error => console.error(error));
|
|
}
|
|
};
|
|
|
|
const onTodayComponentFound = (today_component: HTMLElement | undefined) => {
|
|
if (timesheet_page.value && today_component)
|
|
timesheet_page.value.setScrollPosition('vertical', today_component.offsetTop, 800);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="column fit relative-position"
|
|
:style="$q.platform.is.mobile && $q.screen.width < $q.screen.height ? 'margin-bottom: 40px' : ''"
|
|
v-touch-swipe.horizontal="handleSwipe"
|
|
>
|
|
<q-scroll-area
|
|
ref="timesheet_page"
|
|
:horizontal-offset="[0, 3]"
|
|
class="col absolute-full hide-scrollbar"
|
|
:thumb-style="{ opacity: '0' }"
|
|
:bar-style="{ opacity: '0' }"
|
|
>
|
|
<!-- Show if no timesheets found (further than one month from present) -->
|
|
<div
|
|
v-if="timesheet_store.timesheets.length < 1 && !timesheet_store.is_loading"
|
|
class="col-auto column flex-center fit q-py-lg"
|
|
style="min-height: 20vh;"
|
|
>
|
|
<span class="text-uppercase text-weight-bolder text-center">{{ $t('shared.error.no_data_found')
|
|
}}</span>
|
|
<q-icon
|
|
name="las la-calendar"
|
|
color="accent"
|
|
size="10em"
|
|
class="absolute"
|
|
style="opacity: 0.2;"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Else show timesheets if found -->
|
|
<ShiftList @on-current-day-component-found="onTodayComponentFound" />
|
|
</q-scroll-area>
|
|
|
|
<q-page-sticky
|
|
v-if="mode === 'normal'"
|
|
position="bottom-right"
|
|
:offset="$q.screen.width > $q.screen.height ? [15, 15] : [15, 65]"
|
|
class="z-top"
|
|
>
|
|
<transition
|
|
appear
|
|
enter-active-class="animated zoomIn"
|
|
leave-active-class="animated zoomOut"
|
|
>
|
|
<q-btn
|
|
v-if="scroll_y > 400"
|
|
fab
|
|
icon="las la-chevron-up"
|
|
color="white"
|
|
text-color="accent"
|
|
class="shadow-12"
|
|
@click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
|
|
/>
|
|
</transition>
|
|
</q-page-sticky>
|
|
</div>
|
|
</template> |