louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

BREAKING(approvals): begin process of merging and DRYing timesheet with timesheet approvals, adjust imports, WIP - DO NOT MERGE

Browse Source
This commit is contained in:
Nicolas Drolet 2025-09-26 17:03:19 -04:00
parent 89cce4f73f
commit 655a7ecff1
38 changed files with 424 additions and 689 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/modules/timesheets/components/timesheet/timesheet-navigation.vue → src/modules/shared/components/pay-period-navigator.vue
View File

@ -1,27 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
/* eslint-disable */ import { computed, ref } from 'vue';
import { ref } from 'vue';
import { date} from 'quasar'; import { date} from 'quasar';
import type { QDateDetails } from 'src/modules/shared/types/q-date-details'; import { useTimesheetStore } from 'src/stores/timesheet-store';
const timesheet_store = useTimesheetStore();
const is_showing_calendar_picker = ref(false); const is_showing_calendar_picker = ref(false);
const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' )); const calendar_date = ref(date.formatDate( Date.now(), 'YYYY-MM-DD' ));
const props = defineProps<{
isDisabled?: boolean;
isPreviousLimit:boolean;
}>();
const emit = defineEmits<{ const emit = defineEmits<{
'date-selected': [value: string, reason?: string, details?: QDateDetails] 'date-selected': [ value: string ]
'pressed-previous-button': [] 'pressed-previous-button': []
'pressed-next-button': [] 'pressed-next-button': []
}>(); }>();
const onDateSelected = (value: string, reason: string, details: QDateDetails) => { const is_previous_pay_period_limit = computed( ()=>
timesheet_store.pay_period.pay_year === 2024 &&
timesheet_store.pay_period.pay_period_no <= 1
);
const onDateSelected = (value: string) => {
calendar_date.value = value; calendar_date.value = value;
is_showing_calendar_picker.value = false; is_showing_calendar_picker.value = false;
emit('date-selected', value, reason, details); emit('date-selected', value);
}; };
</script> </script>
@ -33,39 +34,43 @@
icon="keyboard_arrow_left" icon="keyboard_arrow_left"
color="primary" color="primary"
@click="emit('pressed-previous-button')" @click="emit('pressed-previous-button')"
:disable="props.isPreviousLimit || props.isDisabled" :disable="is_previous_pay_period_limit || timesheet_store.is_loading"
class="q-mr-sm q-px-sm" class="q-mr-sm q-px-sm"
> >
<q-tooltip <q-tooltip
anchor="top middle" anchor="top middle"
self="center middle" self="center middle"
class="bg-primary text-uppercase text-weight-bold" class="bg-primary text-uppercase text-weight-bold"
> {{ $t( 'timesheet.nav_button.previous_week' )}} >
{{ $t( 'timesheet.nav_button.previous_week' )}}
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<!-- navigation through calendar date picker --> <!-- navigation through calendar date picker -->
<q-btn <q-btn
push rounded push rounded
icon="calendar_month" icon="calendar_month"
color="primary" color="primary"
@click="is_showing_calendar_picker = true" @click="is_showing_calendar_picker = true"
:disable="props.isDisabled" :disable="timesheet_store.is_loading"
class="q-px-lg" class="q-px-lg"
> >
<q-tooltip <q-tooltip
anchor="top middle" anchor="top middle"
self="center middle" self="center middle"
class="bg-primary text-uppercase text-weight-bold" class="bg-primary text-uppercase text-weight-bold"
>{{ $t('timesheet.nav_button.calendar_date_picker') }} >
{{ $t('timesheet.nav_button.calendar_date_picker') }}
</q-tooltip> </q-tooltip>
</q-btn> </q-btn>
<!-- navigation to next week --> <!-- navigation to next week -->
<q-btn <q-btn
push rounded push rounded
icon="keyboard_arrow_right" icon="keyboard_arrow_right"
color="primary" color="primary"
@click="emit('pressed-next-button')" @click="emit('pressed-next-button')"
:disable="props.isDisabled" :disable="timesheet_store.is_loading"
class="q-ml-sm q-px-sm" class="q-ml-sm q-px-sm"
> >
<q-tooltip <q-tooltip

64
src/modules/timesheet-approval/components/detailed-chart-expenses.vue → src/modules/timesheet-approval/components/detailed-dialog-chart-expenses.vue
View File

