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

fix(auth): change auth signup to use authentik test account rather than seed account for supervisor

Browse Source
This commit is contained in:
Nicolas Drolet 2025-10-07 14:13:04 -04:00
parent ebc3bde10c
commit dc615340bc
59 changed files with 1092 additions and 1278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
quasar.config.ts
View File

@ -106,7 +106,7 @@ export default defineConfig((ctx) => {
color: 'primary',
avatar: 'https://cdn.quasar.dev/img/boy-avatar.png',
},
dark: "auto",
dark: false,
},
// iconSet: 'material-icons', // Quasar icon set
@ -127,15 +127,7 @@ export default defineConfig((ctx) => {
// animations: 'all', // --- includes all animations
// https://v2.quasar.dev/options/animations
animations: [
'fadeIn',
'fadeOut',
'fadeInUp',
'zoomIn',
'zoomOut',
'flipInX',
'flipOutX',
],
animations: 'all',
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
// sourceFiles: {

1
src/i18n/en-ca/index.ts
View File

@ -83,6 +83,7 @@ export default {
cancel: "cancel",
update: "update",
modify: "modify",
close: "close",
},
misc: {
or: "or",

1
src/i18n/fr-ca/index.ts
View File

@ -83,6 +83,7 @@ export default {
cancel: "annuler",
update: "mettre à jour",
modify: "modifier",
close: "fermer",
},
misc: {
or: "ou",

8
src/layouts/main-layout.vue
View File

@ -1,14 +1,14 @@
<script lang="ts" setup>
import { RouterView } from 'vue-router';
import HeaderBar from 'src/modules/layouts/components/main-layout-header-bar.vue';
import FooterBar from 'src/modules/layouts/components/main-layout-footer-bar.vue';
import RightDrawer from 'src/modules/layouts/components/main-layout-right-drawer.vue';
import HeaderBar from 'src/layouts/components/main-layout-header-bar.vue';
import FooterBar from 'src/layouts/components/main-layout-footer-bar.vue';
import LeftDrawer from 'src/layouts/components/main-layout-left-drawer.vue';
</script>
<template>
<q-layout view="hHh lpR fFf">
<HeaderBar />
<RightDrawer />
<LeftDrawer />
<q-page-container>
<router-view class="q-pa-sm bg-secondary" />
</q-page-container>

2
src/modules/auth/types/auth-interface.ts → src/modules/auth/models/auth.models.ts
View File

@ -1,4 +1,4 @@
import type { User } from "src/modules/shared/types/user-interface";
import type { User } from "src/modules/shared/models/user.models";
export interface AuthState {
token: string;

4
src/modules/shared/components/pay-period-navigator.vue
View File

@ -27,7 +27,7 @@
</script>
<template>
<div class="row q-mb-lg q-mt-lg" >
<div class="row" >
<!-- navigation to previous week -->
<q-btn
push rounded
@ -53,7 +53,7 @@
color="primary"
@click="is_showing_calendar_picker = true"
:disable="timesheet_store.is_loading"
class="q-px-lg"
class="q-px-xl"
>
<q-tooltip
anchor="top middle"

18
src/modules/shared/components/q-table-filters.vue
View File

@ -6,7 +6,8 @@
<!-- Filters toggle -->
<q-btn-dropdown
push
class="q-mr-md bg-white text-primary left-rounded"
rounded
class="q-mr-md bg-white text-primary"
:label="$t('shared.label.filter')"
icon="filter_alt"
/>
@ -16,6 +17,7 @@
v-model="search_model"
outlined
dense
rounded
debounce="300"
class="right-rounded"
:label="$t('shared.label.search')"
@ -23,21 +25,11 @@
bg-color="white"
color="primary"
>
<template #before>
<template #prepend>
<q-icon
name="search"
color="primary"
/>
</template>
</q-input>
</template>
<style scoped>
.left-rounded {
border-radius: 50% 0 0 50%;
}
.right-rounded {
border-radius: 0 50% 50% 0;
}
</style>
</template>

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

@ -1,11 +1,13 @@
<script setup lang="ts">
<script
setup
lang="ts"
>
import { ref } from 'vue';
import { Bar } from 'vue-chartjs';
import { useI18n } from 'vue-i18n';
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 type { Expense } from 'src/modules/timesheets/models/expense.models';
const { t } = useI18n();
const $q = useQuasar();
@ -15,70 +17,55 @@
ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
defineProps<{
}>();
const timesheet_store = useTimesheetStore();
// const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
// const expenses_labels = ref<string[]>([]);
const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
const expenses_labels = ref<string[]>([]);
// const getExpensesData = (): ChartData<'bar'> => {
// if (timesheetDetails) {
// const all_weeks = [timesheetDetails.week1, timesheetDetails.week2];
// const all_days = all_weeks.flatMap( week => Object.values(week.expenses));
// const all_days_dates = all_weeks.flatMap( week => Object.values(week.shifts))
const getExpensesData = (): ChartData<'bar'> => {
const all_days = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.expenses));
const all_days_dates = timesheet_store.pay_period_details.weeks.flatMap(week => Object.values(week.shifts))
// const all_costs = all_days.map( day => getTotalAmounts(day.cash));
// const all_mileage = all_days.map( day => getTotalAmounts(day.km));
// expenses_dataset.value = [
// {
// label: t('timesheet_approvals.table.expenses'),
// data: all_costs,
// backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
// },
// {
// label: t('timesheet_approvals.table.mileage'),
// data: all_mileage,
// backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
// }
// ]
const all_costs = all_days.map(day => day.total_expenses);
const all_mileage = all_days.map(day => day.total_mileage);
// expenses_labels.value = all_days_dates.map( day => day.short_date);
// }
// return {
// datasets: expenses_dataset.value,
// labels: expenses_labels.value
// };
// };
expenses_dataset.value = [
{
label: t('timesheet_approvals.table.expenses'),
data: all_costs,
backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-primary').trim(),
},
{
label: t('timesheet_approvals.table.mileage'),
data: all_mileage,
backgroundColor: getComputedStyle(document.body).getPropertyValue('--q-info').trim(),
}
]
const getTotalAmounts = (expenses: Expense[]): number => {
let total_amount = 0;
expenses_labels.value = all_days_dates.map(day => day.short_date);
for (const expense of expenses) {
total_amount += expense.amount;
}
return total_amount;
}
return {
datasets: expenses_dataset.value,
labels: expenses_labels.value
};
};
</script>
<template>
<div>
<Bar
<Bar
:data="getExpensesData()"
:options="({
indexAxis: $q.screen.lt.md? 'y' : 'x',
indexAxis: $q.screen.lt.md ? 'y' : 'x',
plugins: {
title: {
display: true,
text: t('timesheet_approvals.chart.expenses_title'),
},
legend:{
labels:{
legend: {
labels: {
boxWidth: 15,
}
}

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

@ -4,8 +4,8 @@
import { Bar } from 'vue-chartjs';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartOptions, type Plugin, type ChartDataset } from 'chart.js';
import type { TimesheetDetails } from 'src/modules/timesheets/models/pay-period-details.models';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, type ChartData, type ChartDataset } from 'chart.js';
import { useTimesheetStore } from 'src/stores/timesheet-store';
const { t } = useI18n();
const $q = useQuasar();
@ -15,19 +15,14 @@
ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
const props = defineProps<{
rawData: TimesheetDetails | undefined;
options?: ChartOptions<"bar"> | undefined;
plugins?: Plugin<"bar">[] | undefined;
}>();
const { pay_period_details } = useTimesheetStore();
const hours_worked_labels = ref<string[]>([]);
const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);
const getHoursWorkedData = (): ChartData<'bar'> => {
if (props.rawData) {
const all_weeks = [props.rawData.week1, props.rawData.week2];
const all_days = all_weeks.flatMap( week => Object.values(week.shifts));
const all_days = pay_period_details.weeks.flatMap( week => Object.values(week.shifts));
const datasetConfig = [
{
key: 'regular_hours',
@ -58,7 +53,7 @@
}));
hours_worked_labels.value = all_days.map(day => day.short_date);
}
return {
labels: hours_worked_labels.value,

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

@ -1,51 +1,49 @@
<script setup lang="ts">
/* eslint-disable */
<script
setup
lang="ts"
>
import { ref } from 'vue';
import { colors } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { Doughnut } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
const { t } = useI18n();
import { useTimesheetStore } from 'src/stores/timesheet-store';
const $q = useQuasar();
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale);
ChartJS.defaults.font.family = '"Roboto", sans-serif';
ChartJS.defaults.maintainAspectRatio = false;
ChartJS.defaults.color = $q.dark.isActive ? '#F5F5F5' : '#616161';
const props = defineProps<{
rawData: PayPeriodEmployeeOverview | undefined;
}>();
const { current_pay_period_overview } = useTimesheetStore();
const shift_type_labels = ref<string[]>([]);
const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([{ data: [40, 0, 2, 5], }]);
if (props.rawData){
shift_type_totals.value = [{
data: [
props.rawData.regular_hours,
props.rawData.evening_hours,
props.rawData.emergency_hours,
props.rawData.overtime_hours,
],
backgroundColor: [
colors.getPaletteColor('green-5'), // Regular
colors.getPaletteColor('green-9'), // Evening
getComputedStyle(document.body).getPropertyValue('--q-warning').trim(), // Emergency
getComputedStyle(document.body).getPropertyValue('--q-negative').trim(), // Overtime
]
}];
shift_type_labels.value = [
props.rawData.regular_hours.toString() + 'h',
props.rawData.evening_hours.toString() + 'h',
props.rawData.emergency_hours.toString() + 'h',
props.rawData.overtime_hours.toString() + 'h',
shift_type_totals.value = [{
data: [
current_pay_period_overview.regular_hours,
current_pay_period_overview.evening_hours,
current_pay_period_overview.emergency_hours,
current_pay_period_overview.overtime_hours,
],
backgroundColor: [
colors.getPaletteColor('green-5'), // Regular
colors.getPaletteColor('green-9'), // Evening
getComputedStyle(document.body).getPropertyValue('--q-warning').trim(), // Emergency
getComputedStyle(document.body).getPropertyValue('--q-negative').trim(), // Overtime
]
}
}];
shift_type_labels.value = [
current_pay_period_overview.regular_hours.toString() + 'h',
current_pay_period_overview.evening_hours.toString() + 'h',
current_pay_period_overview.emergency_hours.toString() + 'h',
current_pay_period_overview.overtime_hours.toString() + 'h',
]
const data = {
labels: shift_type_labels.value,
@ -59,9 +57,9 @@
<Doughnut
:data="data"
:options="({
plugins:{
legend:{
labels:{
plugins: {
legend: {
labels: {
boxWidth: 15,
}
}

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

@ -1,72 +1,73 @@
<script setup lang="ts">
<script
setup
lang="ts"
>
import { ref } from 'vue';
// import { useTimesheetStore } from 'src/stores/timesheet-store';
import { shift_type_legend } from 'src/modules/timesheet-approval/models/detailed-dialog-shift-color.model';
import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/graphs/detailed-chart-hours-worked.vue';
import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/graphs/detailed-chart-shift-types.vue';
import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/graphs/detailed-chart-expenses.vue';
import type { PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
const dialog_model = defineModel<boolean>('dialog', { default: false });
import { useTimesheetStore } from 'src/stores/timesheet-store';
import DetailedDialogChartHoursWorked from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-hours-worked.vue';
import DetailedDialogChartShiftTypes from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-shift-types.vue';
import DetailedDialogChartExpenses from 'src/modules/timesheet-approval/components/details-crud-dialog-chart-expenses.vue';
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
defineProps<{
isLoading: boolean;
payPeriodOverview: PayPeriodOverview;
payPeriodDetails: PayPeriodDetails;
employeeEmail: string;
}>();
const dialog_model = defineModel<boolean>('dialog', { default: false });
const timesheet_store = useTimesheetStore();
// const timesheet_store = useTimesheetStore();
const is_showing_graph = ref(true);
</script>
<template>
<q-dialog
v-model="dialog_model"
<q-dialog
v-model="dialog_model"
full-width
transition-show="jump-down"
transition-show="jump-down"
transition-hide="jump-down"
>
<q-card
<!-- loader -->
<q-card
v-if="timesheet_store.is_loading"
class="column flex-center text-center"
>
<q-spinner
color="primary"
size="5em"
:thickness="10"
class="col-auto"
/>
<div class="col-auto text-primary text-h6 text-weight-bold text-center ">
{{ $t('shared.loading') }}
</div>
</q-card>
<q-card
v-else
class="q-pa-sm shadow-12 rounded-15 column no-wrap relative"
:style="$q.screen.lt.md ? '' : 'width: 60vw !important;'"
>
<!-- loader -->
<q-card-section
v-if="isLoading"
class="column flex-center text-center"
>
<q-spinner
color="primary"
size="5em"
:thickness="10"
class="col-auto"
/>
<div class="col-auto text-primary text-h6 text-weight-bold text-center ">
{{ $t('shared.loading') }}
</div>
</q-card-section>
<!-- employee name -->
<q-card-section
v-if="!isLoading"
<q-card-section
class="text-h5 text-weight-bolder text-center text-primary q-pa-none text-uppercase col-auto"
>
<span> {{ payPeriodDetails.employee_full_name }} </span>
<span>{{ timesheet_store.pay_period_details.employee_full_name }}</span>
<q-separator
spaced
size="2px"
<q-separator
spaced
size="2px"
/>
<q-card-actions
<q-card-actions
align="center"
class="q-pa-none"
>
<q-btn-toggle
v-model="is_showing_graph"
color="white"
text-color="primary"
<q-btn-toggle
v-model="is_showing_graph"
color="white"
text-color="primary"
toggle-color="primary"
:options="[
{ icon: 'bar_chart', value: true },
@ -77,67 +78,48 @@
</q-card-section>
<!-- employee timesheet for supervisor editting -->
<q-card-section
v-if="!is_showing_graph"
<q-card-section
v-if="!is_showing_graph"
class="q-pa-none"
>
<!-- shift type color legend -->
<q-card-section class="q-py-xs q-px-none text-center q-my-s">
<q-badge
v-for="shift_type, index in shift_type_legend"
:key="index"
:color="shift_type.background_color"
:label="$t(shift_type.type_label)"
:text-color="shift_type.font_color"
class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
style="width: 120px; font-size: 0.8em;"
/>
</q-card-section>
<!-- list of shifts, broken down into weekly columns -->
<q-card-section
:horizontal="$q.screen.gt.sm"
class="q-pa-none bg-secondary rounded-10"
<!-- list of shifts -->
<q-card-section
:horizontal="$q.screen.gt.sm"
class="q-pa-none rounded-10"
>
<!-- IMPORTANT: Timesheet shift list goes here!!! -->
<TimesheetWrapper
dense
:employee-email="employeeEmail"
/>
</q-card-section>
</q-card-section>
<!-- employee timesheet details with chart -->
<q-card-section
v-if="is_showing_graph"
<q-card-section
v-if="is_showing_graph"
class="q-pa-md col column full-width no-wrap"
>
<q-card-section
:horizontal="!$q.screen.lt.md"
class="q-pa-none col no-wrap"
<q-card-section
:horizontal="!$q.screen.lt.md"
class="q-pa-none col no-wrap"
style="min-height: 300px;"
>
<DetailedDialogChartHoursWorked
:raw-data="payPeriodDetails"
class="col-7"
/>
<DetailedDialogChartHoursWorked class="col-7" />
<q-separator
spaced
:vertical="!$q.screen.lt.md"
<q-separator
spaced
:vertical="!$q.screen.lt.md"
/>
<div class="column col justify-center no-wrap q-pa-none">
<DetailedDialogChartShiftTypes
:raw-data="payPeriodOverview"
class="col-5"
<DetailedDialogChartShiftTypes class="col-5" />
<q-separator
spaced
:vertical="!$q.screen.lt.md"
/>
<q-separator
spaced
:vertical="!$q.screen.lt.md"
/>
<DetailedDialogChartExpenses
:raw-data="payPeriodDetails"
class="col"
/>
<DetailedDialogChartExpenses class="col" />
</div>
</q-card-section>
</q-card-section>

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

@ -1,9 +1,11 @@
<script setup lang="ts">
import type { PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
import type { PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
const modelApproval = defineModel<boolean>();
const { row } = defineProps<{ row: PayPeriodEmployeeOverview; }>();
const emit = defineEmits<{ clickDetails: []; }>();
const { row } = defineProps<{ row: PayPeriodOverview; }>();
const emit = defineEmits<{
'clickDetails': [overview: PayPeriodOverview];
}>();
const stack_label_class = "text-weight-bold text-primary text-uppercase text-caption q-pa-none q-my-none ellipsis";
</script>
@ -25,7 +27,7 @@
class="col-auto q-pa-none q-ma-none"
color="primary"
icon="work_history"
@click="emit('clickDetails')"
@click="emit('clickDetails', row)"
>
<q-tooltip
anchor="top middle"

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

@ -1,70 +1,89 @@
<script setup lang="ts">
import { ref } from 'vue';
<script
setup
lang="ts"
>
import { computed, ref } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import OverviewListItem from 'src/modules/timesheet-approval/components/employee-overview/overview-list-item.vue';
import QTableFilters from 'src/modules/shared/components/utils/q-table-filters.vue';
import { pay_period_employee_overview_columns, type PayPeriodEmployeeOverview } from 'src/modules/timesheet-approval/types/pay-period-employee-overview';
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import { pay_period_overview_columns, type PayPeriodOverview } from 'src/modules/timesheet-approval/models/pay-period-overview.models';
const timesheet_store = useTimesheetStore();
// const FORWARD = 1
// const BACKWARD = -1
const filter = ref<string | number | null>('');
const onClickedDetails = async ( employee_email: string ) => {
await timesheet_store.getPayPeriodEmployeeDetailsByEmployeeEmail(employee_email);
const employeeEmail = defineModel();
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: PayPeriodOverview) => {
employeeEmail.value = employee_email;
emit('clickedDetailsButton', employee_email);
timesheet_store.current_pay_period_overview = row;
await timesheet_store.getPayPeriodDetailsByEmployeeEmail(employee_email);
};
</script>
<template>
<div class="q-pa-md">
<q-table
:rows="timesheet_store.pay_period_employee_overview_list"
:columns="pay_period_employee_overview_columns"
row-key="email"
:filter="filter"
grid
dense
hide-pagination
color="primary"
:rows-per-page-options="[0]"
card-container-class="justify-center"
:loading="timesheet_store.is_loading"
:no-data-label="$t('shared.error.no_data_found')"
:no-results-label="$t('shared.error.no_search_results')"
:loading-label="$t('shared.label.loading')"
<q-table
:rows="overview_rows"
:columns="pay_period_overview_columns"
row-key="email"
:filter="filter"
grid
dense
hide-pagination
color="primary"
:rows-per-page-options="[0]"
card-container-class="justify-center"
:loading="timesheet_store.is_loading"
:no-data-label="$t('shared.error.no_data_found')"
:no-results-label="$t('shared.error.no_search_results')"
:loading-label="$t('shared.label.loading')"
>
<template #top>
<div class="full-width" :class="$q.screen.lt.md ? 'text-center q-gutter-sm' : 'row'">
<!-- Calendar Picker goes here -->
<div
class="full-width"
:class="$q.screen.lt.md ? 'text-center' : 'row'"
>
<PayPeriodNavigator />
<q-space />
<!-- Grid-or-List toggle goes here -->
<QTableFilters v-model="filter"/>
<QTableFilters v-model="filter" />
</div>
</template>
<!-- Template for individual employee cards -->
<template #item="props: { row: PayPeriodEmployeeOverview, key: string }">
<template #item="props: { row: PayPeriodOverview, key: string }">
<OverviewListItem
v-model="props.row.is_approved"
v-model="props.row.is_approved"
:row="props.row"
@click-details="onClickedDetails(props.row.email)"
@click-details="overview => onClickedDetails(props.row.email, overview)"
/>
</template>
<!-- Template for custome failed-to-load state -->
<template #no-data="{ message, filter }">
<div class="full-width column items-center text-primary q-gutter-sm">
<span class="text-h6 q-mt-xl">
<q-icon
size="4em"
:name="filter ? 'filter_alt_off' : 'error_outline'"
/>
<span class="text-h6">
{{ message }}
</span>
<q-icon
size="4em"
:name="filter ? 'filter_alt_off' : 'error_outline'"
/>
</div>
</template>
</q-table>

49
src/modules/timesheet-approval/components/overview-report.vue
View File

@ -1,9 +1,12 @@
<script setup lang="ts">
<script
setup
lang="ts"
>
import { default_timesheet_approval_cvs_report_filters, type TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
import { ref, computed } from 'vue';
import { default_pay_period_report_filters, type PayPeriodReportFilters } from 'src/modules/timesheet-approval/types/pay-period-report-options';
const report_filter_options = ref<PayPeriodReportFilters>(default_pay_period_report_filters);
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
const company_options = [
{ label: 'Targo', value: report_filter_options.value.companies.targo },
{ label: 'Solucom', value: report_filter_options.value.companies.solucom },
@ -16,15 +19,18 @@
{ label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
];
const is_download_button_disabled = computed(() => {
return company_options.map( option => option.value ).filter( value => value === true ).length > 0 ||
type_options.map( option => option.value ).filter( value => value === true ).length > 0;
const is_download_button_disabled = computed(() => {
return company_options.map(option => option.value).filter(value => value === true).length > 0 ||
type_options.map(option => option.value).filter(value => value === true).length > 0;
});
</script>
<template>
<q-btn-group rounded push>
<q-btn
<q-btn-group
rounded
push
>
<q-btn
rounded
push
color="primary"
@ -42,14 +48,17 @@
<q-list class="row">
<q-item class="col">
<q-item-label class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
{{$t('timesheet_approvals.print_report.company')}}
{{ $t('timesheet_approvals.print_report.company') }}
</q-item-label>
<q-item-section row no-wrap>
<q-checkbox
<q-item-section
row
no-wrap
>
<q-checkbox
v-for="option, index in company_options"
:key="index"
v-model="option.value"
v-model="option.value"
:val="option.label"
:label="option.label"
/>
@ -59,13 +68,17 @@
<q-separator
spaced
vertical
color="primary"
color="primary"
/>
<q-item class="col">
<q-item-section row no-wrap>
<p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">{{$t('timesheet_approvals.print_report.type')}}</p>
<q-checkbox
<q-item-section
row
no-wrap
>
<p class="text-weight-bolder text-primary q-ma-none q-pa-none text-uppercase">
{{ $t('timesheet_approvals.print_report.type') }}</p>
<q-checkbox
v-for="option, index in type_options"
:key="index"
v-model="option.value"

10
src/modules/timesheet-approval/models/pay-period-overview.models.ts
View File

@ -11,6 +11,16 @@ export interface PayPeriodOverview {
is_approved: boolean;
};
export interface PayPeriodOverviewResponse {
pay_period_no: number;
pay_year: number;
period_start: string;
period_end: string;
payday: string;
label: string;
employees_overview: PayPeriodOverview[];
}
export const default_pay_period_overview: PayPeriodOverview = {
email: '',
employee_name: '',

2
src/modules/timesheet-approval/models/timesheet-approval-csv-report.models.ts
View File

@ -11,7 +11,7 @@ export interface TimesheetApprovalCSVReportFilters {
};
}
export const default_pay_period_report_filters: TimesheetApprovalCSVReportFilters = {
export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
types: {
shifts: true,
expenses: true,

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

@ -1,37 +0,0 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
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_store = useTimesheetStore();
onMounted( async () => {
await timesheet_approval_api.getPayPeriodOverviewByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding
class="q-pa-md bg-secondary "
>
<PageHeaderTemplate
title="timesheet_approvals.page_title"
:start-date="timesheet_store.pay_period.period_start"
:end-date="timesheet_store.pay_period.period_end"
/>
<DetailedDialog
:is-loading="timesheet_store.is_loading"
:employee-overview="timesheet_store.pay_period_employee_overview"
:timesheet-details="timesheet_store.pay_period_employee_details"
/>
<EmployeeOverviewList />
</q-page>
</template>

4
src/modules/timesheet-approval/services/timesheet-approval-service.ts
View File

@ -1,9 +1,9 @@
import { api } from "src/boot/axios";
import type { TimesheetApprovalCSVReportFilters } from "src/modules/timesheet-approval/models/timesheet-approval-csv-report.models";
import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/models/pay-period-overview.models";
export const timesheetApprovalService = {
getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverview[]> => {
getPayPeriodOverviewsBySupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<PayPeriodOverviewResponse> => {
const response = await api.get(`pay-periods/${year}/${period_number}/${supervisor_email}`);
return response.data;
},

83
src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue → src/modules/timesheets/components/expense-crud-dialog-form.vue
View File

@ -2,50 +2,53 @@
setup
lang="ts"
>
import { ref } from 'vue';
import { inject, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useExpensesStore } from 'src/stores/expense-store';
import type { ExpenseType, Expense } from 'src/modules/timesheets/models/expense.models';
import { default_expense, EXPENSE_TYPE, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
import { makeExpenseRules } from 'src/modules/timesheets/utils/expense.util';
import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
const expense_store = useExpensesStore();
const { t } = useI18n();
const expenses_store = useExpensesStore();
const expenses_api = useExpensesApi();
const files = defineModel<File[] | null>('files');
const is_navigator_open = ref(false);
//------------------ props ------------------
defineProps<{
type_options: { label: string; value: ExpenseType }[];
show_amount: boolean;
is_readonly: boolean;
rules: {
typeRequired: (val: unknown) => true | string;
amountRequired: (val: unknown) => true | string;
mileageRequired: (val: unknown) => true | string;
commentRequired: (val: unknown) => true | string;
commentTooLong: (val: unknown) => true | string;
};
comment_max_length: number;
setType: (val: ExpenseType) => void;
}>();
const COMMENT_MAX_LENGTH = 280;
const employee_email = inject<string>('employeeEmail');
const rules = makeExpenseRules(t);
//------------------ emits ------------------
const emit = defineEmits<{
'submit': [void];
}>();
const cancelUpdateMode = () => {
expenses_store.current_expense = default_expense;
expenses_store.initial_expense = default_expense;
expenses_store.mode = 'create';
}
const requestExpenseCreationOrUpdate = async () => {
if (expenses_store.mode === 'create') await expenses_api.createExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
else await expenses_api.updateExpenseByEmployeeEmail(employee_email ?? '', expenses_store.current_expense.date);
}
</script>
<template>
<q-form
flat
v-if="!is_readonly"
@submit.prevent="$emit('submit')"
v-if="!expenses_store.pay_period_expenses.is_approved"
@submit.prevent="requestExpenseCreationOrUpdate"
>
<div class="text-subtitle2 q-py-sm">
{{ $t('timesheet.expense.add_expense') }}
</div>
<div class="row justify-between">
<div
class="row justify-between rounded-5"
:class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
>
<!-- date selection input -->
<q-input
v-model="expense_store.current_expense.date"
v-model="expenses_store.current_expense.date"
dense
filled
readonly
@ -64,7 +67,7 @@
/>
<q-dialog v-model="is_navigator_open">
<q-date
v-model="expense_store.current_expense.date"
v-model="expenses_store.current_expense.date"
@update:model-value="is_navigator_open = false"
mask="YYYY-MM-DD"
/>
@ -74,8 +77,8 @@
<!-- expenses type selection -->
<q-select
v-model="expense_store.current_expense.type"
:options="type_options"
v-model="expenses_store.current_expense.type"
:options="EXPENSE_TYPE"
filled
dense
class="col q-px-xs"
@ -85,14 +88,13 @@
:label="$t('timesheet.expense.type')"
:rules="[rules.typeRequired]"
:option-label="label => $t(label)"
@update:model-value="val => setType(val as ExpenseType)"
/>
<!-- amount input -->
<template v-if="show_amount">
<template v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense.type)">
<q-input
key="amount"
v-model.number="expense_store.current_expense.amount"
v-model.number="expenses_store.current_expense.amount"
filled
input-class="text-right"
dense
@ -111,7 +113,7 @@
<template v-else>
<q-input
key="mileage"
v-model.number="expense_store.current_expense.mileage"
v-model.number="expenses_store.current_expense.mileage"
filled
input-class="text-right"
dense
@ -128,7 +130,7 @@
<!-- employee comment input -->
<q-input
v-model="expense_store.current_expense.comment"
v-model="expenses_store.current_expense.comment"
filled
color="primary"
type="text"
@ -137,9 +139,9 @@
stack-label
clearable
:counter="true"
:maxlength="comment_max_length"
:maxlength="COMMENT_MAX_LENGTH"
lazy-rules="ondemand"
:rules="[rules.commentRequired, rules.commentTooLong]"
:rules="[rules.commentRequired]"
>
<template #label>
<span class="text-weight-bold ">
@ -171,6 +173,15 @@
<!-- add btn section -->
<div>
<q-btn
v-if="expenses_store.mode === 'update'"
flat
dense
size="sm"
class="q-mt-sm q-ml-sm"
@click="cancelUpdateMode"
/>
<q-btn
push
dense

34
src/modules/timesheets/components/expense-crud-dialog-header.vue Normal file
View File

@ -0,0 +1,34 @@
<script
setup
lang="ts"
>
import { useExpensesStore } from 'src/stores/expense-store';
const expense_store = useExpensesStore();
</script>
<template>
<q-item class="row justify-between">
<q-item-label
header
class="text-h6 col-auto"
>
{{ $t('timesheet.expense.title') }}
</q-item-label>
<q-item-section class="items-center col-auto">
<q-badge
lines="1"
class="q-pa-sm q-px-md"
:label="$t('timesheet.expense.total_amount') + ': ' + expense_store.pay_period_expenses_totals.amount.toFixed(2)"
/>
<q-separator spaced />
<q-badge
lines="2"
class="q-pa-sm q-px-md"
:label="$t('timesheet.expense.total_mileage') + ': ' + expense_store.pay_period_expenses_totals.mileage.toFixed(1)"
/>
</q-item-section>
</q-item>
</template>

151
src/modules/timesheets/components/expense-crud-dialog-list.vue Normal file
View File

@ -0,0 +1,151 @@
<script
setup
lang="ts"
>
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
import { expenseTypeIcon } from 'src/modules/timesheets/utils/expense.util';
import { useExpensesStore } from 'src/stores/expense-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useExpensesApi } from 'src/modules/timesheets/composables/api/use-expense-api';
import { default_expense, type Expense } from 'src/modules/timesheets/models/expense.models';
import { computed, inject } from 'vue';
const timesheet_store = useTimesheetStore();
const expenses_store = useExpensesStore();
const expenses_api = useExpensesApi();
const expenses_list = computed(() => timesheet_store.pay_period_details.weeks.flatMap(week =>
Object.values(week.expenses).flatMap(day => day.expenses)));
const employee_email = inject('employeeEmail', '');
const setExpenseToModify = (expense: Expense) => {
expenses_store.mode = 'update';
expenses_store.current_expense = expense;
expenses_store.initial_expense = unwrapAndClone(expense);
};
const requestExpenseDeletion = async (expense: Expense) => {
expenses_store.mode = 'delete';
expenses_store.initial_expense = expense;
expenses_store.current_expense = default_expense;
await expenses_api.deleteExpenseByEmployeeEmail(employee_email, expenses_store.initial_expense.date);
}
</script>
<template>
<!-- liste des dépenses pré existantes -->
<q-list
padding
class="rounded-borders"
>
<q-item-label
v-if="expenses_store.pay_period_expenses.expenses.length === 0"
class="text-italic q-px-sm"
>
{{ $t('timesheet.expense.empty_list') }}
</q-item-label>
<q-item
style="border: solid 1px lightgrey; border-radius: 7px;"
v-for="(expense, index) in expenses_list"
:key="index"
class="q-my-xs shadow-1"
:class="expenses_store.mode === 'update' ? 'bg-accent' : ''"
>
<!-- avatar type icon section -->
<q-item-section avatar>
<q-icon
:name="expenseTypeIcon(expense.type)"
color="primary"
/>
</q-item-section>
<!-- amount or mileage section -->
<q-item-section top>
<q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
<template v-if="typeof expense.mileage === 'number'">
{{ expense.mileage?.toFixed(1) }} km
</template>
<template v-else>
{{ expense.amount.toFixed(2) }} $
</template>
</q-item-label>
<q-item-label v-else>
{{ expense.amount.toFixed(2) }} $
</q-item-label>
<!-- date label -->
<q-item-label
caption
lines="2"
>
{{ $d(new Date(expense.date), { year: 'numeric', month: 'short', day: 'numeric', weekday: 'short' })
}}
</q-item-label>
</q-item-section>
<!-- attachment file icon -->
<q-item-section side>
<q-btn
push
dense
size="md"
color="primary"
class="q-mx-lg"
icon="attach_file"
/>
</q-item-section>
<!-- comment section -->
<q-item-section top>
<q-item-label lines="1">
{{ $t('timesheet.expense.employee_comment') }}
</q-item-label>
<q-item-label
caption
lines="2"
>
{{ expense.comment }}
</q-item-label>
</q-item-section>
<!-- supervisor comment section -->
<q-item-section top>
<q-item-label lines="1">
{{ $t('timesheet.expense.supervisor_comment') }}
</q-item-label>
<q-item-label
v-if="expense.supervisor_comment"
caption
lines="2"
>
{{ expense.supervisor_comment }}
</q-item-label>
</q-item-section>
<q-item-section
v-if="!expenses_store.pay_period_expenses.is_approved && !expense.is_approved"
side
>
<q-btn
push
dense
size="xs"
color="primary"
icon="edit"
@click="setExpenseToModify(expense)"
/>
<q-btn
push
dense
size="xs"
color="negative"
icon="close"
@click="requestExpenseDeletion(expense)"
/>
</q-item-section>
</q-item>
</q-list>
</template>

0
src/modules/timesheets/components/expenses/expense-crud-dialog-supervisor-comment.vue → src/modules/timesheets/components/expense-crud-dialog-supervisor-comment.vue
View File

58
src/modules/timesheets/components/expense-crud-dialog.vue Normal file
View File

@ -0,0 +1,58 @@
<script
setup
lang="ts"
>
import { useExpensesStore } from 'src/stores/expense-store';
import ExpenseCrudDialogList from 'src/modules/timesheets/components/expense-crud-dialog-list.vue';
import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expense-crud-dialog-form.vue';
import ExpenseCrudDialogHeader from 'src/modules/timesheets/components/expense-crud-dialog-header.vue';
const expense_store = useExpensesStore();
</script>
<template>
<q-dialog
v-model="expense_store.is_open"
persistent
>
<q-card
class="q-pa-md"
style=" min-width: 70vw;"
>
<q-inner-loading :showing="expense_store.is_loading">
<q-spinner size="32px" />
</q-inner-loading>
<q-card-section>
<!-- <q-banner
v-if="expenses_error"
dense
class="bg-red-2 col-auto text-negative q-mt-sm"
>
{{ expenses_error }}
</q-banner> -->
<ExpenseCrudDialogHeader />
<ExpenseCrudDialogList />
<ExpenseCrudDialogForm />
<q-separator spaced />
</q-card-section>
<q-card-actions align="right">
<!-- close btn -->
<q-btn
flat
class="col-auto q-mr-sm"
color="primary"
:label="$t('shared.label.close')"
@click="expense_store.close"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>

117
src/modules/timesheets/components/expenses/expense-crud-dialog-list.vue
View File

@ -1,117 +0,0 @@
<script setup lang="ts">
import type { TimesheetExpense } from '../../types/expense.interfaces';
import { expenseTypeIcon } from '../../utils/expense.util';
/* eslint-disable */
defineProps<{
items: TimesheetExpense[];
is_readonly: boolean;
}>();
defineEmits<{
(e: 'remove', index: number): void;
(e: 'edit' , index: number): void;
}>();
</script>
<template>
<!-- liste des dépenses pré existantes -->
<q-list
padding
class="rounded-borders"
>
<q-item-label v-if="items.length === 0" class="text-italic q-px-sm">
{{ $t('timesheet.expense.empty_list') }}
</q-item-label>
<q-item
style="border: solid 1px lightgrey; border-radius: 7px;"
v-for="(expense, index) in items" :key="index"
class="q-my-xs shadow-1"
>
<!-- avatar type icon section -->
<q-item-section avatar>
<q-icon :name="expenseTypeIcon(expense.type)" color="primary"/>
</q-item-section>
<!-- amount or mileage section -->
<q-item-section top>
<q-item-label v-if="String(expense.type).trim().toUpperCase() === 'MILEAGE'">
<template v-if="typeof expense.mileage === 'number'">
{{ expense.mileage?.toFixed(1) }} km
</template>
<template v-else>
{{ expense.amount?.toFixed(2) }} $
</template>
</q-item-label>
<q-item-label v-else>
{{ expense.amount?.toFixed(2) }} $
</q-item-label>
<!-- date label -->
<q-item-label caption lines="2">
{{ $d(new Date(expense.date + 'T00:00:00'), { year:'numeric', month:'short', day: 'numeric', weekday: 'short'}) }}
</q-item-label>
</q-item-section>
<!-- attachment file icon -->
<q-item-section side>
<q-btn
push
dense
size="md"
color="primary"
class="q-mx-lg"
icon="attach_file"
/>
</q-item-section>
<!-- comment section -->
<q-item-section top>
<q-item-label lines="1">
{{ $t('timesheet.expense.employee_comment') }}
</q-item-label>
<q-item-label caption lines="2">
{{ expense.comment }}
</q-item-label>
</q-item-section>
<!-- supervisor comment section -->
<q-item-section top>
<q-item-label lines="1">
{{ $t('timesheet.expense.supervisor_comment') }}
</q-item-label>
<q-item-label v-if="expense.supervisor_comment" caption lines="2">
{{ expense.supervisor_comment }}
</q-item-label>
</q-item-section>
<!-- delete btn -->
<q-item-section side>
<q-btn
v-if="!is_readonly"
push
dense
size="xs"
color="primary"
icon="edit"
@click="$emit('edit', index)"
/>
</q-item-section>
<!-- delete btn -->
<q-item-section side>
<q-btn
v-if="!is_readonly"
push
dense
size="xs"
color="negative"
icon="close"
@click="$emit('remove', index)"
/>
</q-item-section>
</q-item>
</q-list>
</template>

121
src/modules/timesheets/components/expenses/expense-crud-dialog.vue
View File

@ -1,121 +0,0 @@
<script
setup
lang="ts"
>
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import { useExpensesStore } from 'src/stores/expense-store';
import { useExpenseForm } from '../../composables/use-expense-form';
import { COMMENT_MAX_LENGTH } from '../../constants/expense.constants';
import ExpenseList from './expense-list.vue';
import ExpenseCrudDialogForm from 'src/modules/timesheets/components/expenses/expense-crud-dialog-form.vue';
import { computeExpenseTotals, makeExpenseRules, buildExpenseSavePayload } from '../../utils/expense.util';
import { EXPENSE_TYPE } from 'src/modules/timesheets/models/expense.models';
import type { Expense, ExpenseType, PayPeriodExpenses } from 'src/modules/timesheets/models/expense.models';
import { toQSelectOptions } from 'src/utils/to-qselect-options';
const { t } = useI18n();
const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
const expense_store = useExpensesStore();
const { employeeEmail } = defineProps<{
employeeEmail: string;
}>();
const type_options = toQSelectOptions<ExpenseType>(EXPENSE_TYPE, 'timesheet.expense.types.');
//------------------ refs and computed ------------------
const files = ref<File[] | null>(null);
const { validateAnd } = useExpenseForm();
const totals = computed(() => computeExpenseTotals(expenses));
</script>
<template>
<q-dialog
v-model="expense_store.is_open"
persistent
>
<q-card
class="q-pa-md"
style=" min-width: 70vw;"
>
<q-inner-loading :showing="expense_store.is_loading">
<q-spinner size="32px" />
</q-inner-loading>
<q-card-section>
<!-- <q-banner
v-if="expenses_error"
dense
class="bg-red-2 col-auto text-negative q-mt-sm"
>
{{ expenses_error }}
</q-banner> -->
<!-- header (title with totals)-->
<q-item class="row justify-between">
<q-item-label
header
class="text-h6 col-auto"
>
{{ $t('timesheet.expense.title') }}
</q-item-label>
<q-item-section class="items-center col-auto">
<q-badge
lines="1"
class="q-pa-sm q-px-md"
:label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
/>
<q-separator spaced />
<q-badge
lines="2"
class="q-pa-sm q-px-md"
:label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
/>
</q-item-section>
</q-item>
<ExpenseList
:items="expense_store.current_expenses"
@remove="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
/>
<ExpenseCrudDialogForm
:current-expenses:"expense_store.current_expenses.exp"
v-model:files="files"
:is_readonly="expense_store.current_expenses.is_approved"
:type_options="type_options"
:rules="rules"
:comment_max_length="COMMENT_MAX_LENGTH"
:set-type="setType"
@submit="expense_store.upsertOrDeletePayPeriodExpenseByEmployeeEmail(employeeEmail, expense_store.current_expenses.expenses)"
/>
<q-separator spaced />
</q-card-section>
<q-card-actions align="right">
<!-- close btn -->
<q-btn
flat
class="col-auto q-mr-sm"
color="primary"
:label="$t('timesheet.cancel_button')"
@click="close"
/>
<!-- save btn -->
<q-btn
push
color="primary"
class="col-auto"
:disable="pay_period_expenses.is_approved || expenses.length === 0"
:label="$t('timesheet.save_button')"
@click="onSave"
/>
</q-card-actions>
</q-card>
</q-dialog>
</template>

267
src/modules/timesheets/components/expenses/timesheet-details-expenses.vue
View File

@ -1,267 +0,0 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import { useExpenseForm } from '../../composables/use-expense-form';
import { useExpenseDraft } from '../../composables/use-expense-draft';
import { useExpenseItems } from '../../composables/use-expense-items';
import { useToggle } from 'src/modules/shared/composables/use-toggle';
import ExpenseList from './expense-list.vue';
import ExpenseForm from './expense-form.vue';
import {
buildExpenseTypeOptions,
computeExpenseTotals,
makeExpenseRules,
buildExpenseSavePayload
} from '../../utils/expense.util';
import { COMMENT_MAX_LENGTH } from '../../constants/expense.constants';
import { ExpensesValidationError } from '../../types/expense-validation.interface';
import { EXPENSE_TYPE } from '../../types/expense.types';
import type { ExpenseType } from '../../types/expense.types';
import type { ExpenseDay, TimesheetExpense } from '../../types/expense.interfaces';
import {
createExpenseByDate,
deleteExpenseByDate,
getPayPeriodExpenses,
updateExpenseByDate
} from '../../composables/api/use-expense-api';
/* eslint-disable */
const { t, locale } = useI18n();
const rules = makeExpenseRules(t, COMMENT_MAX_LENGTH);
//------------------ props ------------------
const {email, pay_period_no, pay_year, is_approved, initial_expenses} = defineProps<{
pay_period_no: number;
pay_year: number;
email: string;
is_approved?: boolean;
initial_expenses?: TimesheetExpense[];
}>();
//------------------ emits ------------------
const emit = defineEmits<{
(e: 'close'): void;
(e: 'save', payload: {
pay_period_no: number;
pay_year: number;
email: string;
expenses: TimesheetExpense[];
}): void;
(e: 'error', err: ExpensesValidationError): void;
}>();
//------------------ q-select mapper ------------------
const type_options = computed(() => {
void locale.value;
return buildExpenseTypeOptions(EXPENSE_TYPE, t);
})
//------------------ refs and computed ------------------
const files = ref<File[] | null>(null);
const is_readonly = computed(() => !!is_approved);
const editing_old = ref<ExpenseDay | null>(null);
const { state: is_open_date_picker } = useToggle();
const { draft, setType, reset, showAmount } = useExpenseDraft();
const { formRef, validateAnd } = useExpenseForm();
const { items, validateAll, payload } = useExpenseItems({
initial_expenses: initial_expenses,
is_approved: is_readonly,
draft,
});
const totals = computed(() => computeExpenseTotals(items.value));
//------------------ actions ------------------
const onSave = () => {
try {
validateAll();
reset();
emit('save', buildExpenseSavePayload({
pay_period_no: pay_period_no,
pay_year: pay_year,
email: email,
expenses: payload(),
}));
} catch (err: any) {
const e = err instanceof ExpensesValidationError
? err
: new ExpensesValidationError({
status_code: 400,
message: String(err?.message || err)
});
emit('error', e);
}
};
const refreshFromServer = async () => {
const fresh = await getPayPeriodExpenses(email, pay_year, pay_period_no);
items.value = Array.isArray(fresh.expenses) ? fresh.expenses : [];
};
const onFormSubmit = async () => {
try {
await validateAnd(async () => {
if (is_readonly.value) throw new Error(t('common.read_only') || 'Read-only');
const day = draft.value;
if (!day?.date || !day?.type || !day?.comment) {
throw new ExpensesValidationError({ status_code: 400, message: 'Missing required fields' });
}
const is_mileage = String(day.type).toUpperCase() === 'MILEAGE';
const new_payload = {
date: day.date,
type: day.type as ExpenseType,
comment: day.comment,
...(is_mileage && typeof day.mileage === 'number'
? { mileage: day.mileage }
: !is_mileage && typeof day.amount === 'number'
? { amount: day.amount }
: {}),
};
if(editing_old.value) {
await updateExpenseByDate(email, editing_old.value, new_payload as any);
editing_old.value = null;
} else {
await createExpenseByDate(email, new_payload as any);
}
await refreshFromServer();
reset();
});
} catch (err: any) {
const e = err instanceof ExpensesValidationError ? err : new ExpensesValidationError({
status_code: 400,
message: String(err?.message || err)
});
emit('error', e);
}
};
const onRemove = async (index: number) => {
try {
if (is_readonly.value) throw new Error(t('common.read_only') || 'Read-only');
const item = items.value[index];
if (!item) return;
const is_mileage = String(item.type).toUpperCase() === 'MILEAGE';
const old_payload: any = {
date: item.date,
type: item.type as ExpenseType,
comment: item.comment ?? '',
...(is_mileage && typeof item.mileage === 'number'
? { mileage: item.mileage }
: !is_mileage && typeof item.amount === 'number'
? { amount: item.amount }
: {}),
};
await deleteExpenseByDate(email, old_payload as any);
await refreshFromServer();
} catch (err: any) {
const e = err instanceof ExpensesValidationError ? err : new ExpensesValidationError({
status_code: 400, message: String(err?.message || err)
});
emit('error', e);
}
};
const onEdit = async (index: number) => {
if(is_readonly) return;
const item = items.value[index];
if(!item) return;
const old_amount = Number(item.amount) || 0;
editing_old.value = {
date: item.date,
type: item.type as ExpenseType,
amount: old_amount,
comment: item.comment ?? '',
is_approved: !!item.is_approved,
};
const is_mileage = String(item.type).toUpperCase() === 'MILEAGE';
const next: Partial<TimesheetExpense> = {
date: item.date,
type: item.type,
comment: item.comment ?? '',
...(is_mileage
? (typeof item.mileage === 'number' ? { mileage: item.mileage } : {})
: (typeof item.amount === 'number' ? { amnount: item.amount } : {})),
};
(draft as any).value = next;
setType(item.type as ExpenseType);
};
const onClose = () => emit('close');
</script>
<template>
<div>
<!-- header (title with totals)-->
<q-item class="row justify-between">
<q-item-label
header
class="text-h6 col-auto"
>
{{ $t('timesheet.expense.title') }}
</q-item-label>
<q-item-section class="items-center col-auto">
<q-badge
lines="1"
class="q-pa-sm q-px-md"
:label="$t('timesheet.expense.total_amount') + ': ' + totals.amount.toFixed(2)"
/>
<q-separator spaced />
<q-badge
lines="2"
class="q-pa-sm q-px-md"
:label="$t('timesheet.expense.total_mileage') + ': ' + totals.mileage.toFixed(1)"
/>
</q-item-section>
</q-item>
<ExpenseList
:items="items"
:is_readonly="is_readonly"
@remove="onRemove"
@edit="onEdit"
/>
<ExpenseForm
ref="formRef"
v-model:draft="draft"
v-model:files="files"
v-model:date-picker-open="is_open_date_picker"
:type_options="type_options"
:show_amount="showAmount"
:is_readonly="is_readonly"
:rules="rules"
:comment_max_length="COMMENT_MAX_LENGTH"
:set-type="setType"
@submit="onFormSubmit"
/>
<q-separator spaced />
<div class="row col-auto justify-end">
<!-- close btn -->
<q-btn
flat
class="q-mr-sm"
color="primary"
:label="$t('timesheet.cancel_button')"
@click="onClose"
/>
<!-- save btn -->
<q-btn
color="primary"
unelevated
push
:disable="is_readonly || items.length === 0"
:label="$t('timesheet.save_button')"
@click="onSave"
/>
</div>
</div>
</template>

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

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

@ -9,7 +9,7 @@
<!-- 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('shiftColumns.labelIn') }}
{{ $t('shared.misc.in') }}
</q-item-label>
</q-card-section>
@ -20,7 +20,7 @@
<!-- 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('shiftColumns.labelOut') }}
{{ $t('shared.misc.out') }}
</q-item-label>
</q-card-section>

72
src/modules/timesheets/components/shift-list-legend.vue Normal file
View File

@ -0,0 +1,72 @@
<script
setup
lang="ts"
>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
const { t } = useI18n();
const is_showing_legend = ref(false);
const legend: ShiftLegendItem[] = [
{ type: 'REGULAR', color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8' },
{ type: 'EVENING', color: 'warning', label_type: 'timesheet.shift.types.EVENING' },
{ type: 'EMERGENCY', color: 'amber-10', label_type: 'timesheet.shift.types.EMERGENCY' },
{ type: 'OVERTIME', color: 'negative', label_type: 'timesheet.shift.types.OVERTIME' },
{ type: 'VACATION', color: 'purple-10', label_type: 'timesheet.shift.types.VACATION' },
{ type: 'HOLIDAY', color: 'purple-5', label_type: 'timesheet.shift.types.HOLIDAY' },
{ type: 'SICK', color: 'grey-8', label_type: 'timesheet.shift.types.SICK' },
]
const shift_type_legend = computed(() =>
legend.map(item => ({ ...item, label: t(item.label_type) }))
);
</script>
<template>
<div
class="items-center"
:class="$q.screen.lt.md ? 'column' : 'row'"
>
<q-btn
flat
dense
rounded
color="primary"
class="col-auto q-ma-sm"
@click="is_showing_legend = !is_showing_legend"
>
<template #default>
<q-icon
:name="is_showing_legend ? 'close' : 'info_outline'"
size="md"
class="col-auto"
/>
</template>
</q-btn>
<transition
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
class="col-auto"
>
<div
v-if="is_showing_legend"
class="q-pa-xs bg-white rounded-5 shadow-2 text-center q-ma-xs"
>
<q-badge
v-for="shift_type in shift_type_legend"
:key="shift_type.type"
:color="shift_type.color"
:label="shift_type.label"
:text-color="shift_type.text_color || 'white'"
class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
style="font-size: 0.8em;"
/>
</div>
</transition>
</div>
</template>

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

@ -3,8 +3,9 @@
import type { Shift } from 'src/modules/timesheets/models/shift.models';
const { shift } = defineProps<{
const { shift, dense = false } = defineProps<{
shift: Shift;
dense?: boolean;
}>();
const emit = defineEmits<{
@ -14,11 +15,12 @@
}>();
const has_comment = computed(() => {
const comment = (shift as any).description ?? (shift as any).comment ?? '';
const comment = shift.comment ?? '';
return typeof comment === 'string' && comment.trim().length > 0;
})
const comment_icon = computed(() => (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
const comment_color = computed(() => (has_comment.value ? 'primary' : 'grey-8'));
const hour_font_size = computed(() => dense ? '0.9em' : '1.5em' )
const get_shift_color = (type: string): string => {
switch (type) {
@ -27,7 +29,7 @@
case 'EMERGENCY': return 'amber-10';
case 'OVERTIME': return 'negative';
case 'VACATION': return 'purple-10';
case 'HOLIDAY': return 'purple-10';
case 'HOLIDAY': return 'purple-5';
case 'SICK': return 'grey-8';
default: return 'transparent';
}
@ -61,7 +63,7 @@
<q-item-label
class="text-weight-bolder q-pa-xs rounded-5"
:class="'bg-' + get_shift_color(shift.type) + ' text-' + get_text_color(shift.type)"
style="font-size: 1.5em; line-height: 80% !important;"
:style="'font-size: ' + hour_font_size + '; line-height: 80% !important;'"
>
{{ shift.start_time }}
</q-item-label>

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

@ -3,26 +3,23 @@
lang="ts"
>
import { date } from 'quasar';
import ShiftListHeader from 'src/modules/timesheets/components/shift/shift-list-header.vue';
import ShiftListRow from 'src/modules/timesheets/components/shift/shift-list-row.vue';
import ShiftListLegend from 'src/modules/timesheets/components/shift/shift-list-legend.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import ShiftListHeader from 'src/modules/timesheets/components/shift-list-header.vue';
import ShiftListRow from 'src/modules/timesheets/components/shift-list-row.vue';
import { useShiftStore } from 'src/stores/shift-store';
import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { type Shift, default_shift } from 'src/modules/timesheets/models/shift.models';
import type { PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
import { computed } from 'vue';
const props = defineProps<{
rawData: PayPeriodDetails;
currentPayPeriod: PayPeriod;
const timesheet_store = useTimesheetStore();
const { openCreate, openDelete, openUpdate } = useShiftStore();
const { dense = false } = defineProps<{
dense?: boolean;
}>();
const timesheet_api = useTimesheetApi();
const { openCreate, openDelete, openUpdate } = useShiftStore();
const font_size = computed(() => dense ? '1.5em' : '2.5em')
const get_date_from_short = (short_date: string): Date => {
return new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + short_date);
};
const to_iso_date = (short_date: string): string => {
@ -34,37 +31,35 @@
};
const getDate = (shift_date: string): Date => {
return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
return new Date(timesheet_store.pay_period.pay_year.toString() + '/' + shift_date);
};
</script>
<template>
<!-- shift's colored legend -->
<ShiftListLegend :is-loading="false" />
<div
v-for="week, index in props.rawData.weeks"
v-for="week, index in timesheet_store.pay_period_details.weeks"
:key="index"
class="q-px-xs q-pt-xs rounded-5 col"
class="col q-px-xs q-pt-xs q-mx-sm rounded-5"
>
<q-card
v-for="day, day_index in week.shifts"
:key="day_index"
flat
bordered
:key="day_index + index"
class="row items-center rounded-10 q-mb-xs"
>
<!-- Dates column -->
<q-card-section class="col-auto q-pa-xs text-white">
<div class="bg-primary rounded-10 q-pa-xs text-center">
<q-card-section class="col-auto q-pa-xs text-white q-mr-md">
<div
class="bg-primary rounded-10 q-pa-xs text-center"
:style="'width: ' + dense? '60px' : '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;"
:style="'font-size: ' + font_size + '; line-height: 90% !important;'"
>{{ day.short_date.split('/')[1] }}</q-item-label>
<q-item-label
style="font-size: 0.7em;"
@ -75,14 +70,18 @@
<!-- List of shifts column -->
<q-card-section class="col q-pa-none">
<ShiftListHeader />
<ShiftListRow
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
:key="shift_index"
:shift="shift"
@request-update="value => openUpdate(to_iso_date(day.short_date), value)"
@request-delete="value => openDelete(to_iso_date(day.short_date), value)"
/>
<ShiftListHeader v-if="day.shifts.length > 0"/>
<div
v-if="day.shifts.length > 0"
>
<ShiftListRow
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
:key="shift_index"
:shift="shift"
@request-update="value => openUpdate(to_iso_date(day.short_date), value)"
@request-delete="value => openDelete(to_iso_date(day.short_date), value)"
/>
</div>
</q-card-section>
<!-- add shift btn column -->
<q-card-section class="q-pr-xs col-auto">

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

@ -1,42 +0,0 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import type { ShiftLegendItem } from 'src/modules/timesheets/models/shift.models';
const { t } = useI18n();
const props = defineProps<{ isLoading: boolean; }>();
const legend: ShiftLegendItem[] = [
{type:'REGULAR' , color: 'secondary', label_type: 'timesheet.shift.types.REGULAR', text_color: 'grey-8'},
{type:'EVENING' , color: 'warning' , label_type: 'timesheet.shift.types.EVENING'},
{type:'EMERGENCY', color: 'amber-10' , label_type: 'timesheet.shift.types.EMERGENCY'},
{type:'OVERTIME' , color: 'negative' , label_type: 'timesheet.shift.types.OVERTIME'},
{type:'VACATION' , color: 'purple-10', label_type: 'timesheet.shift.types.VACATION'},
{type:'HOLIDAY' , color: 'purple-8' , label_type: 'timesheet.shift.types.HOLIDAY'},
{type:'SICK' , color: 'grey-8' , label_type: 'timesheet.shift.types.SICK'},
]
const shift_type_legend = computed(()=>
legend.map(item => ({ ...item, label: t(item.label_type)} ))
);
</script>
<template>
<q-card class="q-px-xs q-pt-xs col rounded-10 q-mx-xs q-py-xs">
<q-card-section
class="q-py-xs q-pa-none text-center q-my-s"
v-if="!props.isLoading"
>
<q-badge
v-for="shift_type in shift_type_legend"
:key="shift_type.type"
:color="shift_type.color"
:label="shift_type.label"
:text-color="shift_type.text_color || 'white'"
class="q-px-md q-py-xs q-mx-xs q-my-none text-uppercase text-weight-bolder justify-center"
style="width: 120px; font-size: 0.8em;"
/>
</q-card-section>
</q-card>
</template>

88
src/modules/timesheets/components/timesheet-wrapper.vue Normal file
View File

@ -0,0 +1,88 @@
<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>

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

@ -1,68 +0,0 @@
<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>

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

@ -1,6 +1,6 @@
import { normalizeObject } from "src/utils/normalize-object";
import { useExpensesStore } from "src/stores/expense-store";
import { expense_validation_schema, type ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
import { expense_validation_schema } from "src/modules/timesheets/models/expense.validation";
import type { Expense, UpsertExpense } from "src/modules/timesheets/models/expense.models";
export const useExpensesApi = () => {
@ -11,26 +11,26 @@ export const useExpensesApi = () => {
new_expense?: Expense;
}) => obj as UpsertExpense;
const createExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
const createExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
const upsert_expense = toUpsertExpense({
new_expense: normalizeObject(expenses_store.current_expense, expense_validation_schema),
});
await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
};
const updateExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
const updateExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
const upsert_expense = toUpsertExpense({
old_expense: normalizeObject(expenses_store.initial_expense, expense_validation_schema),
new_expense: normalizeObject(expenses_store.current_expense, expense_validation_schema),
});
await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
};
const deleteExpenseByEmployeeEmail = async (employee_email: string): Promise<void> => {
const deleteExpenseByEmployeeEmail = async (employee_email: string, date: string): Promise<void> => {
const upsert_expense = toUpsertExpense({
old_expense: normalizeObject(expenses_store.initial_expense, expense_validation_schema),
});
await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, upsert_expense);
await expenses_store.upsertOrDeleteExpensesByEmployeeEmail(employee_email, date, upsert_expense);
};
return {

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

@ -1,5 +1,5 @@
import { unwrapAndClone } from "src/utils/unwrap-and-clone";
import { DATE_FORMAT_PATTERN, TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
import { TIME_FORMAT_PATTERN } from "src/modules/timesheets/constants/shift.constants";
import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
import { useShiftStore } from "src/stores/shift-store";
import { default_shift, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";

8
src/modules/timesheets/composables/use-expense-draft.ts
View File

@ -1,11 +1,11 @@
import { ref, computed } from "vue";
import type { TimesheetExpense } from "../types/expense.interfaces";
import type { ExpenseType } from "../types/expense.types";
import type { Expense } from "src/modules/timesheets/models/expense.models";
import type { ExpenseType } from "src/modules/timesheets/models/expense.models";
export const useExpenseDraft = (initial?: Partial<TimesheetExpense>) => {
export const useExpenseDraft = (initial?: Partial<Expense>) => {
const DEFAULT_TYPE: ExpenseType = 'EXPENSES';
const draft = ref<Partial<TimesheetExpense>>({
const draft = ref<Partial<Expense>>({
date: '',
type: DEFAULT_TYPE,
comment: '',

99
src/modules/timesheets/composables/use-expense-items.ts
View File

@ -1,58 +1,59 @@
import { ref, type Ref } from "vue";
import { normalizeExpense, validateExpenseUI } from "../utils/expenses-validators";
import { normExpenseType } from "../utils/expense.util";
import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
import { useExpensesStore } from "src/stores/expense-store";
import { unwrapAndClone } from "src/utils/unwrap-and-clone";
// import { ref, type Ref } from "vue";
// import { normalizeObject } from "src/utils/normalize-object";
// import { normExpenseType } from "../utils/expense.util";
// import type { Expense, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
// import { useExpensesStore } from "src/stores/expense-store";
// import { unwrapAndClone } from "src/utils/unwrap-and-clone";
// import { expense_validation_schema } from "src/modules/timesheets/models/expense.validation";
const expenses_store = useExpensesStore();
// const expenses_store = useExpensesStore();
export const useExpenseItems = () => {
let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
// export const useExpenseItems = () => {
// let expenses = unwrapAndClone(expenses_store.pay_period_expenses.expenses.map(normalizeExpense));
const normalizePayload = (expense: Expense): Expense => {
const exp = normalizeExpense(expense);
const out: Expense = {
date: exp.date,
type: exp.type as ExpenseType,
comment: exp.comment || '',
};
if(typeof exp.amount === 'number') out.amount = exp.amount;
if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
return out;
}
// const normalizePayload = (expense: Expense): Expense => {
// const exp = normalizeObject(expense, expense_validation_schema);
// const out: Expense = {
// date: exp.date,
// type: exp.type as ExpenseType,
// comment: exp.comment || '',
// };
// if(typeof exp.amount === 'number') out.amount = exp.amount;
// if(typeof exp.mileage === 'number') out.mileage = exp.mileage;
// return out;
// }
const addFromDraft = () => {
const candidate: Expense = normalizeExpense({
date: draft.date,
type: normExpenseType(draft.type),
...(typeof draft.amount === 'number' ? { amount: draft.amount }: {}),
...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
comment: String(draft.comment ?? '').trim(),
} as Expense);
// const addFromDraft = () => {
// const candidate: Expense = normalizeExpense({
// date: draft.date,
// type: normExpenseType(draft.type),
// ...(typeof draft.amount === 'number' ? { amount: draft.amount }: {}),
// ...(typeof draft.mileage === 'number' ? { mileage: draft.mileage }: {}),
// comment: String(draft.comment ?? '').trim(),
// } as Expense);
validateExpenseUI(candidate, 'expense_draft');
expenses = [ ...expenses, candidate];
};
// validateExpenseUI(candidate, 'expense_draft');
// expenses = [ ...expenses, candidate];
// };
const removeAt = (index: number) => {
if(index < 0 || index >= expenses.length) return;
expenses = expenses.filter((_,i)=> i !== index);
};
// const removeAt = (index: number) => {
// if(index < 0 || index >= expenses.length) return;
// expenses = expenses.filter((_,i)=> i !== index);
// };
const validateAll = () => {
for (const expense of expenses) {
validateExpenseUI(expense, 'expense_item');
}
};
// const validateAll = () => {
// for (const expense of expenses) {
// validateExpenseUI(expense, 'expense_item');
// }
// };
const payload = () => expenses.map(normalizeExpense);
// const payload = () => expenses.map(normalizeExpense);
return {
expenses,
addFromDraft,
removeAt,
validateAll,
payload,
};
};
// return {
// expenses,
// addFromDraft,
// removeAt,
// validateAll,
// payload,
// };
// };

2
src/modules/timesheets/constants/expense.constants.ts
View File

@ -1,3 +1 @@
export const COMMENT_MAX_LENGTH = 280;
export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;

9
src/modules/timesheets/models/expense.models.ts
View File

@ -7,7 +7,7 @@ export const TYPES_WITH_AMOUNT_ONLY: Readonly<ExpenseType[]> = ['PER_DIEM', 'EXP
export interface Expense {
date: string;
type: ExpenseType;
amount?: number;
amount: number;
mileage?: number;
comment: string;
supervisor_comment?: string;
@ -26,10 +26,9 @@ export interface PayPeriodExpenses {
totals?: ExpenseTotals;
}
export interface TimesheetDetailsWeekDayExpenses {
cash: Expense[];
km: Expense[];
[otherType: string]: Expense[];
export interface UpsertExpense {
old_expense: Expense;
new_expense: Expense;
}
export const default_expense: Expense = {

14
src/modules/timesheets/models/expense.validation.ts
View File

@ -1,5 +1,5 @@
import { Expense, EXPENSE_TYPE, ExpenseType } from "src/modules/timesheets/models/expense.models";
import { Normalizer } from "src/utils/normalize-object";
import { type Expense, EXPENSE_TYPE, type ExpenseType } from "src/modules/timesheets/models/expense.models";
import type { Normalizer } from "src/utils/normalize-object";
export interface ApiErrorPayload {
status_code: number;
@ -43,12 +43,12 @@ export class ExpensesApiError extends ApiError {
};
export const expense_validation_schema: Normalizer<Expense> = {
date: v => String(v ?? "1970-01-01").trim(),
type: v => EXPENSE_TYPE.includes(v) ? v as ExpenseType : "EXPENSES",
amount: v => typeof v === "number" ? v : undefined,
date: v => typeof v === 'string' ? v.trim() : '1970-01-01',
type: v => EXPENSE_TYPE.includes(v as ExpenseType) ? v as ExpenseType : "EXPENSES",
amount: v => typeof v === "number" ? v : -1,
mileage: v => typeof v === "number" ? v : undefined,
comment: v => String(v ?? "").trim(),
supervisor_comment: v => String(v ?? "").trim(),
comment: v => typeof v === 'string' ? v.trim() : '',
supervisor_comment: v => typeof v === 'string' ? v.trim() : '',
is_approved: v => !!v,
};

13
src/modules/timesheets/models/pay-period-details.models.ts
View File

@ -1,5 +1,5 @@
import type { Shift } from "./shift.models";
import type { Expense } from "src/modules/timesheets/models/expense.models";
import { default_expense, type Expense } from "src/modules/timesheets/models/expense.models";
export type Week<T> = {
sun: T;
@ -34,9 +34,9 @@ export interface PayPeriodDetailsWeekDayShifts {
}
export interface PayPeriodDetailsWeekDayExpenses {
cash: Expense[];
km: Expense[];
[otherType: string]: Expense[];
expenses: Expense[];
total_expenses: number;
total_mileage: number;
}
const makeWeek = <T>(factory: ()=> T): Week<T> => ({
@ -61,8 +61,9 @@ const emptyDailySchedule = (): PayPeriodDetailsWeekDayShifts => ({
});
const emptyDailyExpenses = (): PayPeriodDetailsWeekDayExpenses => ({
cash: [],
km: [],
expenses: [default_expense,],
total_expenses: -1,
total_mileage: -1,
});
export const defaultPayPeriodDetailsWeek = (): PayPeriodDetailsWeek => ({

48
src/modules/timesheets/pages/timesheet-page.vue
View File

@ -1,48 +0,0 @@
<script
setup
lang="ts"
>
import { date } from 'quasar';
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useTimesheetApi } from '../composables/api/use-timesheet-api';
import { formatPayPeriodLabel } from '../utils/timesheet-format.util';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
//------------------- stores -------------------
const { locale } = useI18n();
const auth_store = useAuthStore();
const timesheet_api = useTimesheetApi();
//------------------- pay-period format label -------------------
const date_options: Intl.DateTimeFormatOptions = { day: 'numeric', month: 'long', year: 'numeric' };
const pay_period_label = computed(() => formatPayPeriodLabel(
pay_period.label,
locale.value,
date.extractDate,
date_options
)
);
onMounted(async () => {
await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding
class="q-pa-md bg-secondary"
>
<PageHeaderTemplate
:title="$t('timesheet.title')"
:start-date="pay_period_label.start_date"
:end-date="pay_period_label.end_date"
/>
</q-page>
</template>

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

@ -3,7 +3,7 @@ import type { UpsertShift } from "src/modules/timesheets/models/shift.models";
import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
import type { PayPeriodDetails } from "src/modules/timesheets/models/pay-period-details.models";
import type { PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
import type { PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
import type { Expense, PayPeriodExpenses, UpsertExpense } from "src/modules/timesheets/models/expense.models";
export const timesheetService = {
getPayPeriodDetailsByEmployeeEmail: async (email: string): Promise<PayPeriodDetails> => {
@ -31,8 +31,20 @@ export const timesheetService = {
return response.data;
},
upsertOrDeletePayPeriodDetailsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[] | PayPeriodExpenses, pay_period: PayPeriod, date?: string): Promise<PayPeriodDetails> => {
if (date) return (await api.put(`/shifts/upsert/${email}/${date}`, payload)).data;
else return (await api.put(`/expenses/${email}/${pay_period.pay_year}/${pay_period.pay_period_no}`, payload, { headers: {'Content-Type': 'application/json'}})).data;
getExpensesByPayPeriodAndEmployeeEmail: async (email: string, year: string, period_number: string): Promise<PayPeriodExpenses> => {
const response = await api.get(`/expenses/${email}/${year}/${period_number}`);
return response.data;
},
upsertOrDeleteShiftsByDateAndEmployeeEmail: async (email: string, payload: UpsertShift[], date: string): Promise<PayPeriodDetails> => {
const response = await api.put(`/shifts/upsert/${email}/${date}`, payload);
return response.data;
},
upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail: async (email: string, date: string, payload: UpsertExpense): Promise<Expense[]> => {
const headers = { 'Content-Type': 'application/json' }
const response = await api.put(`/expenses/upsert/${email}/${date}`, payload, { headers });
return response.data;
}
};

11
src/modules/timesheets/utils/expense.util.ts
View File

@ -1,8 +1,8 @@
import type { Expense, ExpenseTotals, ExpenseType, PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
import type { Expense, ExpenseTotals } from "src/modules/timesheets/models/expense.models";
//------------------ normalization / icons ------------------
export const normExpenseType = (type: unknown): string =>
String(type ?? '').trim().toUpperCase();
typeof type === 'string' ? type.trim().toUpperCase() : '';
const icon_map: Record<string,string> = {
MILEAGE: 'time_to_leave',
@ -31,7 +31,7 @@ export const computeExpenseTotals = (items: readonly Expense[]): ExpenseTotals =
);
//------------------ Quasar :rules=[] ------------------
export const makeExpenseRules = (t: (key: string) => string, max_comment_char: number) => {
export const makeExpenseRules = (t: (_key: string) => string) => {
const isPresent = (val: unknown) => val !== undefined && val !== null && val !== '';
const typeRequired = (val: unknown) => (!!val) || t('timesheet.expense.errors.type_required');
@ -40,15 +40,12 @@ export const makeExpenseRules = (t: (key: string) => string, max_comment_char: n
const mileageRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.mileage_required_for_type');
const commentRequired = (val: unknown) => (String(val ?? '').trim().length > 0) || t('timesheet.expense.errors.comment_required');
const commentTooLong = (val: unknown) => (String(val ?? '').trim().length <= max_comment_char) || t('timesheet.expense.errors.comment_too_long');
const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false ) || t('timesheet.expense.errors.comment_required');
return {
typeRequired,
amountRequired,
mileageRequired,
commentRequired,
commentTooLong,
};
};

2
src/modules/timesheets/utils/timesheet-format.util.ts
View File

@ -1,4 +1,4 @@
import type { PayPeriodLabel } from "../types/ui.types";
import type { PayPeriodLabel } from "src/modules/timesheets/models/ui.models";
export const formatPayPeriodLabel = (
raw_label: string | undefined,

0
src/modules/profile/pages/profile-container.vue → src/pages/profile-page.vue
View File

0
src/modules/employee-list/pages/supervisor-crew-page.vue → src/pages/supervisor-crew-page.vue
View File

46
src/pages/timesheet-approval-page.vue Normal file
View File

@ -0,0 +1,46 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { date } from 'quasar';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
import DetailscrudDialog from 'src/modules/timesheet-approval/components/details-crud-dialog.vue';
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.getPayPeriodOverviewsByDate(date.formatDate( new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding
class="q-pa-md bg-secondary "
>
<PageHeaderTemplate
title="timesheet_approvals.page_title"
:start-date="timesheet_store.pay_period.period_start"
:end-date="timesheet_store.pay_period.period_end"
/>
<DetailscrudDialog
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"
:timesheet-details="timesheet_store.pay_period_details"
/>
<OverviewList @clickedDetailsButton="onDetailsClicked"/>
</q-page>
</template>

37
src/pages/timesheet-page.vue Normal file
View File

@ -0,0 +1,37 @@
<script
setup
lang="ts"
>
import { date } from 'quasar';
import { onMounted } from 'vue';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetApi } from 'src/modules/timesheets/composables/api/use-timesheet-api';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import PageHeaderTemplate from 'src/modules/shared/components/page-header-template.vue';
import TimesheetWrapper from 'src/modules/timesheets/components/timesheet-wrapper.vue';
const { user } = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
onMounted(async () => {
await timesheet_api.getPayPeriodDetailsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<q-page
padding
class="q-pa-md bg-secondary"
>
<PageHeaderTemplate
:title="$t('timesheet.page_header')"
:start-date="timesheet_store.pay_period.period_start"
:end-date="timesheet_store.pay_period.period_end"
/>
<TimesheetWrapper :employee-email="user.email" />
</q-page>
</template>

8
src/router/routes.ts
View File

@ -15,22 +15,22 @@ const routes: RouteRecordRaw[] = [
{
path: 'timesheet-approvals',
name: RouteNames.TIMESHEET_APPROVALS,
component: () => import('src/modules/timesheet-approval/pages/timesheet-approval.vue'),
component: () => import('src/pages/timesheet-approval-page.vue'),
},
{
path: 'employees',
name: RouteNames.EMPLOYEE_LIST,
component: () => import('src/modules/employee-list/pages/supervisor-crew-page.vue'),
component: () => import('src/pages/supervisor-crew-page.vue'),
},
{
path: 'timesheet-temp',
name: RouteNames.TIMESHEET_TEMP,
component: () => import('src/modules/timesheets/pages/timesheet-details-overview.vue')
component: () => import('src/pages/timesheet-page.vue')
},
{
path: 'user/profile',
name: RouteNames.PROFILE,
component: () => import('src/modules/profile/pages/profile-container.vue'),
component: () => import('src/pages/profile-page.vue'),
},
],
},

6
src/stores/auth-store.ts
View File

@ -1,20 +1,20 @@
import { computed, ref } from "vue";
import { defineStore } from "pinia";
import { AuthService } from "../modules/auth/services/services-auth";
import type { User } from "src/modules/shared/types/user-interface";
import type { User } from "src/modules/shared/models/user.models";
export type CompanyRole = 'guest' | 'supervisor' | 'accounting' | 'human_resources' | 'employee';
const TestUsers: Record<CompanyRole, User> = {
guest: { firstName: 'Unknown', lastName: 'Unknown', email: 'guest@guest.com', role: 'guest' },
supervisor: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
supervisor: { firstName: 'User', lastName: 'Test', email: 'user@targointernet.com', role: 'supervisor' },
accounting: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
human_resources: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
employee: { firstName: 'Robin', lastName: 'Clark', email: 'user5@example.test', role: 'supervisor' },
}
export const useAuthStore = defineStore('auth', () => {
const user = ref(TestUsers.guest);
const user = ref<User>(TestUsers.guest);
const authError = ref("");
const isAuthorizedUser = computed(() => user.value.role !== 'guest');

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

@ -1,86 +1,103 @@
import { ref } from "vue";
import { computed, ref } from "vue";
import { defineStore } from "pinia";
import { useTimesheetStore } from "src/stores/timesheet-store";
import { default_expense, default_pay_period_expenses, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
import { unwrapAndClone } from "src/utils/unwrap-and-clone";
import { default_expense, default_pay_period_expenses, type UpsertExpense, type Expense, type PayPeriodExpenses } from "src/modules/timesheets/models/expense.models";
import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
import { ExpensesApiError } from "src/modules/timesheets/models/expense.validation";
import { ExpensesApiError, type GenericApiError } from "src/modules/timesheets/models/expense.validation";
import { computeExpenseTotals } from "src/modules/timesheets/utils/expense.util";
import type { UpsertAction } from "src/modules/timesheets/models/shift.models";
const { pay_period } = useTimesheetStore();
const encodeData = ( email: string, year: number, period_number: number ) => {
return { email: encodeURIComponent(email), year: encodeURIComponent(year), period_number: encodeURIComponent(period_number)};
}
export const useExpensesStore = defineStore('expenses', () => {
const timesheet_store = useTimesheetStore();
const is_open = ref(false);
const is_loading = ref(false);
const mode = ref<UpsertAction>('create');
const pay_period_expenses = ref<PayPeriodExpenses>(default_pay_period_expenses);
const pay_period_expenses_totals = computed(() => computeExpenseTotals(pay_period_expenses.value.expenses))
const current_expense = ref<Expense>(default_expense);
const initial_expense = ref<Expense>(default_expense);
const error = ref<string | null>(null);
const setErrorFrom = (err: unknown) => {
const e = err as any;
error.value = e?.message || 'Unknown error';
};
// const setErrorFrom = (err: unknown) => {
// const e = err as any;
// error.value = e?.message || 'Unknown error';
// };
const open = async (employee_email: string): Promise<void> => {
is_open.value = true;
is_loading.value = true;
error.value = null;
current_expense.value = default_expense;
initial_expense.value = default_expense;
await getPayPeriodExpensesByEmployeeEmail(employee_email);
is_loading.value = false;
}
const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<void> => {
const encoded_data = encodeData(employee_email, pay_period.pay_year, pay_period.pay_period_no);
try {
const expenses = await timesheetService.getExpensesByPayPeriodAndEmployeeEmail(encoded_data.email, encoded_data.year, encoded_data.period_number);
pay_period_expenses.value = expenses;
} catch(err:any) {
const status_code: number = err?.response?.status ?? 500;
const data = err?.response?.data ?? {};
error.value = data.message || data.error || err.message;
throw new ExpensesApiError({
status_code,
error_code: data.error_code,
message: data.message || data.error || err.message,
context: data.context,
});
}
};
const upsertOrDeleteExpensesByEmployeeEmail = async (employee_email: string, expenses: Expense[]): Promise<void> => {
is_loading.value = true;
error.value = null;
try {
const encoded_data = encodeData(employee_email, pay_period.pay_year, pay_period.pay_period_no);
const payload = { is_approved: false, expenses };
const updated_expenses = await timesheetService.upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail(encoded_data.email, encoded_data.year, encoded_data.period_number, payload);
pay_period_expenses.value.expenses = updated_expenses;
is_open.value = false;
} catch (err) {
setErrorFrom(err);
} finally {
is_loading.value = false;
}
};
const close = () => {
error.value = null;
is_open.value = false;
};
const getPayPeriodExpensesByEmployeeEmail = async (employee_email: string): Promise<void> => {
is_loading.value = true;
error.value = null;
try {
const expenses = await timesheetService.getExpensesByPayPeriodAndEmployeeEmail(
encodeURIComponent(employee_email),
encodeURIComponent(timesheet_store.pay_period.pay_year),
encodeURIComponent(timesheet_store.pay_period.pay_period_no),
);
pay_period_expenses.value = expenses;
} catch (err: unknown) {
if (typeof err === 'object') {
const error = err as GenericApiError;
const status_code: number = error.status_code ?? 500;
// const data = error.context ?? '';
// error.value = data.message || data.error || err.message;
throw new ExpensesApiError({
status_code,
// error_code: data.error_code,
// message: data.message || data.error || err.message,
// context: data.context,
});
}
} finally {
is_loading.value = false;
}
};
const upsertOrDeleteExpensesByEmployeeEmail = async (employee_email: string, date: string, expense: UpsertExpense): Promise<void> => {
is_loading.value = true;
error.value = null;
try {
const updated_expenses = await timesheetService.upsertOrDeleteExpensesByPayPeriodAndEmployeeEmail(
encodeURIComponent(employee_email),
encodeURIComponent(date),
expense,
);
console.log('updated expenses received: ', updated_expenses)
pay_period_expenses.value.expenses = updated_expenses;
} catch (err) {
// setErrorFrom(err);
console.log('error doing some expense thing: ', err)
} finally {
is_loading.value = false;
}
};
return {
is_open,
is_loading,
mode,
pay_period_expenses,
pay_period_expenses_totals,
current_expense,
initial_expense,
error,

26
src/stores/shift-store.ts
View File

@ -3,8 +3,7 @@ import { defineStore } from "pinia";
import { unwrapAndClone } from "src/utils/unwrap-and-clone";
import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
import { useTimesheetStore } from "src/stores/timesheet-store";
import { default_shift, type UpsertAction, type Shift, UpsertShift } from "src/modules/timesheets/models/shift.models";
import { GenericApiError } from "src/modules/timesheets/models/expense.validation";
import { default_shift, type UpsertAction, type Shift, type UpsertShift } from "src/modules/timesheets/models/shift.models";
export const useShiftStore = defineStore('shift', () => {
const is_open = ref(false);
@ -31,7 +30,7 @@ export const useShiftStore = defineStore('shift', () => {
open('update', date, shift, unwrapAndClone(shift));
};
const openDelete = (date: string, shift: any) => {
const openDelete = (date: string, shift: Shift) => {
open('delete', date, default_shift, shift);
}
@ -48,17 +47,18 @@ export const useShiftStore = defineStore('shift', () => {
const encoded_date = encodeURIComponent(current_shift.value.date);
try {
const result = await timesheetService.upsertOrDeletePayPeriodShifts(encoded_email, encoded_date, [ upsert_shift, ]);
const result = await timesheetService.upsertOrDeleteShiftsByDateAndEmployeeEmail(encoded_email, [ upsert_shift, ], encoded_date);
timesheet_store.pay_period_details = result;
} catch (err: any) {
const status_code: number = err?.response?.status ?? 500;
const data = err?.response?.data ?? {};
throw new GenericApiError({
status_code,
error_code: data.error_code,
message: data.message || data.error || err.message,
context: data.context,
});
} catch (err) {
console.log('error doing thing: ', err)
// const status_code: number = err?.response?.status ?? 500;
// const data = err?.response?.data ?? {};
// throw new GenericApiError({
// status_code,
// error_code: data.error_code,
// message: data.message || data.error || err.message,
// context: data.context,
// });
} finally {
close();
}

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

@ -4,93 +4,91 @@ import { withLoading } from 'src/utils/store-helpers';
import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
import { default_pay_period_overview, type PayPeriodOverview } from "src/modules/timesheet-approval/models/pay-period-overview.models";
import { default_pay_period, type PayPeriod } from 'src/modules/shared/types/pay-period-interface';
import { default_pay_period, type PayPeriod } from 'src/modules/shared/models/pay-period.models';
import { default_pay_period_details, type PayPeriodDetails } from 'src/modules/timesheets/models/pay-period-details.models';
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
export const useTimesheetStore = defineStore('timesheet', () => {
const is_loading = ref<boolean>(false);
const pay_period = ref<PayPeriod>(default_pay_period);
const pay_period_overviews = ref<PayPeriodOverview[]>([ default_pay_period_overview, ]);
const pay_period_overviews = ref<PayPeriodOverview[]>([default_pay_period_overview,]);
const current_pay_period_overview = ref<PayPeriodOverview>(default_pay_period_overview);
const pay_period_details = ref<PayPeriodDetails>(default_pay_period_details);
const pay_period_report = ref();
const is_calendar_limit = computed( ()=>
const is_calendar_limit = computed(() =>
pay_period.value.pay_year === 2024 &&
pay_period.value.pay_period_no <= 1
);
const getPayPeriodByDateOrYearAndNumber = (date_or_year: string | number, period_number?: number): Promise<boolean> => {
return withLoading( is_loading, async () => {
try {
let response;
const getPayPeriodByDateOrYearAndNumber = async (date_or_year: string | number, period_number?: number): Promise<boolean> => {
is_loading.value = true;
if (typeof date_or_year === 'string') {
response = await timesheetService.getPayPeriodByDate(date_or_year);
return true;
}
else if ( typeof date_or_year === 'number' && period_number ) {
response = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
return true;
}
else response = default_pay_period;
pay_period.value = response;
return false;
} catch(error){
console.error('Could not get current pay period: ', error );
pay_period.value = default_pay_period;
pay_period_overviews.value = [ default_pay_period_overview, ];
//TODO: More in-depth error-handling here
try {
if (typeof date_or_year === 'string') {
pay_period.value = await timesheetService.getPayPeriodByDate(date_or_year);
}
else if (typeof date_or_year === 'number' && period_number) {
pay_period.value = await timesheetService.getPayPeriodByYearAndPeriodNumber(date_or_year, period_number);
}
else pay_period.value = default_pay_period;
is_loading.value = false;
return true;
} catch (error) {
console.error('Could not get current pay period: ', error);
pay_period.value = default_pay_period;
pay_period_overviews.value = [default_pay_period_overview,];
//TODO: More in-depth error-handling here
is_loading.value = false;
return false;
});
};
const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
return withLoading( is_loading, async () => {
try {
const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
pay_period.value.pay_year,
pay_period.value.pay_period_no,
employee_email
);
pay_period_details.value = response;
return true;
} catch (error) {
console.error('There was an error retrieving timesheet details for this employee: ', error);
// TODO: More in-depth error-handling here
}
pay_period_details.value = default_pay_period_details;
return false;
});
}
};
const getPayPeriodOverviewsBySupervisorEmail = async (pay_year: number, period_number: number, supervisor_email: string): Promise<boolean> => {
return withLoading( is_loading, async () => {
try {
const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail( pay_year, period_number, supervisor_email );
pay_period_overviews.value = response;
return true;
} catch (error) {
console.error('There was an error retrieving Employee Pay Period overviews: ', error);
pay_period_overviews.value = [ default_pay_period_overview, ];
// TODO: More in-depth error-handling here
}
is_loading.value = true;
try {
const response = await timesheetApprovalService.getPayPeriodOverviewsBySupervisorEmail(pay_year, period_number, supervisor_email);
pay_period_overviews.value = response.employees_overview;
is_loading.value = false;
return true;
} catch (error) {
console.error('There was an error retrieving Employee Pay Period overviews: ', error);
pay_period_overviews.value = [default_pay_period_overview,];
// TODO: More in-depth error-handling here
is_loading.value = false;
return false;
});
}
};
const getPayPeriodDetailsByEmployeeEmail = async (employee_email: string) => {
is_loading.value = true;
try {
const response = await timesheetService.getPayPeriodDetailsByPayPeriodAndEmployeeEmail(
pay_period.value.pay_year,
pay_period.value.pay_period_no,
employee_email
);
pay_period_details.value = response;
console.log('pay period details: ', response, pay_period_details.value.employee_full_name)
is_loading.value = false;
} catch (error) {
console.error('There was an error retrieving timesheet details for this employee: ', error);
// TODO: More in-depth error-handling here
pay_period_details.value = default_pay_period_details;
is_loading.value = false;
}
};
const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
return withLoading( is_loading, async () => {
return withLoading(is_loading.value, async () => {
try {
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
year,
period_number,
year,
period_number,
report_filters
);
pay_period_report.value = response;
@ -105,10 +103,10 @@ export const useTimesheetStore = defineStore('timesheet', () => {
});
};
return {
return {
is_loading,
is_calendar_limit,
pay_period,
pay_period,
pay_period_overviews,
current_pay_period_overview,
pay_period_details,

4
src/utils/normalize-object.ts
View File

@ -1,8 +1,8 @@
export type Normalizer<T> = {
[K in keyof T]: (val: unknown) => T[K];
[K in keyof T]: (_val: unknown) => T[K];
};
export const normalizeObject = <T>(raw: any, schema: Normalizer<T>): T => {
export const normalizeObject = <T>(raw: Partial<Record<keyof T, unknown>>, schema: Normalizer<T>): T => {
const result = {} as T;
for (const key in schema) {
result[key] = schema[key](raw[key]);

1
src/utils/store-helpers.ts
View File

@ -1,5 +1,6 @@
export const withLoading = async <T>( loading_state: boolean, fn: () => Promise<T> ) => {
loading_state = true;
try {
return await fn();
} finally {

2
src/utils/to-qselect-options.ts
View File

@ -1,6 +1,6 @@
export const toQSelectOptions = <T>(values: readonly T[], i18n_domain?: string): { label: string; value: T }[] => {
return values.map(value => ({
label: ((i18n_domain ?? "") + value).toString(),
value: value as T
value: value
}));
};

4
src/utils/unwrap-and-clone.ts
View File

@ -7,8 +7,8 @@ export const unwrapAndClone = <T extends object>(obj: T): T => {
const raw = isProxy(obj) ? toRaw(obj) : obj;
// Use structuredClone if available (handles Dates, Maps, Sets, circulars)
if (typeof (globalThis as any).structuredClone === "function") {
return (globalThis as any).structuredClone(raw);
if (typeof globalThis.structuredClone === "function") {
return globalThis.structuredClone(raw);
}
// Fallback for older environments (loses Dates, Sets, Maps)