Nicolas Drolet
ac6744ff18
removed modal for shift creation/update to better match current timesheet app and avoid adding superfluous user actions. Tweaked appearance of timesheet and overall theme to remove overcrowding of colors/elements
266 lines
10 KiB
Vue
266 lines
10 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
/* eslint-disable*/
|
|
import { onBeforeUnmount, onMounted, ref, toRaw, useTemplateRef } from 'vue';
|
|
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { QSelect } from 'quasar';
|
|
import { Shift, ShiftType } from 'src/modules/timesheets/models/shift.models';
|
|
import { useUiStore } from 'src/stores/ui-store';
|
|
|
|
const { t } = useI18n();
|
|
const ui_store = useUiStore();
|
|
|
|
interface ShiftOption {
|
|
label: string;
|
|
value: ShiftType;
|
|
icon: string;
|
|
icon_color: string;
|
|
}
|
|
|
|
const COMMENT_LENGTH_MAX = 280;
|
|
const SHIFT_OPTIONS: ShiftOption[] = [
|
|
{ label: t('timesheet.shift.types.REGULAR'), value: 'REGULAR', icon: 'wb_sunny', icon_color: '' },
|
|
{ label: t('timesheet.shift.types.EVENING'), value: 'EVENING', icon: 'bedtime', icon_color: 'indigo-8' },
|
|
{ label: t('timesheet.shift.types.EMERGENCY'), value: 'EMERGENCY', icon: 'ring_volume', icon_color: 'red-8' },
|
|
{ label: t('timesheet.shift.types.VACATION'), value: 'VACATION', icon: 'beach_access', icon_color: 'yellow-8' },
|
|
{ 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: 'cyan-8' },
|
|
];
|
|
|
|
const shift = defineModel<Shift>('shift', { required: true });
|
|
const { dense = false, outlined = false } = defineProps<{
|
|
dense?: boolean;
|
|
outlined?: boolean;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
'saveComment': [comment: string, shift_id: number];
|
|
'requestDelete': [void];
|
|
}>();
|
|
|
|
const is_showing_time_picker = ref(false);
|
|
const select_ref = useTemplateRef<QSelect>('select');
|
|
const initial_shift = ref<Shift>(unwrapAndClone(toRaw(shift.value)))
|
|
let timer: NodeJS.Timeout;
|
|
|
|
const shift_type_selected = ref(SHIFT_OPTIONS.find(option => option.value == shift.value.type));
|
|
|
|
const onBlurShiftTypeSelect = () => {
|
|
if (shift_type_selected.value === undefined) {
|
|
shift.value.type = 'REGULAR';
|
|
shift.value.id = 0;
|
|
emit('requestDelete');
|
|
}
|
|
};
|
|
|
|
const slideDeleteShift = async (reset: () => void) => {
|
|
timer = setTimeout(() => {
|
|
reset();
|
|
emit('requestDelete');
|
|
}, 200);
|
|
};
|
|
|
|
const getCommentCounterColor = (comment_length: number) => {
|
|
if (comment_length < 200) return 'primary';
|
|
if (comment_length < 250) return 'warning';
|
|
return 'negative';
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (ui_store.focus_next_component) {
|
|
select_ref.value?.focus();
|
|
select_ref.value?.showPopup();
|
|
shift_type_selected.value = undefined;
|
|
ui_store.focus_next_component = false;
|
|
}
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
clearTimeout(timer);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<q-slide-item
|
|
|
|
right-color="negative"
|
|
class="q-my-xs rounded-5 bg-transparent"
|
|
@right="details => slideDeleteShift(details.reset)"
|
|
>
|
|
<template
|
|
#right
|
|
v-if="ui_store.is_mobile_mode"
|
|
>
|
|
<q-icon name="delete" />
|
|
</template>
|
|
|
|
<div
|
|
class="row flex-center text-uppercase rounded-5 bg-transparent"
|
|
>
|
|
<!-- shift type -->
|
|
<q-select
|
|
ref="select"
|
|
v-model="shift_type_selected"
|
|
standout="bg-blue-grey-9"
|
|
dense
|
|
:readonly="shift.is_approved"
|
|
:options-dense="!ui_store.is_mobile_mode"
|
|
hide-dropdown-icon
|
|
:menu-offset="[0, 10]"
|
|
menu-anchor="bottom middle"
|
|
menu-self="top middle"
|
|
:options="SHIFT_OPTIONS"
|
|
class="rounded-5 q-mx-xs bg-dark"
|
|
:class="(ui_store.is_mobile_mode ? 'col-12 q-mb-xs ' : 'col ')"
|
|
popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
|
|
popup-content-style="border: 2px solid var(--q-accent)"
|
|
@blur="onBlurShiftTypeSelect"
|
|
@update:model-value="option => shift.type = option.value"
|
|
>
|
|
<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'"
|
|
:tabindex="scope.tabindex"
|
|
>
|
|
<q-icon
|
|
:name="scope.opt.icon"
|
|
:color="scope.opt.icon_color"
|
|
size="sm"
|
|
class="col-auto q-mx-xs"
|
|
/>
|
|
<span
|
|
style="line-height: 0.9em;"
|
|
class="col-auto ellipsis"
|
|
>{{ scope.opt.label }}</span>
|
|
</div>
|
|
</template>
|
|
</q-select>
|
|
|
|
<!-- punch in field -->
|
|
<q-input
|
|
v-model="shift.start_time"
|
|
dense
|
|
:readonly="shift.is_approved"
|
|
type="time"
|
|
:standout="$q.dark.isActive ? 'bg-blue-grey-9' : 'bg-blue-grey-1 text-white'"
|
|
label-slot
|
|
label-color="accent"
|
|
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
|
|
input-style="font-size: 1.2em;"
|
|
class="col rounded-5 bg-dark"
|
|
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-mr-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
|
|
>
|
|
<template #label>
|
|
<span
|
|
class="text-weight-bolder"
|
|
style="font-size: 0.95em;"
|
|
>{{ $t('shared.misc.in') }}</span>
|
|
</template>
|
|
</q-input>
|
|
|
|
<!-- punch out field -->
|
|
<q-input
|
|
v-model="shift.end_time"
|
|
dense
|
|
:readonly="shift.is_approved"
|
|
type="time"
|
|
standout="bg-blue-grey-9"
|
|
label-slot
|
|
label-color="accent"
|
|
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
|
|
input-style="font-size: 1.2em;"
|
|
class="col rounded-5 bg-dark"
|
|
:class="(shift.id === -2 ? 'bg-negative ' : ' ') + (ui_store.is_mobile_mode ? 'q-ml-xs ' : 'q-mx-xs ') + (shift.is_approved ? 'cursor-not-allowed' : '')"
|
|
>
|
|
<template #label>
|
|
<span
|
|
class="text-weight-bolder"
|
|
style="font-size: 0.95em;"
|
|
>{{ $t('shared.misc.out') }}</span>
|
|
</template>
|
|
</q-input>
|
|
|
|
<!-- comment and delete buttons -->
|
|
<div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto'">
|
|
<q-icon
|
|
v-if="shift.type && dense"
|
|
:name="shift.comment ? 'comment' : ''"
|
|
color="primary"
|
|
:size="dense ? 'xs' : 'sm'"
|
|
class="col"
|
|
/>
|
|
|
|
<q-btn
|
|
v-else
|
|
flat
|
|
dense
|
|
:icon="shift.comment ? 'chat' : 'chat_bubble_outline'"
|
|
:text-color="shift.comment ? 'accent' : 'grey-5'"
|
|
class="col"
|
|
:class="ui_store.is_mobile_mode ? 'q-mt-xs bg-dark' : ''"
|
|
>
|
|
<q-popup-edit
|
|
v-model="shift.comment"
|
|
:title="$t('timesheet.shift.fields.header_comment')"
|
|
auto-save
|
|
v-slot="scope"
|
|
class="bg-dark"
|
|
>
|
|
<q-input
|
|
color="white"
|
|
v-model="scope.value"
|
|
dense
|
|
:readonly="shift.is_approved"
|
|
autofocus
|
|
counter
|
|
bottom-slots
|
|
:maxlength="COMMENT_LENGTH_MAX"
|
|
class="q-pb-lg"
|
|
:class="shift.is_approved ? 'cursor-not-allowed' : ''"
|
|
@keyup.enter="scope.set"
|
|
>
|
|
<template #append>
|
|
<q-icon name="edit" />
|
|
</template>
|
|
|
|
<template #counter>
|
|
<div class="row flex-center">
|
|
<q-space />
|
|
<q-knob
|
|
:model-value="scope.value?.length"
|
|
readonly
|
|
:max="COMMENT_LENGTH_MAX"
|
|
size="1.6em"
|
|
:thickness="0.4"
|
|
:color="getCommentCounterColor(scope.value?.length ?? 0)"
|
|
track-color="grey-4"
|
|
class="col-auto q-mr-xs"
|
|
/>
|
|
<span
|
|
:class="'col-auto text-weight-bolder text-' + getCommentCounterColor(scope.value?.length ?? 0)"
|
|
>{{ 280 - (scope.value?.length ?? 0) }}</span>
|
|
</div>
|
|
</template>
|
|
</q-input>
|
|
</q-popup-edit>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
v-if="!ui_store.is_mobile_mode"
|
|
flat
|
|
dense
|
|
:disable="shift.is_approved"
|
|
tabindex="-1"
|
|
icon="cancel"
|
|
text-color="negative"
|
|
class="col"
|
|
:class="shift.is_approved ? 'invisible' : ''"
|
|
@click="$emit('requestDelete')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</q-slide-item>
|
|
</template> |