88 lines
2.8 KiB
Vue
88 lines
2.8 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
|
|
import ShiftCrudDialog from 'src/modules/timesheets/components/shift-crud-dialog.vue';
|
|
import ExpenseCrudDialog from 'src/modules/timesheets/components/expense-crud-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/api/use-timesheet-api';
|
|
import { useExpensesStore } from 'src/stores/expense-store';
|
|
import { provide } from 'vue';
|
|
|
|
const { open } = useExpensesStore();
|
|
|
|
const { employeeEmail, dense = false } = defineProps<{
|
|
employeeEmail: string;
|
|
dense?: boolean;
|
|
}>();
|
|
|
|
const { is_loading } = useTimesheetStore();
|
|
const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
|
|
|
|
provide('employeeEmail', employeeEmail);
|
|
</script>
|
|
|
|
<template>
|
|
<q-card
|
|
flat
|
|
class="q-mt-md bg-secondary full-width"
|
|
>
|
|
<q-inner-loading
|
|
:showing="is_loading"
|
|
color="primary"
|
|
/>
|
|
|
|
<q-card-section
|
|
:horizontal="$q.screen.gt.sm"
|
|
class="q-px-lg items-center"
|
|
:class="$q.screen.lt.md ? 'column' : ''"
|
|
>
|
|
<!-- navigation btn -->
|
|
<PayPeriodNavigator
|
|
@date-selected="getPayPeriodDetailsByDate"
|
|
@pressed-previous-button="getPreviousPayPeriodDetails"
|
|
@pressed-next-button="getNextPayPeriodDetails"
|
|
/>
|
|
|
|
<!-- 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(employeeEmail)"
|
|
/>
|
|
|
|
<!-- shift's colored legend -->
|
|
<ShiftListLegend :is-loading="false" />
|
|
|
|
<q-space />
|
|
|
|
<!-- 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(employeeEmail)"
|
|
/>
|
|
|
|
</q-card-section>
|
|
|
|
<q-card-section :horizontal="$q.screen.gt.sm">
|
|
<ShiftList :dense="dense"/>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<ExpenseCrudDialog />
|
|
|
|
<ShiftCrudDialog :employee-email="employeeEmail" />
|
|
</template> |