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

Merge branch 'main' of git.targo.ca:Targo/targo_frontend into dev/matthieu/help-page

Browse Source
This commit is contained in:
Matthieu Haineault 2025-12-18 11:01:07 -05:00
commit f059682dd9
47 changed files with 1326 additions and 1179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/css/app.scss
View File

@ -53,3 +53,15 @@ body.body--dark {
.q-btn--push:active::before {
border-bottom-width: 1px;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}

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

@ -159,7 +159,7 @@ export default {
tab_title: "preferences",
display_options: "Color mode",
language_options: "language options",
'fr-FR': "French",
'fr-FR': "Français",
'en-CA': "English",
dark_mode: "dark",
light_mode: "light",
@ -194,6 +194,7 @@ export default {
update: "update",
modify: "modify",
close: "close",
download: "download",
},
misc: {
or: "or",
@ -228,16 +229,14 @@ export default {
timesheet: {
page_header: "Timesheet",
apply_preset_day: "Apply schedule to day",
apply_preset_week: "Apply schedule to week",
nav_button: {
calendar_date_picker: "Calendar",
current_week: "This week",
next_week: "Next period",
previous_week: "Previous period",
},
save_button: "Save",
cancel_button: "Cancel",
remote_button: "Remote work",
delete_button: "Delete",
shift: {
actions: {
add: "Add Shift",
@ -254,7 +253,8 @@ export default {
REGULAR: "Regular",
SICK: "Sick Leave",
VACATION: "Vacation",
REMOTE: "Remote work",
REMOTE: "Remote",
OFFICE: "Office",
},
fields: {
start: "Start (HH:mm)",
@ -291,8 +291,9 @@ export default {
errors: {
INVALID_SHIFT_TIME: "In and Out shift times are reversed",
SHIFT_OVERLAP: "An overlaps occured between 2 or more shifts",
SHIFT_OVERLAP_SHORT: "Overlap",
INVALID_SHIFT: "A shift contains missing or corrupted data",
SHIFT_TIME_REQUIRED: "Valid time required",
SHIFT_TIME_REQUIRED: "Time required",
SHIFT_TYPE_REQUIRED: "Shift type required",
SHIFT_NOT_FOUND: "Shift missing or deleted",
PAY_PERIOD_NOT_FOUND: "No pay period matching given dates",
@ -320,10 +321,12 @@ export default {
expenses_title: "expenses accrued",
},
print_report: {
company: "company",
title: "Download options",
company: "companies",
type: "type",
shifts: "shifts",
expenses: "expenses",
options: "options",
},
tooltip: {
button_detailed_view: "detailed view",

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

@ -160,7 +160,7 @@ export default {
display_options: "Mode d'affichage",
language_options: "Options de langue",
'fr-FR': "Français",
'en-CA': "Anglais",
'en-CA': "English",
dark_mode: "sombre",
light_mode: "clair",
auto_mode: "automatique",
@ -195,6 +195,7 @@ export default {
update: "mettre à jour",
modify: "modifier",
close: "fermer",
download: "téléchargement",
},
misc: {
or: "ou",
@ -229,16 +230,14 @@ export default {
timesheet: {
page_header: "Carte de temps",
apply_preset_day: "Appliquer horaire pour la journée",
apply_preset_week: "Appliquer horaire pour la semaine",
nav_button: {
calendar_date_picker: "Calendrier",
current_week: "Semaine actuelle",
next_week: "Prochaine période",
previous_week: "Période précédente",
},
save_button: "Enregistrer",
cancel_button: "Annuler",
remote_button: "Télétravail",
delete_button: "Supprimer",
shift: {
actions: {
add: "Ajouter un Quart",
@ -256,6 +255,7 @@ export default {
SICK: "Maladie",
VACATION: "Vacance",
REMOTE: "Télétravail",
OFFICE: "Bureau",
},
fields: {
start: "Début (HH:mm)",
@ -292,6 +292,7 @@ export default {
errors: {
INVALID_SHIFT_TIME: "Les heures d'entrée et de sortie sont inversées",
SHIFT_OVERLAP: "Il y a un chevauchement entre deux ou plusieurs quarts",
SHIFT_OVERLAP_SHORT: "Chevauchement",
INVALID_SHIFT: "Un quart de travail contient des données manquantes ou corrompues",
SHIFT_TIME_REQUIRED: "Heure requise",
SHIFT_TYPE_REQUIRED: "Type requis",
@ -321,10 +322,12 @@ export default {
expenses_title: "dépenses encourues"
},
print_report: {
company: "compagnie",
title: "options de téléchargement",
company: "compagnies",
type: "types de données",
shifts: "quarts de travail",
expenses: "dépenses",
options: "options",
},
tooltip: {
button_detailed_view: "vue détaillée",

2
src/layouts/components/main-layout-left-drawer.vue
View File

@ -24,7 +24,7 @@
auth_store.logout();
router.push({ name: 'login' }).catch(err => {
console.log('could not log you out: ', err);
console.error('could not log you out: ', err);
})
}
</script>

18
src/modules/employee-list/components/add-modify-dialog-schedule.vue
View File

@ -28,7 +28,6 @@
const onClickSchedulePresetManager = (mode: PresetManagerMode, preset_id?: number) => {
schedule_preset_store.schedule_preset_dialog_mode = mode;
console.log('preset id: ', preset_id);
schedule_preset_store.openSchedulePresetManager(preset_id ?? current_preset.value.value);
}
@ -83,27 +82,28 @@
</q-select>
<q-btn
push
dense
rounded
icon="add"
color="accent"
class="col-auto q-px-sm q-ml-sm"
class="col-auto q-px-sm q-ml-sm rounded-50"
@click="onClickSchedulePresetManager('create', -1)"
/>
<HorizontalSlideTransition :show="current_preset !== undefined && current_preset?.value !== -1">
<div class="col-auto row no-wrap full-height">
<q-btn
push
dense
rounded
icon="edit"
color="accent"
class="col-auto q-px-sm q-mx-sm full-height"
class="col-auto q-px-sm q-ml-sm rounded-50"
@click="onClickSchedulePresetManager('update')"
/>
<q-btn
icon="content_copy"
color="accent"
class="col-auto q-px-sm q-mx-sm rounded-50"
@click="onClickSchedulePresetManager('copy')"
/>
<q-btn
flat
dense

3
src/modules/employee-list/components/add-modify-dialog.vue
View File

@ -19,6 +19,7 @@
<q-dialog
v-model="employee_store.is_add_modify_dialog_open"
full-width
full-height
@beforeShow="current_step = 'form'"
@show="Object.assign(initial_employee_profile, employee_store.employee)"
class="shadow-24"
@ -26,7 +27,7 @@
<div
class="column bg-secondary rounded-10 no-wrap"
:class="$q.dark.isActive ? 'shadow-24' : 'shadow-10'"
:style="($q.screen.lt.md ? ' ' : 'max-width: 60vw !important; height: 60vh') +
:style="($q.screen.lt.md ? ' ' : 'max-width: 60vw !important; max-height: 80vh !important;') +
($q.dark.isActive ? 'border: 2px solid var(--q-accent)' : '')"
>
<div class="row col-auto text-white bg-primary flex-center shadow-5">

7
src/modules/employee-list/components/employee-list-table.vue
View File

@ -10,7 +10,6 @@
import { useEmployeeStore } from 'src/stores/employee-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { employee_list_columns, type EmployeeProfile, type EmployeeListFilters } from 'src/modules/employee-list/models/employee-profile.models';
import { animateFlip } from 'src/utils/table-grid-FLIP';
const employee_store = useEmployeeStore();
const timesheet_store = useTimesheetStore();
@ -50,8 +49,6 @@
});
}
animateFlip(table_grid_container);
return result;
};
@ -114,6 +111,7 @@
{ icon: 'view_list', value: false },
]"
/>
<q-input
v-model="filters.search_bar_string"
outlined
@ -133,6 +131,7 @@
</template>
</q-input>
</div>
<div class="row">
<q-space />
<q-checkbox
@ -191,7 +190,7 @@
:key="scope.rowIndex + (timesheet_store.pay_period?.pay_period_no ?? 0)"
class="rounded-5 cursor-pointer"
style="font-size: 1.2em;"
:style="`animation-delay: ${scope.pageIndex + scope.rowIndex * 5}ms; ` + (scope.row.last_work_day === null ? '' : 'opacity: 0.5;')"
:style="scope.row.last_work_day === null ? '' : 'opacity: 0.5;'"
>
<div v-if="scope.col.name === 'first_name'">
<span

18
src/modules/employee-list/components/schedule-presets-dialog-row.vue
View File

@ -21,8 +21,13 @@
const shift = defineModel<SchedulePresetShift>('shift', { required: true });
const shift_type_selected = ref(SHIFT_OPTIONS[0]);
defineProps<{
error: boolean;
}>();
defineEmits<{
'click-delete': [void];
'clickDelete': [void];
'blurTimeField': [void];
}>();
</script>
@ -72,6 +77,8 @@
hide-bottom-space
type="time"
class="text-uppercase weekday-field"
:error="error"
@blur="$emit('blurTimeField')"
>
<template #prepend>
<div
@ -92,6 +99,8 @@
hide-bottom-space
type="time"
class="text-uppercase weekday-field"
:error="error"
@blur="$emit('blurTimeField')"
>
<template #prepend>
<div
@ -112,7 +121,7 @@
icon="clear"
size="sm"
tabindex="-1"
@click="$emit('click-delete')"
@click="$emit('clickDelete')"
/>
</div>
</div>
@ -128,6 +137,11 @@
min-height: 25px;
}
.weekday-field :deep(.q-field__marginal) {
height: 25px;
min-height: 25px;
}
:deep(.q-field--auto-height.q-field--dense .q-field__native) {
min-height: 25px;
}

12
src/modules/employee-list/components/schedule-presets-dialog.vue
View File

@ -8,6 +8,7 @@
import { useEmployeeListApi } from '../composables/use-employee-api';
import { SchedulePresetShift } from '../models/schedule-presets.models';
import { useSchedulePresetsStore } from 'src/stores/schedule-presets.store';
import { isShiftOverlap } from 'src/modules/timesheets/utils/shift.util';
const schedule_preset_store = useSchedulePresetsStore();
const employee_list_api = useEmployeeListApi();
@ -25,7 +26,7 @@
<div
v-else
class="column flex-center bg-secondary rounded-10 shadow-24"
class="column flex-center bg-secondary rounded-10 shadow-24 no-wrap"
style="border: 2px solid var(--q-accent); width: 50vw !important;"
>
<div
@ -61,7 +62,10 @@
</div>
</div>
<div class="column col full-width q-py-sm q-px-lg">
<div
v-if="schedule_preset_store.schedule_preset_dialog_mode !== 'copy'"
class="column col full-width q-py-sm q-px-lg no-wrap scroll"
>
<div
v-for="weekday of schedule_preset_store.current_schedule_preset.weekdays"
:key="weekday.day"
@ -79,7 +83,9 @@
>
<SchedulePresetsDialogRow
v-model:shift="weekday.shifts[index]!"
:error="weekday.is_error"
@click-delete="weekday.shifts.splice(index, 1)"
@blur-time-field="weekday.is_error = isShiftOverlap(weekday.shifts)"
/>
</div>
</div>
@ -97,7 +103,7 @@
</div>
</div>
<div class="col-auto row self-end q-px-lg full-width">
<div class="col-auto row self-end q-px-lg q-mt-sm full-width">
<q-space />
<q-btn
:disable="schedule_preset_store.current_schedule_preset.name === ''"

39
src/modules/employee-list/composables/use-employee-api.ts
View File

@ -1,6 +1,7 @@
import { useEmployeeStore } from "src/stores/employee-store";
import { useSchedulePresetsStore } from "src/stores/schedule-presets.store";
import { SchedulePreset } from "../models/schedule-presets.models";
import { isShiftOverlap } from "src/modules/timesheets/utils/shift.util";
export const useEmployeeListApi = () => {
const employee_store = useEmployeeStore();
@ -15,7 +16,7 @@ export const useEmployeeListApi = () => {
employee_store.is_loading = false;
};
const getEmployeeDetails = async(email: string): Promise<void> => {
const getEmployeeDetails = async (email: string): Promise<void> => {
const success = await employee_store.getEmployeeDetails(email);
if (success && employee_store.employee.preset_id !== null) {
schedule_preset_store.setCurrentSchedulePreset(employee_store.employee.preset_id ?? -1);
@ -27,22 +28,48 @@ export const useEmployeeListApi = () => {
employee_store.employee.preset_id = preset_id < 0 ? null : preset_id;
}
const saveSchedulePreset = async() => {
const saveSchedulePreset = async () => {
// Get the currently edited schedule preset from the store (frontend model)
const preset = schedule_preset_store.current_schedule_preset;
// Check if there's any overlap between shifts. If there is, is_error property
// will be toggled to true and save process will stop
for (const weekday of preset.weekdays) {
weekday.is_error = isShiftOverlap(weekday.shifts);
}
if (preset.weekdays.some(weekday => weekday.is_error)) {
return;
}
// Flatten all weekday shifts into a single array
const preset_shifts = preset.weekdays.flatMap(weekday => weekday.shifts);
const backend_preset = new SchedulePreset(preset.id, preset.name, preset.is_default, preset_shifts);
// Build a backend-compatible SchedulePreset instance
const backend_preset = new SchedulePreset(
preset.id,
preset.name,
preset.is_default,
preset_shifts
);
// Track whether the create/update operation succeeds
let success = false;
if (preset.id === -1) success = await schedule_preset_store.createSchedulePreset(backend_preset);
else success = await schedule_preset_store.updateSchedulePreset(backend_preset);
// Create a new preset if it has no backend ID, otherwise update the existing one
if (preset.id === -1)
success = await schedule_preset_store.createSchedulePreset(backend_preset);
else
success = await schedule_preset_store.updateSchedulePreset(backend_preset);
// On success, refresh the preset list and close the preset manager UI
if (success) {
await schedule_preset_store.findSchedulePresetList();
schedule_preset_store.is_manager_open = false;
}
}
const deleteSchedulePreset = async(preset_id: number) => {
const deleteSchedulePreset = async (preset_id: number) => {
const success = await schedule_preset_store.deleteSchedulePreset(preset_id);
if (success) {
await schedule_preset_store.findSchedulePresetList();

2
src/modules/employee-list/models/schedule-presets.models.ts
View File

@ -50,6 +50,7 @@ export class SchedulePresetFrontend {
this.is_default = schedule_preset?.is_default ?? false;
this.weekdays = WEEKDAYS.map(day => ({
day,
is_error: false,
shifts: schedule_preset !== undefined ? schedule_preset?.shifts.filter(shift => shift.week_day === day) : [],
}))
}
@ -57,5 +58,6 @@ export class SchedulePresetFrontend {
export interface WeekdayPresetShifts {
day: Weekday;
is_error: boolean;
shifts: SchedulePresetShift[];
}

1
src/modules/shared/components/language-switch.vue
View File

@ -10,7 +10,6 @@
const setDisplayLanguage = (locale: MessageLanguages) => {
if (ui_store.user_preferences !== undefined) {
ui_store.user_preferences.display_language = locale;
console.log('triggered language change: ', ui_store.user_preferences.display_language);
}
}
</script>

14
src/modules/shared/components/page-header-template.vue
View File

@ -2,7 +2,8 @@
setup
lang="ts"
>
import { date } from 'quasar';
import { date, useQuasar } from 'quasar';
import { computed } from 'vue';
const { title, startDate = "", endDate = "" } = defineProps<{
title: string;
@ -10,13 +11,17 @@
endDate?: string;
}>();
const date_format_options = { day: 'numeric', month: 'long', year: 'numeric', };
const q = useQuasar();
const date_format_options = computed(() => q.platform.is.mobile ? { day: 'numeric', month: 'short', year: 'numeric' } : { day: 'numeric', month: 'long', year: 'numeric', });
</script>
<template>
<div class="column q-mt-lg text-uppercase text-center text-weight-bolder text-h4">
<span class="col">{{ $t(title) }}</span>
<div class="column text-uppercase text-center text-weight-bolder text-h4">
<span
v-if="!$q.platform.is.mobile"
class="col q-mt-lg"
>{{ $t(title) }}</span>
<transition
enter-active-class="animated fadeInDown"
@ -27,6 +32,7 @@
:key="startDate"
v-if="startDate.length > 0"
class="col row flex-center full-width q-py-none q-my-none"
:class="$q.platform.is.mobile ? 'q-mb-md' : ''"
>
<div class="text-accent text-weight-bold text-h6">
{{ $d(date.extractDate(startDate, 'YYYY-MM-DD'), date_format_options) }}

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

@ -33,30 +33,13 @@
emit('date-selected', value);
};
const getNextOrPreviousPayPeriod = (direction: number) => {
const pay_period = timesheet_store.pay_period;
if (!pay_period) return;
pay_period.pay_period_no += direction;
if (pay_period.pay_period_no > 26) {
pay_period.pay_period_no = 1;
pay_period.pay_year += direction;
}
if (pay_period.pay_period_no < 1) {
pay_period.pay_period_no = 26;
pay_period.pay_year += direction;
}
};
const getNextPayPeriod = () => {
getNextOrPreviousPayPeriod(NEXT);
timesheet_store.getNextOrPreviousPayPeriod(NEXT);
emit('pressed-next-button');
}
const getPreviousPayPeriod = () => {
getNextOrPreviousPayPeriod(PREVIOUS);
timesheet_store.getNextOrPreviousPayPeriod(PREVIOUS);
emit('pressed-previous-button');
};
</script>

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

@ -1,21 +1,14 @@
<script
setup
lang="ts"
>
/* eslint-disable */
import { computed, ref } from 'vue';
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
import { useExpensesStore } from 'src/stores/expense-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useTimesheetApprovalApi } from 'src/modules/timesheet-approval/composables/use-timesheet-approval-api';
import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
<script setup lang="ts">
/* eslint-disable */
import { computed, ref } from 'vue';
import OverviewListItem from 'src/modules/timesheet-approval/components/overview-list-item.vue';
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { overview_column_names, pay_period_overview_columns, type TimesheetOverview } from 'src/modules/timesheet-approval/models/timesheet-overview.models';
const expenses_store = useExpensesStore();
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const visible_columns = ref<string[]>([
const visible_columns = ref<string[]>([
overview_column_names.REGULAR,
overview_column_names.EVENING,
overview_column_names.EMERGENCY,
@ -24,19 +17,21 @@
overview_column_names.HOLIDAY,
overview_column_names.OVERTIME,
overview_column_names.IS_APPROVED,
]);
]);
const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
const overview_rows = computed(() => timesheet_store.pay_period_overviews[0]?.regular_hours === -1 ?
[] :
timesheet_store.pay_period_overviews
)
)
const onClickedDetails = async (row: TimesheetOverview) => {
const onClickedDetails = async (row: TimesheetOverview) => {
timesheet_store.current_pay_period_overview = row;
await timesheet_store.getTimesheetsByOptionalEmployeeEmail(row.email);
timesheet_store.is_details_dialog_open = true;
};
};
</script>
<template>

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

@ -1,93 +1,143 @@
<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';
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(default_timesheet_approval_cvs_report_filters);
const timesheet_store = useTimesheetStore();
const report_filter_options = ref<TimesheetApprovalCSVReportFilters>(new TimesheetApprovalCSVReportFilters);
const company_options = [
{ label: 'Targo', value: report_filter_options.value.companies.targo },
{ label: 'Solucom', value: report_filter_options.value.companies.solucom },
];
const selected_report_filters = ref<(keyof TimesheetApprovalCSVReportFilters)[]>(
Object.entries(report_filter_options.value).filter(([_key, value]) => value).map(([key]) => key as keyof TimesheetApprovalCSVReportFilters)
);
const type_options = [
{ label: 'timesheet_approvals.print_report.shifts', value: report_filter_options.value.types.shifts },
{ label: 'timesheet_approvals.print_report.expenses', value: report_filter_options.value.types.expenses },
{ label: 'shared.shift_type.holiday', value: report_filter_options.value.types.holiday },
{ label: 'shared.shift_type.vacation', value: report_filter_options.value.types.vacation },
];
interface ReportOptions {
label: string;
value: keyof TimesheetApprovalCSVReportFilters;
};
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 company_options: ReportOptions[] = [
{ label: 'Targo', value: 'targo' },
{ label: 'Solucom', value: 'solucom' },
];
const type_options: ReportOptions[] = [
{ label: 'timesheet_approvals.print_report.shifts', value: 'shifts' },
{ label: 'timesheet_approvals.print_report.expenses', value: 'expenses' },
{ label: 'shared.shift_type.holiday', value: 'holiday' },
{ label: 'shared.shift_type.vacation', value: 'vacation' },
];
const is_download_button_enable = computed(() =>
company_options.map(option => option.value).some(option => selected_report_filters.value.includes(option)) &&
type_options.map(option => option.value).some(option => selected_report_filters.value.includes(option))
);
const onClickedDownload = async () => {
try {
const data = await timesheet_store.getPayPeriodReport(report_filter_options.value);
const companies = Object.entries(report_filter_options.value)
.filter(([key, value]) => value && (key === 'targo' || key === 'solucom')).map(([key]) => key).join('-');
const types = Object.entries(report_filter_options.value)
.filter(([key, value]) => value && ['shifts', 'expenses', 'holiday', 'vacation'].includes(key)).map(([key]) => key).join('-');
const file_name = `Desjardins_${companies}_${types}_${new Date().toISOString().split('T')[0]}.csv`;
const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', file_name);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
} catch (error) {
console.error(`An error occured during the CSV download: `, error)
}
}
watch(selected_report_filters, (new_values) => {
Object.keys(report_filter_options.value).forEach(key => {
const typed_key = key as keyof TimesheetApprovalCSVReportFilters;
report_filter_options.value[typed_key] = new_values.includes(key as keyof TimesheetApprovalCSVReportFilters);
});
});
</script>
<template>
<q-btn-group
rounded
push
>
<q-btn
rounded
push
color="primary"
icon="print"
:disable="is_download_button_disabled"
/>
<q-btn-dropdown
rounded
push
color="white"
text-color="primary"
icon="checklist"
>
<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">
<q-dialog v-model="timesheet_store.is_report_dialog_open">
<div class="bg-secondary full-width shadow-24 rounded-10 column">
<div class="shadow-1 bg-primary text-accent text-weight-bold text-center text-uppercase">
<span> {{ $t('timesheet_approvals.print_report.title') }}</span>
</div>
<div class="row q-py-md q-px-lg">
<div class="col-auto full-width shadow-1 row bg-dark q-py-xs q-px-lg rounded-10">
<span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
{{ $t('timesheet_approvals.print_report.company') }}
</q-item-label>
<q-item-section
row
no-wrap
</span>
<div class="row bordered-primary col-auto full-width">
<div
v-for="company, index in company_options"
:key="index"
class="q-pa-xs col-6"
>
<q-checkbox
v-for="option, index in company_options"
v-model="selected_report_filters"
left-label
color="white"
class="q-px-md shadow-4 rounded-25 full-width"
dense
:class="selected_report_filters.includes(company.value) ? 'bg-accent text-white' : 'bg-dark'"
:label="$t(company.label)"
:val="company.value"
checked-icon="download"
unchecked-icon="highlight_off"
/>
</div>
</div>
</div>
<div class="row q-py-md">
<div class="col-auto full-width shadow-1 row bg-dark q-px-lg rounded-10 q-pb-sm">
<span class="col q-px-sm q-pt-xs text-weight-bolder text-accent text-uppercase col-3">
{{ $t('timesheet_approvals.print_report.options') }}
</span>
<div class=" row bordered-primary col-auto full-width">
<div
v-for="type, index in type_options"
:key="index"
v-model="option.value"
:val="option.label"
:label="option.label"
/>
</q-item-section>
</q-item>
<q-separator
spaced
vertical
color="primary"
/>
<q-item class="col">
<q-item-section
row
no-wrap
class="q-pa-xs col-6"
>
<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"
:val="option.label"
:label="option.label"
v-model="selected_report_filters"
left-label
color="white"
class="q-px-md shadow-4 rounded-25 full-width"
dense
:class="selected_report_filters.includes(type.value) ? 'bg-accent text-white' : 'bg-dark'"
:label="$t(type.label)"
:val="type.value"
checked-icon="download"
unchecked-icon="highlight_off"
/>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
</q-btn-group>
</div>
</div>
</div>
</div>
</div>
<div class="column">
<q-btn
:disable="!is_download_button_enable"
square
size="md"
icon="download"
:color="is_download_button_enable ? 'accent' : 'grey-5'"
:label="$t('shared.label.download')"
@click="onClickedDownload()"
/>
</div>
</div>
</q-dialog>
</template>

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

@ -26,21 +26,16 @@ export const useTimesheetApprovalApi = () => {
timesheet_store.is_loading = false;
};
const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[], year?: number, period_number?: number) => {
const getTimesheetApprovalCSVReport = async (report_filter_company: boolean[], report_filter_type: boolean[]) => {
if (timesheet_store.pay_period === undefined) return;
const [targo, solucom] = report_filter_company;
const [shifts, expenses, holiday, vacation] = report_filter_type;
const options = {
types: { shifts, expenses, holiday, vacation },
companies: { targo, solucom },
shifts, expenses, holiday, vacation, targo, solucom
} as TimesheetApprovalCSVReportFilters;
await timesheet_store.getPayPeriodReportByYearAndPeriodNumber(
year ?? timesheet_store.pay_period.pay_year,
period_number ?? timesheet_store.pay_period.pay_period_no,
options
);
await timesheet_store.getPayPeriodReport(options);
};
return {

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

@ -1,25 +1,18 @@
export interface TimesheetApprovalCSVReportFilters {
types: {
export class TimesheetApprovalCSVReportFilters {
shifts: boolean;
expenses: boolean;
holiday: boolean;
vacation: boolean;
};
companies: {
targo: boolean;
solucom: boolean;
constructor() {
this.shifts = true;
this.expenses = true;
this.holiday = false;
this.vacation = false;
this.targo = true;
this.solucom = true;
};
}
export const default_timesheet_approval_cvs_report_filters: TimesheetApprovalCSVReportFilters = {
types: {
shifts: true,
expenses: true,
holiday: true,
vacation: true,
},
companies: {
targo: true,
solucom: true,
},
};

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

@ -4,12 +4,12 @@ import type { PayPeriodOverviewResponse } from "src/modules/timesheet-approval/m
export const timesheetApprovalService = {
getPayPeriodOverviews: async (year: number, period_number: number): Promise<PayPeriodOverviewResponse> => {
const response = await api.get<{success: boolean, data: PayPeriodOverviewResponse, error? : string}>(`pay-periods/overview/${year}/${period_number}`);
const response = await api.get<{ success: boolean, data: PayPeriodOverviewResponse, error?: string }>(`pay-periods/overview/${year}/${period_number}`);
return response.data.data;
},
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
const response = await api.get(`csv/${year}/${period_number}`, { params: { report_filters, }});
return response.data;
getPayPeriodReportByYearAndPeriodNumber: async (year: number, period_number: number, filters?: TimesheetApprovalCSVReportFilters) => {
const response = await api.get(`exports/csv/${year}/${period_number}`, { params: filters, responseType: 'arraybuffer' });
return response;
},
};

126
src/modules/timesheets/components/expense-dialog-form.vue
View File

@ -2,15 +2,15 @@
setup
lang="ts"
>
import { date } from 'quasar';
import { useI18n } from 'vue-i18n';
import { computed, ref, watch } from 'vue';
import { deepEqual } from 'src/utils/deep-equal';
import { computed, ref } from 'vue';
import { useUiStore } from 'src/stores/ui-store';
import { useExpensesStore } from 'src/stores/expense-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
import { convertToMonetaryAmount, getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
import { type ExpenseType, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
import { Expense, type ExpenseType, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
interface ExpenseOption {
label: string;
@ -26,7 +26,6 @@
const files = defineModel<File[] | null>('files');
const is_navigator_open = ref(false);
const is_initial_expense = ref(true);
const COMMENT_MAX_LENGTH = 280;
const rules = useExpenseRules(t);
@ -35,17 +34,13 @@
const period_end_date = computed(() => timesheet_store.pay_period?.period_end.replaceAll('-', '/') ?? '');
const expense_options: ExpenseOption[] = [
{label: t('timesheet.expense.types.PER_DIEM'), value: 'PER_DIEM', icon: getExpenseIcon('PER_DIEM')},
{label: t('timesheet.expense.types.EXPENSES'), value: 'EXPENSES', icon: getExpenseIcon('EXPENSES')},
{label: t('timesheet.expense.types.MILEAGE'), value: 'MILEAGE', icon: getExpenseIcon('MILEAGE')},
{label: t('timesheet.expense.types.ON_CALL'), value: 'ON_CALL', icon: getExpenseIcon('ON_CALL')},
{ label: t('timesheet.expense.types.PER_DIEM'), value: 'PER_DIEM', icon: getExpenseIcon('PER_DIEM') },
{ label: t('timesheet.expense.types.EXPENSES'), value: 'EXPENSES', icon: getExpenseIcon('EXPENSES') },
{ label: t('timesheet.expense.types.MILEAGE'), value: 'MILEAGE', icon: getExpenseIcon('MILEAGE') },
{ label: t('timesheet.expense.types.ON_CALL'), value: 'ON_CALL', icon: getExpenseIcon('ON_CALL') },
]
const expense_selected = ref(expense_options.find(expense => expense.value == expenses_store.current_expense.type));
const emit = defineEmits<{
'onClickUpdateCancel': [void];
'onClickSaveUpdates': [void];
}>();
const expense_selected = ref(expense_options.find(expense => expense.value == expenses_store.current_expense.type));
const openDatePicker = () => {
is_navigator_open.value = true;
@ -62,45 +57,32 @@
const requestExpenseCreationOrUpdate = async () => {
await expenses_api.upsertExpense(expenses_store.current_expense);
if (expenses_store.current_expense.id) {
emit('onClickSaveUpdates');
}
expenses_store.is_showing_create_form = true;
expenses_store.mode = 'create';
expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
};
watch(expenses_store.current_expense, () => {
is_initial_expense.value = deepEqual(expenses_store.current_expense, expenses_store.initial_expense);
});
</script>
<template>
<q-form
v-if="!timesheet_store.timesheets?.every(timesheet => timesheet.is_approved)"
:key="expenses_store.current_expense.id"
flat
@submit.prevent="requestExpenseCreationOrUpdate"
class="full-width"
class="full-width q-mt-md q-px-md"
>
<div
class="text-uppercase text-weight-medium q-pt-sm q-ma-sm"
:class="expenses_store.mode === 'create' ? 'q-px-lg' : 'invisible'"
>
{{ $t('timesheet.expense.add_expense') }}
</div>
<div
class="row justify-between items-start rounded-5 q-pb-sm"
:class="expenses_store.mode === 'create' ? 'q-px-lg' : ''"
>
<!-- date selection input -->
<div class="col q-px-xs">
<q-input
v-model="expenses_store.current_expense.date"
dense
type="date"
borderless
standout
readonly
stack-label
color="primary"
class="col-auto q-px-xs"
input-class="text-weight-medium"
input-style="font-size: 1em;"
:label="$t('timesheet.expense.date')"
@ -136,17 +118,18 @@
</span>
</template>
</q-input>
</div>
<!-- expenses type selection -->
<div class="col q-px-xs">
<q-select
v-model="expense_selected"
standout="bg-blue-grey-9"
standout
dense
:options="expense_options"
hide-dropdown-icon
stack-label
label-slot
class="col q-px-xs"
color="primary"
:label="$t('timesheet.expense.type')"
:menu-offset="[0, 10]"
@ -181,24 +164,24 @@
</div>
</template>
</q-select>
</div>
<!-- amount input -->
<div v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense?.type ?? 'EXPENSES')">
<div class="col q-px-xs">
<q-input
key="amount"
v-model.number="expenses_store.current_expense.amount"
standout="bg-blue-grey-9"
v-if="TYPES_WITH_AMOUNT_ONLY.includes(expenses_store.current_expense?.type ?? 'EXPENSES')"
v-model="expenses_store.current_expense.amount"
standout
dense
label-slot
stack-label
suffix="$"
type="number"
color="primary"
class="col-auto q-px-xs"
input-class="text-right text-weight-bold"
:input-style="'font-size: 1.2em;'"
input-class="text-right text-weight-medium"
input-style="font-size: 1.3em;"
lazy-rules="ondemand"
:rules="[rules.amountRequired]"
@blur="expenses_store.current_expense.amount = convertToMonetaryAmount(expenses_store.current_expense.amount)"
>
<template #label>
<span class="text-weight-bold text-accent text-uppercase text-caption">
@ -206,22 +189,19 @@
</span>
</template>
</q-input>
</div>
<!-- mileage input -->
<div v-else>
<q-input
key="mileage"
v-model.number="expenses_store.current_expense.mileage"
standout="bg-blue-grey-9"
input-class="text-right"
v-else
v-model="expenses_store.current_expense.mileage"
standout
dense
stack-label
clearable
color="primary"
class="col q-px-xs"
label-slot
stack-label
suffix="km"
type="number"
input-class="text-right text-weight-medium"
input-style="font-size: 1.3em;"
color="primary"
lazy-rules="ondemand"
:rules="[rules.mileageRequired]"
>
@ -234,15 +214,16 @@
</div>
<!-- employee comment input -->
<div class="col q-px-xs">
<q-input
v-model="expenses_store.current_expense.comment"
standout="bg-blue-grey-9"
standout
dense
stack-label
label-slot
color="primary"
type="text"
class="col q-px-sm"
input-class="text-weight-medium"
input-style="font-size: 1.3em;"
:maxlength="COMMENT_MAX_LENGTH"
lazy-rules="ondemand"
:rules="[rules.commentRequired]"
@ -253,18 +234,18 @@
</span>
</template>
</q-input>
</div>
<!-- import attach file section -->
<div class="col q-px-xs">
<q-file
v-model="files"
standout="bg-blue-grey-9"
standout
dense
use-chips
multiple
stack-label
:label="$t('timesheet.expense.hints.attach_file')"
class="col"
style="max-width: 300px;"
label-slot
>
<template #prepend>
<q-icon
@ -281,24 +262,15 @@
</template>
</q-file>
</div>
</div>
<div class="col row full-width items-center">
<q-space />
<q-btn
v-if="expenses_store.mode === 'update'"
flat
dense
class="col-auto q-ml-sm"
icon="clear"
color="negative"
:label="$q.screen.gt.sm ? $t('shared.label.cancel') : ''"
@click="$emit('onClickUpdateCancel')"
/>
<q-btn
push
:disable="is_initial_expense"
:color="is_initial_expense ? 'grey-5' : 'accent'"
:disable="expenses_store.is_save_disabled"
:color="expenses_store.is_save_disabled ? 'grey-5' : 'accent'"
:icon="expenses_store.mode === 'update' ? 'save' : 'upload'"
:label="expenses_store.mode === 'update' ? $t('shared.label.update') : $t('shared.label.add')"
class="q-px-sm "
@ -308,3 +280,9 @@
</div>
</q-form>
</template>
<style scoped>
:deep(.q-field--standout.q-field--readonly .q-field__control::before) {
border: transparent;
}
</style>

20
src/modules/timesheets/components/expense-dialog-header.vue
View File

@ -12,8 +12,10 @@
let expenses = 0;
let mileage = 0;
timesheet_store.timesheets.forEach(timesheet => {
expenses += timesheet.weekly_expenses.expenses ?? 0;
mileage += timesheet.weekly_expenses.mileage ?? 0;
expenses += timesheet.weekly_expenses.expenses;
expenses += timesheet.weekly_expenses.on_call;
expenses += timesheet.weekly_expenses.per_diem;
mileage += timesheet.weekly_expenses.mileage;
});
return { expenses, mileage };
@ -22,8 +24,8 @@
<template>
<div class="column items-center q-pa-none">
<div class="col row full-width">
<q-item-label class="col text-h6 text-weight-bolder text-uppercase q-py-sm q-px-md">
<div class="col row full-width bg-primary">
<q-item-label class="col text-h6 text-weight-bolder text-uppercase text-white q-py-sm q-px-md">
{{ $t('timesheet.expense.title') }}
</q-item-label>
@ -39,8 +41,8 @@
/>
</div>
<div class="col column items-end full-width q-pt-sm q-px-md">
<div class="col-auto row items-center q-px-sm">
<div class="col row flex-center full-width q-pt-sm q-px-md">
<div class="col-auto row items-center q-px-md">
<span
v-if="$q.screen.gt.sm"
class="col-auto text-uppercase text-weight-light text-accent q-mr-xs"
@ -50,7 +52,7 @@
<span
class="col-auto text-weight-light"
style="font-size: 2.5em; line-height: 1em;"
style="font-size: 2em; line-height: 1em;"
>
{{ weekly_totals.expenses.toFixed(2) }}
</span>
@ -64,7 +66,7 @@
/>
</div>
<div class="col-auto row items-center q-px-sm">
<div class="col-auto row items-center q-px-md">
<span
v-if="$q.screen.gt.sm"
class="col text-uppercase text-weight-light text-accent q-mr-xs"
@ -74,7 +76,7 @@
<span
class="col-auto text-weight-light"
style="font-size: 2.5em; line-height: 1em;"
style="font-size: 2em; line-height: 1em;"
>
{{ weekly_totals.mileage.toFixed(1) }}
</span>

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

@ -2,190 +2,131 @@
setup
lang="ts"
>
import { date } from 'quasar';
import { computed, ref, toRaw } from 'vue';
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
import { deepEqual } from 'src/utils/deep-equal';
import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
import { useExpensesStore } from 'src/stores/expense-store';
import { getExpenseIcon } from 'src/modules/timesheets/utils/expense.util';
import { useAuthStore } from 'src/stores/auth-store';
import { CAN_APPROVE_PAY_PERIODS } from 'src/modules/shared/models/user.models';
import { Expense } from 'src/modules/timesheets/models/expense.models';
import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';
const { expense, horizontal = false } = defineProps<{
expense: Expense;
index: number;
horizontal?: boolean;
}>();
const is_approved = defineModel<boolean>({ required: true });
import { date } from 'quasar';
import { ref } from 'vue';
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
import { useExpensesStore } from 'src/stores/expense-store';
import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
import { getExpenseIcon } from 'src/modules/timesheets/utils/expense.util';
import type { Expense } from 'src/modules/timesheets/models/expense.models';
const expense = defineModel<Expense>({ required: true });
const expenses_store = useExpensesStore();
const auth_store = useAuthStore();
const expenses_api = useExpensesApi();
const refresh_key = ref(1);
const background_class = computed(() => deepEqual(expense, expenses_store.current_expense) ? '' : '');
const approved_class = computed(() => expense.is_approved ? ' bg-accent text-white' : '')
const is_authorized_to_approve = computed(() => CAN_APPROVE_PAY_PERIODS.includes(auth_store.user?.role ?? 'GUEST'))
const is_showing_update_form = ref(false);
const is_current_expense = computed(() => expense.id === expenses_store.current_expense.id);
const requestExpenseDeletion = async () => {
await expenses_api.deleteExpenseById(expense.id);
await expenses_api.deleteExpenseById(expense.value.id);
}
const onExpenseClicked = () => {
if (is_authorized_to_approve.value) {
is_approved.value = !is_approved.value;
refresh_key.value += 1;
}
}
const onUpdateClicked = () => {
if (deepEqual(expense, expenses_store.current_expense)) {
expenses_store.mode = 'create';
Object.assign(expense, toRaw(expenses_store.initial_expense))
expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
is_showing_update_form.value = false;
return;
}
const onClickExpenseUpdate = () => {
if (expense.value.is_approved) return;
expenses_store.mode = 'update';
expenses_store.current_expense = expense;
expenses_store.initial_expense = unwrapAndClone(expense);
is_showing_update_form.value = true;
}
const onSaveUpdatesClicked = () => {
is_showing_update_form.value = false;
expenses_store.mode = 'create';
expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
expenses_store.current_expense = expense.value;
expenses_store.initial_expense = unwrapAndClone(expense.value);
}
</script>
<template>
<q-item
:key="refresh_key"
:clickable="horizontal"
class="column col-4 items-center q-my-sm q-py-none shadow-3 rounded-5 bg-dark"
:class="background_class + approved_class"
@click="onExpenseClicked"
<q-expansion-item
v-model="is_showing_update_form"
hide-expand-icon
dense
group="expenses"
class="shadow-3 rounded-5 bg-dark q-my-sm"
:class="expense.is_approved ? ' bg-accent text-white' : ''"
@before-show="onClickExpenseUpdate()"
>
<div class="col row fit items-center">
<template #header>
<div class="col row items-center full-width">
<!-- avatar type icon section -->
<q-item-section avatar>
<div class="col-auto">
<q-icon
:name="getExpenseIcon(expense.type)"
:color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'primary')"
size="lg"
class="q-pr-md"
/>
</q-item-section>
</div>
<!-- amount or mileage section -->
<q-item-section class="col col-md-2 text-weight-bold">
<q-item-label v-if="expense.type === 'MILEAGE'">
{{ expense.mileage?.toFixed(1) }} km
</q-item-label>
<q-item-label v-else>
$ {{ expense.amount.toFixed(2) }}
</q-item-label>
<div class="col column">
<span
class="text-weight-bolder"
:class="expense.is_approved ? ' bg-accent text-white' : ''"
style="font-size: 1.3em;"
>
{{ expense.type === 'MILEAGE' ? `${Number(expense.mileage).toFixed(1)} km` : `$
${Number(expense.amount).toFixed(2)}` }}
</span>
<!-- date label -->
<q-item-label
caption
lines="1"
class="text-uppercase text-weight-light"
:class="approved_class"
<span
class="text-uppercase text-weight-light text-caption"
:class="expense.is_approved ? ' bg-accent text-white' : ''"
>
{{ $d(date.extractDate(expense.date, 'YYYY-MM-DD'), {
month: 'short', day: 'numeric', weekday:
'long'
}) }}
</q-item-label>
</q-item-section>
<q-space v-if="horizontal" />
</span>
</div>
<!-- attachment file icon -->
<q-item-section avatar>
<div class="col row items-center justify-start">
<q-btn
push
:color="expense.is_approved ? 'white' : 'accent'"
:text-color="expense.is_approved ? 'accent' : 'white'"
class="col-auto q-mx-sm q-px-sm q-pb-sm"
class="col-auto q-px-sm q-mr-sm"
icon="attach_file"
/>
</q-item-section>
<q-item-label class="col text-weight-light text-caption">
<span>attachment_goes_here.jpg</span>
<q-item-label class="col">
attachment_name.jpg
</q-item-label>
</div>
<!-- comment section -->
<q-item-section
v-if="!horizontal"
top
>
<q-item-label
lines="1"
class="text-weight-medium text-uppercase"
>
<div class="col column">
<span class="col-auto text-weight-bold text-accent text-uppercase text-caption">
{{ $t('timesheet.expense.employee_comment') }}
</q-item-label>
<q-item-label
caption
lines="1"
:class="approved_class"
</span>
<span
class="col"
:class="expense.is_approved ? ' bg-accent text-white' : ''"
style="font-size: 1.3em;"
>
{{ expense.comment }}
</q-item-label>
</q-item-section>
</span>
</div>
<!-- supervisor comment section -->
<q-item-section
v-if="is_authorized_to_approve"
top
>
<q-item-label
lines="1"
class="text-weight-medium text-uppercase"
>
{{ $t('timesheet.expense.supervisor_comment') }}
</q-item-label>
<q-item-label
<div
v-if="expense.supervisor_comment"
caption
lines="2"
class="col column"
>
<span class="col-auto text-weight-bold text-accent text-uppercase text-caption">
{{ $t('timesheet.expense.supervisor_comment') }}
</span>
<span
class="col"
:class="expense.is_approved ? ' bg-accent text-white' : ''"
style="font-size: 1.3em;"
>
{{ expense.supervisor_comment }}
</q-item-label>
</q-item-section>
</span>
</div>
<q-item-section
:key="refresh_key"
side
:class="is_current_expense ? 'invisible' : ''"
>
<q-btn
flat
dense
size="lg"
icon="edit"
color="accent"
:disable="expense.is_approved"
class="q-py-none z-top"
:class="expense.is_approved ? 'invisible no-pointer' : ''"
@click.stop="onUpdateClicked"
/>
</q-item-section>
<q-item-section
side
:class="is_current_expense ? 'invisible' : ''"
>
<div class="col-auto">
<q-icon
v-if="expense.is_approved"
name="verified"
@ -200,21 +141,13 @@
size="lg"
icon="close"
color="negative"
class="q-py-none z-top q-my-xs"
class="q-py-none q-my-xs"
@click.stop="requestExpenseDeletion"
/>
</q-item-section>
</div>
</div>
</template>
<q-slide-transition
@hide="expenses_store.mode === 'update' ? null : expenses_store.is_hiding_create_form = false"
:duration="200"
>
<ExpenseDialogForm
v-if="is_current_expense && expenses_store.is_hiding_create_form"
@on-click-update-cancel="onUpdateClicked"
@on-click-save-updates="onSaveUpdatesClicked"
/>
</q-slide-transition>
</q-item>
<ExpenseDialogForm />
</q-expansion-item>
</template>

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

@ -42,19 +42,14 @@
:key="index"
>
<ExpenseDialogListItemMobile
v-if="$q.screen.lt.md"
v-model="expense.is_approved"
:index="index"
:expense="expense"
:horizontal="horizontal"
v-if="$q.platform.is.mobile"
v-model="expenses_list[index]!"
/>
<ExpenseDialogListItem
v-else
v-model="expense.is_approved"
v-model="expenses_list[index]!"
:index="index"
:expense="expense"
:horizontal="horizontal"
/>
</div>
</q-list>

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

@ -2,25 +2,37 @@
setup
lang="ts"
>
import { useExpensesStore } from 'src/stores/expense-store';
import ExpenseDialogList from 'src/modules/timesheets/components/expense-dialog-list.vue';
import ExpenseDialogForm from 'src/modules/timesheets/components/expense-dialog-form.vue';
import ExpenseDialogFormMobile from 'src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue';
import ExpenseDialogHeader from 'src/modules/timesheets/components/expense-dialog-header.vue';
import ExpenseDialogFormMobile from 'src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue';
import { date } from 'quasar';
import { useExpensesStore } from 'src/stores/expense-store';
import { Expense } from 'src/modules/timesheets/models/expense.models';
const expense_store = useExpensesStore();
const { isApproved = false} = defineProps<{
isApproved?: boolean;
}>();
const onClickExpenseCreate = () => {
expense_store.mode = 'create';
expense_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
}
</script>
<template>
<q-dialog
v-model="expense_store.is_open"
persistent
:full-width="$q.platform.is.mobile"
transition-show="jump-down"
transition-hide="jump-down"
>
<q-card
class="q-pa-none rounded-10 shadow-10"
:class="$q.screen.lt.md ? ' bg-primary' : 'bg-secondary'"
class="q-pa-none rounded-10 shadow-24 bg-secondary"
style=" min-width: 70vw;"
:style="$q.dark.isActive ? 'border: solid 2px var(--q-accent);' : ''"
>
@ -29,26 +41,37 @@
</q-inner-loading>
<q-card-section class="q-pa-none">
<!-- <q-banner
v-if="expenses_error"
dense
class="bg-red-2 col-auto text-negative q-mt-sm"
>
{{ expenses_error }}
</q-banner> -->
<ExpenseDialogHeader />
<ExpenseDialogList />
<q-separator v-if="$q.screen.lt.md" spaced color="accent" size="2px" class="q-mx-md" />
<q-slide-transition @hide="expense_store.is_hiding_create_form = true" :duration="200">
<div v-if="!expense_store.current_expense.is_approved && expense_store.mode !== 'update' && expense_store.is_hiding_create_form === false">
<ExpenseDialogFormMobile v-if="$q.screen.lt.md" />
<ExpenseDialogForm v-else/>
<q-expansion-item
v-if="!isApproved"
v-model="expense_store.is_showing_create_form"
hide-expand-icon
:dense="!$q.platform.is.mobile"
group="expenses"
@show="onClickExpenseCreate()"
header-class="bg-accent text-white"
>
<template #header>
<div class="row items-center">
<span class="col-auto text-uppercase text-weight-bold text-h6 q-ml-lg q-mr-sm">
{{ $t('timesheet.expense.add_expense') }}
</span>
<q-icon
v-if="expense_store.mode !== 'create'"
name="las la-plus-square"
size="md"
class="col-auto"
/>
</div>
</q-slide-transition>
</template>
<ExpenseDialogFormMobile v-if="$q.platform.is.mobile" />
<ExpenseDialogForm v-else />
</q-expansion-item>
</q-card-section>
</q-card>
</q-dialog>

37
src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue
View File

@ -8,7 +8,7 @@
import { useExpensesStore } from 'src/stores/expense-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
import { convertToMonetaryAmount, getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
import { getExpenseIcon, useExpenseRules } from 'src/modules/timesheets/utils/expense.util';
import { type ExpenseType, TYPES_WITH_AMOUNT_ONLY } from 'src/modules/timesheets/models/expense.models';
interface ExpenseOption {
@ -51,31 +51,18 @@
const requestExpenseCreationOrUpdate = async () => {
await expenses_api.upsertExpense(expenses_store.current_expense);
};
defineEmits<{
'onClickUpdateCancel': [void];
}>();
</script>
<template>
<q-form
v-if="!timesheet_store.timesheets?.every(timesheet => timesheet.is_approved)"
:key="expenses_store.current_expense.id"
flat
@submit.prevent="requestExpenseCreationOrUpdate"
class="column full-width"
>
<!-- header -->
<div
class="col text-uppercase text-weight-medium text-h6 q-ma-xs"
:class="expenses_store.mode === 'create' ? 'q-px-md' : 'invisible'"
>
{{ $t('timesheet.expense.add_expense') }}
</div>
<div
class="col column items-start rounded-5 q-pb-sm"
:class="expenses_store.mode === 'create' ? 'q-px-md' : ''"
:class="expenses_store.is_showing_create_form ? 'q-px-md' : 'q-px-sm'"
>
<!-- date and type row -->
<div class="col row q-my-xs full-width">
@ -83,7 +70,6 @@
<q-input
v-model="expenses_store.current_expense.date"
dense
type="date"
outlined
readonly
stack-label
@ -189,7 +175,6 @@
:input-style="'font-size: 1.2em;'"
lazy-rules="ondemand"
:rules="[rules.amountRequired]"
@blur="expenses_store.current_expense.amount = convertToMonetaryAmount(expenses_store.current_expense.amount)"
>
<template #label>
<span class="text-weight-bold text-accent text-uppercase text-caption">
@ -287,27 +272,15 @@
</template>
</q-file>
</div>
<div class="col row full-width items-center">
<q-space />
<q-btn
v-if="expenses_store.mode === 'update'"
flat
dense
class="col-auto"
icon="clear"
color="negative"
:label="$q.screen.gt.sm ? $t('shared.label.cancel') : ''"
@click="$emit('onClickUpdateCancel')"
/>
<div class="col row full-width items-center" :class="expenses_store.mode === 'create' ? 'q-px-md q-py-xs' : ''">
<q-btn
push
color="accent"
:icon="expenses_store.mode === 'update' ? 'save' : 'upload'"
:label="expenses_store.mode === 'update' ? $t('shared.label.update') : $t('shared.label.add')"
class="q-px-sm"
:class="expenses_store.mode === 'create' ? 'q-mr-md q-mb-md' : 'q-mb-sm q-ml-lg'"
class="q-px-sm full-width"
:class="expenses_store.mode === 'create' ? '' : 'q-mb-sm'"
type="submit"
/>
</div>

93
src/modules/timesheets/components/mobile/expense-dialog-list-item-mobile.vue
View File

@ -2,72 +2,48 @@
setup
lang="ts"
>
/* eslint-disable */
import { date } from 'quasar';
import { computed, ref } from 'vue';
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
import { deepEqual } from 'src/utils/deep-equal';
import { useExpensesApi } from 'src/modules/timesheets/composables/use-expense-api';
import { useExpensesStore } from 'src/stores/expense-store';
import { getExpenseIcon } from 'src/modules/timesheets/utils/expense.util';
import { Expense } from 'src/modules/timesheets/models/expense.models';
import type { Expense } from 'src/modules/timesheets/models/expense.models';
import ExpenseDialogFormMobile from 'src/modules/timesheets/components/mobile/expense-dialog-form-mobile.vue';
const { expense, horizontal = false } = defineProps<{
expense: Expense;
index: number;
horizontal?: boolean;
}>();
const expense = defineModel<Expense>({ required: true })
const expenses_store = useExpensesStore();
const expenses_api = useExpensesApi();
const refresh_key = ref(1);
const background_class = computed(() => deepEqual(expense, expenses_store.current_expense) ? '' : '');
const approved_class = computed(() => expense.is_approved ? ' bg-accent text-white' : '')
const approved_class = computed(() => expense.value.is_approved ? ' bg-accent text-white' : '')
const is_showing_update_form = ref(false);
const requestExpenseDeletion = async () => {
await expenses_api.deleteExpenseById(expense.id);
await expenses_api.deleteExpenseById(expense.value.id);
}
const onUpdateClicked = () => {
if (expense.is_approved) return;
if (deepEqual(expense, expenses_store.current_expense)) {
expenses_store.mode = 'create';
expenses_store.current_expense = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
is_showing_update_form.value = false;
return;
}
if (expense.value.is_approved) return;
expenses_store.mode = 'update';
expenses_store.current_expense = expense;
expenses_store.initial_expense = unwrapAndClone(expense);
is_showing_update_form.value = true;
expenses_store.current_expense = expense.value;
expenses_store.initial_expense = unwrapAndClone(expense.value);
}
</script>
<template>
<div class="column bg-dark rounded-5 q-my-sm full-width">
<q-slide-item
right-color="negative"
class="rounded-5 bg-dark full-width"
@right="requestExpenseDeletion"
>
<template
#right
v-if="$q.screen.lt.md && !expenses_store.is_hiding_create_form && !expense.is_approved"
>
<q-icon name="delete" />
</template>
<q-item
:key="refresh_key"
clickable
class="row q-py-none q-pa-xs rounded-5 full-width"
:class="background_class + approved_class"
@click="onUpdateClicked"
<div class="column bg-dark shadow-5 rounded-5 q-my-sm full-width">
<q-expansion-item
v-model="is_showing_update_form"
hide-expand-icon
dense
group="expenses"
:class="expense.is_approved ? ' bg-accent text-white' : ''"
@before-show="onUpdateClicked()"
>
<template #header>
<div class="column col">
<!-- date label -->
<div class="col-auto row items-center q-pl-xs">
@ -94,22 +70,21 @@
:name="getExpenseIcon(expense.type)"
:color="expense.is_approved ? 'white' : ($q.dark.isActive ? 'white' : 'primary')"
size="lg"
class="col-auto"
/>
<!-- amount or mileage section -->
<q-item-section class="col text-weight-bold text-h6">
<div class="col text-weight-bold text-h6">
<q-item-label v-if="expense.type === 'MILEAGE'">
{{ expense.mileage?.toFixed(1) }} km
</q-item-label>
<q-item-label v-else>
$ {{ expense.amount.toFixed(2) }}
</q-item-label>
</q-item-section>
<q-space v-if="horizontal" />
</div>
<!-- attachment file icon -->
<q-item-section avatar>
<div class="col-auto q-px-xs">
<q-btn
push
:color="expense.is_approved ? 'white' : 'accent'"
@ -117,14 +92,9 @@
class="col-auto q-mx-sm q-px-sm q-pb-sm"
icon="attach_file"
/>
</q-item-section>
</div>
</div>
<div
class="col-auto q-px-sm"
:class="expense.is_approved ? '' : 'invisible'"
>
<div class="col-auto">
<q-icon
v-if="expense.is_approved"
name="verified"
@ -133,18 +103,13 @@
class="full-height"
/>
</div>
</q-item>
</q-slide-item>
</div>
</div>
</template>
<q-slide-transition
@hide="expenses_store.is_hiding_create_form = false"
:duration="200"
>
<ExpenseDialogFormMobile
v-if="is_showing_update_form && expenses_store.is_hiding_create_form"
class="q-mt-sm q-pa-sm"
@on-click-update-cancel="onUpdateClicked"
/>
</q-slide-transition>
<div class="q-px-sm">
<ExpenseDialogFormMobile />
</div>
</q-expansion-item>
</div>
</template>

116
src/modules/timesheets/components/shift-list-day-row.vue
View File

@ -8,39 +8,33 @@
import { QSelect, QInput } from 'quasar';
import { Shift, type ShiftOption } from 'src/modules/timesheets/models/shift.models';
import { useUiStore } from 'src/stores/ui-store';
import { useShiftRules } from 'src/modules/timesheets/utils/shift.util';
import { useShiftRules, SHIFT_OPTIONS } from 'src/modules/timesheets/utils/shift.util';
let timer: NodeJS.Timeout;
const { t } = useI18n();
const ui_store = useUiStore();
const shift_rules = useShiftRules(t('timesheet.errors.SHIFT_TIME_REQUIRED'),);
const COMMENT_LENGTH_MAX = 280;
const SHIFT_OPTIONS: ShiftOption[] = [
{ label: t('timesheet.shift.types.REGULAR'), value: 'REGULAR', icon: 'wb_sunny', icon_color: 'blue-grey-3' },
{ label: t('timesheet.shift.types.EVENING'), value: 'EVENING', icon: 'bedtime', icon_color: 'indigo-8' },
{ label: t('timesheet.shift.types.EMERGENCY'), value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-8' },
{ label: t('timesheet.shift.types.VACATION'), value: 'VACATION', icon: 'beach_access', icon_color: 'yellow-8' },
{ label: t('timesheet.shift.types.HOLIDAY'), value: 'HOLIDAY', icon: 'forest', icon_color: 'green-8' },
{ label: t('timesheet.shift.types.SICK'), value: 'SICK', icon: 'medication_liquid', icon_color: 'light-blue-6' },
];
const shift = defineModel<Shift>('shift', { required: true });
const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
const select_ref = useTemplateRef<QSelect>('select');
const start_time_ref = useTemplateRef<QInput>('start_time');
const end_time_ref = useTemplateRef<QInput>('end_time');
const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
const { dayShifts = [], dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
dayShifts: Shift[];
dense?: boolean;
hasShiftAfter?: boolean;
isTimesheetApproved?: boolean;
}>();
const shift_rules = useShiftRules(t('timesheet.errors.SHIFT_TIME_REQUIRED'), t('timesheet.errors.SHIFT_OVERLAP_SHORT'), dayShifts);
const emit = defineEmits<{
'saveComment': [comment: string, shift_id: number];
'requestDelete': [void];
'onTimeFieldBlur': [void];
}>();
const onBlurShiftTypeSelect = () => {
@ -98,7 +92,7 @@
<div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
<div
class="row items-start text-uppercase rounded-5"
class="row items-center text-uppercase rounded-5"
:class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
>
<!-- mobile comment button -->
@ -168,7 +162,7 @@
menu-anchor="bottom middle"
menu-self="top middle"
:options="SHIFT_OPTIONS"
class="col rounded-5 q-mx-xs bg-dark q-pt-xs"
class="col rounded-5 q-mx-xs bg-dark"
:class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
@ -178,23 +172,68 @@
>
<template #selected-item="scope">
<div
class="row flex-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
:class="ui_store.is_mobile_mode ? 'items-center full-height' : 'flex-center'"
class="row items-center text-weight-bold q-ma-none q-pa-none no-wrap ellipsis full-width"
:class="ui_store.is_mobile_mode ? 'full-height' : ''"
:tabindex="scope.tabindex"
>
<q-icon
:name="scope.opt.icon"
:color="scope.opt.icon_color"
size="sm"
class="col-auto q-mx-xs"
class="col-auto"
:class="shift.is_approved ? 'q-mx-xs': 'q-mr-xs'"
/>
<span
style="line-height: 0.9em;"
style="line-height: 1.2em;"
class="col-auto ellipsis"
:class="!shift.is_approved ? '' : 'text-white'"
>{{ scope.opt.label }}</span>
>
{{ $t(scope.opt.label) }}
</span>
</div>
</template>
<template #after>
<q-icon
v-if="shift.is_approved"
:name="shift.is_remote ? 'las la-laptop' : 'las la-building'"
size="1.2em"
color="white"
class="q-mr-sm"
>
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[0, 10]"
class="text-uppercase text-weight-bold text-white bg-primary"
>
{{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
$t('timesheet.shift.types.OFFICE') }}
</q-tooltip>
</q-icon>
<q-toggle
v-else
v-model="shift.is_remote"
:disable="shift.is_approved"
dense
keep-color
size="3em"
color="accent"
icon="las la-building"
checked-icon="las la-laptop"
>
<q-tooltip
anchor="top middle"
self="bottom middle"
:offset="[0, 10]"
class="text-uppercase text-weight-medium text-white bg-accent"
>
{{ shift.is_remote ? $t('timesheet.shift.types.REMOTE') :
$t('timesheet.shift.types.OFFICE') }}
</q-tooltip>
</q-toggle>
</template>
</q-select>
</div>
@ -212,13 +251,14 @@
lazy-rules
no-error-icon
hide-bottom-space
:rules="[shift_rules.isTimeRequired]"
:rules="[shift_rules.isTimeRequiredRule, shift_rules.isShiftOverlapRule]"
:label-color="!shift.is_approved ? 'accent' : 'white'"
class="col rounded-5 bg-dark"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (!shift.is_approved && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
input-style="font-size: 1.2em;"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
@blur="emit('onTimeFieldBlur')"
>
<template #label>
<span
@ -242,13 +282,14 @@
lazy-rules
no-error-icon
hide-bottom-space
:rules="[shift_rules.isTimeRequired]"
:rules="[shift_rules.isTimeRequiredRule, shift_rules.isShiftOverlapRule]"
:label-color="!shift.is_approved ? 'accent' : 'white'"
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
input-style="font-size: 1.2em;"
class="col rounded-5 bg-dark"
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed q-px-xs transparent inset-shadow' : (isTimesheetApproved ? 'inset-shadow' : ''))"
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
@blur="emit('onTimeFieldBlur')"
>
<template #label>
<span
@ -260,26 +301,24 @@
</q-input>
<!-- comment and delete buttons -->
<div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto self-start'">
<q-icon
v-if="shift.type && dense"
:name="shift.comment ? 'comment' : ''"
color="primary"
:size="dense ? 'xs' : 'sm'"
class="col"
/>
<div class="row full-height" :class="ui_store.is_mobile_mode ? 'col-12' : 'col-auto flex-center'">
<!-- desktop comment button -->
<q-btn
v-else-if="!ui_store.is_mobile_mode"
v-if="!ui_store.is_mobile_mode"
push
dense
:color="shift.is_approved ? 'accent' : 'dark'"
:color="shift.is_approved ? 'white' : 'accent'"
:icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
:text-color="shift.is_approved ? '' : (shift.comment ? 'accent' : 'grey-5')"
:text-color="shift.is_approved ? 'accent' : 'white'"
class="col"
:class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
>
<q-badge
v-if="shift.comment"
floating
rounded
color="negative"
/>
<q-popup-edit
v-model="shift.comment"
:title="$t('timesheet.shift.fields.header_comment')"
@ -327,23 +366,18 @@
</q-btn>
<q-btn
v-if="!ui_store.is_mobile_mode"
v-if="!ui_store.is_mobile_mode && !shift.is_approved"
flat
dense
:disable="shift.is_approved"
tabindex="-1"
icon="cancel"
icon="las la-trash"
text-color="negative"
class="col"
size="1.2em"
:class="shift.is_approved ? 'invisible' : ''"
@click="$emit('requestDelete')"
>
<q-badge
v-if="!shift.is_approved"
color="white"
class="absolute"
style="z-index: -1;"
/>
</q-btn>
</div>
</div>

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

@ -3,18 +3,26 @@
lang="ts"
>
import ShiftListDayRow from 'src/modules/timesheets/components/shift-list-day-row.vue';
import { ref } from 'vue';
import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
import type { Shift } from 'src/modules/timesheets/models/shift.models';
import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
const shift_api = useShiftApi();
const timesheet_api = useTimesheetApi();
const { day, dense = false, approved = false } = defineProps<{
timesheetId: number;
weekDayIndex: number;
day: TimesheetDay;
dense?: boolean;
approved?: boolean;
}>();
const preset_mouseover = ref(false);
const emit = defineEmits<{
'deleteUnsavedShift': [void];
}>();
@ -30,11 +38,42 @@
</script>
<template>
<div class="column justify-center q-py-xs" :class="approved ? '' : ''">
<div
class="column justify-center q-py-xs"
:class="approved ? '' : ''"
@mouseenter="preset_mouseover = true"
@mouseleave="preset_mouseover = false"
>
<!-- Button to apply preset to day -->
<transition
appear
enter-active-class="animated zoomIn fast"
leave-active-class="animated zoomOut fast"
>
<q-btn
v-if="!$q.platform.is.mobile && day.shifts.length < 1 && preset_mouseover"
:disable="day.shifts.length > 0"
flat
dense
size="lg"
:label="$t('timesheet.apply_preset_day')"
class="text-uppercase text-weight-bold text-accent q-mx-lg q-py-none rounded-5"
style="opacity: 0.6;"
@click.stop="timesheet_api.applyPreset(timesheetId, weekDayIndex, day.date)"
>
<q-icon
name="las la-calendar-day"
color="accent"
size="md"
/>
</q-btn>
</transition>
<ShiftListDayRow
v-for="shift, shift_index in day.shifts"
:key="shift_index"
v-model:shift="day.shifts[shift_index]!"
:day-shifts="day.shifts"
:is-timesheet-approved="approved"
:dense="dense"
:has-shift-after="shift_index < day.shifts.length - 1"

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

@ -2,21 +2,29 @@
setup
lang="ts"
>
import { computed } from 'vue';
import ShiftListDay from 'src/modules/timesheets/components/shift-list-day.vue';
import ShiftListDateWidget from 'src/modules/timesheets/components/shift-list-date-widget.vue';
import { date } from 'quasar';
import { computed, ref } from 'vue';
import { useUiStore } from 'src/stores/ui-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { Shift } from 'src/modules/timesheets/models/shift.models';
import ShiftListDay from 'src/modules/timesheets/components/shift-list-day.vue';
import ShiftListDateWidget from 'src/modules/timesheets/components/shift-list-date-widget.vue';
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
import type { QScrollArea } from 'quasar';
import type { TimesheetDay } from 'src/modules/timesheets/models/timesheet.models';
const { extractDate } = date;
const ui_store = useUiStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const animation_style = computed(() => ui_store.is_mobile_mode ? 'fadeInLeft' : 'fadeInDown' );
const mobile_animation_direction = ref('fadeInLeft');
const animation_style = computed(() => ui_store.is_mobile_mode ? mobile_animation_direction.value : 'fadeInDown');
const timesheet_page = ref<QScrollArea | null>(null);
const scroll_y = computed(() => timesheet_page.value?.getScrollPosition().top ?? 0)
const addNewShift = (day_shifts: Shift[], date: string, timesheet_id: number) => {
ui_store.focus_next_component = true;
@ -38,17 +46,76 @@
if (day.shifts.length < 1) return false;
return day.shifts.every(shift => shift.is_approved === true);
}
const handleSwipe = async (direction: 'left' | 'up' | 'down' | 'right' | undefined, distance: {x?: number, y?: number}) => {
mobile_animation_direction.value = direction === 'left' ? 'fadeInRight' : 'fadeInLeft';
if (distance.x && Math.abs(distance.x) > 10 ) {
await timesheet_api.getTimesheetsBySwiping( direction === 'left' ? 1 : -1 )
}
}
</script>
<template>
<div class="col column fit relative-position" v-touch-swipe="value => handleSwipe(value.direction, value.distance ?? {x: 0, y: 0})">
<q-scroll-area
ref="timesheet_page"
:horizontal-offset="[0, 3]"
class="absolute-full hide-scrollbar q-mt-sm"
:thumb-style="{ opacity: '0' }"
:bar-style="{ opacity: '0' }"
style="min-height: 50vh;"
>
<!-- Show if no timesheets found (further than one month from present) -->
<div
:class="$q.screen.lt.md ? 'column full-width' : 'row'"
v-if="timesheet_store.timesheets.length < 1"
class="col-auto column flex-center fit q-py-lg"
style="min-height: 20vh;"
>
<span class="text-uppercase text-weight-bolder text-center">{{ $t('shared.error.no_data_found')
}}</span>
<q-icon
name="las la-calendar"
color="accent"
size="10em"
class="absolute"
style="opacity: 0.2;"
/>
</div>
<!-- Else show timesheets if found -->
<div
v-else
class="col fit"
:class="$q.platform.is.mobile ? 'column' : 'row'"
>
<div
v-for="timesheet, timesheet_index in timesheet_store.timesheets"
v-for="timesheet, timesheet_index of timesheet_store.timesheets"
:key="timesheet.timesheet_id"
class="col column"
class="col fit"
>
<transition
appear
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
<q-btn
v-if="!$q.platform.is.mobile"
:disable="!timesheet.days.every(day => day.shifts.length < 1)"
flat
dense
:label="$t('timesheet.apply_preset_week')"
class="text-uppercase text-weight-bold text-accent q-mx-lg q-py-none rounded-5"
:class="timesheet.days.every(day => day.shifts.length < 1) ? '' : 'invisible'"
@click="timesheet_api.applyPreset(timesheet.timesheet_id)"
>
<q-icon
name="las la-calendar-week"
color="accent"
size="md"
/>
</q-btn>
</transition>
<transition-group
appear
:enter-active-class="`animated ${animation_style}`"
@ -60,7 +127,7 @@
:style="`animation-delay: ${day_index / 15}s;`"
>
<div
v-if="ui_store.is_mobile_mode"
v-if="$q.platform.is.mobile && ($q.screen.width < $q.screen.height)"
class="col column full-width"
>
<q-card
@ -86,6 +153,8 @@
>
<ShiftListDay
outlined
:timesheet-id="timesheet.timesheet_id"
:week-day-index="day_index"
:animation-delay-multiplier="day_index"
:approved="(getDayApproval(day) || timesheet.is_approved)"
:day="day"
@ -125,8 +194,13 @@
class="col row full-width"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'rounded-10 bg-accent' : ''"
>
<transition
appear
enter-active-class="animated fadeInDown"
leave-active-class="animated fadeOutUp"
>
</transition>
<!-- List of shifts -->
<div
class="col row bg-dark"
:class="(getDayApproval(day) || timesheet.is_approved) ? 'bg-transparent' : ''"
@ -139,8 +213,9 @@
class="col-auto"
/>
<ShiftListDay
:timesheet-id="timesheet.timesheet_id"
:week-day-index="day_index"
:day="day"
:approved="getDayApproval(day) || timesheet.is_approved"
class="col"
@ -175,4 +250,29 @@
</transition-group>
</div>
</div>
<q-page-sticky
position="bottom-right"
:offset="[0, -35]"
class="z-top"
>
<transition
appear
enter-active-class="animated zoomIn"
leave-active-class="animated zoomOut"
>
<q-btn
v-if="scroll_y > 400"
fab
icon="las la-chevron-up"
color="white"
text-color="accent"
class="shadow-12"
@click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
/>
</transition>
</q-page-sticky>
</q-scroll-area>
</div>
</template>

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

@ -9,11 +9,12 @@
import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue';
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
import { computed } from 'vue';
import { computed, onMounted } from 'vue';
import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
import { useExpensesStore } from 'src/stores/expense-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { date } from 'quasar';
const expenses_store = useExpensesStore();
@ -22,28 +23,29 @@
const shift_api = useShiftApi();
const has_shift_errors = computed(() => timesheet_store.all_current_shifts.filter(shift => shift.has_error === true).length > 0);
const is_timesheets_approved = computed(() => timesheet_store.timesheets.every(timesheet => timesheet.is_approved))
const { mode = 'normal' } = defineProps<{
mode?: 'approval' | 'normal';
}>();
onMounted(async () => {
await timesheet_api.getTimesheetsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
<template>
<div class="column flex-center full-width">
<div class="column items-center full-height">
<LoadingOverlay v-model="timesheet_store.is_loading" />
<q-card
flat
class="transparent full-width"
>
<q-card-section
:horizontal="$q.screen.gt.sm"
class="q-px-md items-center q-mb-md"
:class="$q.screen.lt.md ? 'column' : ''"
<div
class="col-auto row items-center full-width"
:class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'justify-between' : 'q-mt-md q-px-md'"
>
<!-- navigation btn -->
<PayPeriodNavigator
v-if="mode === 'normal'"
class="col-auto"
@date-selected="date_value => timesheet_api.getTimesheetsByDate(date_value)"
@pressed-previous-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
@pressed-next-button="timesheet_api.getTimesheetsByCurrentPayPeriod"
@ -51,34 +53,34 @@
<!-- mobile expenses button -->
<q-btn
v-if="$q.screen.lt.md && mode === 'normal'"
v-if="($q.platform.is.mobile && ($q.screen.width < $q.screen.height))"
push
rounded
color="accent"
icon="receipt_long"
:label="$t('timesheet.expense.open_btn')"
class="q-mt-sm"
:label="$t('timesheet_approvals.table.expenses')"
class="col-auto"
@click="expenses_store.open"
/>
<q-space />
<q-space v-if="!$q.platform.is.mobile" />
<!-- save timesheet changes button -->
<!-- desktop save timesheet changes button -->
<q-btn
v-if="mode === 'normal'"
v-if="mode === 'normal' && !is_timesheets_approved && !$q.platform.is.mobile"
push
rounded
:disable="timesheet_store.is_loading || has_shift_errors"
:color="timesheet_store.is_loading || has_shift_errors ? 'grey-5' : 'accent'"
icon="upload"
:label="$t('shared.label.save')"
class="q-mr-md"
:class="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? 'full-width' : 'q-mr-md'"
@click="shift_api.saveShiftChanges"
/>
<!-- desktop expenses button -->
<q-btn
v-if="mode === 'normal'"
v-if="mode === 'normal' && $q.screen.width > $q.screen.height"
push
rounded
color="accent"
@ -86,29 +88,25 @@
:label="$t('timesheet.expense.open_btn')"
@click="expenses_store.open"
/>
</div>
</q-card-section>
<TimesheetErrorWidget class="col-auto"/>
<q-card-section class="q-pa-none">
<TimesheetErrorWidget />
</q-card-section>
<ShiftList />
<ShiftList :mode="mode" />
<q-card-actions align="right">
<q-btn
v-if="mode === 'approval'"
v-if="mode === 'approval' || $q.platform.is.mobile && $q.screen.width < $q.screen.height"
push
rounded
:disable="timesheet_store.is_loading"
color="accent"
icon="upload"
:label="$t('shared.label.save')"
class="q-mr-md"
class="col-auto"
:class="$q.platform.is.mobile && $q.screen.width < $q.screen.height ? 'full-width q-mt-sm' : 'q-mr-md'"
@click="shift_api.saveShiftChanges"
/>
</q-card-actions>
</q-card>
<ExpenseDialog />
<ExpenseDialog :is-approved="is_timesheets_approved" />
</div>
</template>

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

@ -1,7 +1,8 @@
/* eslint-disable */
import { useExpensesStore } from "src/stores/expense-store";
import { useTimesheetStore } from "src/stores/timesheet-store";
import type { Expense } from "src/modules/timesheets/models/expense.models";
import { Expense } from "src/modules/timesheets/models/expense.models";
import { date } from "quasar";
export const useExpensesApi = () => {
const expenses_store = useExpensesStore();
@ -10,6 +11,7 @@ export const useExpensesApi = () => {
const upsertExpense = async (expense: Expense): Promise<void> => {
const success = await expenses_store.upsertExpense(expense);
if (success) {
expenses_store.current_expense = new Expense(date.formatDate( new Date(), 'YYYY-MM-DD'));
timesheet_store.getTimesheetsByOptionalEmployeeEmail();
}
};

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

@ -1,4 +1,5 @@
import { useTimesheetStore } from "src/stores/timesheet-store"
import { useTimesheetStore } from "src/stores/timesheet-store";
import { timesheetService } from "src/modules/timesheets/services/timesheet-service";
export const useTimesheetApi = () => {
const timesheet_store = useTimesheetStore();
@ -29,8 +30,41 @@ export const useTimesheetApi = () => {
timesheet_store.is_loading = false;
};
const applyPreset = async (timesheet_id: number, week_day_index?: number, date?: string) => {
if (timesheet_store.timesheets.map(timesheet => timesheet.timesheet_id).includes(timesheet_id)) {
timesheet_store.is_loading = true;
try {
let response;
if (week_day_index && date)
response = await timesheetService.applyPresetToDay(timesheet_id, week_day_index, date);
else
response = await timesheetService.applyPresetToWeek(timesheet_id);
if (response.success)
await timesheet_store.getTimesheetsByOptionalEmployeeEmail();
} catch (error) {
console.error('Error applying weekly timesheet: ', error);
}
timesheet_store.is_loading = false;
}
}
const getTimesheetsBySwiping = async( direction: number ) => {
timesheet_store.is_loading = true;
timesheet_store.getNextOrPreviousPayPeriod(direction);
await timesheet_store.getPayPeriodByDateOrYearAndNumber();
await timesheet_store.getTimesheetsByOptionalEmployeeEmail();
timesheet_store.is_loading = false;
}
return {
getTimesheetsByDate,
getTimesheetsByCurrentPayPeriod,
getTimesheetsBySwiping,
applyPreset,
};
};

1
src/modules/timesheets/services/shift-service.ts
View File

@ -14,7 +14,6 @@ export const ShiftService = {
},
updateShifts: async (existing_shifts: Shift[]):Promise<BackendResponse<Shift>> => {
console.log('sent shifts: ', existing_shifts)
const response = await api.patch(`/shift/update`, existing_shifts);
return response.data;
}

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

@ -2,30 +2,41 @@ import { api } from "src/boot/axios";
import type { PayPeriod } from "src/modules/shared/models/pay-period.models";
import type { TimesheetResponse } from "src/modules/timesheets/models/timesheet.models";
import type { TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
import type { BackendResponse } from "src/modules/shared/models/backend-response.models";
export const timesheetService = {
getPayPeriodByDate: async (date_string: string): Promise<PayPeriod> => {
const response = await api.get<{success: boolean, data: PayPeriod, error? : string}>(`pay-periods/date/${date_string}`);
const response = await api.get<{ success: boolean, data: PayPeriod, error?: string }>(`pay-periods/date/${date_string}`);
return response.data.data;
},
getPayPeriodByYearAndPeriodNumber: async (year: number, period_number: number): Promise<PayPeriod> => {
const response = await api.get<{success: boolean, data: PayPeriod, error? : string}>(`pay-periods/${year}/${period_number}`);
const response = await api.get<{ success: boolean, data: PayPeriod, error?: string }>(`pay-periods/${year}/${period_number}`);
return response.data.data;
},
getTimesheetOverviewsByPayPeriodAndSupervisorEmail: async (year: number, period_number: number, supervisor_email: string): Promise<TimesheetOverview[]> => {
const response = await api.get<{success: boolean, data: TimesheetOverview[], error? : string}>(`pay-periods/${year}/${period_number}/${supervisor_email}`);
const response = await api.get<{ success: boolean, data: TimesheetOverview[], error?: string }>(`pay-periods/${year}/${period_number}/${supervisor_email}`);
return response.data.data;
},
getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<TimesheetResponse> => {
getTimesheetsByPayPeriodAndOptionalEmail: async (year: number, period_number: number, employee_email?: string): Promise<BackendResponse<TimesheetResponse>> => {
if (employee_email !== undefined) {
const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}?employee_email=${employee_email}`);
return response.data.data;
const response = await api.get<BackendResponse<TimesheetResponse>>(`timesheets/${year}/${period_number}?employee_email=${employee_email}`);
return response.data;
} else {
const response = await api.get<{success: boolean, data: TimesheetResponse, error? : string}>(`timesheets/${year}/${period_number}`);
return response.data.data;
const response = await api.get<BackendResponse<TimesheetResponse>>(`timesheets/${year}/${period_number}`);
return response.data;
}
},
applyPresetToWeek: async (timesheet_id: number): Promise<BackendResponse<boolean>> => {
const response = await api.post<BackendResponse<boolean>>(`schedule-presets/apply-preset`, { timesheet_id });
return response.data;
},
applyPresetToDay: async (timesheet_id: number, week_day_index: number, date: string): Promise<BackendResponse<boolean>> => {
const response = await api.post<BackendResponse<boolean>>('schedule-presets/apply-day-preset', { timesheet_id, week_day_index, date });
return response.data;
}
};

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

@ -3,7 +3,7 @@ import type { ExpenseType } from "src/modules/timesheets/models/expense.models";
export const getExpenseIcon = (type: ExpenseType) => {
switch (type) {
case 'MILEAGE': return 'time_to_leave';
case 'EXPENSES': return 'receipt_long';
case 'EXPENSES': return 'las la-coins';
case 'PER_DIEM': return 'hotel';
case 'ON_CALL': return 'phone_android';
default: return 'help_outline';
@ -15,7 +15,7 @@ export const useExpenseRules = (t: (_key: string) => string) => {
const typeRequired = (val: unknown) => (!!val) || t('timesheet.expense.errors.type_required');
const amountRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.amount_required_for_type');
const mileageRequired = (val: unknown) => (isPresent(val)) || t('timesheet.expense.errors.mileage_required_for_type');
const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false) || t('timesheet.expense.errors.comment_required');
const commentRequired = (val: unknown) => (typeof val === 'string' ? val.trim().length > 0 : false) || t('timesheet.expense.hints.comment_required');
return {
typeRequired,
@ -24,20 +24,3 @@ export const useExpenseRules = (t: (_key: string) => string) => {
commentRequired,
};
};
export const convertToMonetaryAmount = (amount: number | string): number => {
if (typeof amount === 'number') return Number(amount.toFixed(2));
if (typeof amount === 'string') {
try {
const single_decimal_amount = amount.replace(/\.(?=.*\.)/g, '');
const numbers_only_decimal = single_decimal_amount.replace(/[^0-9.]/g, '');
return Number(numbers_only_decimal);
} catch(error) {
console.error(error);
}
}
return 0;
};

26
src/modules/timesheets/utils/shift.util.ts
View File

@ -1,12 +1,13 @@
import { date, patterns, type ValidationRule } from "quasar";
import type { Shift } from "src/modules/timesheets/models/shift.models";
import type { SchedulePresetShift } from "src/modules/employee-list/models/schedule-presets.models";
import type { Shift, ShiftOption } from "src/modules/timesheets/models/shift.models";
export const isShiftOverlap = (shifts: Shift[]): boolean => {
export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): boolean => {
if (shifts.length < 2) return false;
const parsed_shifts = shifts.map(shift => ({
start: date.extractDate(`${shift.date} ${shift.start_time}`, 'YYYY-MM-DD HH:mm').getTime(),
end: date.extractDate(`${shift.date} ${shift.end_time}`, 'YYYY-MM-DD HH:mm').getTime(),
start: date.extractDate(`2000-01-01 ${shift.start_time}`, 'YYYY-MM-DD HH:mm').getTime(),
end: date.extractDate(`2000-01-01 ${shift.end_time}`, 'YYYY-MM-DD HH:mm').getTime(),
}));
for (let i = 0; i < parsed_shifts.length; i++) {
@ -25,10 +26,21 @@ export const isShiftOverlap = (shifts: Shift[]): boolean => {
return false;
};
export const useShiftRules = (time_required_error: string) => {
const isTimeRequired: ValidationRule<string> = (time_string: string) => (!!time_string && patterns.testPattern.time(time_string)) || time_required_error;
export const useShiftRules = (time_required_error: string, overlap_error_string: string, day_shifts: Shift[]) => {
const isTimeRequiredRule: ValidationRule<string> = (time_string: string) => (!!time_string && patterns.testPattern.time(time_string)) || time_required_error;
const isShiftOverlapRule: ValidationRule<string> = (_time_string: string) => !isShiftOverlap(day_shifts) || overlap_error_string;
return {
isTimeRequired,
isTimeRequiredRule,
isShiftOverlapRule
};
};
export const SHIFT_OPTIONS: ShiftOption[] = [
{ label: 'timesheet.shift.types.REGULAR', value: 'REGULAR', icon: 'wb_sunny', icon_color: 'accent' },
{ label: 'timesheet.shift.types.EVENING', value: 'EVENING', icon: 'bedtime', icon_color: 'orange-5' },
{ label: 'timesheet.shift.types.EMERGENCY', value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-5' },
{ label: 'timesheet.shift.types.VACATION', value: 'VACATION', icon: 'beach_access', icon_color: 'deep-orange-5' },
{ label: 'timesheet.shift.types.HOLIDAY', value: 'HOLIDAY', icon: 'event', icon_color: 'purple-5' },
{ label: 'timesheet.shift.types.SICK', value: 'SICK', icon: 'medication_liquid', icon_color: 'light-blue-6' },
];

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

@ -1,24 +1,22 @@
<script
setup
lang="ts"
>
/* eslint-disable */
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 DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
<script setup lang="ts">
/* eslint-disable */
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 OverviewList from 'src/modules/timesheet-approval/components/overview-list.vue';
import DetailsDialog from 'src/modules/timesheet-approval/components/details-dialog.vue';
import QTableFilters from 'src/modules/shared/components/q-table-filters.vue';
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
import OverviewReport from 'src/modules/timesheet-approval/components/overview-report.vue';
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
const timesheet_approval_api = useTimesheetApprovalApi();
const timesheet_store = useTimesheetStore();
onMounted(async () => {
onMounted(async () => {
await timesheet_approval_api.getTimesheetOverviewsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
});
</script>
<template>
@ -66,20 +64,23 @@
]"
/>
<div class="col-auto row no-wrap flex-center" :class="$q.screen.lt.md ? 'q-mb-md' : ''">
<q-btn-dropdown
<div
class="col-auto row no-wrap flex-center"
:class="$q.screen.lt.md ? 'q-mb-md' : ''"
>
<q-btn
push
rounded
icon="filter_alt"
icon="download"
color="accent"
:label="$q.screen.lt.md ? '' : $t('shared.label.filter')"
:label="$q.screen.lt.md ? '' : $t('shared.label.download')"
class="col-auto q-mr-sm"
@click="timesheet_store.is_report_dialog_open = true"
/>
<QTableFilters v-model:search="timesheet_store.search_filter" />
</div>
</div>
<OverviewReport/>
<OverviewList class="col" />
</q-page>
</template>

20
src/pages/timesheet-page.vue
View File

@ -2,21 +2,14 @@
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/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';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetStore } from 'src/stores/timesheet-store';
const { user } = useAuthStore();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
onMounted(async () => {
await timesheet_api.getTimesheetsByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
});
</script>
@ -33,11 +26,10 @@
/>
<div
class="col"
:style="$q.screen.gt.sm ? 'width: 90vw' : ''"
class="col column fit"
:style="$q.platform.is.mobile && ($q.screen.width < $q.screen.height) ? '' : 'width: 90vw'"
>
<TimesheetWrapper :employee-email="user?.email ?? ''" />
<TimesheetWrapper :employee-email="user?.email ?? ''" class="col"/>
</div>
</q-page>
</template>

2
src/router/index.ts
View File

@ -33,7 +33,7 @@ export default defineRouter(function (/* { store, ssrContext } */) {
const result = await authStore.getProfile() ?? { status: 400, message: 'unknown error occured' };
if ((destinationPage.meta.requiresAuth && !authStore.isAuthorizedUser) || (result.status >= 400 && destinationPage.name !== RouteNames.LOGIN)) {
console.log('no user account found');
console.error('no user account found');
return { name: 'login' };
}
})

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

@ -1,31 +1,32 @@
import { ref } from "vue";
import { date } from "quasar";
import { computed, ref } from "vue";
import { defineStore } from "pinia";
import { useTimesheetStore } from "src/stores/timesheet-store";
import { Expense } from "src/modules/timesheets/models/expense.models";
import { ExpenseService } from "src/modules/timesheets/services/expense-service";
import { date } from "quasar";
export const useExpensesStore = defineStore('expenses', () => {
const timesheet_store = useTimesheetStore();
const is_open = ref(false);
const is_loading = ref(false);
const is_hiding_create_form = ref(false);
const is_showing_create_form = ref(true);
const mode = ref<'create' | 'update' | 'delete'>('create');
const current_expense = ref<Expense>(new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')));
const initial_expense = ref<Expense>(new Expense(date.formatDate(new Date(), 'YYYY-MM-DD')));
const is_save_disabled = computed(() => JSON.stringify(current_expense.value) === JSON.stringify(initial_expense.value))
const open = (): void => {
is_open.value = true;
if (timesheet_store.pay_period !== undefined) {
current_expense.value = new Expense(timesheet_store.pay_period.period_start);
initial_expense.value = new Expense(timesheet_store.pay_period.period_start);
current_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
initial_expense.value = new Expense(date.formatDate(new Date(), 'YYYY-MM-DD'));
}
mode.value = 'create';
}
const close = () => {
is_open.value = false;
is_hiding_create_form.value = false;
is_showing_create_form.value = true;
};
const upsertExpense = async (expense: Expense): Promise<boolean> => {
@ -51,10 +52,11 @@ export const useExpensesStore = defineStore('expenses', () => {
return {
is_open,
is_loading,
is_hiding_create_form,
is_showing_create_form,
mode,
current_expense,
initial_expense,
is_save_disabled,
open,
upsertExpense,
deleteExpenseById,

25
src/stores/schedule-presets.store.ts
View File

@ -1,4 +1,3 @@
/* eslint-disable */
import { ref } from "vue";
import { defineStore } from "pinia";
import { SchedulePresetsService } from "src/modules/employee-list/services/schedule-presets-service";
@ -12,11 +11,17 @@ export const useSchedulePresetsStore = defineStore('schedule_presets_store', ()
const is_manager_open = ref(false);
const openSchedulePresetManager = (preset_id: number) => {
if (preset_id === -1) {
if (preset_id === -1)
current_schedule_preset.value = new SchedulePresetFrontend;
} else {
setCurrentSchedulePreset(preset_id);
else if (schedule_preset_dialog_mode.value === 'copy') {
const preset = schedule_presets.value.find(preset => preset.id === preset_id)!;
const copied_preset = new SchedulePresetFrontend(preset);
copied_preset.id = -1;
copied_preset.name = "";
current_schedule_preset.value = copied_preset;
}
else
setCurrentSchedulePreset(preset_id);
is_manager_open.value = true;
};
@ -26,7 +31,7 @@ export const useSchedulePresetsStore = defineStore('schedule_presets_store', ()
current_schedule_preset.value = new SchedulePresetFrontend;
return;
}
current_schedule_preset.value = new SchedulePresetFrontend(schedule_presets.value.find(preset => preset.id === preset_id)!)
current_schedule_preset.value = new SchedulePresetFrontend(schedule_presets.value.find(preset => preset.id === preset_id))
};
const createSchedulePreset = async (preset: SchedulePreset): Promise<boolean> => {
@ -73,15 +78,6 @@ export const useSchedulePresetsStore = defineStore('schedule_presets_store', ()
}
};
const applySchedulePreset = async (): Promise<boolean> => {
try {
return true;
} catch (error) {
console.error('DEV ERROR || error while building schedule: ', error);
return false
}
};
return {
schedule_presets,
current_schedule_preset,
@ -93,6 +89,5 @@ export const useSchedulePresetsStore = defineStore('schedule_presets_store', ()
updateSchedulePreset,
deleteSchedulePreset,
findSchedulePresetList,
applySchedulePreset,
}
})

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

@ -3,7 +3,7 @@ import { defineStore } from 'pinia';
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
import { timesheetService } from 'src/modules/timesheets/services/timesheet-service';
import type { TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
import type { PayPeriodOverviewResponse, TimesheetOverview } from "src/modules/timesheet-approval/models/timesheet-overview.models";
import type { PayPeriod } from 'src/modules/shared/models/pay-period.models';
import type { Timesheet } from 'src/modules/timesheets/models/timesheet.models';
import type { TimesheetApprovalCSVReportFilters } from 'src/modules/timesheet-approval/models/timesheet-approval-csv-report.models';
@ -17,6 +17,8 @@ export const useTimesheetStore = defineStore('timesheet', () => {
const initial_timesheets = ref<Timesheet[]>([]);
const pay_period_overviews = ref<TimesheetOverview[]>([]);
const pay_period_infos = ref<PayPeriodOverviewResponse>();
const is_report_dialog_open = ref(false);
const is_details_dialog_open = ref(false);
const selected_employee_name = ref<string>();
@ -25,6 +27,22 @@ export const useTimesheetStore = defineStore('timesheet', () => {
const is_approval_grid_mode = ref<boolean>(true);
const pay_period_report = ref();
const getNextOrPreviousPayPeriod = (direction: number) => {
if (!pay_period.value) return;
pay_period.value.pay_period_no += direction;
if (pay_period.value.pay_period_no > 26) {
pay_period.value.pay_period_no = 1;
pay_period.value.pay_year += direction;
}
if (pay_period.value.pay_period_no < 1) {
pay_period.value.pay_period_no = 26;
pay_period.value.pay_year += direction;
}
};
const getPayPeriodByDateOrYearAndNumber = async (date?: string): Promise<boolean> => {
try {
if (date !== undefined) {
@ -70,7 +88,6 @@ export const useTimesheetStore = defineStore('timesheet', () => {
const getTimesheetsByOptionalEmployeeEmail = async (employee_email?: string) => {
if (pay_period.value === undefined) return;
console.log('pay period: ', pay_period.value);
is_loading.value = true;
let response;
@ -81,9 +98,15 @@ export const useTimesheetStore = defineStore('timesheet', () => {
response = await timesheetService.getTimesheetsByPayPeriodAndOptionalEmail(pay_period.value.pay_year, pay_period.value.pay_period_no);
}
selected_employee_name.value = response.employee_fullname;
timesheets.value = response.timesheets;
if (response.success && response.data) {
selected_employee_name.value = response.data.employee_fullname;
timesheets.value = response.data.timesheets;
initial_timesheets.value = unwrapAndClone(timesheets.value);
} else {
selected_employee_name.value = '';
timesheets.value = [];
initial_timesheets.value = [];
}
is_loading.value = false;
} catch (error) {
console.error('There was an error retrieving timesheet details for this employee: ', error);
@ -93,15 +116,12 @@ export const useTimesheetStore = defineStore('timesheet', () => {
}
};
const getPayPeriodReportByYearAndPeriodNumber = async (year: number, period_number: number, report_filters?: TimesheetApprovalCSVReportFilters) => {
const getPayPeriodReport = async (report_filters: TimesheetApprovalCSVReportFilters) => {
try {
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(
year,
period_number,
report_filters
);
if (!pay_period.value) return false;
const response = await timesheetApprovalService.getPayPeriodReportByYearAndPeriodNumber(pay_period.value.pay_year, pay_period.value.pay_period_no, report_filters);
pay_period_report.value = response;
return true;
return response.data;
} catch (error) {
console.error('There was an error retrieving the report CSV: ', error);
// TODO: More in-depth error-handling here
@ -110,21 +130,38 @@ export const useTimesheetStore = defineStore('timesheet', () => {
return false;
};
const openReportDialog = () => {
is_report_dialog_open.value = true;
is_loading.value = true;
is_loading.value = false;
};
const closeReportDialog = () => {
is_report_dialog_open.value = false;
};
return {
is_loading,
is_report_dialog_open,
is_approval_grid_mode,
is_details_dialog_open,
search_filter,
pay_period,
pay_period_overviews,
current_pay_period_overview,
pay_period_infos,
selected_employee_name,
timesheets,
all_current_shifts,
initial_timesheets,
getNextOrPreviousPayPeriod,
getPayPeriodByDateOrYearAndNumber,
getTimesheetOverviews,
getTimesheetsByOptionalEmployeeEmail,
getPayPeriodReportByYearAndPeriodNumber,
getPayPeriodReport,
openReportDialog,
closeReportDialog,
};
});

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

@ -68,7 +68,6 @@ export const useUiStore = defineStore('ui', () => {
Dark.set(user_preferences.value.is_dark_mode ?? "auto");
locale.value = user_preferences.value.display_language;
}
console.log('quasar dark mode: ', q.dark.mode, 'preferences: ', user_preferences.value.is_dark_mode);
}
return {

25
src/utils/boolean-utils.ts Normal file
View File

@ -0,0 +1,25 @@
// export const createDefaultBooleanValue = <T extends PropertyKey>(keys_list: PropertyKey[]): Record<T, boolean> =>
// keys_list.reduce((acc, mod) => {
// acc[mod] = false;
// return acc;
// }, {} as Record<T, boolean>);
// export const toBooleanFromKeys = <T extends PropertyKey>(keys_list: PropertyKey[], arr?: readonly PropertyKey[] | null): Record<T, boolean> => {
// const result = createDefaultBooleanValue(keys_list);
// if (!arr || !Array.isArray(arr)) return result;
// for (const item of arr) {
// if (typeof item !== 'string') continue;
// const trimmed = item.trim();
// if ((keys_list as readonly PropertyKey[]).includes(trimmed)) {
// result[trimmed as T] = true;
// }
// }
// return result;
// }
export const toKeysFromBoolean = <T extends PropertyKey>(boolean_values: Record<T, boolean>): T[] => {
const values_array = Object.entries(boolean_values);
const values = values_array.filter(([_key, value]) => value === true);
return values.map(([key]) => key as T);
}

1
src/utils/date-and-time-utils.ts
View File

@ -11,6 +11,5 @@ export const getCurrentPayPeriod = (today = new Date()): number => {
const current_period = (periods_since_anchor % periods_per_year) + 1;
console.log(current_period);
return current_period;
}

41
src/utils/deep-equal.ts
View File

@ -1,41 +0,0 @@
import { unwrapAndClone } from "src/utils/unwrap-and-clone";
/**
* Internal recursive function comparing two plain values.
*/
const _deepEqualRecursive = (a: unknown, b: unknown): boolean => {
if (a === b) return true;
if (a == null || b == null || typeof a !== "object" || typeof b !== "object") {
return false;
}
// Handle arrays
if (Array.isArray(a) && Array.isArray(b)) {
if (a.length !== b.length) return false;
return a.every((val, i) => _deepEqualRecursive(val, b[i]));
} else if (Array.isArray(a) || Array.isArray(b)) {
return false; // one is array, other is not
}
const aKeys = Object.keys(a as Record<string, unknown>);
const bKeys = Object.keys(b as Record<string, unknown>);
if (aKeys.length !== bKeys.length) return false;
return aKeys.every((key) =>
_deepEqualRecursive(
(a as Record<string, unknown>)[key],
(b as Record<string, unknown>)[key]
)
);
};
/**
* Deep equality check that normalizes reactive objects first.
*/
export const deepEqual = (given: unknown, expected: unknown): boolean => {
const a = unwrapAndClone(given as object);
const b = unwrapAndClone(expected as object);
return _deepEqualRecursive(a, b);
};

31
src/utils/table-grid-FLIP.ts
View File

@ -1,31 +0,0 @@
import { type Ref, nextTick } from 'vue';
export const animateFlip = (container: Ref<HTMLElement | null>) => {
const el = container.value;
if (!el) return;
const children = Array.from(el.children) as HTMLElement[];
// FIRST: record initial positions
const firstRects = children.map(c => c.getBoundingClientRect());
// Do LAST → INVERT → PLAY after DOM update
void nextTick(() => {
const lastRects = children.map(c => c.getBoundingClientRect());
children.forEach((child, i) => {
const dx = firstRects[i]!.left - lastRects[i]!.left;
const dy = firstRects[i]!.top - lastRects[i]!.top;
if (!dx && !dy) return;
child.style.transition = 'none';
child.style.transform = `translate(${dx}px, ${dy}px)`;
requestAnimationFrame(() => {
child.style.transition = 'transform 250ms ease';
child.style.transform = '';
});
});
});
}