68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import ShiftList from 'src/modules/timesheets/components/shift/shift-list.vue';
|
|
import ShiftCrudDialog from 'src/modules/timesheets/components/shift/shift-crud-dialog.vue';
|
|
import ExpenseCrudDialog from 'src/modules/timesheets/components/expenses/expense-crud-dialog.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 { onMounted } from 'vue';
|
|
|
|
const { openExpensesDialog } = useExpensesStore();
|
|
|
|
const { employeeEmail } = defineProps<{
|
|
employeeEmail: string;
|
|
}>();
|
|
|
|
const { pay_period, pay_period_details, is_loading } = useTimesheetStore();
|
|
const { getPayPeriodDetailsByDate, getPreviousPayPeriodDetails, getNextPayPeriodDetails } = useTimesheetApi();
|
|
|
|
onMounted(() => {
|
|
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-card
|
|
flat
|
|
class=" col q-mt-md bg-secondary"
|
|
>
|
|
<q-inner-loading
|
|
:showing="is_loading"
|
|
color="primary"
|
|
/>
|
|
|
|
<q-card-section horizontal>
|
|
<!-- expenses button -->
|
|
<q-btn
|
|
color="primary"
|
|
unelevated
|
|
icon="receipt_long"
|
|
:label="$t('timesheet.expense.open_btn')"
|
|
@click="openExpensesDialog"
|
|
/>
|
|
|
|
<!-- navigation btn -->
|
|
<PayPeriodNavigator
|
|
@date-selected="getPayPeriodDetailsByDate"
|
|
@pressed-previous-button="getPreviousPayPeriodDetails"
|
|
@pressed-next-button="getNextPayPeriodDetails"
|
|
/>
|
|
</q-card-section>
|
|
|
|
<q-card-section>
|
|
<ShiftList
|
|
:raw-data="pay_period_details"
|
|
:current-pay-period="pay_period"
|
|
/>
|
|
</q-card-section>
|
|
</q-card>
|
|
|
|
<!-- dialog for Expenses or Shifts -->
|
|
<ExpenseCrudDialog :email="employeeEmail" />
|
|
|
|
<!-- shift crud dialog -->
|
|
<ShiftCrudDialog :employee-email="employeeEmail" />
|
|
</template> |