99 lines
4.0 KiB
Vue
99 lines
4.0 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import { date } from 'quasar';
|
|
import ShiftListHeader from 'src/modules/timesheets/components/shift/shift-list-header.vue';
|
|
import ShiftListRow from 'src/modules/timesheets/components/shift/shift-list-row.vue';
|
|
import ShiftListLegend from 'src/modules/timesheets/components/shift/shift-list-legend.vue';
|
|
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
|
|
import { useShiftStore } from 'src/stores/shift-store';
|
|
import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
|
|
import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
|
|
import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
|
|
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
|
|
|
|
const props = defineProps<{
|
|
rawData: PayPeriodDetails;
|
|
currentPayPeriod: PayPeriod;
|
|
}>();
|
|
|
|
const timesheet_api = useTimesheetApi();
|
|
const { openCreate, openDelete, openUpdate } = useShiftStore();
|
|
|
|
const get_date_from_short = (short_date: string): Date => {
|
|
return new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
|
|
};
|
|
|
|
const to_iso_date = (short_date: string): string => {
|
|
return 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);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<!-- shift's colored legend -->
|
|
<ShiftListLegend :is-loading="false" />
|
|
|
|
<div
|
|
v-for="week, index in props.rawData.weeks"
|
|
: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">
|
|
<ShiftListHeader />
|
|
<ShiftListRow
|
|
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
|
|
:key="shift_index"
|
|
:shift="shift"
|
|
@request-update="value => openUpdate(to_iso_date(day.short_date), value)"
|
|
@request-delete="value => openDelete(to_iso_date(day.short_date), value)"
|
|
/>
|
|
</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="openCreate(to_iso_date(day.short_date))"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
</div>
|
|
</template> |