73 lines
3.2 KiB
Vue
73 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import TimesheetApprovalEmployeeDetailsShiftsRow from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row.vue';
|
|
import TimesheetApprovalEmployeeDetailsShiftsRowHeader from 'src/modules/timesheet-approval/components/timesheet-approval-employee-details-shifts-row-header.vue';
|
|
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
|
|
import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-employee-details-interface';
|
|
import type { Shift } from 'src/modules/timesheets/types/shift.interfaces';
|
|
import { default_shift } from 'src/modules/timesheets/types/shift.defaults';
|
|
|
|
const props = defineProps<{
|
|
rawData: PayPeriodEmployeeDetails;
|
|
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">
|
|
<TimesheetApprovalEmployeeDetailsShiftsRowHeader />
|
|
<TimesheetApprovalEmployeeDetailsShiftsRow
|
|
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> |