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

Merge pull request 'dev/nicolas/timesheet-staging-prep' (#33) from dev/nicolas/timesheet-staging-prep into main

Browse Source 
Reviewed-on: Targo/targo_frontend#33
This commit is contained in:
matthieuh 2025-12-18 10:21:11 -05:00
commit 7c2b345600
33 changed files with 965 additions and 919 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;
}

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

@ -176,16 +176,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",
@ -202,7 +200,8 @@ export default {
REGULAR: "Regular",
SICK: "Sick Leave",
VACATION: "Vacation",
REMOTE: "Remote work",
REMOTE: "Remote",
OFFICE: "Office",
},
fields: {
start: "Start (HH:mm)",
@ -239,8 +238,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",

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

@ -177,16 +177,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",
@ -204,6 +202,7 @@ export default {
SICK: "Maladie",
VACATION: "Vacance",
REMOTE: "Télétravail",
OFFICE: "Bureau",
},
fields: {
start: "Début (HH:mm)",
@ -240,6 +239,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",

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>

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

@ -114,7 +114,7 @@
<q-input
v-model="filters.search_bar_string"
standout
outlined
dense
rounded
color="accent"

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

@ -38,10 +38,7 @@ export const useEmployeeListApi = () => {
weekday.is_error = isShiftOverlap(weekday.shifts);
}
console.log('current preset: ', preset);
if (preset.weekdays.some(weekday => weekday.is_error)) {
console.log('overlap!');
return;
}

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>

118
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);
@ -40,12 +39,8 @@
{ 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>

219
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>
<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>
</div>
</template>
<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>

95
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>
<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>
</div>
</template>
<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;
}

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

@ -2,6 +2,7 @@ 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> => {
@ -19,13 +20,23 @@ export const timesheetService = {
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;
};

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

@ -1,6 +1,6 @@
import { date, patterns, type ValidationRule } from "quasar";
import type { SchedulePresetShift } from "src/modules/employee-list/models/schedule-presets.models";
import type { Shift } from "src/modules/timesheets/models/shift.models";
import type { Shift, ShiftOption } from "src/modules/timesheets/models/shift.models";
export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): boolean => {
if (shifts.length < 2) return false;
@ -10,16 +10,12 @@ export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): boolean
end: date.extractDate(`2000-01-01 ${shift.end_time}`, 'YYYY-MM-DD HH:mm').getTime(),
}));
console.log('parsed_shifts: ', parsed_shifts);
for (let i = 0; i < parsed_shifts.length; i++) {
for (let j = i + 1; j < parsed_shifts.length; j++) {
const parsed_shift_a = parsed_shifts[i];
const parsed_shift_b = parsed_shifts[j];
if (parsed_shift_a === undefined || parsed_shift_b === undefined) continue;
console.log('times(a start, b start, a end, b end): ', parsed_shift_a.start, parsed_shift_b.start, parsed_shift_a.end, parsed_shift_b.end);
console.log('result: ', Math.max(parsed_shift_a.start, parsed_shift_b.start) < Math.min(parsed_shift_a.end, parsed_shift_b.end))
if (Math.max(parsed_shift_a.start, parsed_shift_b.start) < Math.min(parsed_shift_a.end, parsed_shift_b.end)) {
return true; // overlap found
@ -30,10 +26,21 @@ export const isShiftOverlap = (shifts: Shift[] | SchedulePresetShift[]): 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' },
];

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,

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

@ -27,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) {
@ -72,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;
@ -83,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);
@ -135,6 +156,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
timesheets,
all_current_shifts,
initial_timesheets,
getNextOrPreviousPayPeriod,
getPayPeriodByDateOrYearAndNumber,
getTimesheetOverviews,
getTimesheetsByOptionalEmployeeEmail,

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 {

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);
};