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

feat(timesheet): added create-edit-delete shifts

Browse Source
This commit is contained in:
Matthieu Haineault 2025-09-16 09:17:30 -04:00
parent 123befb5f8
commit a252ad98ef
6 changed files with 483 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -261,7 +261,14 @@ export default {
save_button:'Save',
cancel_button:'Cancel',
remote_button: 'Remote work',
delete_button: 'Delete',
delete_confirmation_msg: 'Do you want to delete this shift completly?',
add_shift:'Add Shift',
edit_shift: 'Edit shift',
delete_shift: 'Delete shift',
shift_types_label: 'Shift`s Type',
shift_types: {
EMERGENCY: 'Emergency',
@ -271,10 +278,11 @@ export default {
REGULAR: 'Regular',
SICK: 'Sick Leave',
VACATION: 'Vacation',
REMOTE: 'Remote work',
},
fields: {
start:'Start',
end:'End',
start:'Start (HH:mm)',
end:'End (HH:mm)',
header_comment:'Shift`s comment',
textarea_comment: 'Leave a comment here',
},

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

@ -311,8 +311,14 @@ export default {
save_button:'Enregistrer',
cancel_button:'Annuler',
remote_button: 'Télétravail',
delete_button: 'Supprimer',
delete_confirmation_msg: 'Voulez-vous supprimer complètement ce quart?',
add_shift:'Ajouter une quart',
edit_shift: 'Modifier un quart',
delete_shift: 'Supprimer un quart',
shift_types_label: 'Type de quart',
shift_types: {
EMERGENCY: 'Urgence',
@ -322,10 +328,11 @@ export default {
SICK: 'Absence',
REGULAR: 'Régulier',
VACATION: 'Vacance',
REMOTE: 'Télétravail',
},
fields: {
start:'Entrée',
end:'Sortie',
start:'Entrée (HH:mm)',
end:'Sortie (HH:mm)',
header_comment:'Commentaire du Quart',
textarea_comment:'Laissez votre commentaire',
},

76
src/modules/timesheets/components/timesheet/timesheet-details-shifts-row.vue
View File

@ -1,37 +1,27 @@
<script setup lang="ts">
import type { Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
import { computed, ref } from 'vue';
import ShiftComment from '../shift/shift-comment.vue';
import { computed } from 'vue';
/* eslint-disable */
const props = defineProps<{
shift: Shift;
}>();
const emit = defineEmits<{
'save-comment': [payload: { comment: string; shift_id?: string | number; date?: string }];
'save-comment' : [payload: { comment: string; shift: Shift }];
'request-edit' : [payload: { shift: Shift }];
'request-delete': [payload: { shift: Shift }];
}>();
const getComment = computed(()=> (props.shift as any).description || (props.shift as any).comment || '');
const show_comment = ref(false);
const openComment = ()=> { show_comment.value = true; };
const closeComment = ()=> { show_comment.value = false; };
const handleSave = (comment: string)=> {
emit('save-comment', {
comment,
shift_id: (props.shift as any).id,
date:(props.shift as any).date
});
show_comment.value = false;
}
const hasComment = computed(()=> {
const has_comment = computed(()=> {
const comment = (props.shift as any).description ?? (props.shift as any).comment ?? '';
return typeof comment === 'string' && comment.trim().length > 0;
})
const comment_icon = computed(()=> (hasComment.value ? 'announcement' : 'chat_bubble_outline'));
const comment_color = computed(()=> (hasComment.value ? 'primary' : 'grey-8'));
const comment_icon = computed(()=> (has_comment.value ? 'announcement' : 'chat_bubble_outline'));
const comment_color = computed(()=> (has_comment.value ? 'primary' : 'grey-8'));
const getShiftColor = (type: string): string => {
const get_shift_color = (type: string): string => {
switch(type) {
case 'REGULAR': return 'secondary';
case 'EVENING': return 'warning';
@ -44,13 +34,16 @@ import ShiftComment from '../shift/shift-comment.vue';
}
};
const getTextColor = (type: string): string => {
const get_text_color = (type: string): string => {
switch(type) {
case 'REGULAR': return 'grey-8';
case '': return 'transparent';
default: return 'white';
}
}
const on_click_edit = () => emit('request-edit', { shift: props.shift });
const on_click_delete = () => emit('request-delete', { shift: props.shift });
</script>
<template>
@ -58,12 +51,13 @@ import ShiftComment from '../shift/shift-comment.vue';
horizontal
class="q-pa-none text-uppercase text-center items-center cursor-pointer rounded-10"
style="line-height: 1;"
@click.stop="on_click_edit"
>
<!-- punch-in timestamps -->
<q-card-section class="q-pa-none col">
<q-item-label
class="text-weight-bolder q-pa-xs rounded-5"
:class="'bg-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(props.shift.type)"
:class="'bg-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(props.shift.type)"
style="font-size: 1.5em; line-height: 80% !important;"
>
{{ props.shift.start_time }}
@ -95,7 +89,7 @@ import ShiftComment from '../shift/shift-comment.vue';
<q-card-section class="q-pa-none col">
<q-item-label
class="text-weight-bolder text-white q-pa-xs rounded-5"
:class="'bg-' + getShiftColor(props.shift.type) + ' text-' + getTextColor(props.shift.type)"
:class="'bg-' + get_shift_color(props.shift.type) + ' text-' + get_text_color(props.shift.type)"
style="font-size: 1.5em; line-height: 80% !important;"
>
{{ props.shift.end_time }}
@ -106,17 +100,15 @@ import ShiftComment from '../shift/shift-comment.vue';
<q-card-section
class="col q-pa-none text-right"
>
<!-- chat_bubble_outline or announcement -->
<q-btn
<!-- comment btn -->
<q-icon
v-if="props.shift.type !== ''"
flat
dense
:name="comment_icon"
:color="comment_color"
:icon="comment_icon"
class="q-pa-none"
@click="openComment"
class="q-pa-none q-mx-xs"
size="sm"
/>
<!-- insert_drive_file or request_quote -->
<!-- expenses btn -->
<q-btn
v-if="props.shift.type !== ''"
flat
@ -125,19 +117,17 @@ import ShiftComment from '../shift/shift-comment.vue';
icon="attach_money"
class="q-pa-none q-mx-xs"
/>
<!-- delete btn -->
<q-btn
v-if="props.shift.type !== ''"
push
dense
size="sm"
color="red-6"
icon="close"
class="q-ml-xs"
@click.stop="on_click_delete"
/>
</q-card-section>
</q-card-section>
<q-dialog
v-model="show_comment"
transition-show="fade"
transition-hide="fade"
persistent
>
<ShiftComment
:comment-string="getComment"
@click-close="closeComment"
@click-save="handleSave"
/>
</q-dialog>
</template>

42
src/modules/timesheets/components/timesheet/timesheet-details-shifts.vue
View File

@ -1,22 +1,40 @@
<script setup lang="ts">
import { default_shift, type Shift } from 'src/modules/timesheets/types/timesheet-shift-interface';
import TimesheetEmployeeDetailsShiftsRowHeader from './timesheet-details-shifts-row-header.vue';
import TimesheetEmployeeDetailsShiftsRow from './timesheet-details-shifts-row.vue';
import type { PayPeriod } from 'src/modules/shared/types/pay-period-interface';
import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pay-period-details-overview-interface';
import TimesheetDetailsShiftsRowHeader from './timesheet-details-shifts-row-header.vue';
import TimesheetDetailsShiftsRow from './timesheet-details-shifts-row.vue';
import { date } from 'quasar';
const props = defineProps<{
rawData: TimesheetPayPeriodDetailsOverview;
currentPayPeriod: PayPeriod;
}>();
}>();
const emit = defineEmits<{
'request-add' : [payload: { date: string }];
'request-edit' : [payload: { date: string; shift: Shift }];
'request-delete' : [payload: { date: string; shift: Shift }];
// 'save-comment' : [payload: { date: string; shift: Shift; comment: string }];
}>();
const shifts_or_placeholder = (shifts: Shift[]): Shift[] => {
return shifts.length > 0 ? shifts : [default_shift];
};
const get_date_from_short = (short_date: string):
Date => new Date(props.currentPayPeriod.pay_year.toString() + '/' + short_date);
const to_iso_date = (short_date: string):
string => date.formatDate(get_date_from_short(short_date), 'YYYY-MM-DD');
const shifts_or_placeholder = (shifts: Shift[]):
Shift[] => { return shifts.length > 0 ? shifts : [default_shift]; };
const getDate = (shift_date: string): Date => {
return new Date(props.currentPayPeriod.pay_year.toString() + '/' + shift_date);
};
const on_request_add = (iso_date: string) => emit('request-add', { date: iso_date });
const on_request_edit = (iso_date: string, shift: Shift) => emit('request-edit', { date: iso_date, shift });
const on_request_delete = (iso_date: string, shift: Shift) => emit('request-delete', { date: iso_date, shift });
// const on_save_comment = (iso_date: string, shift: Shift, comment: string) => emit('save-comment', { date: iso_date, shift, comment });
</script>
<template>
@ -32,10 +50,10 @@ import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pa
bordered
class="row items-center rounded-10 q-mb-xs"
>
<!-- Dates column -->
<q-card-section class="col-auto q-pa-xs text-white">
<div
class="bg-primary rounded-10 q-pa-xs text-center"
:style="$q.screen.lt.md ? '' : 'width: 75px;'"
>
<q-item-label
style="font-size: 0.7em;"
@ -51,20 +69,26 @@ import type { TimesheetPayPeriodDetailsOverview } from '../../types/timesheet-pa
>{{ $d(getDate(day.short_date), {month: $q.screen.lt.md ? 'short' : 'long'}) }}</q-item-label>
</div>
</q-card-section>
<!-- List of shifts column -->
<q-card-section class="col q-pa-none">
<TimesheetEmployeeDetailsShiftsRowHeader />
<TimesheetEmployeeDetailsShiftsRow
<TimesheetDetailsShiftsRowHeader />
<TimesheetDetailsShiftsRow
v-for="shift, shift_index in shifts_or_placeholder(day.shifts)"
:key="shift_index"
:shift="shift"
@request-edit=" ({ shift }) => on_request_edit(to_iso_date(day.short_date), shift )"
@request-delete="({ shift }) => on_request_delete(to_iso_date(day.short_date), shift )"
/>
</q-card-section>
<!-- add shift btn column -->
<q-card-section class="q-pr-xs col-auto">
<q-btn
push
color="primary"
icon="more_time"
class="q-pa-sm"
@click="on_request_add(to_iso_date(day.short_date))"
/>
</q-card-section>
</q-card>

171
src/modules/timesheets/composables/use-shift-api.ts Normal file
View File

@ -0,0 +1,171 @@
import { api } from "src/boot/axios";
import { isProxy, toRaw } from "vue";
/* eslint-disable */
export interface ShiftPayload {
start_time: string;
end_time: string;
type: string;
is_remote: boolean;
comment?: string;
}
export interface UpsertShiftsBody {
old_shift?: ShiftPayload;
new_shift?: ShiftPayload;
}
export type UpsertAction = 'created' | 'updated' | 'deleted';
export interface DayShift {
start_time: string;
end_time: string;
type: string;
is_remote: boolean;
comment?: string | null;
}
export interface UpsertShiftsResponse {
action: UpsertAction;
day: DayShift[];
}
export const TIME_FORMAT_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
export const DATE_FORMAT_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
export const COMMENT_MAX_LENGTH = 512 as const;
//normalize payload to match backend data
export const normalize_comment = (input?: string): string | undefined => {
if ( typeof input === 'undefined' || input === null) return undefined;
const trimmed = String(input).trim();
return trimmed.length ? trimmed : undefined;
}
export const normalize_type = (input: string): string => (input ?? '').trim().toUpperCase();
export const normalize_payload = (payload: ShiftPayload): ShiftPayload => {
const comment = normalize_comment(payload.comment);
return {
start_time: payload.start_time,
end_time: payload.end_time,
type: normalize_type(payload.type),
is_remote: Boolean(payload.is_remote),
...(comment !== undefined ? { comment } : {}),
};
};
const toPlain = <T extends object>(obj: T): T => {
const raw = isProxy(obj) ? toRaw(obj): obj;
if(typeof (globalThis as any).structuredClone === 'function') {
return (globalThis as any).structuredClone(raw);
}
return JSON.parse(JSON.stringify(raw));
}
//error handling
export interface ApiErrorPayload {
status_code: number;
error_code?: string;
message?: string;
context?: Record<string, unknown>;
}
export class UpsertShiftsError extends Error {
status_code: number;
error_code?: string | undefined;
context?: Record<string, unknown> | undefined;
constructor(payload: ApiErrorPayload) {
super(payload.message || 'Request failed');
this.name = 'UpsertShiftsError';
this.status_code = payload.status_code;
this.error_code = payload.error_code;
this.context = payload.context;
}
}
const parseHHMM = (s:string): [number, number] => {
const m = /^(\d{2}):(\d{2})$/.exec(s);
if(!m) {
throw new UpsertShiftsError({ status_code: 400, message: `Invalid time format: ${s}. Expected HH:MM.`});
}
const h = Number(m[1]);
const min = Number(m[2]);
if(Number.isNaN(h) || Number.isNaN(min) || h < 0 || h> 23 || min < 0 || min > 59) {
throw new UpsertShiftsError({ status_code: 400, message: `Invalid time value: ${s}.`})
}
return [h, min];
}
const toMinutes = (hhmm: string): number => {
const [h,m] = parseHHMM(hhmm);
return h * 60 + m;
}
const validateShift = (payload: ShiftPayload, label: 'old_shift'|'new_shift') => {
if(!TIME_FORMAT_PATTERN.test(payload.start_time) || !TIME_FORMAT_PATTERN.test(payload.end_time)) {
throw new UpsertShiftsError({
status_code: 400,
message: `Invalid time format in ${label}. Expected HH:MM`,
context: { [label]: payload }
});
}
if(toMinutes(payload.end_time) <= toMinutes(payload.start_time)) {
throw new UpsertShiftsError({
status_code: 400,
message: `Invalid time range in ${label}. The End time must be after the Start time`,
context: { [label]: payload}
});
}
}
export const upsert_shifts_by_date = async (
email: string,
date: string,
body: UpsertShiftsBody,
): Promise<UpsertShiftsResponse> => {
if (!DATE_FORMAT_PATTERN.test(date)){
throw new UpsertShiftsError({
status_code: 400,
message: 'Invalid date format, expected YYYY-MM-DD',
});
}
const flatBody: UpsertShiftsBody = {
...(body.old_shift ? { old_shift: toPlain(body.old_shift) }: {}),
...(body.new_shift ? { new_shift: toPlain(body.new_shift) }: {}),
};
const normalized: UpsertShiftsBody = {
...(flatBody.old_shift ? { old_shift: normalize_payload(flatBody.old_shift) } : {}),
...(flatBody.new_shift ? { new_shift: normalize_payload(flatBody.new_shift) } : {}),
};
if(normalized.old_shift) validateShift(normalized.old_shift, 'old_shift');
if(normalized.new_shift) validateShift(normalized.new_shift, 'new_shift');
const encoded_email = encodeURIComponent(email);
const encoded_date = encodeURIComponent(date);
//error handling to be used with notify in case of bad input
try {
const { data } = await api.put<UpsertShiftsResponse>(
`/shifts/upsert/${encoded_email}/${encoded_date}`,
normalized,
{ headers: {'content-type': 'application/json'}}
);
return data;
} catch (err: any) {
const status_code: number = err?.response?.status ?? 500;
const data = err?.response?.data ?? {};
const payload: ApiErrorPayload = {
status_code,
error_code: data.error_code,
message: data.message || data.error || err.message,
context: data.context,
};
throw new UpsertShiftsError(payload);
}
};

232
src/modules/timesheets/pages/timesheet-details-overview.vue
View File

@ -2,15 +2,16 @@
import { useTimesheetStore } from 'src/stores/timesheet-store';
import { useAuthStore } from 'src/stores/auth-store';
import { useTimesheetApi } from '../composables/use-timesheet-api';
import { computed, onMounted } from 'vue';
import { computed, onMounted, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { date } from 'quasar';
import TimesheetEmployeeDetailsShifts from '../components/timesheet/timesheet-details-shifts.vue';
import TimesheetNavigation from '../components/timesheet/timesheet-navigation.vue';
import ShiftsLegend from '../components/shift/shifts-legend.vue';
import TimesheetDetailsShifts from '../components/timesheet/timesheet-details-shifts.vue';
import { upsert_shifts_by_date, type ShiftPayload, type UpsertShiftsBody } from '../composables/use-shift-api';
/* eslint-disable */
const { locale } = useI18n();
const { locale, tm, t } = useI18n();
const timesheet_store = useTimesheetStore();
const auth_store = useAuthStore();
const timesheet_api = useTimesheetApi();
@ -37,6 +38,12 @@ const is_calendar_limit = computed( () => {
timesheet_store.current_pay_period.pay_period_no <= 1;
});
const SHIFT_KEY = ['REGULAR', 'EVENING', 'EMERGENCY', 'HOLIDAY', 'VACATION', 'SICK'] as const;
const shift_options = computed(()=> {
void locale.value;
return SHIFT_KEY.map(key => ({ value: key, label: t(`timesheet.shift_types.${key}`)}))
});
const onDateSelected = async (date_string: string) => {
await timesheet_api.getTimesheetsByDate(date_string);
@ -51,11 +58,134 @@ onMounted( async () => {
await loadByDate(date.formatDate(new Date(), 'YYYY-MM-DD' ));
});
const reload_current_period = async () => {
await timesheet_store.getPayPeriodByDate(date.formatDate(new Date(), 'YYYY-MM-DD'));
await timesheet_store.getTimesheetsByPayPeriodAndEmail(auth_store.user.email);
};
type FormMode = 'create' | 'edit' | 'delete';
const is_dialog_open = ref<boolean>(false);
const form_mode = ref<FormMode>('create');
const selected_date = ref<string>('');
const old_shift_ref = ref<ShiftPayload | undefined>(undefined);
const start_time = ref<string>('');
const end_time = ref<string>('');
const type = ref<string>('');
const is_remote = ref<boolean>(false);
const comment = ref<string>('');
const open_create_dialog = (iso_date: string) => {
form_mode.value = 'create';
selected_date.value = iso_date;
old_shift_ref.value = undefined;
start_time.value = '';
end_time.value = '';
type.value = '';
is_remote.value = false;
comment.value = '';
is_dialog_open.value = true;
};
const open_edit_dialog = (iso_date: string, shift: any) => {
form_mode.value = 'edit';
selected_date.value = iso_date;
start_time.value = shift.start_time,
end_time.value = shift.end_time,
type.value = shift.type,
is_remote.value = shift.is_remote,
comment.value = shift.comment,
is_dialog_open.value = true;
old_shift_ref.value = {
start_time: shift.start_time,
end_time: shift.end_time,
type: shift.type,
is_remote: !!shift.is_remote,
...(shift.comment ? { comment: String(shift.comment)} : {}),
};
};
const open_delete_dialog = (iso_date: string, shift: any) => {
form_mode.value = 'delete';
selected_date.value = iso_date;
old_shift_ref.value = {
start_time: shift.start_time,
end_time: shift.end_time,
type: shift.type,
is_remote: !!shift.is_remote,
...(shift.comment ? { comment: String(shift.comment)} : {}),
};
is_dialog_open.value = true;
};
const build_new_shift_payload = () => {
const base = {
start_time: start_time.value,
end_time: end_time.value,
type: type.value,
is_remote: !!is_remote.value,
};
const trimmed_comment = (comment.value ?? '').trim();
return {
...base,
...(trimmed_comment.length > 0 ? { comment: trimmed_comment }: {}),
};
};
const is_submitting = ref<boolean>(false);
const error_banner = ref<string|null>(null);
const conflicts = ref<Array<{start_time: string; end_time: string; type: string }>>([]);
const submit_dialog = async () => {
error_banner.value = null;
conflicts.value = [];
is_submitting.value = true;
try {
const email = auth_store.user.email;
const date_iso = selected_date.value;
let body: UpsertShiftsBody;
if(form_mode.value === 'create') {
body = { new_shift: build_new_shift_payload() };
} else if (form_mode.value === 'edit') {
body = { old_shift: old_shift_ref.value!, new_shift: build_new_shift_payload() };
} else {
body = { old_shift: old_shift_ref.value! };
}
await upsert_shifts_by_date(email, date_iso, body);
await timesheet_store.getTimesheetsByPayPeriodAndEmail(email);
is_dialog_open.value = false;
} catch (e:any) {
const status = e?.status_code ?? e?.response?.status ?? 500;
if (status === 404) {
error_banner.value = 'Ce quart a été modifié ou supprimé. Rafraichissez la page.';
} else if (status === 409) {
error_banner.value = 'Chevauchement détecté avec un autre quart';
} else if (status === 422) {
error_banner.value = 'Certains champs sont invalides. Vérifiez le formulaire.';
} else {
error_banner.value = e?.message || 'Erreur inconnue';
}
} finally {
is_submitting.value = false;
}
};
const close_dialog = () => { is_dialog_open.value = false; };
const on_request_add = ({ date }: { date: string }) => open_create_dialog(date);
const on_request_edit = ({ date, shift }: { date: string; shift: any }) => open_edit_dialog(date, shift);
const on_request_delete = async ({ date, shift }: { date: string; shift: any }) => open_delete_dialog(date, shift);
</script>
<template>
<q-page padding class="q-pa-md bg-secondary" >
<q-page padding class="q-pa-md bg-secondary" >
<!-- title and dates -->
<div class="text-h4 row justify-center text-center q-mt-lg text-uppercase text-weight-bolder text-grey-8">
{{ $t('pageTitles.timeSheets') }}
</div>
@ -81,6 +211,7 @@ onMounted( async () => {
</div>
<div>
<q-card flat class="q-mt-md bg-secondary">
<!-- navigation btn -->
<TimesheetNavigation
:is-disabled="timesheet_store.is_loading"
:is-previous-limit="is_calendar_limit"
@ -88,17 +219,108 @@ onMounted( async () => {
@pressed-previous-button="timesheet_api.getPreviousPayPeriod()"
@pressed-next-button="timesheet_api.getNextPayPeriod()"
/>
<!-- shift's colored legend -->
<ShiftsLegend
:is-loading="false"
/>
<q-card-section horizontal>
<TimesheetEmployeeDetailsShifts
<!-- display of shifts for 2 timesheets -->
<TimesheetDetailsShifts
:raw-data="timesheet_store.pay_period_employee_details"
:current-pay-period="timesheet_store.current_pay_period"
@request-add="on_request_add"
@request-edit="on_request_edit"
@request-delete="on_request_delete"
/>
<q-inner-loading :showing="timesheet_store.is_loading" color="primary"/>
</q-card-section>
</q-card>
</div>
<!-- create/edit/delete dialog -->
<q-dialog
v-model="is_dialog_open"
persistent
transition-show="fade"
transition-hide="fade"
>
<q-card class="q-pa-md">
<div class="row items-center q-mb-sm">
<q-icon name="schedule" size="24px" class="q-mr-sm"/>
<div class="text-h6">
{{ form_mode === 'create' ? $t('timesheet.add_shift') : form_mode === 'edit' ? $t('timesheet.edit_shift') : $t('timesheet.delete_shift') }}
</div>
<q-space/>
<q-badge outline color="primary"> {{ selected_date }}</q-badge>
</div>
<q-separator spaced/>
<div v-if="form_mode !== 'delete'" class="column q-gutter-md">
<div class="row ">
<div class="col">
<q-input
v-model="start_time"
:label="$t('timesheet.fields.start')" filled dense inputmode="numeric" mask="##:##" />
</div>
<div class="col">
<q-input v-model="end_time" :label="$t('timesheet.fields.end')" filled dense inputmode="numeric" mask="##:##" />
</div>
</div>
<div class="row items-center">
<q-select
v-model="type"
options-dense
:options="shift_options"
:label="$t('timesheet.shift_types_label')"
class="col"
color="primary"
filled
dense
hide-dropdown-icon
emit-value
map-options
/>
<q-toggle v-model="is_remote" :label="$t('timesheet.shift_types.REMOTE')" class="col-auto" />
</div>
<q-input v-model="comment" type="textarea" autogrow filled dense :label="$t('timesheet.fields.header_comment')" :counter="true" :maxlength="512" />
</div>
<div v-else class="q-pa-md">
{{ $t('timesheet.delete_confirmation_msg') }}
</div>
<div v-if="error_banner" class="q-mt-md">
<q-banner dense class="bg-red-2 text-negative">{{ error_banner }}</q-banner>
<div v-if="conflicts.length" class="q-mt-xs">
<div class="text-caption">Conflits :</div>
<ul class="q-pl-md q-mt-xs">
<li v-for="(c, i) in conflicts" :key="i">
{{ c.start_time }}–{{ c.end_time }} ({{ c.type }})
</li>
</ul>
</div>
</div>
<q-separator spaced />
<div class="row justify-end q-gutter-sm">
<q-btn flat color="grey-8" :label="$t('timesheet.cancel_button')" @click="close_dialog" />
<q-btn
v-if="form_mode === 'delete'"
outline color="negative" icon="cancel" :label="$t('timesheet.delete_button')"
:loading="is_submitting"
@click="submit_dialog"
/>
<q-btn
v-else
color="primary" icon="save_alt" :label="$t('timesheet.save_button')"
:loading="is_submitting"
@click="submit_dialog"
/>
</div>
</q-card>
</q-dialog>
</q-page>
</template>