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

fix(approvals, timesheet): separation of concern, refactor timesheet route to use optional email, fix frontend routes and streamline store, simplify logic in many places.

Browse Source
This commit is contained in:
Nicolas Drolet 2025-11-21 12:01:46 -05:00
parent a47222a7b8
commit 39ce63603e
18 changed files with 185 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/village.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 242 KiB

After

Width:  |  Height:  |  Size: 7.4 MiB

4
src/modules/auth/components/login-connection-panel.vue
View File

@ -13,7 +13,7 @@
</script>
<template>
<q-card class="rounded-15 shadow-10">
<q-card class="rounded-15 shadow-10 full-width">
<q-card-section class="text-center bg-primary q-pa-lg">
<q-img
src="/src/assets/logo-targo-white.svg"
@ -38,7 +38,7 @@
label-color="accent"
class="rounded-5 inset-shadow bg-white"
label-slot
input-class="text-h6 text-dark"
input-class="text-h6 text-primary"
>
<template #label>
<span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>

39
src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
View File

@ -4,7 +4,7 @@
>
/* eslint-disable */
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { Bar } from 'vue-chartjs';
import { useI18n } from 'vue-i18n';
import { useQuasar, colors } from 'quasar';
@ -21,42 +21,37 @@
const timesheet_store = useTimesheetStore();
const all_days = timesheet_store.timesheets.flatMap(week => week.days.flatMap(day => day.daily_expenses));
const expenses_labels = ref<string[]>(timesheet_store.timesheets.flatMap(week => week.days.map(day => day.date.slice(-5,))));
const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
const expenses_labels = ref<string[]>([]);
const getExpensesData = (): ChartData<'bar'> => {
const all_days = timesheet_store.timesheets.flatMap(week => week.days.flatMap(day => day.daily_expenses));
const all_costs = all_days.map(day => (day.expenses + day.on_call + day.per_diem));
const all_mileage = all_days.map(day => day.mileage);
onMounted(() => {
expenses_dataset.value = [
{
label: t('timesheet_approvals.table.expenses'),
data: all_costs,
backgroundColor: colors.getPaletteColor('primary'),
data: all_days.map(day => (day.expenses + day.on_call + day.per_diem)),
backgroundColor: colors.getPaletteColor('accent'),
},
{
label: t('timesheet_approvals.table.mileage'),
data: all_mileage,
data: all_days.map(day => day.mileage),
backgroundColor: colors.getPaletteColor('info'),
}
]
expenses_labels.value = timesheet_store.timesheets.flatMap(week => week.days.map(day => day.date.slice(-5, )));
return {
datasets: expenses_dataset.value,
labels: expenses_labels.value
};
};
});
</script>
<template>
<div>
<div
class="bg-dark rounded-10 q-pa-sm"
:style="`min-height: ${$q.screen.lt.md ? '350px;' : '200px'}`"
>
<Bar
:data="getExpensesData()"
:data="{
datasets: expenses_dataset,
labels: expenses_labels,
}"
:options="({
indexAxis: $q.screen.lt.md ? 'y' : 'x',
plugins: {

81
src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
View File

@ -2,7 +2,7 @@
setup
lang="ts"
>
import { ref, computed } from 'vue';
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { colors, useQuasar } from 'quasar';
import { Bar } from 'vue-chartjs';
@ -26,60 +26,53 @@
const timesheet_store = useTimesheetStore();
const hours_worked_labels = ref<string[]>([]);
const all_days = computed(() => timesheet_store.timesheets.flatMap(week => week.days));
const datasetConfig: ChartConfigHoursWorked[] = [
{
key: 'regular',
label: t('shared.shift_type.regular'),
color: colors.getPaletteColor('accent'),
},
{
key: 'evening',
label: t('shared.shift_type.evening'),
color: colors.getPaletteColor('green-10'),
},
{
key: 'emergency',
label: t('shared.shift_type.emergency'),
color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
},
{
key: 'overtime',
label: t('shared.shift_type.overtime'),
color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
},
];
const hours_worked_labels = ref<string[]>(all_days.value.map(day => day.date.slice(-5,)));
const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);
const getHoursWorkedData = (): ChartData<'bar'> => {
const all_days = computed(() => timesheet_store.timesheets.flatMap(week => week.days));
const datasetConfig: ChartConfigHoursWorked[] = [
{
key: 'regular',
label: t('shared.shift_type.regular'),
color: colors.getPaletteColor('primary'),
},
{
key: 'evening',
label: t('shared.shift_type.evening'),
color: colors.getPaletteColor('accent'),
},
{
key: 'emergency',
label: t('shared.shift_type.emergency'),
color: getComputedStyle(document.body).getPropertyValue('--q-warning').trim(),
},
{
key: 'overtime',
label: t('shared.shift_type.overtime'),
color: getComputedStyle(document.body).getPropertyValue('--q-negative').trim(),
},
] as const;
onMounted(() => {
hours_worked_dataset.value = datasetConfig.map(cfg => ({
label: cfg.label,
data: all_days.value.map(day => day.daily_hours[cfg.key]),
backgroundColor: cfg.color,
}));
hours_worked_labels.value = all_days.value.map(day => day.date.slice(-5, ));
console.log('all days: ', all_days.value);
console.log('hours worked labels: ', hours_worked_labels.value);
console.log('hours worked dataset: ', hours_worked_dataset.value);
return {
labels: hours_worked_labels.value,
datasets: hours_worked_dataset.value,
};
};
});
</script>
<template>
<div>
<div
class="bg-dark rounded-10 q-pa-sm"
:style="`min-height: ${$q.screen.lt.md ? '450px;' : '200px'}`"
>
<Bar
:data="getHoursWorkedData()"
:data="{
labels: hours_worked_labels,
datasets: hours_worked_dataset,
}"
:options="({
indexAxis: $q.screen.lt.md ? 'y' : 'x',
plugins: {

57
src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
View File

@ -3,7 +3,7 @@
lang="ts"
>
/* eslint-disable */
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { colors } from 'quasar';
import { useQuasar } from 'quasar';
import { Doughnut } from 'vue-chartjs';
@ -19,44 +19,43 @@
const timesheet_store = useTimesheetStore();
const shift_type_labels = ref<string[]>([]);
const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
shift_type_totals.value = [{
data: [
timesheet_store.current_pay_period_overview!.regular_hours,
timesheet_store.current_pay_period_overview!.other_hours.evening_hours,
timesheet_store.current_pay_period_overview!.other_hours.emergency_hours,
timesheet_store.current_pay_period_overview!.other_hours.overtime_hours,
],
backgroundColor: [
colors.getPaletteColor('primary'), // Regular
colors.getPaletteColor('accent'), // Evening
colors.getPaletteColor('warning'), // Emergency
colors.getPaletteColor('negative'), // Overtime
]
}];
shift_type_labels.value = [
const shift_type_labels = ref<string[]>([
timesheet_store.current_pay_period_overview!.regular_hours.toString() + 'h',
timesheet_store.current_pay_period_overview!.other_hours.evening_hours.toString() + 'h',
timesheet_store.current_pay_period_overview!.other_hours.emergency_hours.toString() + 'h',
timesheet_store.current_pay_period_overview!.other_hours.overtime_hours.toString() + 'h',
]
]);
const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([]);
const data = {
labels: shift_type_labels.value,
datasets: shift_type_totals.value,
}
onMounted(() => {
shift_type_totals.value = [{
data: [
timesheet_store.current_pay_period_overview!.regular_hours,
timesheet_store.current_pay_period_overview!.other_hours.evening_hours,
timesheet_store.current_pay_period_overview!.other_hours.emergency_hours,
timesheet_store.current_pay_period_overview!.other_hours.overtime_hours,
],
backgroundColor: [
colors.getPaletteColor('accent'), // Regular
colors.getPaletteColor('green-10'), // Evening
colors.getPaletteColor('warning'), // Emergency
colors.getPaletteColor('negative'), // Overtime
]
}]
});
</script>
<template>
<div>
<div
style="min-height: 100px;"
:style="$q.screen.lt.md ? 'max-height: 150px;' : ''"
>
<Doughnut
:data="data"
:data="{
labels: shift_type_labels,
datasets: shift_type_totals,
}"
:options="({
plugins: {
legend: {

34
src/modules/timesheet-approval/components/details-dialog.vue
View File

@ -3,7 +3,7 @@
lang="ts"
>
/* eslint-disable */
import { provide, ref } from 'vue';
import { ref } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import DetailsDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue';
import DetailsDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue';
@ -11,20 +11,13 @@
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
const { employeeEmail } = defineProps<{
employeeEmail: string;
}>();
const dialog_model = defineModel<boolean>('dialog', { default: false });
const timesheet_store = useTimesheetStore();
const is_dialog_open = ref(false);
provide('employeeEmail', employeeEmail);
</script>
<template>
<q-dialog
v-model="dialog_model"
v-model="timesheet_store.is_details_dialog_open"
full-width
full-height
transition-show="jump-down"
@ -33,14 +26,12 @@
@hide="is_dialog_open = false"
>
<q-card
class="shadow-12 rounded-15 column no-wrap relative bg-secondary"
:style="($q.screen.lt.md ? '' : 'width: 60vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
class="shadow-12 rounded-15 column no-wrap relative bg-secondary hide-scrollbar"
:style="($q.screen.lt.md ? '' : 'width:80vw !important;') + ($q.dark.isActive ? ' border: 2px solid var(--q-accent)' : '')"
>
<!-- employee name -->
<q-card-section
class="col-auto text-h5 text-weight-bolder text-center text-uppercase text-white q-px-none q-py-xs bg-primary"
>
<q-card-section class="col-auto text-h4 text-weight-bolder text-center text-uppercase q-px-none q-py-sm">
<span>{{ timesheet_store.selected_employee_name }}</span>
</q-card-section>
@ -48,21 +39,15 @@
<q-card-section
v-if="is_dialog_open"
:horizontal="!$q.screen.lt.md"
class="col-auto q-px-sm no-wrap"
class="col-auto q-px-md rounded-10 no-wrap"
>
<DetailsDialogChartHoursWorked class="col" />
<DetailsDialogChartShiftTypes class="col q-ma-lg" />
<DetailsDialogChartExpenses class="col" />
</q-card-section>
<q-card-section class="col-auto">
<q-separator />
<ExpenseDialogList
:employee-email="employeeEmail"
/>
<q-separator />
<ExpenseDialogList />
</q-card-section>
<!-- list of shifts -->
@ -70,10 +55,7 @@
:horizontal="$q.screen.gt.sm"
class="col-auto q-px-sm rounded-5 no-wrap"
>
<TimesheetWrapper
dense
:employee-email="employeeEmail"
/>
<TimesheetWrapper mode="approval" />
</q-card-section>
</q-card>
</q-dialog>

17
src/modules/timesheet-approval/components/overview-list.vue
View File

@ -15,8 +15,6 @@
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const employeeEmail = defineModel();
const visible_columns = ref<string[]>([
overview_column_names.REGULAR,
overview_column_names.EVENING,
@ -28,21 +26,16 @@
overview_column_names.IS_APPROVED,
]);
const emit = defineEmits<{
'clickedDetailsButton': [email: string];
}>();
const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
[] :
timesheet_store.pay_period_overviews
)
const onClickedDetails = async (employee_email: string, row: TimesheetOverview) => {
employeeEmail.value = employee_email;
const onClickedDetails = async (row: TimesheetOverview) => {
timesheet_store.current_pay_period_overview = row;
emit('clickedDetailsButton', employee_email);
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
await timesheet_store.getTimesheetsByEmployeeEmail(employee_email);
timesheet_store.is_details_dialog_open = true;
};
</script>
@ -99,7 +92,7 @@
>
<transition
appear
enter-active-class="animated fadeInUp"
enter-active-class="animated fadeInUp slow"
leave-active-class="animated fadeOutDown"
mode="out-in"
>
@ -146,7 +139,7 @@
:key="props.row.email + timesheet_store.pay_period?.pay_period_no"
:index="props.rowIndex"
:row="props.row"
@click-details="overview => onClickedDetails(props.row.email, overview)"
@click-details="overview => onClickedDetails(overview)"
/>
</template>

4
src/modules/timesheets/components/expense-dialog-list.vue
View File

@ -15,9 +15,7 @@
const expenses_list = computed(() => {
if (timesheet_store.timesheets !== undefined) {
const current_expenses = timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
console.log('current expenses: ', current_expenses);
return current_expenses;
return timesheet_store.timesheets.flatMap(week => week.days).flatMap(day => day.expenses);
}
return [];
})

3
src/modules/timesheets/components/shift-list.vue
View File

@ -43,7 +43,6 @@
<template>
<div
:class="$q.screen.lt.md ? 'column full-width' : 'row'"
:style="$q.screen.lt.md ? 'width: 90vw !important;' : ''"
>
<div
v-for="timesheet, timesheet_index in timesheet_store.timesheets"
@ -72,7 +71,7 @@
<q-card-section
class="text-weight-bolder text-uppercase text-h6 q-py-xs"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-dark text-white' : 'bg-primary text-white'"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-accent text-white' : 'bg-primary text-white'"
style="line-height: 1em;"
>
<span> {{ $d(extractDate(day.date, 'YYYY-MM-DD'), {

66
src/modules/timesheets/components/timesheet-wrapper.vue
View File

@ -10,65 +10,59 @@
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 expenses_store = useExpensesStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const shift_api = useShiftApi();
provide('employeeEmail', employeeEmail);
const { mode = 'normal' } = defineProps<{
mode?: 'approval' | 'normal';
}>();
</script>
<template>
<div class="column flex-center full-width">
<LoadingOverlay v-model="timesheet_store.is_loading"/>
<div
class="column flex-center full-width"
:class="mode === 'approval' ? 'bg-dark q-px-sm q-pb-sm q-mb-md rounded-10 shadow-10' : ''"
>
<LoadingOverlay v-model="timesheet_store.is_loading" />
<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="date_value => timesheet_api.getTimesheetsByDate(date_value, employeeEmail)"
@pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
@pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod(employeeEmail)"
v-if="mode === 'normal'"
@date-selected="date_value => timesheet_api.getTimesheetsByDate(date_value)"
@pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
@pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
/>
<!-- mobile expenses button -->
<q-btn
v-if="$q.screen.lt.md"
v-if="$q.screen.lt.md && mode === 'normal'"
push
rounded
color="accent"
icon="receipt_long"
:label="$t('timesheet.expense.open_btn')"
class="q-mt-sm"
@click="open"
@click="expenses_store.open"
/>
<!-- shift's colored legend -->
<!-- <ShiftListLegend :is-loading="false" /> -->
<q-space />
<!-- save timesheet changes button -->
<q-btn
v-if="$q.screen.gt.sm"
v-if="mode === 'normal'"
push
rounded
:disable="timesheet_store.is_loading"
@ -81,13 +75,13 @@
<!-- desktop expenses button -->
<q-btn
v-if="$q.screen.gt.sm"
v-if="mode === 'normal'"
push
rounded
color="accent"
icon="receipt_long"
:label="$t('timesheet.expense.open_btn')"
@click="open"
@click="expenses_store.open"
/>
</q-card-section>
@ -96,7 +90,25 @@
<TimesheetErrorWidget />
</q-card-section>
<ShiftList :dense="dense" />
<ShiftList :mode="mode" />
<q-card-section
horizontal
class="q-my-md"
>
<q-space />
<q-btn
v-if="mode === 'approval'"
push
rounded
:disable="timesheet_store.is_loading"
color="accent"
icon="upload"
:label="$t('shared.label.save')"
class="q-mr-md"
@click="shift_api.saveShiftChanges"
/>
</q-card-section>
</q-card>
<ExpenseDialog />
</div>

4
src/modules/timesheets/composables/use-expense-api.ts
View File

@ -10,14 +10,14 @@ export const useExpensesApi = () => {
const upsertExpense = async (expense: Expense): Promise<void> => {
const success = await expenses_store.upsertExpense(expense);
if (success) {
timesheet_store.getTimesheetsByEmployeeEmail();
timesheet_store.getTimesheetsByOptionalEmployeeEmail();
}
};
const deleteExpenseById = async (expense_id: number): Promise<void> => {
const success = await expenses_store.deleteExpenseById(expense_id);
if (success) {
timesheet_store.getTimesheetsByEmployeeEmail();
timesheet_store.getTimesheetsByOptionalEmployeeEmail();
}
};

4
src/modules/timesheets/composables/use-shift-api.ts
View File

@ -12,7 +12,7 @@ export const useShiftApi = () => {
const success = await shift_store.deleteShiftById(shift_id);
if (success) {
await timesheet_store.getTimesheetsByEmployeeEmail(auth_store.user?.email ?? '');
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(auth_store.user?.email ?? '');
}
timesheet_store.is_loading = false;
@ -25,7 +25,7 @@ export const useShiftApi = () => {
const update_success = await shift_store.updateShifts();
if (create_success || update_success){
await timesheet_store.getTimesheetsByEmployeeEmail(auth_store.user?.email ?? '');
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(auth_store.user?.email ?? '');
}
timesheet_store.is_loading = false;

6
src/modules/timesheets/composables/use-timesheet-api.ts
View File

@ -1,16 +1,14 @@
import { useAuthStore } from "src/stores/auth-store";
import { useTimesheetStore } from "src/stores/timesheet-store"
export const useTimesheetApi = () => {
const timesheet_store = useTimesheetStore();
const auth_store = useAuthStore();
const getTimesheetsByDate = async (date_string: string, employee_email?: string) => {
timesheet_store.is_loading = true;
const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber(date_string);
if (success) {
await timesheet_store.getTimesheetsByEmployeeEmail(employee_email ?? auth_store.user?.email ?? '');
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
timesheet_store.is_loading = false;
}
@ -24,7 +22,7 @@ export const useTimesheetApi = () => {
const success = await timesheet_store.getPayPeriodByDateOrYearAndNumber();
if (success) {
await timesheet_store.getTimesheetsByEmployeeEmail(employee_email ?? auth_store.user?.email ?? '');
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(employee_email);
timesheet_store.is_loading = false;
}

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

@ -20,7 +20,12 @@ export const timesheetService = {
},
getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<TimesheetResponse> => {
const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}/${employee_email}`);
return response.data.data;
if (employee_email !== undefined) {
const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}?employee_email=${employee_email}`);
return response.data.data;
} else {
const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}`);
return response.data.data;
}
},
};

10
src/pages/login-page.vue
View File

@ -5,10 +5,12 @@
<template>
<q-layout view="hHh lpR fFf">
<q-page-container class="bg-secondary">
<q-page class="column">
<q-img src="src/assets/village.png" fit="contain" class="col absolute-bottom-right" style="opacity: 50%;" />
<transition appear slow enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" class="col absolute-center">
<LoginConnectionPanel />
<q-page class="row">
<q-img src="src/assets/village.png" fit="cover" :class="$q.screen.lt.md ? 'absolute-bottom' : 'absolute-right'" />
<transition appear slow enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" class="col-xs-10 absolute-center">
<div class="col-sm-10 col-md-auto">
<LoginConnectionPanel />
</div>
</transition>
</q-page>
</q-page-container>

36
src/pages/timesheet-approval-page.vue
View File

@ -15,13 +15,6 @@
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const is_details_dialog_open = ref(false);
const employee_email = ref('');
const onDetailsClicked = (email: string) => {
employee_email.value = email;
is_details_dialog_open.value = true;
};
onMounted(async () => {
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
@ -41,8 +34,6 @@
/>
<DetailsDialog
v-model:dialog="is_details_dialog_open"
:employee-email="employee_email"
:is-loading="timesheet_store.is_loading"
:employee-overview="timesheet_store.current_pay_period_overview"
:timesheets="timesheet_store.timesheets"
@ -50,12 +41,13 @@
<div
class="col-auto full-width q-px-lg"
:class="($q.screen.lt.md ? 'text-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
:class="($q.screen.lt.md ? 'column flex-center' : 'row') + (timesheet_store.is_approval_grid_mode ? ' q-mb-sm' : ' q-mb-md')"
>
<PayPeriodNavigator
@date-selected="timesheet_approval_api.getTimesheetOverviews"
@pressed-next-button="timesheet_approval_api.getTimesheetOverviews"
@pressed-previous-button="timesheet_approval_api.getTimesheetOverviews"
:class="$q.screen.lt.md ? 'q-mb-sm' : ''"
/>
<q-space />
@ -67,25 +59,27 @@
color="white"
text-color="accent"
toggle-color="accent"
class="q-mr-md"
:class="$q.screen.lt.md ? 'q-mb-sm' : 'q-mr-md'"
:options="[
{ icon: 'grid_view', value: true },
{ icon: 'view_list', value: false },
]"
/>
<q-btn-dropdown
push
rounded
icon="filter_alt"
color="accent"
:label="$t('shared.label.filter')"
class="q-mr-md"
/>
<div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md ? 'q-mb-md' : ''">
<q-btn-dropdown
push
rounded
icon="filter_alt"
color="accent"
:label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
class="col-auto q-mr-sm"
/>
<QTableFilters v-model:search="timesheet_store.search_filter" />
<QTableFilters v-model:search="timesheet_store.search_filter" />
</div>
</div>
<OverviewList class="col" @clickedDetailsButton="onDetailsClicked" />
<OverviewList class="col" />
</q-page>
</template>

1
src/stores/expense-store.ts
View File

@ -45,7 +45,6 @@ export const useExpensesStore = defineStore('expenses', () => {
const deleteExpenseById = async (expense_id: number): Promise<boolean> => {
const data = await ExpenseService.deleteExpenseById(expense_id);
console.log('data received from expense deletion: ', data);
return data.success;
}

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

@ -12,13 +12,16 @@ import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-ap
export const useTimesheetStore = defineStore('timesheet', () => {
const is_loading = ref<boolean>(false);
const pay_period = ref<PayPeriod>();
const pay_period_overviews = ref<TimesheetOverview[]>([]);
const current_pay_period_overview = ref<TimesheetOverview>();
const timesheets = ref<Timesheet[]>([]);
const selected_employee_name = ref<string>();
const initial_timesheets = ref<Timesheet[]>([]);
const is_approval_grid_mode = ref<boolean>(true);
const pay_period_overviews = ref<TimesheetOverview[]>([]);
const is_details_dialog_open = ref(false);
const selected_employee_name = ref<string>();
const current_pay_period_overview = ref<TimesheetOverview>();
const search_filter = ref<string | number | null>('');
const is_approval_grid_mode = ref<boolean>(true);
const pay_period_report = ref();
const getPayPeriodByDateOrYearAndNumber = async (date?: string): Promise<boolean> => {
@ -64,11 +67,11 @@ export const useTimesheetStore = defineStore('timesheet', () => {
}
};
const getTimesheetsByEmployeeEmail = async (employee_email?: string) => {
const getTimesheetsByOptionalEmployeeEmail = async (employee_email?: string) => {
if (pay_period.value === undefined) return;
is_loading.value = true;
let response;
if (pay_period.value === undefined) return;
try {
if (employee_email) {
response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no, employee_email);
@ -108,6 +111,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
return {
is_loading,
is_approval_grid_mode,
is_details_dialog_open,
search_filter,
pay_period,
pay_period_overviews,
@ -117,7 +121,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
initial_timesheets,
getPayPeriodByDateOrYearAndNumber,
getTimesheetOverviews,
getTimesheetsByEmployeeEmail,
getTimesheetsByOptionalEmployeeEmail,
getPayPeriodReportByYearAndPeriodNumber,
};
});