111 lines
4.3 KiB
Vue
111 lines
4.3 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { computed, onMounted } from 'vue';
|
|
import { useAuthStore } from 'src/stores/auth-store';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
|
|
|
|
const { mode = 'totals', timesheetMode = 'normal', totalHours = 0, totalExpenses = 0 } = defineProps<{
|
|
mode: 'total-hours' | 'off-hours';
|
|
timesheetMode: 'approval' | 'normal';
|
|
weeklyHours?: number[];
|
|
totalHours?: number;
|
|
totalExpenses?: number;
|
|
}>();
|
|
|
|
const auth_store = useAuthStore();
|
|
const timesheetStore = useTimesheetStore();
|
|
const is_management = auth_store.user?.user_module_access.includes('timesheets_approval');
|
|
|
|
const vacationHours = computed(() => timesheetStore.paid_time_off_totals.vacation_hours);
|
|
const sickHours = computed(() => timesheetStore.paid_time_off_totals.sick_hours);
|
|
const bankedHours = computed(() => timesheetStore.paid_time_off_totals.banked_hours);
|
|
|
|
onMounted(async () => {
|
|
if (timesheetMode === 'normal')
|
|
await timesheetStore.getPaidTimeOffTotalsWithOptionalEmployeeEmail();
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="column full-width shadow-4 rounded-5 q-pa-sm"
|
|
style="border: 1px solid var(--q-accent);"
|
|
>
|
|
<div
|
|
v-if="mode === 'total-hours'"
|
|
class="col column full-width"
|
|
>
|
|
<div
|
|
v-for="hours, index in weeklyHours"
|
|
:key="index"
|
|
class="col row full-width"
|
|
>
|
|
<span class="col-auto text-uppercase text-caption text-bold text-accent">
|
|
{{ $t(`timesheet_approvals.table.weekly_hours_${index + 1}`) }}
|
|
</span>
|
|
|
|
<span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(hours) }}</span>
|
|
</div>
|
|
|
|
<div class="col row full-width">
|
|
<span class="col-auto text-uppercase text-caption text-bold text-accent">
|
|
{{ $t('timesheet.total_hours') }}
|
|
</span>
|
|
|
|
<span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(totalHours) }}</span>
|
|
</div>
|
|
|
|
<div class="col row full-width">
|
|
<span class="col-auto text-uppercase text-caption text-bold text-accent">
|
|
{{ $t('timesheet.total_expenses') }}
|
|
</span>
|
|
|
|
<span class="col text-right">{{ totalExpenses }}$</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div
|
|
v-else
|
|
class="col column full-width"
|
|
>
|
|
<div class="col row full-width">
|
|
<span class="col-auto text-uppercase text-caption text-bold text-accent">
|
|
{{ $t('timesheet.vacation_available') }}
|
|
</span>
|
|
|
|
<div class="col row">
|
|
<span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(vacationHours) }}</span>
|
|
<span class="col-auto text-right q-pl-xs">{{ ' (' + Math.floor(vacationHours / 8) }}</span>
|
|
<span class="col-auto q-pl-xs">{{ $t('shared.label.day') }}{{ (Math.floor(vacationHours / 8) !== 1 ?
|
|
's' : '') + ')' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="is_management"
|
|
class="col row full-width"
|
|
>
|
|
<span class="col-auto text-uppercase text-caption text-bold text-accent">
|
|
{{ $t('timesheet.sick_available') }}
|
|
</span>
|
|
|
|
<span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(sickHours) }}</span>
|
|
</div>
|
|
|
|
<div
|
|
v-if="timesheetMode === 'normal'"
|
|
class="col row full-width"
|
|
>
|
|
<span class="col-auto text-uppercase text-caption text-bold text-accent">
|
|
{{ $t('timesheet.banked_available') }}
|
|
</span>
|
|
|
|
<span class="col text-right">{{ getHoursMinutesStringFromHoursFloat(bankedHours) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |