96 lines
3.0 KiB
Vue
96 lines
3.0 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import ShiftListDayMobile from 'src/modules/timesheets/components/mobile/shift-list-day-mobile.vue';
|
|
|
|
|
|
import { useQuasar } from 'quasar';
|
|
import { ref, computed, watch, onMounted } from 'vue';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
// ========== constants ========================================
|
|
|
|
const CURRENT_DATE_STRING = new Date().toISOString().slice(0, 10);
|
|
|
|
// ========== state ========================================
|
|
|
|
const emit = defineEmits<{
|
|
'onCurrentDayComponentFound': [component: HTMLElement | undefined];
|
|
}>();
|
|
|
|
const q = useQuasar();
|
|
const timesheetStore = useTimesheetStore();
|
|
|
|
const mobileAnimationDirection = ref('fadeInLeft');
|
|
const currentDayComponent = ref<HTMLElement[] | null>(null);
|
|
const currentDayComponentWatcher = ref(currentDayComponent);
|
|
|
|
// ========== computed ========================================
|
|
|
|
const animationStyle = computed(() => q.platform.is.mobile ? mobileAnimationDirection.value : 'fadeInDown');
|
|
|
|
// ========== methods ========================================
|
|
|
|
const getMobileDayRef = (iso_date_string: string): string => {
|
|
return iso_date_string === CURRENT_DATE_STRING ? 'currentDayComponent' : '';
|
|
};
|
|
|
|
onMounted(async () => {
|
|
await timesheetStore.getCurrentFederalHolidays();
|
|
});
|
|
|
|
watch(currentDayComponentWatcher, () => {
|
|
if (currentDayComponent.value && q.platform.is.mobile) {
|
|
emit('onCurrentDayComponentFound', currentDayComponent.value[0])
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="fit column no-wrap q-pb-lg">
|
|
<div
|
|
v-for="timesheet of timesheetStore.timesheets"
|
|
:key="timesheet.timesheet_id"
|
|
class="col-auto column no-wrap"
|
|
>
|
|
<transition-group
|
|
appear
|
|
:enter-active-class="`animated ${animationStyle}`"
|
|
>
|
|
<div
|
|
v-for="day, dayIndex in timesheet.days"
|
|
:key="day.date"
|
|
:ref="getMobileDayRef(day.date)"
|
|
class="col-auto row q-pa-sm full-width relative-position"
|
|
:style="`animation-delay: ${dayIndex / 15}s;`"
|
|
>
|
|
<ShiftListDayMobile
|
|
v-model="timesheet.days[dayIndex]!"
|
|
:timesheet-id="timesheet.timesheet_id"
|
|
:is-timesheet-approved="timesheet.is_approved"
|
|
/>
|
|
</div>
|
|
</transition-group>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style
|
|
scoped
|
|
lang="scss"
|
|
>
|
|
@each $size in (1, 2, 3, 4, 5, 10, 15, 20, 25, 50, 75, 100, 200) {
|
|
.mobile-rounded-#{$size} {
|
|
border-radius: #{$size}px !important;
|
|
}
|
|
|
|
.mobile-rounded-#{$size}>div:first-child {
|
|
border-radius: #{$size}px #{$size}px 0 0 !important;
|
|
}
|
|
|
|
.mobile-rounded-#{$size}>div:last-child {
|
|
border-radius: 0 0 #{$size}px #{$size}px !important;
|
|
}
|
|
}
|
|
</style> |