feat(timesheet): added timesheet page, created timsheet-interface and setup store and api
This commit is contained in:
Matthieu Haineault
parent
2eae6e5a21
commit
d20f970958
|
|
@ -0,0 +1,33 @@
|
|||
import { useAuthStore } from "src/stores/auth-store";
|
||||
import { useTimesheetStore } from "src/stores/timesheet-store"
|
||||
import { ref } from "vue";
|
||||
import { timesheetTempService } from "../services/timesheet-services";
|
||||
|
||||
|
||||
export const useTimesheetApi = () => {
|
||||
const timesheet_store = useTimesheetStore();
|
||||
const auth_store = useAuthStore();
|
||||
const week_offset = ref(0);
|
||||
|
||||
const fetch_week = async (offset = week_offset.value) => {
|
||||
const email = auth_store.user?.email;
|
||||
if(!email) return;
|
||||
try{
|
||||
timesheet_store.is_loading = true;
|
||||
const timesheet = await timesheetTempService.getTimesheetsByEmail(email, offset);
|
||||
timesheet_store.current_timesheet = timesheet;
|
||||
week_offset.value = offset;
|
||||
}catch (err) {
|
||||
console.error('fetch week error', err);
|
||||
timesheet_store.current_timesheet = { ...timesheet_store.current_timesheet, shifts: [], expenses: [] };
|
||||
} finally {
|
||||
timesheet_store.is_loading = false;
|
||||
}
|
||||
};
|
||||
|
||||
const this_week = async () => fetch_week(0);
|
||||
const next_week = async () => fetch_week(week_offset.value + 1);
|
||||
const previous_week = async () => fetch_week(week_offset.value - 1);
|
||||
|
||||
return { week_offset, this_week, next_week, previous_week, fetch_week};
|
||||
}
|
||||
|
|
@ -1,12 +1,19 @@
|
|||
<script setup lang="ts">
|
||||
import { date } from 'quasar';
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
import { computed } from 'vue';
|
||||
import { useTimesheetApi } from '../composables/use-timesheet-api';
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
|
||||
const {locale} = useI18n();
|
||||
const timeSheet_store = useTimesheetStore();
|
||||
const { locale } = useI18n();
|
||||
const timesheet_store = useTimesheetStore();
|
||||
const { this_week } = useTimesheetApi();
|
||||
|
||||
onMounted(async () => {
|
||||
await this_week();
|
||||
});
|
||||
|
||||
const date_options: Intl.DateTimeFormatOptions = {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
|
|
@ -14,7 +21,8 @@ import { useI18n } from 'vue-i18n';
|
|||
};
|
||||
|
||||
const timesheet_label = computed(() => {
|
||||
const dates = timeSheet_store.current_timesheet.label.split('.');
|
||||
const dates = timesheet_store.current_timesheet.label.split('.');
|
||||
console.log(dates);
|
||||
const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
|
||||
const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
|
||||
|
||||
|
|
@ -34,14 +42,14 @@ import { useI18n } from 'vue-i18n';
|
|||
padding
|
||||
class="q-pa-md bg secondary"
|
||||
>
|
||||
<div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-gray-8">
|
||||
<div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
|
||||
{{ $t('pageTitles.timeSheets') }}
|
||||
</div>
|
||||
<div class="row items-center justify-center q-py-none q-my-none">
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
{{ timesheet_label.start_date }}
|
||||
</div>
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
<div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
|
||||
{{ $t('timeSheet.dateRangesTo') }}
|
||||
</div>
|
||||
<div class="text-primary text-h6 text-uppercase">
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@ import { api } from "src/boot/axios";
|
|||
import type {Timesheet} from "src/modules/timesheets/types/timesheet-interface";
|
||||
|
||||
export const timesheetTempService = {
|
||||
getTimesheetsByNumberAndEmail: async ( timesheet_id: number, email: string): Promise<Timesheet> => {
|
||||
const response = await api.get(`timesheet/id/${timesheet_id}/email/${email}`);
|
||||
return response.data;
|
||||
getTimesheetsByEmail: async ( email: string, offset = 0): Promise<Timesheet> => {
|
||||
const response = await api.get(`/timesheets/${encodeURIComponent(email)}`, {params: offset ? { offset } : undefined});
|
||||
return response.data as Timesheet;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,9 +1,28 @@
|
|||
export interface Timesheet {
|
||||
timesheet_id: number;
|
||||
is_approved: boolean;
|
||||
start_day: string;
|
||||
end_day: string;
|
||||
label: string;
|
||||
shifts: Shifts[];
|
||||
expenses: Expenses;
|
||||
expenses: Expenses[];
|
||||
}
|
||||
|
||||
type Shifts = {
|
||||
bank_type: string;
|
||||
date: string;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
description: string;
|
||||
is_approved: boolean;
|
||||
}
|
||||
|
||||
|
||||
type Expenses = {
|
||||
bank_type: string;
|
||||
date: string;
|
||||
amount: number;
|
||||
km: number;
|
||||
description: string;
|
||||
supervisor_comment: string;
|
||||
is_approved: boolean;
|
||||
}
|
||||
|
|
@ -7,7 +7,6 @@ import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/ty
|
|||
import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/timesheet-approval-pay-period-report-interface';
|
||||
import type { Timesheet } from 'src/modules/timesheets/types/timesheet-interface';
|
||||
import { timesheetTempService } from 'src/modules/timesheets/services/timesheet-services';
|
||||
import type { EmployeeTimesheetDetailsWeek } from 'src/modules/timesheets/types/timesheet-details-interface';
|
||||
|
||||
const default_pay_period: PayPeriod = {
|
||||
pay_period_no: -1,
|
||||
|
|
@ -18,11 +17,14 @@ const default_pay_period: PayPeriod = {
|
|||
label: ''
|
||||
};
|
||||
|
||||
//employee timesheet
|
||||
const default_timesheet: Timesheet = {
|
||||
timesheet_id: -1,
|
||||
start_day: '',
|
||||
end_day: '',
|
||||
label: '',
|
||||
is_approved: false,
|
||||
shifts: [],
|
||||
expenses: [],
|
||||
};
|
||||
|
||||
export const useTimesheetStore = defineStore('timesheet', () => {
|
||||
|
|
@ -35,7 +37,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
|
||||
//employee timesheet
|
||||
const current_timesheet = ref<Timesheet>(default_timesheet);
|
||||
const timesheet_employee_details = ref<EmployeeTimesheetDetailsWeek | undefined>();
|
||||
|
||||
const getPayPeriodByDate = async (date_string: string): Promise<boolean> => {
|
||||
is_loading.value = true;
|
||||
|
|
@ -99,20 +100,19 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
is_loading.value = false;
|
||||
};
|
||||
|
||||
const getTimesheetByNumberAndEmail = async (employee_email: string) => {
|
||||
//employee timesheet
|
||||
const getTimesheetByEmail = async (employee_email: string) => {
|
||||
is_loading.value = true;
|
||||
|
||||
try{
|
||||
const response = await timesheetTempService.getTimesheetsByNumberAndEmail(
|
||||
current_timesheet.value.timesheet_id,
|
||||
employee_email
|
||||
);
|
||||
timesheet_employee_details.value = response;
|
||||
const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
|
||||
current_timesheet.value = response;
|
||||
}catch (error) {
|
||||
console.error('There was an error retrieving timesheet details for this employee: ', error);
|
||||
}
|
||||
current_timesheet.value = { ...default_timesheet }
|
||||
} finally {
|
||||
is_loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
const getTimesheetsByPayPeriodAndEmail = async (employee_email: string) => {
|
||||
is_loading.value = true;
|
||||
|
|
@ -158,7 +158,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
current_timesheet,
|
||||
is_loading,
|
||||
getPayPeriodByDate,
|
||||
getTimesheetByNumberAndEmail,
|
||||
getTimesheetByEmail,
|
||||
getPayPeriodByYearAndPeriodNumber,
|
||||
getTimesheetApprovalPayPeriodEmployeeOverviews,
|
||||
getTimesheetsByPayPeriodAndEmail,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user