feat(timesheet): add toggle for work from home for shifts. UI/UX refactor for comment and delete buttons
This commit is contained in:
parent
faa239784b
commit
35d36873e4
|
|
@ -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)",
|
||||
|
|
|
|||
|
|
@ -203,6 +203,7 @@ export default {
|
|||
SICK: "Maladie",
|
||||
VACATION: "Vacance",
|
||||
REMOTE: "Télétravail",
|
||||
OFFICE: "Bureau",
|
||||
},
|
||||
fields: {
|
||||
start: "Début (HH:mm)",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
{ 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');
|
||||
|
|
@ -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')"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user