242 lines
8.7 KiB
Vue
242 lines
8.7 KiB
Vue
<script setup lang="ts">
|
||
|
||
import { computed, ref, watch } from 'vue';
|
||
import { upsert_shifts_by_date, type UpsertShiftsBody, type ShiftPayload } from '../../composables/use-shift-api';
|
||
import { useI18n } from 'vue-i18n';
|
||
/* eslint-disable */
|
||
type Option = { value: string; label: string };
|
||
|
||
const { t } = useI18n();
|
||
|
||
const props = defineProps<{
|
||
mode: 'create' | 'edit' | 'delete';
|
||
dateIso: string;
|
||
initialShift?: ShiftPayload | null;
|
||
shiftOptions: Option[];
|
||
email: string;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'close' ): void;
|
||
(e: 'saved'): void;
|
||
}>();
|
||
|
||
const isSubmitting = ref(false);
|
||
const errorBanner = ref<string | null>(null);
|
||
const conflicts = ref<Array<{start_time: string; end_time: string; type: string}>>([]);
|
||
|
||
const opened = defineModel<boolean>( { default: false });
|
||
const startTime = defineModel<string> ('startTime', { default: '' });
|
||
const endTime = defineModel<string> ('endTime' , { default: '' });
|
||
const type = defineModel<string> ('type' , { default: '' });
|
||
const isRemote = defineModel<boolean>('isRemote' , { default: false });
|
||
const comment = defineModel<string> ('comment' , { default: '' });
|
||
|
||
const buildNewShiftPayload = (): ShiftPayload => {
|
||
const trimmed = (comment.value ?? '').trim();
|
||
return {
|
||
start_time: startTime.value,
|
||
end_time: endTime.value,
|
||
type: type.value,
|
||
is_remote: isRemote.value,
|
||
...(trimmed ? { comment: trimmed } : {}),
|
||
};
|
||
};
|
||
|
||
const onSubmit = async () => {
|
||
errorBanner.value = null;
|
||
conflicts.value = [];
|
||
isSubmitting.value = true;
|
||
|
||
try{
|
||
let body: UpsertShiftsBody;
|
||
if(props.mode === 'create') {
|
||
body = { new_shift: buildNewShiftPayload() };
|
||
} else if (props.mode === 'edit') {
|
||
if(!props.initialShift) throw new Error('Missing initial Shift for edit');
|
||
body = { old_shift: props.initialShift, new_shift: buildNewShiftPayload() };
|
||
} else {
|
||
if (!props.initialShift) throw new Error('Missing initial Shift for delete.');
|
||
body = { old_shift: props.initialShift };
|
||
}
|
||
await upsert_shifts_by_date(props.email, props.dateIso, body);
|
||
opened.value = false;
|
||
emit('saved');
|
||
} catch (error: any) {
|
||
const status = error?.status_code ?? error.response?.status ?? 500;
|
||
|
||
const apiConflicts = error?.response?.data?.conflicts ?? error?.data?.conflicts;
|
||
if(Array.isArray(apiConflicts)){
|
||
conflicts.value = apiConflicts.map((c:any)=> ({
|
||
start_time: String(c.start_time ?? ''),
|
||
end_time: String(c.end_time ?? ''),
|
||
type: String(c.type ?? ''),
|
||
}));
|
||
} else {
|
||
conflicts.value = [];
|
||
}
|
||
|
||
if (status === 404) errorBanner.value = t('timesheet.shift.errors.not_found')
|
||
else if (status === 409) errorBanner.value = t('timesheet.shift.errors.overlap')
|
||
else if (status === 422) errorBanner.value = t('timesheet.shift.errors.invalid')
|
||
else errorBanner.value = t('timesheet.shift.errors.unknown')
|
||
//add conflicts.value error management
|
||
} finally {
|
||
isSubmitting.value = false;
|
||
}
|
||
}
|
||
|
||
const hydrateFromProps = () => {
|
||
if(props.mode === 'edit' || props.mode === 'delete') {
|
||
const shift = props.initialShift;
|
||
startTime.value = shift?.start_time ?? '';
|
||
endTime.value = shift?.end_time ?? '';
|
||
type.value = shift?.type ?? '';
|
||
isRemote.value = !!shift?.is_remote;
|
||
comment.value = (shift as any)?.comment ?? '';
|
||
} else {
|
||
startTime.value = '';
|
||
endTime.value = '';
|
||
type.value = '';
|
||
isRemote.value = false;
|
||
comment.value = '';
|
||
}
|
||
};
|
||
|
||
const canSubmit = computed(() =>
|
||
props.mode === 'delete' ||
|
||
(startTime.value.trim().length === 5 &&
|
||
endTime.value.trim().length === 5 &&
|
||
type.value.trim().length > 0)
|
||
);
|
||
|
||
watch(
|
||
()=> [opened.value, props.mode, props.initialShift, props.dateIso],
|
||
()=> { if (opened.value) hydrateFromProps();},
|
||
{ immediate: true }
|
||
);
|
||
|
||
|
||
</script>
|
||
|
||
<!-- create/edit/delete shifts dialog -->
|
||
<template>
|
||
<q-dialog
|
||
v-model="opened"
|
||
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">
|
||
{{
|
||
props.mode === 'create'
|
||
? $t('timesheet.shift.actions.add')
|
||
: props.mode === 'edit'
|
||
? $t('timesheet.shift.actions.edit')
|
||
: $t('timesheet.shift.actions.delete')
|
||
}}
|
||
</div>
|
||
<q-space/>
|
||
<q-badge outline color="primary">{{ props.dateIso }}</q-badge>
|
||
</div>
|
||
|
||
<q-separator spaced/>
|
||
|
||
<div v-if="props.mode !== 'delete'" class="column q-gutter-md">
|
||
<div class="row ">
|
||
<div class="col">
|
||
<q-input
|
||
v-model="startTime"
|
||
:label="$t('timesheet.shift.fields.start')"
|
||
filled dense
|
||
inputmode="numeric"
|
||
mask="##:##"
|
||
/>
|
||
</div>
|
||
<div class="col">
|
||
<q-input
|
||
v-model="endTime"
|
||
:label="$t('timesheet.shift.fields.end')"
|
||
filled dense
|
||
inputmode="numeric"
|
||
mask="##:##"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="row items-center">
|
||
<q-select
|
||
v-model="type"
|
||
options-dense
|
||
:options="props.shiftOptions"
|
||
:label="$t('timesheet.shift.types.label')"
|
||
class="col"
|
||
color="primary"
|
||
filled dense
|
||
hide-dropdown-icon
|
||
emit-value
|
||
map-options
|
||
/>
|
||
<q-toggle
|
||
v-model="isRemote"
|
||
:label="$t('timesheet.shift.types.REMOTE')"
|
||
class="col-auto" />
|
||
</div>
|
||
<q-input
|
||
v-model="comment"
|
||
type="textarea"
|
||
autogrow filled dense
|
||
:label="$t('timesheet.shift.fields.header_comment')"
|
||
:counter="true" :maxlength="512"
|
||
/>
|
||
</div>
|
||
|
||
<div v-else class="q-pa-md">
|
||
{{ $t('timesheet.shift.actions.delete_confirmation_msg') }}
|
||
</div>
|
||
|
||
<div v-if="errorBanner" class="q-mt-md">
|
||
<q-banner dense class="bg-red-2 text-negative">{{ errorBanner }}</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="() => { opened = false; emit('close');}"
|
||
/>
|
||
<q-btn
|
||
v-if="props.mode === 'delete'"
|
||
outline color="negative"
|
||
icon="cancel"
|
||
:label="$t('timesheet.delete_button')"
|
||
:loading="isSubmitting"
|
||
:disable="!canSubmit"
|
||
@click="onSubmit"
|
||
/>
|
||
<q-btn
|
||
v-else
|
||
color="primary"
|
||
icon="save_alt"
|
||
:label="$t('timesheet.save_button')"
|
||
:loading="isSubmitting"
|
||
:disable="!canSubmit"
|
||
@click="onSubmit"
|
||
/>
|
||
</div>
|
||
</q-card>
|
||
</q-dialog>
|
||
</template> |