72 lines
2.9 KiB
Vue
72 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { default_shift, type Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
|
|
import TimesheetEmployeeDetailsShiftsRowHeader from './timesheet-details-shifts-row-header.vue';
|
|
import TimesheetEmployeeDetailsShiftsRow from './timesheet-details-shifts-row.vue';
|
|
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
|
|
import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pay-period-details-overview-interface';
|
|
|
|
const props = defineProps<{
|
|
rawData: TimesheetPayPeriodDetailsOverview;
|
|
currentPayPeriod: PayPeriod;
|
|
}>();
|
|
|
|
const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
|
|
return shifts.length > 0 ? shifts : [default_shift];
|
|
};
|
|
|
|
const getDate = (shift_date: string): Date => {
|
|
return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-for="week, index in props.rawData"
|
|
:key="index"
|
|
class="q-px-xs q-pt-xs rounded-5 col"
|
|
>
|
|
<q-card
|
|
v-for="day, day_index in week.shifts"
|
|
:key="day_index"
|
|
flat
|
|
bordered
|
|
class="row items-center rounded-10 q-mb-xs"
|
|
>
|
|
<q-card-section class="col-auto q-pa-xs text-white">
|
|
<div
|
|
class="bg-primary rounded-10 q-pa-xs text-center"
|
|
:style="$q.screen.lt.md ? '' : 'width: 75px;'"
|
|
>
|
|
<q-item-label
|
|
style="font-size: 0.7em;"
|
|
class="text-uppercase"
|
|
>{{ $d(getDate(day.short_date), {weekday: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
|
|
<q-item-label
|
|
class="text-weight-bolder"
|
|
style="font-size: 2.5em; line-height: 90% !important;"
|
|
>{{ day.short_date.split('/')[1] }}</q-item-label>
|
|
<q-item-label
|
|
style="font-size: 0.7em;"
|
|
class="text-uppercase"
|
|
>{{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
|
|
</div>
|
|
</q-card-section>
|
|
<q-card-section class="col q-pa-none">
|
|
<TimesheetEmployeeDetailsShiftsRowHeader />
|
|
<TimesheetEmployeeDetailsShiftsRow
|
|
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
|
|
:key="shift_index"
|
|
:shift="shift"
|
|
/>
|
|
</q-card-section>
|
|
<q-card-section class="q-pr-xs col-auto">
|
|
<q-btn
|
|
push
|
|
color="primary"
|
|
icon="more_time"
|
|
class="q-pa-sm"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template> |