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

feat(timesheet): i18n for timesheet page

Browse Source
This commit is contained in:
Matthieu Haineault 2025-09-05 16:07:29 -04:00
parent 29f5760c62
commit d0b0f2df6c
5 changed files with 92 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -249,7 +249,31 @@ export default {
timeSheets: 'Time sheet',
timeSheetValidations: 'Time sheet',
},
timeSheet: {
timesheet: {
//employee's timesheet page
days: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
nav_button: {
calendar_date_picker:'Calendar',
current_week:'This week',
next_week:'Next week',
previous_week:'Previous week',
},
save_button:'Save',
shift_types: 'Shift`s Type',
shiftTypes: {
EMERGENCY: 'Emergency',
EVENING: 'Evening',
HOLIDAY: 'Holiday',
REGULAR: 'Regular',
SICK: 'Sick Leave',
VACATION: 'Vacation',
WORK_FROM_HOME: 'Work from home',
},
fields: {
start:'Start',
end:'End',
},
//rest
timeSheetTab_1: 'Shifts',
timeSheetTab_2: 'Expenses',
templateButton: 'Apply Templates',

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

@ -299,7 +299,31 @@ export default {
noResultsLabel: 'Le filtre n’a révélé aucun résultat',
noDataLabel: 'Je n’ai rien trouvé pour toi',
},
timeSheet: {
timesheet: {
//employee's timesheet page
days: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
nav_button: {
calendar_date_picker:'Calendrier',
current_week:'Semaine actuelle',
next_week:'Prochaine semaine',
previous_week:'Semaine précédente',
},
save_button:'Enregistrer',
shift_types: 'Type de quart',
shiftTypes: {
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',
},
//rest
timeSheetTab_1: 'Quarts de travail',
timeSheetTab_2: 'Dépenses',
templateButton: 'Appliquer le modèle',

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

@ -27,7 +27,7 @@
</script>
<template>
<div class="row q-mb-lg q-mt-lg col-12" >
<div class="row q-mb-lg q-mt-lg" >
<q-btn
push rounded
icon="keyboard_arrow_left"
@ -40,7 +40,7 @@
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
> Semaine précédante
> {{ $t( 'timesheet.nav_button.previous_week' )}}
</q-tooltip>
</q-btn>
<q-btn
@ -55,7 +55,7 @@
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
>Cette Semaine
>{{ $t('timesheet.nav_button.current_week') }}
</q-tooltip>
</q-btn>
<q-btn
@ -70,7 +70,7 @@
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
> calendrier
>{{ $t('timesheet.nav_button.calendar_date_picker') }}
</q-tooltip>
</q-btn>
<q-btn
@ -85,7 +85,7 @@
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
> Semaine suivante
> {{ $t('timesheet.nav_button.next_week') }}
</q-tooltip>
</q-btn>
</div>

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

@ -9,6 +9,7 @@ import TimesheetNavigation from './timesheet-navigation.vue';
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;
@ -18,6 +19,8 @@ type ShiftRow = {
is_approved: boolean;
}
const { t, tm } = useI18n();
const emit = defineEmits<{
(e: 'save', payload: CreateShiftPayload[]): void;
}>();
@ -25,10 +28,15 @@ const emit = defineEmits<{
const timesheet_store = useTimesheetStore();
const timesheet_api = useTimesheetApi();
const shift_type = ref<string[]> (['Régulier','Télétravail', 'Soir', 'Urgence', 'Férier', 'Vacance', 'Maladie']);
const days = ['Dimanche', 'Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'];
const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
const SHIFT_KEY = ['REGULAR','WORK_FROM_HOME', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
const days = computed(()=> (tm('timesheet.days') as string[]) ?? []);
const shift_options = computed(()=> SHIFT_KEY.map(key => ({ value: key, label: t(`timeSheet.shiftType.${key}`)})));
const shift_type = computed(() => SHIFT_KEY.map(key => (`timesheet.shiftTypes.${key}`)));
const empty_row = { type: '', start_time: '', end_time: '', comment: '', is_approved: false };
//Week dates
const week_dates = computed(() => {
const start_date = timesheet_store.current_timesheet.start_day;
@ -49,7 +57,7 @@ const week_dates = computed(() => {
//filling timesheet with shifts
const rows = ref<ShiftRow[]>(
days.map((_,index) => {
days.value.map((_,index) => {
const date_ISO = week_dates.value[index];
const shift = timesheet_store.current_timesheet.shifts.find(sh => sh.date === date_ISO);
return shift ? {
@ -124,7 +132,7 @@ watch(
() => [timesheet_store.current_timesheet.start_day, timesheet_store.current_timesheet.shifts],
() => {
const dates = week_dates.value;
rows.value = days.map((_, idx)=> {
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}
@ -136,7 +144,7 @@ watch(
</script>
<template >
<template>
<q-card class="q-pa-md q-ma-md">
<q-dialog
v-model="show_comment"
@ -144,13 +152,15 @@ watch(
transition-hide="fade"
persistent
>
<!-- comment popup -->
<TimesheetShiftComment
:comment-string="selected_row?.comment ?? ''"
@click-save="setComment"
@click-close="show_comment = false"
/>
</q-dialog>
<q-form autofocus class="q-ml-xl">
<q-form autofocus>
<!-- navigation buttons -->
<TimesheetNavigation
:is-disabled="timesheet_store.is_loading"
:is-previous-limit="is_calendar_limit"
@ -160,13 +170,15 @@ watch(
@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-->
<span class="text-weight-bold text-primary col-1">{{ days[index] }}</span>
<!-- type selection -->
<q-select
v-model="row.type"
:options="shift_type"
:readonly="row.is_approved"
class="col-2"
label="Type de Quart"
class="col-1"
:label="$t('timesheet.shift_types')"
dense
filled
color="primary"
@ -175,11 +187,12 @@ watch(
map-options
hide-dropdown-icon
/>
<!-- start time input -->
<q-input
v-model="row.start_time"
:readonly="row.is_approved"
class="col-2"
label="Entrée"
class="col-auto"
:label="$t('timesheet.fields.start')"
dense
filled
color="primary"
@ -187,53 +200,54 @@ watch(
step="300"
standout="bg-primary text-white"
/>
<!-- end time input -->
<q-input
v-model="row.end_time"
:readonly="row.is_approved"
class="col-2"
label="Sortie"
class="col-auto"
:label="$t('timesheet.fields.end')"
dense
filled
clearable
color="primary"
type="time"
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-1"
class="col-auto"
@click="onClickComment(index)"
/>
<!-- reset entries icon -->
<q-btn
icon="cleaning_services"
flat
dense
class="q-pa-none q-ma-none justify-right"
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'"
@click="clearRow(index)"
/>
</div>
</q-form>
<q-card-actions align="right">
<!-- save button -->
<q-btn
color="primary"
icon="save_alt"
class="col-1"
class="col-1 "
rounded
push
push
@click="saveWeek"
>
<q-tooltip
anchor="top middle"
self="center middle"
class="bg-primary text-uppercase text-weight-bold"
>Sauvegarder
>{{ $t('timesheet.save_button') }}
</q-tooltip>
</q-btn>
</q-card-actions>
</q-form>
</q-card>
</template>

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

@ -55,7 +55,7 @@ import type { CreateShiftPayload } from '../types/timesheet-shift-interface';
{{ timesheet_label.start_date }}
</div>
<div class="text-grey-8 text-weight-bold text-uppercase q-mx-md">
{{ $t('timeSheet.dateRangesTo') }}
{{ $t('timesheet.dateRangesTo') }}
</div>
<div class="text-primary text-h6 text-uppercase">
{{ timesheet_label.end_date }}