109 lines
3.7 KiB
Vue
109 lines
3.7 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
|
|
import ExpenseDialog from 'src/modules/timesheets/components/expense-dialog.vue';
|
|
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
|
|
// import ShiftListLegend from 'src/modules/timesheets/components/shift-list-legend.vue';
|
|
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
|
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
|
|
import { useExpensesStore } from 'src/stores/expense-store';
|
|
import { provide } from 'vue';
|
|
import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
|
|
|
|
const { open } = useExpensesStore();
|
|
const shift_api = useShiftApi();
|
|
|
|
const { employeeEmail, dense = false } = defineProps<{
|
|
employeeEmail: string;
|
|
dense?: boolean;
|
|
}>();
|
|
|
|
const timesheet_store = useTimesheetStore();
|
|
const timesheet_api = useTimesheetApi();
|
|
|
|
provide('employeeEmail', employeeEmail);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="column flex-center full-width">
|
|
|
|
<q-dialog
|
|
v-model="timesheet_store.is_loading"
|
|
transition-show="jump-down"
|
|
transition-hide="jump-down"
|
|
>
|
|
<q-card class="q-pa-xl rounded-200 bg-white frosted-glass">
|
|
<q-spinner-radio
|
|
color="primary"
|
|
size="20vh"
|
|
/>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-card
|
|
flat
|
|
class="transparent full-width"
|
|
>
|
|
<q-card-section
|
|
v-if="!dense"
|
|
:horizontal="$q.screen.gt.sm"
|
|
class="q-px-md items-center q-mb-md"
|
|
:class="$q.screen.lt.md ? 'column' : ''"
|
|
>
|
|
<!-- navigation btn -->
|
|
<PayPeriodNavigator
|
|
v-if="!dense"
|
|
@date-selected="timesheet_api.getTimesheetsByDate(employeeEmail)"
|
|
@pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
|
|
@pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
|
|
/>
|
|
|
|
<!-- mobile expenses button -->
|
|
<q-btn
|
|
v-if="$q.screen.lt.md"
|
|
push
|
|
rounded
|
|
color="primary"
|
|
icon="receipt_long"
|
|
:label="$t('timesheet.expense.open_btn')"
|
|
class="q-mt-sm"
|
|
@click="open"
|
|
/>
|
|
|
|
<!-- shift's colored legend -->
|
|
<!-- <ShiftListLegend :is-loading="false" /> -->
|
|
|
|
<q-space />
|
|
<!-- save timesheet changes button -->
|
|
<q-btn
|
|
v-if="$q.screen.gt.sm"
|
|
push
|
|
rounded
|
|
:disable="timesheet_store.is_loading"
|
|
color="primary"
|
|
icon="upload"
|
|
:label="$t('shared.label.save')"
|
|
class="q-mr-md"
|
|
@click="shift_api.saveShiftChanges"
|
|
/>
|
|
|
|
<!-- desktop expenses button -->
|
|
<q-btn
|
|
v-if="$q.screen.gt.sm"
|
|
push
|
|
rounded
|
|
color="primary"
|
|
icon="receipt_long"
|
|
:label="$t('timesheet.expense.open_btn')"
|
|
@click="open"
|
|
/>
|
|
|
|
</q-card-section>
|
|
|
|
<ShiftList :dense="dense" />
|
|
</q-card>
|
|
<ExpenseDialog />
|
|
</div>
|
|
</template> |