91 lines
4.0 KiB
Vue
91 lines
4.0 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
const timesheet_api = useTimesheetApi();
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
|
|
class="col-auto row items-start q-px-sm q-pt-sm full-width"
|
|
>
|
|
<!-- per timesheet -->
|
|
<div
|
|
v-for="timesheet, timesheet_index in timesheet_store.timesheets"
|
|
:key="timesheet_index"
|
|
class="col column flex-center q-pa-sm"
|
|
>
|
|
<!-- container -->
|
|
<div
|
|
class="rounded-5 relative-position q-px-sm q-pt-sm q-pb-xs full-width shadow-4"
|
|
style="border: 1px solid var(--q-accent);"
|
|
>
|
|
<!-- label for week number -->
|
|
<div
|
|
class="self-start text-uppercase text-weight-bolder text-accent bg-secondary absolute-top-left q-px-xs"
|
|
style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
|
|
>{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>
|
|
|
|
<!-- hours worked in the week -->
|
|
<div class="col-auto row">
|
|
<span class="text-weight-bolder text-uppercase text-accent text-caption q-mr-sm">{{
|
|
$t('timesheet.total_hours') }}</span>
|
|
<span>{{
|
|
(timesheet.weekly_hours.regular +
|
|
timesheet.weekly_hours.evening +
|
|
timesheet.weekly_hours.emergency +
|
|
timesheet.weekly_hours.overtime).toFixed(2)
|
|
}}</span>
|
|
</div>
|
|
|
|
<!-- label for current shifts preview -->
|
|
<div
|
|
class="col-auto full-width text-center text-weight-medium text-caption text-uppercase q-mt-xs"
|
|
style="font-size: 0.65em; line-height: 1.2em;"
|
|
> {{ $t('timesheet.current_shifts') }}</div>
|
|
|
|
<!-- preview of current number of shifts -->
|
|
<div
|
|
class="col row flex-center"
|
|
style="height: 20px;"
|
|
>
|
|
<div
|
|
v-for="day, day_index in timesheet.days"
|
|
:key="day_index"
|
|
class="col row flex-center"
|
|
>
|
|
<q-badge
|
|
:color="day.shifts.length > 0 ? (day.shifts.every(shift => shift.is_approved) ? 'accent shadow-2' : 'dark shadow-2') : 'blue-grey-5'"
|
|
:class="day.shifts.length > 0 ? (day.shifts.every(shift => shift.is_approved) ? 'q-px-xs' : 'q-pa-sm') : ''"
|
|
:style="day.shifts.length > 0 ? '' : 'opacity: 0.5'"
|
|
>
|
|
<q-icon
|
|
v-if="day.shifts.every(shift => shift.is_approved) && day.shifts.length > 0"
|
|
name="check"
|
|
class="q-pa-none"
|
|
/>
|
|
</q-badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- button to apply weekly schedule preset -->
|
|
<div class="col-auto flex-center row q-pt-xs full-width">
|
|
<q-btn
|
|
v-if="timesheet.days.every(day => day.shifts.length < 1)"
|
|
push
|
|
dense
|
|
color="accent"
|
|
:label="$t('timesheet.apply_preset')"
|
|
class="full-width"
|
|
@click="timesheet_api.applyPreset(timesheet.timesheet_id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |