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

feat(timesheet): added remote_work, add_shift, add_expense btns,

Browse Source
This commit is contained in:
Matthieu Haineault 2025-09-08 16:14:57 -04:00
parent d0b0f2df6c
commit e7dfe6db00
10 changed files with 273 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -259,19 +259,23 @@ export default {
previous_week:'Previous week',
},
save_button:'Save',
shift_types: 'Shift`s Type',
shiftTypes: {
cancel_button:'Cancel',
remote_button: 'Remote work',
add_shift:'Add Shift',
shift_types_label: 'Shift`s Type',
shift_types: {
EMERGENCY: 'Emergency',
EVENING: 'Evening',
HOLIDAY: 'Holiday',
REGULAR: 'Regular',
SICK: 'Sick Leave',
VACATION: 'Vacation',
WORK_FROM_HOME: 'Work from home',
},
fields: {
start:'Start',
end:'End',
header_comment:'Shift`s comment',
textarea_comment: 'Leave a comment here',
},
//rest
timeSheetTab_1: 'Shifts',

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

@ -309,19 +309,24 @@ export default {
previous_week:'Semaine précédente',
},
save_button:'Enregistrer',
shift_types: 'Type de quart',
shiftTypes: {
cancel_button:'Annuler',
remote_button: 'Télétravail',
add_shift:'Ajouter une quart',
shift_types_label: 'Type de quart',
shift_types: {
EMERGENCY: 'Urgence',
EVENING: 'Soir',
HOLIDAY: 'Férier',
SICK: 'Absence',
REGULAR: 'Régulier',
VACATION: 'Vacance',
WORK_FROM_HOME: 'Télétravail',
},
fields: {
start:'Entrée',
end:'Sortie',
header_comment:'Commentaire du Quart',
textarea_comment:'Laissez votre commentaire',
},
//rest
timeSheetTab_1: 'Quarts de travail',

8
src/modules/timesheets/components/shift/timesheet-shift-comment.vue
View File

@ -26,7 +26,7 @@ const save = ()=> {
<template>
<q-card class="full-width">
<div class="row items-center justify-between q-pa-md">
<div class="text-h6">Commentaire du quart</div>
{{ $t('timesheet.fields.header_comment') }}
</div>
<q-separator/>
<div class="q-pa-md">
@ -35,7 +35,7 @@ const save = ()=> {
type="textarea"
autogrow
filled
label="Votre commentaire"
:label= "$t('timesheet.fields.textarea_comment')"
:counter=true
maxlength="512"
color="primary"
@ -45,11 +45,11 @@ const save = ()=> {
<q-btn
color="secondary"
text-color="grey-8"
label="close"
:label="$t('timesheet.cancel_button')"
@click="close"
/>
<q-btn
label="Sauvegarder"
:label="$t('timesheet.save_button')"
color="primary"
@click="save"
/>

0
src/modules/timesheets/components/timesheet/timesheet-expense-list.vue
View File

5
src/modules/timesheets/components/timesheet/timesheet-navigation.vue
View File

@ -28,6 +28,7 @@
<template>
<div class="row q-mb-lg q-mt-lg" >
<!-- navigation to previous week -->
<q-btn
push rounded
icon="keyboard_arrow_left"
@ -43,6 +44,7 @@
> {{ $t( 'timesheet.nav_button.previous_week' )}}
</q-tooltip>
</q-btn>
<!-- navigation to current week -->
<q-btn
push rounded
icon="today"
@ -58,6 +60,7 @@
>{{ $t('timesheet.nav_button.current_week') }}
</q-tooltip>
</q-btn>
<!-- navigation through calendar date picker -->
<q-btn
push rounded
icon="calendar_month"
@ -73,6 +76,7 @@
>{{ $t('timesheet.nav_button.calendar_date_picker') }}
</q-tooltip>
</q-btn>
<!-- navigation to next week -->
<q-btn
push rounded
icon="keyboard_arrow_right"
@ -90,6 +94,7 @@
</q-btn>
</div>
<!-- date picker calendar -->
<q-dialog v-model="is_showing_calendar_picker" transition-show="jump-down" transition-hide="jump-up" position="top">
<q-date
v-model="calendar_date"

64
src/modules/timesheets/components/timesheet/timesheet-save-payload.vue Normal file
View File

@ -0,0 +1,64 @@
<script setup lang="ts">
/* eslint-disable */
import { computed } from 'vue';
import type { CreateShiftPayload, Shift } from '../../types/timesheet-shift-interface';
const props = defineProps<{
rows: Shift[];
week_dates: string[];
}>();
const emit = defineEmits<{
(e: 'save', payload: CreateShiftPayload[]): void;
}>();
const buildPayload = (): CreateShiftPayload[] => {
const dates = props.week_dates;
if(!Array.isArray(dates) || dates.length === 0) return [];
return props.rows.flatMap((row, idx) => {
const date = dates[idx];
const has_data = !!(row.type || row.start_time || row.end_time || row.comment);
if(!date || !has_data) return [];
const item: CreateShiftPayload = {
date,
type: row.type,
start_time: row.start_time,
end_time: row.end_time,
is_remote: row.is_remote,
};
if(row.comment) item.description = row.comment;
return[item];
})
};
const payload = computed(buildPayload);
const canSave = computed(()=> payload.value.length > 0);
const saveWeek = () => {
emit('save', payload.value);
}
</script>
<template>
<!-- save button -->
<q-btn
color="primary"
icon="save_alt"
class="col-1"
push
rounded
:disable="!canSave"
@click="saveWeek"
>
<q-tooltip
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
>{{ $t('timesheet.save_button') }}
</q-tooltip>
</q-btn>
</template>

243
src/modules/timesheets/components/timesheet/timesheet-shift-form.vue
View File

@ -1,42 +1,29 @@
<!-- list of days with shifts infos-->
<script setup lang="ts">
/* eslint-disable */
import { computed, ref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import TimesheetShiftComment from '../shift/timesheet-shift-comment.vue';
import TimesheetNavigation from './timesheet-navigation.vue';
import TimesheetSavePayload from './timesheet-save-payload.vue';
import type { Shift } from '../../types/timesheet-shift-interface';
import type { CreateShiftPayload } from '../../types/timesheet-shift-interface';
import { useTimesheetApi } from '../../composables/use-timesheet-api';
import { date as qdate } from 'quasar';
import { useI18n } from 'vue-i18n';
type ShiftRow = {
type: string;
start_time: string;
end_time: string;
comment: string;
is_approved: boolean;
}
const { t, tm } = useI18n();
const emit = defineEmits<{
(e: 'save', payload: CreateShiftPayload[]): void;
}>();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const SHIFT_KEY = ['REGULAR','WORK_FROM_HOME', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
const days = computed(()=> (tm('timesheet.days') as string[]) ?? []);
const { t, tm, locale } = useI18n();
const shift_options = computed(()=> SHIFT_KEY.map(key => ({ value: key, label: t(`timeSheet.shiftType.${key}`)})));
const SHIFT_KEY = ['REGULAR', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
const days = computed(()=> {
void locale.value;
return (tm('timesheet.days') as string[]) ?? [];
});
const shift_type = computed(() => SHIFT_KEY.map(key => (`timesheet.shiftTypes.${key}`)));
const shift_options = computed(()=> {
void locale.value;
return SHIFT_KEY.map(key => ({ value: key, label: t(`timesheet.shift_types.${key}`)}))
});
const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false, is_remote: false };
//Week dates
const week_dates = computed(() => {
const start_date = timesheet_store.current_timesheet.start_day;
@ -46,17 +33,22 @@ const week_dates = computed(() => {
if(!mm) return [];
const year = Number(mm[1]), month = Number(mm[2]), day = Number(mm[3])
const base = new Date(year, month - 1, day);
const yyyymmdd = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2,'0')}-${String(date.getDate()).padStart(2,'0')}`;
const base = new Date(Date.UTC(year, month - 1, day));
const yyyymmdd = (date: Date) => {
const yyyy = date.getFullYear();
const mm = String(date.getUTCMonth() + 1).padStart(2,'0');
const dd = String(date.getUTCDate()).padStart(2,'0');
return `${yyyy}-${mm}-${dd}`};
return Array.from({length:7 }, (_, i) => {
const date = new Date(base);
date.setDate(base.getDate() + i);
date.setUTCDate(base.getDate() + i);
return yyyymmdd(date);
});
});
//filling timesheet with shifts
const rows = ref<ShiftRow[]>(
const rows = ref<Shift[]>(
days.value.map((_,index) => {
const date_ISO = week_dates.value[index];
const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === date_ISO);
@ -66,31 +58,21 @@ const rows = ref<ShiftRow[]>(
end_time: shift.end_time || '',
comment: shift.description || '',
is_approved: !!shift.is_approved,
is_remote: !!shift.is_remote,
}
: { ...empty_row };
})
);
const hasData = (row: Shift) => !!(row.type || row.start_time || row.end_time || row.comment);
const show_comment = ref(false);
const selected_index = ref<number | null>(null);
const selected_row = computed<ShiftRow | undefined>(()=>
const selected_row = computed<Shift | undefined>(()=>
selected_index.value != null ? rows.value[selected_index.value] : undefined
);
const is_calendar_limit = computed( () => {
return timesheet_store.current_pay_period.pay_year === 2024 &&
timesheet_store.current_pay_period.pay_period_no <= 1;
});
const onDateSelected = async (date_string: string) => {
const when = qdate.extractDate(date_string, 'YYYY-MM-DD');
timesheet_api.getCurrentWeekTimesheetOverview(when);
};
const setComment = (comment: string) => {
if(selected_row.value) {
selected_row.value.comment = comment;
}
if(selected_row.value) selected_row.value.comment = comment;
show_comment.value = false;
}
@ -99,34 +81,12 @@ const onClickComment = (index: number)=> {
show_comment.value = true;
};
const buildPayload = (): CreateShiftPayload[] => {
const dates = week_dates.value;
if(!Array.isArray(dates) || dates.length === 0) return [];
return rows.value.flatMap((row, idx) => {
const date = dates[idx];
const has_data = !!(row.type || row.start_time || row.end_time || row.comment);
if(!date || !has_data) return [];
const item: CreateShiftPayload = {
date,
type: row.type,
start_time: row.start_time,
end_time: row.end_time,
};
if(row.comment) item.description = row.comment;
return[item];
})
};
const saveWeek = () => {
const payload = buildPayload();
emit('save', payload);
const clearRow = (index: number) => {
rows.value[index] = { ...empty_row };
}
const clearRow = (idx: number) => {
rows.value[idx] = { ...empty_row };
}
const emit = defineEmits<{ (e: 'save', payload: CreateShiftPayload[]): void }>();
watch(
() => [timesheet_store.current_timesheet.start_day, timesheet_store.current_timesheet.shifts],
@ -135,8 +95,20 @@ watch(
rows.value = days.value.map((_, idx)=> {
const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === dates[idx]);
return shift
? { type: shift.bank_type || '', start_time: shift.start_time || '', end_time: shift.end_time || '', comment: shift.description || '', is_approved: shift.is_approved}
: { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
? { type: shift.bank_type || '',
start_time: shift.start_time || '',
end_time: shift.end_time || '',
comment: shift.description || '',
is_approved: shift.is_approved,
is_remote: shift.is_remote,
}
: { type: '',
start_time: '',
end_time: '',
comment: '',
is_approved: false,
is_remote: false
};
});
},
{ deep: true, immediate: true }
@ -145,7 +117,7 @@ watch(
</script>
<template>
<q-card class="q-pa-md q-ma-md">
<q-card class="bg-transparent q-pa-md q-ma-md">
<q-dialog
v-model="show_comment"
transition-show="fade"
@ -159,33 +131,46 @@ watch(
@click-close="show_comment = false"
/>
</q-dialog>
<q-form autofocus>
<!-- navigation buttons -->
<TimesheetNavigation
:is-disabled="timesheet_store.is_loading"
:is-previous-limit="is_calendar_limit"
@date-selected="onDateSelected"
@pressed-previous-button="timesheet_api.previous_week()"
@pressed-current-button="timesheet_api.getCurrentWeekTimesheetOverview()"
@pressed-next-button="timesheet_api.next_week()"
/>
<div v-for="row, index in rows" :key="index" class="row q-gutter-sm q-mb-sm">
<!--Week days-->
<q-form id="timesheet_shifts" autofocus class="bg-white q-pa-sm q-pt-lg rounded-10">
<div v-for="(row, index) in rows" :key="week_dates[index] ?? index" class="q-gutter-sm q-mb-sm" :class="$q.screen.lt.md ? 'column' : 'row'" >
<!--Week days-->
<span class="text-weight-bold text-primary col-1">{{ days[index] }}</span>
<!-- remote work toggle -->
<q-toggle
v-model="row.is_remote"
:disable="row.is_approved"
color="primary"
checked-icon="home_work"
unchecked-icon="business"
icon="home_work"
class="col-auto q-ml-sm"
>
<q-tooltip
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
>{{ $t('timesheet.remote_button') }}
</q-tooltip>
</q-toggle>
<!-- type selection -->
<q-select
v-model="row.type"
:options="shift_type"
:options="shift_options"
:readonly="row.is_approved"
class="col-1"
:label="$t('timesheet.shift_types')"
class="col-3"
:label="$t('timesheet.shift_types_label')"
dense
filled
color="primary"
standout="bg-primary text-white"
options-dense
map-options
hide-dropdown-icon
emit-value
map-options
option-value="value"
option-label="label"
hide-dropdown-icon
/>
<!-- start time input -->
<q-input
@ -213,41 +198,59 @@ watch(
step="300"
standout="bg-primary text-white"
/>
<!-- comment icon -->
<q-btn
:icon="row.comment.length > 0 ? 'announcement':'chat_bubble_outline'"
:color="row.comment.length > 0 ? 'primary' : 'grey-8'"
:disable="row.is_approved"
flat
class="col-auto"
@click="onClickComment(index)"
/>
<!-- reset entries icon -->
<div class="col-3">
<!-- comment button -->
<q-btn
:icon="row.comment.length > 0 ? 'announcement':'chat_bubble_outline'"
:color="row.comment.length > 0 ? 'primary' : 'grey-8'"
:disable="row.is_approved"
flat
class="col-auto"
@click="onClickComment(index)"
/>
<!-- expense button -->
<q-btn
:icon="row.comment.length > 0 ? 'receipt_long':'attach_money'"
flat
dense
class="q-pa-none q-ma-sm col-1"
:color="hasData(row) ? 'primary' : 'grey-8'"
@click="clearRow(index)"
/>
</div>
<!-- reset entries button -->
<q-btn
icon="cleaning_services"
flat
dense
class="q-pa-none q-ma-none justify-right col-1"
:color="row.type.length || row.start_time.length || row.end_time.length || row.comment.length > 0 ? 'primary' : 'accent'"
class="q-pa-none q-ma-sm col-auto"
:color="hasData(row) ? 'primary' : 'grey-4'"
@click="clearRow(index)"
/>
<!-- add one more shift buttons -->
<q-btn
icon="more_time"
flat
dense
class="q-pa-none q-ma-sm col-auto"
color="primary"
>
<q-tooltip
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
>{{ $t('timesheet.add_shift') }}
</q-tooltip>
</q-btn>
</div>
<!-- save button -->
<q-btn
color="primary"
icon="save_alt"
class="col-1 "
rounded
push
@click="saveWeek"
>
<q-tooltip
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
>{{ $t('timesheet.save_button') }}
</q-tooltip>
</q-btn>
<TimesheetSavePayload
:week_dates="week_dates"
:rows="rows"
@save="(payload) => emit('save', payload)"
/>
</q-form>
</q-card>
</q-card>
</template>

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

@ -1,53 +1,59 @@
<script setup lang="ts">
import { date } from 'quasar';
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useTimesheetApi } from '../composables/use-timesheet-api';
import { computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import TimesheetShiftForm from '../components/timesheet/timesheet-shift-form.vue';
import type { CreateShiftPayload } from '../types/timesheet-shift-interface';
import TimesheetNavigation from '../components/timesheet/timesheet-navigation.vue';
import { date as qdate } from 'quasar';
const { locale } = useI18n();
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const { this_week, saveTimesheetShifts } = timesheet_api;
const { locale } = useI18n();
const timesheet_store = useTimesheetStore();
const { this_week, saveTimesheetShifts } = useTimesheetApi();
onMounted(async () => {
await this_week();
});
onMounted(async () => {
await this_week();
});
const date_options: Intl.DateTimeFormatOptions = {
day: 'numeric',
month: 'long',
year: 'numeric',
};
const date_options: Intl.DateTimeFormatOptions = {
day: 'numeric',
month: 'long',
year: 'numeric',
};
const timesheet_label = computed(() => {
const dates = timesheet_store.current_timesheet.label.split('.');
const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(qdate.extractDate(dates[0] as string, 'YYYY-MM-DD'));
const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(qdate.extractDate(dates[1] as string, 'YYYY-MM-DD'));
const timesheet_label = computed(() => {
const dates = timesheet_store.current_timesheet.label.split('.');
const start_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[0] as string, 'YYYY-MM-DD'));
const end_date = new Intl.DateTimeFormat(locale.value, date_options).format(date.extractDate(dates[1] as string, 'YYYY-MM-DD'));
if ( dates.length === 1) {
return {
start_date: '_',
end_date: '_',
}
}
return { start_date, end_date };
});
if ( dates.length === 1) {
return { start_date: '_', end_date: '_', }
}
return { start_date, end_date };
});
const onSaveShifts = async (payload: CreateShiftPayload[]) => {
await saveTimesheetShifts(payload);
};
const onSaveShifts = async (payload: CreateShiftPayload[]) => {
await saveTimesheetShifts(payload);
};
const is_calendar_limit = computed( () => {
return timesheet_store.current_pay_period.pay_year === 2024 &&
timesheet_store.current_pay_period.pay_period_no <= 1;
});
const onDateSelected = async (date_string: string) => {
const when = qdate.extractDate(date_string, 'YYYY-MM-DD');
await timesheet_api.getCurrentWeekTimesheetOverview(when);
};
</script>
<template>
<q-page
padding
class="q-pa-md bg secondary"
>
<div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
<q-page padding class="q-pa-md bg-secondary" >
<div class="text-h4 row justify-center q-mt-lg text-uppercase text-weight-bolder text-grey-8 col-auto">
{{ $t('pageTitles.timeSheets') }}
</div>
<div class="row items-center justify-center q-py-none q-my-none">
@ -59,11 +65,22 @@ import type { CreateShiftPayload } from '../types/timesheet-shift-interface';
</div>
<div class="text-primary text-h6 text-uppercase">
{{ timesheet_label.end_date }}
</div>
</div>
</div>
<q-card class="q-mt-md">
<q-inner-loading :showing="timesheet_store.is_loading"/>
<TimesheetShiftForm @save="onSaveShifts"/>
</q-card>
<div>
<TimesheetNavigation
:is-disabled="timesheet_store.is_loading"
:is-previous-limit="is_calendar_limit"
@date-selected="onDateSelected"
@pressed-previous-button="timesheet_api.previous_week()"
@pressed-current-button="timesheet_api.getCurrentWeekTimesheetOverview()"
@pressed-next-button="timesheet_api.next_week()"
/>
<q-card flat class="q-mt-md bg-secondary">
<TimesheetShiftForm @save="onSaveShifts" class="col-12"/>
<q-inner-loading :showing="timesheet_store.is_loading" color="primary"/>
</q-card>
</div>
<!-- navigation buttons -->
</q-page>
</template>

1
src/modules/timesheets/types/timesheet-interface.ts
View File

@ -14,6 +14,7 @@ type Shifts = {
end_time: string;
description: string;
is_approved: boolean;
is_remote: boolean;
}
type Expenses = {

8
src/modules/timesheets/types/timesheet-shift-interface.ts
View File

@ -4,6 +4,7 @@ export type CreateShiftPayload = {
start_time: string;
end_time: string;
description?: string;
is_remote?: boolean;
};
export type CreateWeekShiftPayload = {
@ -11,7 +12,10 @@ export type CreateWeekShiftPayload = {
}
export type Shift = {
type: string;
start_time: string;
end_time: string;
comment: string;
is_approved: boolean;
start: string;
end: string;
is_remote: boolean;
}