@ -3,9 +3,9 @@
import { Bar } from 'vue-chartjs'; import { Bar } from 'vue-chartjs';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar'; import { useQuasar } from 'quasar';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js'; import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartData, type ChartDataset } from 'chart.js';
import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details'; import type { Expense } from 'src/modules/timesheets/models/expense.models';
import type { Expense } from 'src/modules/timesheets/types/expense.interfaces';
const { t } = useI18n(); const { t } = useI18n();
const $q = useQuasar(); const $q = useQuasar();
@ -15,44 +15,44 @@
ChartJS.defaults.maintainAspectRatio = false; ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161'; ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
const props = defineProps<{ defineProps<{
rawData: PayPeriodEmployeeDetails | undefined;
}>(); }>();
const expenses_dataset = ref<ChartDataset<'bar'>[]>([]); // const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
const expenses_labels = ref<string[]>([]); // const expenses_labels = ref<string[]>([]);
const getExpensesData = (): ChartData<'bar'> => { // const getExpensesData = (): ChartData<'bar'> => {
if (props.rawData) { // if (timesheetDetails) {
const all_weeks = [props.rawData.week1, props.rawData.week2]; // const all_weeks = [timesheetDetails.week1, timesheetDetails.week2];
const all_days = all_weeks.flatMap( week => Object.values(week.expenses)); // const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts)) // const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))
const all_costs = all_days.map( day => getTotalAmounts(day.cash)); // const all_costs = all_days.map( day => getTotalAmounts(day.cash));
const all_mileage = all_days.map( day => getTotalAmounts(day.km)); // const all_mileage = all_days.map( day => getTotalAmounts(day.km));
expenses_dataset.value = [ // expenses_dataset.value = [
{ // {
label: t('timesheet_approvals.table.expenses'), // label: t('timesheet_approvals.table.expenses'),
data: all_costs, // data: all_costs,
backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(), // backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
}, // },
{ // {
label: t('timesheet_approvals.table.mileage'), // label: t('timesheet_approvals.table.mileage'),
data: all_mileage, // data: all_mileage,
backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(), // backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
} // }
] // ]
expenses_labels.value = all_days_dates.map( day => day.short_date); // expenses_labels.value = all_days_dates.map( day => day.short_date);
} // }
return { // return {
datasets: expenses_dataset.value, // datasets: expenses_dataset.value,
labels: expenses_labels.value // labels: expenses_labels.value
}; // };
}; // };
const getTotalAmounts = (expenses: Expense[]): number => { const getTotalAmounts = (expenses: Expense[]): number => {
let total_amount = 0; let total_amount = 0;

0
src/modules/timesheet-approval/components/detailed-chart-hours-worked.vue → src/modules/timesheet-approval/components/detailed-dialog-chart-hours-worked.vue
View File

0
src/modules/timesheet-approval/components/detailed-chart-shift-types.vue → src/modules/timesheet-approval/components/detailed-dialog-chart-shift-types.vue
View File

45
src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue → src/modules/timesheet-approval/components/detailed-dialog.vue
View File

@ -1,25 +1,23 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
// import { useTimesheetStore } from 'src/stores/timesheet-store';
import DetailedShiftList from 'src/modules/timesheet-approval/components/detailed-shift-list.vue'; import { shift_type_legend } from 'src/modules/timesheet-approval/models/detailed-dialog-shift-color.model';
import DetailedChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue'; import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
import DetailedChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue'; import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
import DetailedChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue'; import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview'; import type { TimesheetApprovalOverviewCrewMember } from 'src/modules/timesheet-approval/models/timesheet-approval-overview.models';
import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details'; import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
import { shift_type_legend } from 'src/modules/timesheet-approval/types/detailed-shift-color';
import { useTimesheetStore } from 'src/stores/timesheet-store';
const dialog_model = defineModel<boolean>('dialog', { default: false }); const dialog_model = defineModel<boolean>('dialog', { default: false });
defineProps<{ defineProps<{
isLoading: boolean; isLoading: boolean;
employeeOverview: PayPeriodEmployeeOverview; employeeOverview: TimesheetApprovalOverviewCrewMember;
employeeDetails: PayPeriodEmployeeDetails; timesheetDetails: TimesheetDetails;
}>(); }>();
const timesheet_store = useTimesheetStore(); // const timesheet_store = useTimesheetStore();
const is_showing_graph = ref<boolean>(true); const is_showing_graph = ref(true);
</script> </script>
<template> <template>
@ -54,7 +52,7 @@
v-if="!isLoading" v-if="!isLoading"
class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto" class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
> >
<span> {{ employeeDetails.employee_full_name }} </span> <span> {{ timesheetDetails.employee_full_name }} </span>
<q-separator <q-separator
spaced spaced
@ -62,7 +60,7 @@
/> />
<q-card-actions <q-card-actions
align="center" align="center"
class="q-pa-none" class="q-pa-none"
> >
<q-btn-toggle <q-btn-toggle
@ -78,7 +76,7 @@
</q-card-actions> </q-card-actions>
</q-card-section> </q-card-section>
<!-- employee timesheet details edit --> <!-- employee timesheet for supervisor editting -->
<q-card-section <q-card-section
v-if="!is_showing_graph" v-if="!is_showing_graph"
class="q-pa-none" class="q-pa-none"
@ -101,10 +99,7 @@
:horizontal="$q.screen.gt.sm" :horizontal="$q.screen.gt.sm"
class="q-pa-none bg-secondary rounded-10" class="q-pa-none bg-secondary rounded-10"
> >
<DetailedShiftList <!-- IMPORTANT: Timesheet shift list goes here!!! -->
:raw-data="employeeDetails"
:current-pay-period="timesheet_store.pay_period"
/>
</q-card-section> </q-card-section>
</q-card-section> </q-card-section>
@ -118,8 +113,8 @@
class="q-pa-none col no-wrap" class="q-pa-none col no-wrap"
style="min-height: 300px;" style="min-height: 300px;"
> >
<DetailedChartHoursWorked <DetailedDialogChartHoursWorked
:raw-data="employeeDetails" :raw-data="timesheetDetails"
class="col-7" class="col-7"
/> />
@ -129,7 +124,7 @@
/> />
<div class="column col justify-center no-wrap q-pa-none"> <div class="column col justify-center no-wrap q-pa-none">
<DetailedChartShiftTypes <DetailedDialogChartShiftTypes
:raw-data="employeeOverview" :raw-data="employeeOverview"
class="col-5" class="col-5"
/> />
@ -139,8 +134,8 @@
:vertical="!$q.screen.lt.md" :vertical="!$q.screen.lt.md"
/> />
<DetailedChartExpenses <DetailedDialogChartExpenses
:raw-data="employeeDetails" :raw-data="timesheetDetails"
class="col" class="col"
/> />
</div> </div>

33
src/modules/timesheet-approval/components/detailed-shift-list-header.vue
View File

@ -1,33 +0,0 @@
<template>
<q-card-section
horizontal
class="text-uppercase text-center items-center q-pa-none"
>
<!-- shift row itself -->
<q-card-section class="col q-pa-none">
<q-card-section horizontal class="col q-pa-none">
<!-- punch-in timestamps -->
<q-card-section class="col q-pa-none">
<q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
{{ $t('shared.misc.in') }}
</q-item-label>
</q-card-section>
<!-- arrows pointing to punch-out timestamps -->
<q-card-section class="col q-py-none q-px-sm">
</q-card-section>
<!-- punch-out timestamps -->
<q-card-section class="col q-pa-none">
<q-item-label class="text-weight-bolder text-primary" style="font-size: 0.7em;">
{{ $t('shared.misc.out') }}
</q-item-label>
</q-card-section>
<!-- comment button -->
<q-card-section class="col column q-pa-none">
</q-card-section>
</q-card-section>
</q-card-section>
</q-card-section>
</template>

99
src/modules/timesheet-approval/components/detailed-shift-list-row.vue
View File

@ -1,99 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue';
import type { Shift } from 'src/modules/timesheets/types/shift.interfaces';
const props = defineProps<{
shift: Shift;
}>();
const is_showing_time_popup = ref<boolean>(false);
const getShiftColor = (type: string): string => {
switch(type) {
case 'REGULAR': return 'secondary';
case 'EVENING': return 'warning';
case 'EMERGENCY': return 'amber-10';
case 'OVERTIME': return 'negative';
case 'VACATION': return 'purple-10';
case 'HOLIDAY': return 'purple-10';
case 'SICK': return 'grey-8';
default : return 'transparent';
}
};
</script>
<template>
<q-card-section
horizontal
class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
style="line-height: 1;"
@click="is_showing_time_popup = true"
>
<!-- punch-in timestamps -->
<q-card-section class="q-pa-none col">
<q-item-label
class="text-weight-bolder q-pa-xs rounded-5"
:class="'bg-' + getShiftColor(props.shift.type) + (!$q.dark.isActive && props.shift.type === 'REGULAR' ? '' : ' text-white')"
style="font-size: 1.5em; line-height: 80% !important;"
>
{{ props.shift.start_time }}
</q-item-label>
</q-card-section>
<!-- arrows pointing to punch-out timestamps -->
<q-card-section
horizontal
class="items-center justify-center q-mx-sm col"
>
<div
v-for="icon_data, index in [
{ transform: 'transform: translateX(5px);', color: 'accent' },
{ transform: 'transform: translateX(-5px);', color: 'primary' }]"
:key="index"
>
<q-icon
v-if="props.shift.type"
name="double_arrow"
:color="icon_data.color"
size="24px"
:style="icon_data.transform"
/>
</div>
</q-card-section>
<!-- punch-out timestamps -->
<q-card-section class="q-pa-none col">
<q-item-label
class="text-weight-bolder q-pa-xs rounded-5"
:class="'bg-' + getShiftColor(props.shift.type) + (!$q.dark.isActive && props.shift.type === 'REGULAR' ? '' : ' text-white')"
style="font-size: 1.5em; line-height: 80% !important;"
>
{{ props.shift.end_time }}
</q-item-label>
</q-card-section>
<!-- comment and expenses buttons -->
<q-card-section
class="col q-pa-none text-right"
>
<!-- chat_bubble_outline or announcement -->
<q-btn
v-if="props.shift.type"
flat
dense
icon="chat_bubble_outline"
class="q-pa-none"
/>
<!-- insert_drive_file or request_quote -->
<q-btn
v-if="props.shift.type"
flat
dense
icon="attach_money"
class="q-pa-none q-mx-xs"
/>
</q-card-section>
</q-card-section>
</template>

82
src/modules/timesheet-approval/components/detailed-shift-list.vue
View File

@ -1,82 +0,0 @@
<script setup lang="ts">
import DetailedShiftListRow from 'src/modules/timesheet-approval/components/detailed-shift-list-row.vue';
import DetailedShiftListHeader from 'src/modules/timesheet-approval/components/detailed-shift-list-header.vue';
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
import type { Shift } from 'src/modules/timesheets/types/shift.interfaces';
import type { PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details';
import { default_shift } from 'src/modules/timesheets/types/shift.defaults';
const { rawData, currentPayPeriod } = defineProps<{
rawData: PayPeriodEmployeeDetails;
currentPayPeriod: PayPeriod;
}>();
const weeks = [ rawData.week1, rawData.week2 ];
const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
return shifts.length > 0 ? shifts : [default_shift];
};
const getDate = (shift_date: string): Date => {
return new Date(currentPayPeriod.pay_year.toString() + '/' + shift_date);
};
</script>
<template>
<div
v-for="week, index in 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"
>
<q-card-section class="col-auto q-pa-xs text-white">
<div
class="bg-primary rounded-10 q-pa-xs text-center"
:style="$q.screen.lt.md ? '' : 'width: 75px;'"
>
<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>
<q-card-section class="col q-pa-none">
<DetailedShiftListHeader />
<DetailedShiftListRow
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
:key="shift_index"
:shift="shift"
/>
</q-card-section>
<q-card-section class="q-pr-xs col-auto">
<q-btn
push
color="primary"
icon="more_time"
class="q-pa-sm"
/>
</q-card-section>
</q-card>
</div>
</template>

14
src/modules/timesheet-approval/composables/use-timesheet-approval-api.ts
View File

@ -1,7 +1,6 @@
import { useTimesheetStore } from "src/stores/timesheet-store"; import { useTimesheetStore } from "src/stores/timesheet-store";
import { useAuthStore } from "src/stores/auth-store"; import { useAuthStore } from "src/stores/auth-store";
import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/types/pay-period-report"; import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
import { default_pay_period_employee_overview, type PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/pay-period-employee-overview";
import { date } from "quasar"; import { date } from "quasar";
export const useTimesheetApprovalApi = () => { export const useTimesheetApprovalApi = () => {
@ -20,10 +19,6 @@ export const useTimesheetApprovalApi = () => {
} }
}; };
const getPayPeriodOverviewByEmployeeEmail = (email: string): void => {
const employee_overview = timesheet_store.getPayPeriodOverviewByEmployeeEmail(email);
};
/* This method attempts to get the next or previous pay period. /* This method attempts to get the next or previous pay period.
It checks if pay period number is within a certain range, adjusts pay period and year accordingly. It checks if pay period number is within a certain range, adjusts pay period and year accordingly.
It then requests the matching pay period object to set as current pay period from server. It then requests the matching pay period object to set as current pay period from server.
@ -56,9 +51,9 @@ export const useTimesheetApprovalApi = () => {
const [ targo, solucom ] = report_filter_company; const [ targo, solucom ] = report_filter_company;
const [ shifts, expenses, holiday, vacation ] = report_filter_type; const [ shifts, expenses, holiday, vacation ] = report_filter_type;
const options = { const options = {
company: { targo, solucom }, types: { shifts, expenses, holiday, vacation },
types: { shifts, expenses, holiday, vacation } companies: { targo, solucom },
} as PayPeriodReportFilters; } as TimesheetApprovalCSVReportFilters;
await timesheet_store.getTimesheetApprovalCSVReport(options); await timesheet_store.getTimesheetApprovalCSVReport(options);
}; };
@ -66,7 +61,6 @@ export const useTimesheetApprovalApi = () => {
return { return {
getPayPeriodOverviewByDate, getPayPeriodOverviewByDate,
getNextOrPreviousPayPeriodOverviewList, getNextOrPreviousPayPeriodOverviewList,
getPayPeriodOverviewByEmployeeEmail,
getTimesheetApprovalCSVReport, getTimesheetApprovalCSVReport,
} }
}; };

0
src/modules/timesheet-approval/types/detailed-shift-color.ts → src/modules/timesheet-approval/models/detailed-dialog-shift-color.model.ts
View File

8
src/modules/timesheet-approval/types/pay-period-report-options.ts → src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
View File

@ -1,4 +1,4 @@
export interface PayPeriodReportFilters { export interface TimesheetApprovalCSVReportFilters {
types: { types: {
shifts: boolean; shifts: boolean;
expenses: boolean; expenses: boolean;
@ -9,9 +9,9 @@ export interface PayPeriodReportFilters {
targo: boolean; targo: boolean;
solucom: boolean; solucom: boolean;
}; };
}; }
export const default_pay_period_report_filters: PayPeriodReportFilters = { export const default_pay_period_report_filters: TimesheetApprovalCSVReportFilters = {
types: { types: {
shifts: true, shifts: true,
expenses: true, expenses: true,
@ -22,4 +22,4 @@ export const default_pay_period_report_filters: PayPeriodReportFilters = {
targo: true, targo: true,
solucom: true, solucom: true,
}, },
}; };

26
src/modules/timesheet-approval/types/pay-period-employee-overview.ts → src/modules/timesheet-approval/models/timesheet-approval-overview.models.ts
View File

@ -1,4 +1,14 @@
export interface PayPeriodEmployeeOverview { export interface TimesheetApprovalOverviewCrew {
pay_period_no: number;
pay_year: number;
payday: string;
period_start: string;
period_end: string;
label: string;
overview_crew: TimesheetApprovalOverviewCrewMember[];
};
export interface TimesheetApprovalOverviewCrewMember {
email: string; email: string;
employee_name: string; employee_name: string;
regular_hours: number; regular_hours: number;
@ -11,7 +21,7 @@ export interface PayPeriodEmployeeOverview {
is_approved: boolean; is_approved: boolean;
}; };
export const default_pay_period_employee_overview: PayPeriodEmployeeOverview = { export const default_timesheet_approval_overview_crew_member: TimesheetApprovalOverviewCrewMember = {
email: '', email: '',
employee_name: '', employee_name: '',
regular_hours: -1, regular_hours: -1,
@ -24,7 +34,17 @@ export const default_pay_period_employee_overview: PayPeriodEmployeeOverview = {
is_approved: false is_approved: false
} }
export const pay_period_employee_overview_columns = [ export const default_timesheet_approval_overview_crew: TimesheetApprovalOverviewCrew = {
pay_period_no: -1,
pay_year: -1,
payday: '',
period_start: '',
period_end: '',
label: '',
overview_crew: []
}
export const timesheet_approval_overview_crew_columns = [
{ {
name: 'employee_name', name: 'employee_name',
label: 'timesheet_approvals.table.full_name', label: 'timesheet_approvals.table.full_name',

8
src/modules/timesheet-approval/pages/timesheet-approval.vue → src/modules/timesheet-approval/pages/timesheet-approval-page.vue
View File

@ -3,9 +3,9 @@
import { date } from 'quasar'; import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api'; import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store'; import { useTimesheetStore } from 'src/stores/timesheet-store';
import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
import TimesheetApprovalDetailed from 'src/modules/timesheet-approval/pages/timesheet-approval-detailed.vue';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue'; import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import EmployeeOverviewList from 'src/modules/timesheet-approval/components/employee-overview/overview-list.vue';
import DetailedDialog from 'src/modules/timesheet-approval/components/detailed-dialog.vue';
const timesheet_approval_api = useTimesheetApprovalApi(); const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore(); const timesheet_store = useTimesheetStore();
@ -26,10 +26,10 @@
:end-date="timesheet_store.pay_period.period_end" :end-date="timesheet_store.pay_period.period_end"
/> />
<TimesheetApprovalDetailed <DetailedDialog
:is-loading="timesheet_store.is_loading" :is-loading="timesheet_store.is_loading"
:employee-overview="timesheet_store.pay_period_employee_overview" :employee-overview="timesheet_store.pay_period_employee_overview"
:employee-details="timesheet_store.pay_period_employee_details" :timesheet-details="timesheet_store.pay_period_employee_details"
/> />
<EmployeeOverviewList /> <EmployeeOverviewList />

15
src/modules/timesheet-approval/types/pay-period-employee-details.ts
View File

@ -1,15 +0,0 @@
import { defaultTimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet.defaults";
import type { TimesheetDetailsWeek } from "src/modules/timesheets/types/timesheet.interfaces";
export interface PayPeriodEmployeeDetails {
week1: TimesheetDetailsWeek;
week2: TimesheetDetailsWeek;
employee_full_name: string;
};
export const default_pay_period_employee_details = {
week1: defaultTimesheetDetailsWeek(),
week2: defaultTimesheetDetailsWeek(),
employee_full_name: "",
}

11
src/modules/timesheet-approval/types/pay-period-overview.ts
View File

@ -1,11 +0,0 @@
import type { PayPeriodEmployeeOverview } from "./pay-period-employee-overview";
export interface PayPeriodOverview {
pay_period_no: number;
pay_year: number;
payday: string;
period_start: string;
period_end: string;
label: string;
employees_overview: PayPeriodEmployeeOverview[];
};

16
src/modules/timesheet-approval/types/pay-period-report.ts
View File

@ -1,16 +0,0 @@
// export interface PayPeriodReport {
// }
export interface PayPeriodReportFilters {
company: {
targo: boolean;
solucom: boolean;
};
types: {
shifts: boolean;
expenses: boolean;
holiday: boolean;
vacation: boolean;
};
}

1
src/modules/timesheets/components/shift/shift-crud-dialog.vue
View File

@ -5,7 +5,6 @@ import { useI18n } from 'vue-i18n';
import { SHIFT_KEY, type ShiftKey, type ShiftPayload, type ShiftSelectOption } from '../../types/shift.types'; import { SHIFT_KEY, type ShiftKey, type ShiftPayload, type ShiftSelectOption } from '../../types/shift.types';
import type { UpsertShiftsBody } from '../../types/shift.interfaces'; import type { UpsertShiftsBody } from '../../types/shift.interfaces';
import { upsertShiftsByDate } from '../../composables/api/use-shift-api'; import { upsertShiftsByDate } from '../../composables/api/use-shift-api';
/* eslint-disable */
const { t } = useI18n(); const { t } = useI18n();

0
src/modules/timesheets/components/shift/detailed-shift-list-header.vue → src/modules/timesheets/components/shift/shift-list-header.vue
View File

0
src/modules/timesheets/components/shift/shifts-legend.vue → src/modules/timesheets/components/shift/shift-list-legend.vue
View File

0
src/modules/timesheets/components/shift/detailed-shift-list-row.vue → src/modules/timesheets/components/shift/shift-list-row.vue
View File

0
src/modules/timesheets/components/shift/detailed-shift-list.vue → src/modules/timesheets/components/shift/shift-list.vue
View File

0
src/modules/timesheets/types/expense-validation.interface.ts → src/modules/timesheets/models/expense-validation.interface.ts
View File

78
src/modules/timesheets/models/expense.models.ts Normal file
View File

@ -0,0 +1,78 @@
// export const EXPENSE_TYPE = [
// 'PER_DIEM',
// 'MILEAGE',
// 'EXPENSES',
// 'PRIME_GARDE',
// ] as const;
// export type ExpenseType = (typeof EXPENSE_TYPE)[number];
// export const TYPES_WITH_MILEAGE_ONLY: Readonly<ExpenseType[]> = ['MILEAGE'];
// export const TYPES_WITH_AMOUNT_ONLY: Readonly<ExpenseType[]> = [
// 'PER_DIEM',
// 'EXPENSES',
// 'PRIME_GARDE',
// ];
export type ExpenseType = 'PER_DIEM' | 'MILEAGE' | 'EXPENSES' | 'PRIME_GARDE';
export type ExpenseTotals = {
amount: number;
mileage: number;
};
// export type ExpenseSavePayload = {
// pay_period_no: number;
// pay_year: number;
// email: string;
// expenses: TimesheetExpense[];
// };
export interface Expense {
// is_approved: boolean;
// comment: string;
// amount: number;
// supervisor_comment: string;
// }
// export interface TimesheetExpense {
date: string;
type: string;
amount?: number;
mileage?: number;
comment?: string;
supervisor_comment?: string;
is_approved?: boolean;
}
// export interface PayPeriodExpenses {
export interface TimesheetExpenses {
pay_period_no: number;
pay_year: number;
employee_email: string;
is_approved: boolean;
// expenses: TimesheetExpense[];
expenses: Expense[];
totals?: {
amount: number;
mileage: number;
reimbursable_total?: number;
}
}
// export interface ExpensePayload{
// date: string;
// type: ExpenseType;
// amount?: number;
// mileage?: number;
// comment: string;
// }
// export interface UpsertExpensesBody {
// expenses: ExpensePayload[];
// }
// export interface UpsertExpensesResponse {
// data: PayPeriodExpenses;
// }

83
src/modules/timesheets/models/shift.models.ts Normal file
View File

@ -0,0 +1,83 @@
// export const SHIFT_KEY = [
// 'REGULAR',
// 'EVENING',
// 'EMERGENCY',
// 'HOLIDAY',
// 'VACATION',
// 'SICK'
// ] as const;
// export type ShiftKey = typeof SHIFT_KEY[number];
// export type ShiftSelectOption = { value: ShiftKey; label: string };
// export type ShiftPayload = {
// start_time: string;
// end_time: string;
// type: ShiftKey;
// is_remote: boolean;
// comment?: string;
// }
export type ShiftKey = 'REGULAR' | 'EVENING' | 'EMERGENCY' | 'HOLIDAY' | 'VACATION' | 'SICK';
export type UpsertAction = 'created' | 'updated' | 'deleted';
export type ShiftLegendItem = {
type: ShiftKey;
color: string;
label_key: string;
text_color?: string;
};
export interface Shift {
date: string;
type: ShiftKey;
start_time: string;
end_time: string;
comment: string;
is_approved: boolean;
is_remote: boolean;
}
export interface UpsertShiftsResponse {
action: UpsertAction;
// day: DayShift[];
day: Shift[];
}
// export interface CreateShiftPayload {
// date: string;
// type: ShiftKey;
// start_time: string;
// end_time: string;
// comment?: string;
// is_remote?: boolean;
// }
// export interface CreateWeekShiftPayload {
// shifts: CreateShiftPayload[];
// }
// export interface UpsertShiftsBody {
// old_shift?: ShiftPayload;
// new_shift?: ShiftPayload;
// }
// export interface DayShift {
// start_time: string;
// end_time: string;
// type: string;
// is_remote: boolean;
// comment?: string | null;
// }
export const default_shift: Readonly<Shift> = {
date: '',
start_time: '--:--',
end_time: '--:--',
type:'REGULAR',
comment: '',
is_approved: false,
is_remote: false,
};

125
src/modules/timesheets/models/timesheet.models.ts Normal file
View File

@ -0,0 +1,125 @@
import type { Shift } from "./shift.models";
import type { Expense } from "src/modules/timesheets/models/expense.models";
// import type {
// TimesheetExpenseEntry,
// TimesheetShiftEntry,
// Week
// } from "./timesheet.types";
// export interface Timesheet {
// is_approved: boolean;
// start_day: string;
// end_day: string;
// label: string;
// shifts: TimesheetShiftEntry[];
// expenses: TimesheetExpenseEntry[];
// }
// export type TimesheetShiftEntry = {
// bank_type: string;
// date: string;
// start_time: string;
// end_time: string;
// comment: string;
// is_approved: boolean;
// is_remote: boolean;
// };
// export type TimesheetExpenseEntry = {
// bank_type: string;
// date: string;
// amount: number;
// km: number;
// comment: string;
// is_approved: boolean;
// supervisor_comment: string;
// };
export type Week<T> = {
sun: T;
mon: T;
tue: T;
wed: T;
thu: T;
fri: T;
sat: T;
};
export interface TimesheetDetails {
week1: TimesheetDetailsWeek;
week2: TimesheetDetailsWeek;
employee_full_name: string;
}
export interface TimesheetDetailsWeek {
is_approved: boolean;
shifts: Week<TimesheetDetailsWeekDayShifts>
expenses: Week<TimesheetDetailsWeekDayExpenses>;
}
export interface TimesheetDetailsWeekDayShifts {
shifts: Shift[];
regular_hours: number;
evening_hours: number;
emergency_hours: number;
overtime_hours: number;
total_hours: number;
short_date: string;
break_duration?: number;
}
export interface TimesheetDetailsWeekDayExpenses {
cash: Expense[];
km: Expense[];
[otherType: string]: Expense[];
}
// export interface DailyExpense {
// is_approved: boolean;
// comment: string;
// amount: number;
// supervisor_comment: string;
// }
// export interface TimesheetPayPeriodDetailsOverview {
// week1: TimesheetDetailsWeek;
// week2: TimesheetDetailsWeek;
// }
const makeWeek = <T>(factory: ()=> T): Week<T> => ({
sun: factory(),
mon: factory(),
tue: factory(),
wed: factory(),
thu: factory(),
fri: factory(),
sat: factory(),
});
const emptyDailySchedule = (): TimesheetDetailsWeekDayShifts => ({
shifts: [],
regular_hours: 0,
evening_hours: 0,
emergency_hours: 0,
overtime_hours: 0,
total_hours: 0,
short_date: "",
break_duration: 0,
});
const emptyDailyExpenses = (): TimesheetDetailsWeekDayExpenses => ({
cash: [],
km: [],
});
export const defaultTimesheetDetailsWeek = (): TimesheetDetailsWeek => ({
is_approved: false,
shifts: makeWeek(emptyDailySchedule),
expenses: makeWeek(emptyDailyExpenses),
});
export const default_timesheet_details: TimesheetDetails = {
week1: defaultTimesheetDetailsWeek(),
week2: defaultTimesheetDetailsWeek(),
employee_full_name: "",
}

0
src/modules/timesheets/types/ui.types.ts → src/modules/timesheets/models/ui.types.ts
View File

16
src/modules/timesheets/pages/timesheet-details-overview.vue → src/modules/timesheets/pages/timesheet-page.vue
View File

@ -13,9 +13,9 @@ import TimesheetNavigation from '../components/timesheet/timesheet-naviga
import ShiftsLegend from '../components/shift/shifts-legend.vue'; import ShiftsLegend from '../components/shift/shifts-legend.vue';
import ShiftCrudDialog from '../components/shift/shift-crud-dialog.vue'; import ShiftCrudDialog from '../components/shift/shift-crud-dialog.vue';
import TimesheetDetailsExpenses from '../components/expenses/timesheet-details-expenses.vue'; import TimesheetDetailsExpenses from '../components/expenses/timesheet-details-expenses.vue';
import { SHIFT_KEY } from '../types/shift.types'; import DetailedShiftList from '../components/shift/detailed-shift-list.vue';
import type { ShiftKey } from '../models/shift.models';
import type { TimesheetExpense } from '../types/expense.interfaces'; import type { TimesheetExpense } from '../types/expense.interfaces';
import DetailedShiftList from '../components/shift/detailed-shift-list.vue';
/* eslint-disable */ /* eslint-disable */
//------------------- stores ------------------- //------------------- stores -------------------
@ -29,14 +29,13 @@ const timesheet_api = useTimesheetApi();
//------------------- expenses ------------------- //------------------- expenses -------------------
const openExpensesDialog = () => expenses_store.openDialog({ const openExpensesDialog = () => expenses_store.openDialog({
email: auth_store.user.email, email: auth_store.user.email,
pay_year: timesheet_store.current_pay_period.pay_year, pay_year: timesheet_store.pay_period.pay_year,
pay_period_no: timesheet_store.current_pay_period.pay_period_no, pay_period_no: timesheet_store.pay_period.pay_period_no,
t, t,
}); });
const onSaveExpenses = async ( payload: { email: string; pay_year: number; pay_period_no: number; expenses: TimesheetExpense[] }) => { const onSaveExpenses = async ( payload: { email: string; pay_year: number; pay_period_no: number; expenses: TimesheetExpense[] }) => {
await expenses_store.saveExpenses({...payload, t}); await expenses_store.saveExpenses({...payload, t});
await timesheet_store.refreshCurrentPeriodForUser(auth_store.user.email);
}; };
const onCloseExpenses = () => expenses_store.closeDialog(); const onCloseExpenses = () => expenses_store.closeDialog();
@ -45,7 +44,7 @@ const onCloseExpenses = () => expenses_store.closeDialog();
const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' }; const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
const pay_period_label = computed(() => formatPayPeriodLabel( const pay_period_label = computed(() => formatPayPeriodLabel(
timesheet_store.current_pay_period?.label, timesheet_store.pay_period.label,
locale.value, locale.value,
date.extractDate, date.extractDate,
date_options date_options
@ -55,11 +54,6 @@ const pay_period_label = computed(() => formatPayPeriodLabel(
//------------------- q-select Shift options ------------------- //------------------- q-select Shift options -------------------
const shift_options = computed(() => buildShiftOptions(SHIFT_KEY, t)); const shift_options = computed(() => buildShiftOptions(SHIFT_KEY, t));
//------------------- navigation by date -------------------
const onDateSelected = async (date_string: string) => {
await timesheet_store.loadByIsoDate(date_string, auth_store.user.email);
};
onMounted(async () => { onMounted(async () => {
await timesheet_store.loadToday(auth_store.user.email); await timesheet_store.loadToday(auth_store.user.email);
}); });

2
src/modules/timesheets/services/timesheet-services.ts → src/modules/timesheets/services/timesheet-service.ts
View File

@ -6,7 +6,7 @@ import type { PayPeriodReportFilters } from "src/modules/timesheet-approval/type
import type { Timesheet } from "../types/timesheet.interfaces"; import type { Timesheet } from "../types/timesheet.interfaces";
import type { CreateShiftPayload, CreateWeekShiftPayload } from "../types/shift.interfaces"; import type { CreateShiftPayload, CreateWeekShiftPayload } from "../types/shift.interfaces";
export const timesheetTempService = { export const timesheetService = {
//GET //GET
getTimesheetsByEmail: async ( email: string, offset = 0): Promise<Timesheet> => { getTimesheetsByEmail: async ( email: string, offset = 0): Promise<Timesheet> => {
const response = await api.get(`/timesheets/${encodeURIComponent(email)}`, {params: offset ? { offset } : undefined}); const response = await api.get(`/timesheets/${encodeURIComponent(email)}`, {params: offset ? { offset } : undefined});

0
src/modules/timesheets/types/expense.defaults.ts
View File

47
src/modules/timesheets/types/expense.interfaces.ts
View File

@ -1,47 +0,0 @@
import type { ExpenseType } from "./expense.types";
export interface Expense {
is_approved: boolean;
comment: string;
amount: number;
supervisor_comment: string;
}
export interface TimesheetExpense {
date: string;
type: string;
amount?: number;
mileage?: number;
comment?: string;
supervisor_comment?: string;
is_approved?: boolean;
}
export interface PayPeriodExpenses {
pay_period_no: number;
pay_year: number;
employee_email: string;
is_approved: boolean;
expenses: TimesheetExpense[];
totals: {
amount: number;
mileage: number;
reimbursable_total?: number;
}
}
export interface ExpensePayload{
date: string;
type: ExpenseType;
amount?: number;
mileage?: number;
comment: string;
}
export interface UpsertExpensesBody {
expenses: ExpensePayload[];
}
export interface UpsertExpensesResponse {
data: PayPeriodExpenses;
}

29
src/modules/timesheets/types/expense.types.ts
View File

@ -1,29 +0,0 @@
import type { TimesheetExpense } from "./expense.interfaces";
export const EXPENSE_TYPE = [
'PER_DIEM',
'MILEAGE',
'EXPENSES',
'PRIME_GARDE',
] as const;
export type ExpenseType = (typeof EXPENSE_TYPE)[number];
export const TYPES_WITH_MILEAGE_ONLY: Readonly<ExpenseType[]> = ['MILEAGE'];
export const TYPES_WITH_AMOUNT_ONLY: Readonly<ExpenseType[]> = [
'PER_DIEM',
'EXPENSES',
'PRIME_GARDE',
];
export type ExpenseTotals = {
amount: number;
mileage: number;
};
export type ExpenseSavePayload = {
pay_period_no: number;
pay_year: number;
email: string;
expenses: TimesheetExpense[];
};

11
src/modules/timesheets/types/shift.defaults.ts
View File

@ -1,11 +0,0 @@
import type { Shift } from "./shift.interfaces";
export const default_shift: Readonly<Shift> = {
date: '',
start_time: '--:--',
end_time: '--:--',
type:'REGULAR',
comment: '',
is_approved: false,
is_remote: false,
};

44
src/modules/timesheets/types/shift.interfaces.ts
View File

@ -1,44 +0,0 @@
import type { ShiftKey, ShiftPayload, UpsertAction } from "./shift.types";
export interface Shift {
date: string;
type: ShiftKey;
start_time: string;
end_time: string;
comment: string;
is_approved: boolean;
is_remote: boolean;
}
export interface CreateShiftPayload {
date: string;
type: ShiftKey;
start_time: string;
end_time: string;
comment?: string;
is_remote?: boolean;
}
export interface CreateWeekShiftPayload {
shifts: CreateShiftPayload[];
}
export interface UpsertShiftsBody {
old_shift?: ShiftPayload;
new_shift?: ShiftPayload;
}
export interface DayShift {
start_time: string;
end_time: string;
type: string;
is_remote: boolean;
comment?: string | null;
}
export interface UpsertShiftsResponse {
action: UpsertAction;
day: DayShift[];
}

30
src/modules/timesheets/types/shift.types.ts
View File

@ -1,30 +0,0 @@
export const SHIFT_KEY = [
'REGULAR',
'EVENING',
'EMERGENCY',
'HOLIDAY',
'VACATION',
'SICK'
] as const;
export type ShiftKey = typeof SHIFT_KEY[number];
export type ShiftSelectOption = { value: ShiftKey; label: string };
export type ShiftPayload = {
start_time: string;
end_time: string;
type: ShiftKey;
is_remote: boolean;
comment?: string;
}
export type ShiftLegendItem = {
type: 'REGULAR'|'EVENING'|'EMERGENCY'|'OVERTIME'|'VACATION'|'HOLIDAY'|'SICK';
color: string;
label_key: string;
text_color?: string;
};
export type UpsertAction = 'created' | 'updated' | 'deleted';

39
src/modules/timesheets/types/timesheet.defaults.ts
View File

@ -1,39 +0,0 @@
import type { WeekDay } from "./timesheet.types";
import type {
TimesheetDetailsDailyExpenses,
TimesheetDetailsDailySchedule,
TimesheetDetailsWeek
} from "./timesheet.interfaces";
const makeWeek = <T>(factory: ()=> T): WeekDay<T> => ({
sun: factory(),
mon: factory(),
tue: factory(),
wed: factory(),
thu: factory(),
fri: factory(),
sat: factory(),
});
const emptyDailySchedule = (): TimesheetDetailsDailySchedule => ({
shifts: [],
regular_hours: 0,
evening_hours: 0,
emergency_hours: 0,
overtime_hours: 0,
total_hours: 0,
comment: "",
short_date: "",
break_duration: 0,
});
const emptyDailyExpenses = (): TimesheetDetailsDailyExpenses => ({
cash: [],
km: [],
});
export const defaultTimesheetDetailsWeek = (): TimesheetDetailsWeek => ({
is_approved: false,
shifts: makeWeek(emptyDailySchedule),
expenses: makeWeek(emptyDailyExpenses),
});

54
src/modules/timesheets/types/timesheet.interfaces.ts
View File

@ -1,54 +0,0 @@
import type { Shift } from "./shift.interfaces";
import type {
TimesheetExpenseEntry,
TimesheetShiftEntry,
WeekDay
} from "./timesheet.types";
export interface Timesheet {
is_approved: boolean;
start_day: string;
end_day: string;
label: string;
shifts: TimesheetShiftEntry[];
expenses: TimesheetExpenseEntry[];
}
export interface TimesheetDetailsWeek {
is_approved: boolean;
shifts: WeekDay<TimesheetDetailsDailySchedule>
expenses: WeekDay<TimesheetDetailsDailyExpenses>;
}
export interface TimesheetDetailsDailySchedule {
shifts: Shift[];
regular_hours: number;
evening_hours: number;
emergency_hours: number;
overtime_hours: number;
total_hours: number;
comment: string;
short_date: string;
break_duration?: number;
}
export interface DailyExpense {
is_approved: boolean;
comment: string;
amount: number;
supervisor_comment: string;
}
export interface TimesheetDetailsDailyExpenses {
cash: DailyExpense[];
km: DailyExpense[];
[otherType: string]: DailyExpense[];
}
export interface TimesheetPayPeriodDetailsOverview {
week1: TimesheetDetailsWeek;
week2: TimesheetDetailsWeek;
}

29
src/modules/timesheets/types/timesheet.types.ts
View File

@ -1,29 +0,0 @@
export type TimesheetShiftEntry = {
bank_type: string;
date: string;
start_time: string;
end_time: string;
comment: string;
is_approved: boolean;
is_remote: boolean;
};
export type TimesheetExpenseEntry = {
bank_type: string;
date: string;
amount: number;
km: number;
comment: string;
is_approved: boolean;
supervisor_comment: string;
};
export type WeekDay<T> = {
sun: T;
mon: T;
tue: T;
wed: T;
thu: T;
fri: T;
sat: T;
};

67
src/stores/timesheet-store.ts
View File

@ -1,42 +1,23 @@
import { date } from 'quasar';
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { withLoading } from 'src/utils/store-helpers'; import { withLoading } from 'src/utils/store-helpers';
import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service'; import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
import { timesheetTempService } from 'src/modules/timesheets/services/timesheet-services'; import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
import { default_pay_period_employee_details, type PayPeriodEmployeeDetails } from 'src/modules/timesheet-approval/types/pay-period-employee-details'; import { default_timesheet_approval_overview_crew, type TimesheetApprovalOverviewCrew } from "src/modules/timesheet-approval/models/timesheet-approval-overview.models";
import { default_pay_period_employee_overview, type PayPeriodEmployeeOverview } from "src/modules/timesheet-approval/types/pay-period-employee-overview"; // import type { Timesheet } from 'src/modules/timesheets/types/timesheet.interfaces';
import type { Timesheet } from 'src/modules/timesheets/types/timesheet.interfaces'; import type { TimesheetDetails } from 'src/modules/timesheets/models/timesheet.models';
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface'; import { default_timesheet_details } from 'src/modules/timesheets/types/timesheet.defaults';
import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report'; import type { PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report';
const default_pay_period: PayPeriod = {
pay_period_no: -1,
period_start: '',
period_end: '',
payday: '',
pay_year: -1,
label: ''
};
//employee timesheet
const default_timesheet: Timesheet = {
start_day: '',
end_day: '',
label: '',
is_approved: false,
shifts: [],
expenses: [],
};
export const useTimesheetStore = defineStore('timesheet', () => { export const useTimesheetStore = defineStore('timesheet', () => {
const is_loading = ref<boolean>(false); const is_loading = ref<boolean>(false);
const pay_period = ref<PayPeriod>(default_pay_period); const pay_period = ref<PayPeriod>(default_pay_period);
const pay_period_employee_overview_list = ref<PayPeriodEmployeeOverview[]>([]); const timesheet_approval_overview_list = ref<TimesheetApprovalOverview[]>([]);
const pay_period_employee_overview = ref<PayPeriodEmployeeOverview>(default_pay_period_employee_overview); const timesheet_aproval_overview = ref<TimesheetApprovalOverview>(default_pay_period_employee_overview);
const pay_period_employee_details = ref<PayPeriodEmployeeDetails>(default_pay_period_employee_details); const pay_period_employee_details = ref<TimesheetDetails>(default_timesheet_details);
const pay_period_report = ref(); const pay_period_report = ref();
const timesheet = ref<Timesheet>(default_timesheet); // const timesheet = ref<Timesheet>(default_timesheet);
const is_calendar_limit = computed( ()=> const is_calendar_limit = computed( ()=>
pay_period.value.pay_year === 2024 && pay_period.value.pay_year === 2024 &&
pay_period.value.pay_period_no <= 1 pay_period.value.pay_period_no <= 1
@ -97,21 +78,21 @@ export const useTimesheetStore = defineStore('timesheet', () => {
return pay_period_employee_overview.value; return pay_period_employee_overview.value;
}; };
const getTimesheetByEmail = async (employee_email: string) => { // const getTimesheetByEmail = async (employee_email: string) => {
return withLoading( is_loading, async () => { // return withLoading( is_loading, async () => {
try{ // try{
const response = await timesheetTempService.getTimesheetsByEmail(employee_email); // const response = await timesheetTempService.getTimesheetsByEmail(employee_email);
timesheet.value = response; // timesheet.value = response;
return true; // return true;
}catch (error) { // }catch (error) {
console.error('There was an error retrieving timesheet details for this employee: ', error); // console.error('There was an error retrieving timesheet details for this employee: ', error);
timesheet.value = { ...default_timesheet } // timesheet.value = { ...default_timesheet }
} // }
return false; // return false;
}); // });
}; // };
const getPayPeriodEmployeeDetailsByEmployeeEmail = async (employee_email: string) => { const getPayPeriodEmployeeDetailsByEmployeeEmail = async (employee_email: string) => {
return withLoading( is_loading, async () => { return withLoading( is_loading, async () => {
@ -163,7 +144,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
is_loading, is_loading,
is_calendar_limit, is_calendar_limit,
getPayPeriodByDateOrYearAndNumber, getPayPeriodByDateOrYearAndNumber,
getTimesheetByEmail, // getTimesheetByEmail,
getPayPeriodEmployeeOverviewListBySupervisorEmail, getPayPeriodEmployeeOverviewListBySupervisorEmail,
getPayPeriodOverviewByEmployeeEmail, getPayPeriodOverviewByEmployeeEmail,
getPayPeriodEmployeeDetailsByEmployeeEmail, getPayPeriodEmployeeDetailsByEmployeeEmail,