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

feat(timesheet): add toggle for work from home for shifts. UI/UX refactor for comment and delete buttons

Browse Source
This commit is contained in:
Nicolas Drolet 2025-12-16 12:03:53 -05:00
parent faa239784b
commit 35d36873e4
5 changed files with 78 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -201,7 +201,8 @@ export default {
REGULAR: "Regular",
SICK: "Sick Leave",
VACATION: "Vacation",
REMOTE: "Remote work",
REMOTE: "Remote",
OFFICE: "Office",
},
fields: {
start: "Start (HH:mm)",

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

@ -203,6 +203,7 @@ export default {
SICK: "Maladie",
VACATION: "Vacance",
REMOTE: "Télétravail",
OFFICE: "Bureau",
},
fields: {
start: "Début (HH:mm)",

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

@ -13,6 +13,10 @@
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'));
@ -50,6 +54,7 @@
/>
<q-expansion-item
v-if="!isApproved"
v-model="expense_store.is_showing_create_form"
hide-expand-icon
dense

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

@ -98,7 +98,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 +168,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 +178,67 @@
>
<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>
>
{{ 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"
>
{{ $t('timesheet.remote_button') }}
</q-tooltip>
</q-toggle>
</template>
</q-select>
</div>
@ -260,26 +304,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,14 +369,15 @@
</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')"
>

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

@ -22,6 +22,8 @@
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';
}>();
@ -65,7 +67,7 @@
<!-- save timesheet changes button -->
<q-btn
v-if="mode === 'normal'"
v-if="mode === 'normal' && !is_timesheets_approved"
push
rounded
:disable="timesheet_store.is_loading || has_shift_errors"
@ -109,6 +111,6 @@
/>
</q-card-actions>
</q-card>
<ExpenseDialog />
<ExpenseDialog :is-approved="is_timesheets_approved"/>
</div>
</template>