96 lines
4.4 KiB
Vue
96 lines
4.4 KiB
Vue
<script setup lang="ts">
|
|
import { default_shift, type Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
|
|
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
|
|
import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pay-period-details-overview-interface';
|
|
import TimesheetDetailsShiftsRowHeader from './timesheet-details-shifts-row-header.vue';
|
|
import TimesheetDetailsShiftsRow from './timesheet-details-shifts-row.vue';
|
|
import { date } from 'quasar';
|
|
|
|
const props = defineProps<{
|
|
rawData: TimesheetPayPeriodDetailsOverview;
|
|
currentPayPeriod: PayPeriod;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
'request-add' : [payload: { date: string }];
|
|
'request-edit' : [payload: { date: string; shift: Shift }];
|
|
'request-delete' : [payload: { date: string; shift: Shift }];
|
|
// 'save-comment' : [payload: { date: string; shift: Shift; comment: string }];
|
|
}>();
|
|
|
|
const get_date_from_short = (short_date: string):
|
|
Date => new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
|
|
const to_iso_date = (short_date: string):
|
|
string => date.formatDate(get_date_from_short(short_date), 'YYYY-MM-DD');
|
|
|
|
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);
|
|
};
|
|
|
|
const on_request_add = (iso_date: string) => emit('request-add', { date: iso_date });
|
|
const on_request_edit = (iso_date: string, shift: Shift) => emit('request-edit', { date: iso_date, shift });
|
|
const on_request_delete = (iso_date: string, shift: Shift) => emit('request-delete', { date: iso_date, shift });
|
|
// const on_save_comment = (iso_date: string, shift: Shift, comment: string) => emit('save-comment', { date: iso_date, shift, comment });
|
|
|
|
</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"
|
|
>
|
|
<!-- Dates column -->
|
|
<q-card-section class="col-auto q-pa-xs text-white">
|
|
<div
|
|
class="bg-primary rounded-10 q-pa-xs text-center"
|
|
>
|
|
<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>
|
|
|
|
<!-- List of shifts column -->
|
|
<q-card-section class="col q-pa-none">
|
|
<TimesheetDetailsShiftsRowHeader />
|
|
<TimesheetDetailsShiftsRow
|
|
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
|
|
:key="shift_index"
|
|
:shift="shift"
|
|
@request-edit=" ({ shift }) => on_request_edit(to_iso_date(day.short_date), shift )"
|
|
@request-delete="({ shift }) => on_request_delete(to_iso_date(day.short_date), shift )"
|
|
/>
|
|
</q-card-section>
|
|
<!-- add shift btn column -->
|
|
<q-card-section class="q-pr-xs col-auto">
|
|
<q-btn
|
|
push
|
|
color="primary"
|
|
icon="more_time"
|
|
class="q-pa-sm"
|
|
@click="on_request_add(to_iso_date(day.short_date))"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template> |