71 lines
2.4 KiB
Vue
71 lines
2.4 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { useAuthStore } from 'src/stores/auth-store';
|
|
import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
|
|
|
|
const { mode = 'totals', totalHours = 0, vacationHours = 0, sickHours = 0, totalExpenses = 0 } = defineProps<{
|
|
mode: 'total-hours' | 'off-hours';
|
|
totalHours?: number;
|
|
vacationHours?: number;
|
|
sickHours?: number;
|
|
totalExpenses?: number;
|
|
}>();
|
|
|
|
const auth_store = useAuthStore();
|
|
const is_management = auth_store.user?.user_module_access.includes('timesheets_approval');
|
|
</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 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>
|
|
|
|
<span class="col text-right">{{ Math.floor(vacationHours / 8) }}</span>
|
|
</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">{{ Math.floor(sickHours / 8) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |