feat(timesheet): add validation for timesheet timestamps, prevent submission if errors present.
This commit is contained in:
parent
712e831653
commit
5bb02e67a0
|
|
@ -191,6 +191,8 @@ export default {
|
|||
INVALID_SHIFT_TIME: "In and Out shift times are reversed",
|
||||
SHIFT_OVERLAP: "An overlaps occured between 2 or more shifts",
|
||||
INVALID_SHIFT: "A shift contains missing or corrupted data",
|
||||
SHIFT_TIME_REQUIRED: "Valid time required",
|
||||
SHIFT_TYPE_REQUIRED: "Shift type required",
|
||||
SHIFT_NOT_FOUND: "Shift missing or deleted",
|
||||
PAY_PERIOD_NOT_FOUND: "No pay period matching given dates",
|
||||
EMPLOYEE_NOT_FOUND: "No employee matching current login details",
|
||||
|
|
|
|||
|
|
@ -192,6 +192,8 @@ export default {
|
|||
INVALID_SHIFT_TIME: "Les heures d'entrée et de sortie sont inversées",
|
||||
SHIFT_OVERLAP: "Il y a un chevauchement entre deux ou plusieurs quarts",
|
||||
INVALID_SHIFT: "Un quart de travail contient des données manquantes ou corrompues",
|
||||
SHIFT_TIME_REQUIRED: "Heure requise",
|
||||
SHIFT_TYPE_REQUIRED: "Type requis",
|
||||
SHIFT_NOT_FOUND: "Quart de travail manquant ou supprimé",
|
||||
PAY_PERIOD_NOT_FOUND: "Aucune période de paie ne correspond aux dates fournies",
|
||||
EMPLOYEE_NOT_FOUND: "Aucun employé ne correspond aux détails de votre connexion",
|
||||
|
|
|
|||
|
|
@ -3,21 +3,17 @@
|
|||
lang="ts"
|
||||
>
|
||||
/* eslint-disable*/
|
||||
import { onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue';
|
||||
import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch, nextTick } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { QSelect } from 'quasar';
|
||||
import { Shift, ShiftType } from 'src/modules/timesheets/models/shift.models';
|
||||
import { QSelect, QInput } from 'quasar';
|
||||
import { Shift, type ShiftOption } from 'src/modules/timesheets/models/shift.models';
|
||||
import { useUiStore } from 'src/stores/ui-store';
|
||||
import { useShiftRules } from 'src/modules/timesheets/utils/shift.util';
|
||||
|
||||
let timer: NodeJS.Timeout;
|
||||
const { t } = useI18n();
|
||||
const ui_store = useUiStore();
|
||||
|
||||
interface ShiftOption {
|
||||
label: string;
|
||||
value: ShiftType;
|
||||
icon: string;
|
||||
icon_color: string;
|
||||
}
|
||||
const shift_rules = useShiftRules(t('timesheet.errors.SHIFT_TIME_REQUIRED'),);
|
||||
|
||||
const COMMENT_LENGTH_MAX = 280;
|
||||
const SHIFT_OPTIONS: ShiftOption[] = [
|
||||
|
|
@ -28,8 +24,12 @@
|
|||
{ 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');
|
||||
const start_time_ref = useTemplateRef<QInput>('start_time');
|
||||
const end_time_ref = useTemplateRef<QInput>('end_time');
|
||||
|
||||
const { dense = false, hasShiftAfter = false, isTimesheetApproved = false } = defineProps<{
|
||||
dense?: boolean;
|
||||
hasShiftAfter?: boolean;
|
||||
|
|
@ -41,12 +41,6 @@
|
|||
'requestDelete': [void];
|
||||
}>();
|
||||
|
||||
const select_ref = useTemplateRef<QSelect>('select');
|
||||
|
||||
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';
|
||||
|
|
@ -80,6 +74,10 @@
|
|||
onBeforeUnmount(() => {
|
||||
clearTimeout(timer);
|
||||
});
|
||||
|
||||
watch(() => [start_time_ref.value?.hasError, end_time_ref.value?.hasError], ([start_error, end_error]) => {
|
||||
shift.value.has_error = (start_error || end_error) ?? false;
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -98,8 +96,8 @@
|
|||
|
||||
<div :class="ui_store.is_mobile_mode ? 'column' : 'row'">
|
||||
<div
|
||||
class="row items-center text-uppercase rounded-5"
|
||||
:class="ui_store.is_mobile_mode ? 'col q-mb-xs' : 'col-4'"
|
||||
class="row items-start text-uppercase rounded-5"
|
||||
:class="ui_store.is_mobile_mode ? 'col q-mb-xs q-px-xs' : 'col-4'"
|
||||
>
|
||||
<!-- mobile comment button -->
|
||||
<q-btn
|
||||
|
|
@ -168,10 +166,10 @@
|
|||
menu-anchor="bottom middle"
|
||||
menu-self="top middle"
|
||||
:options="SHIFT_OPTIONS"
|
||||
class="col rounded-5 q-mx-xs bg-dark"
|
||||
class="col rounded-5 q-mx-xs bg-dark q-pt-xs"
|
||||
:class="!shift.is_approved && !isTimesheetApproved ? '' : 'inset-shadow'"
|
||||
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
|
||||
popup-content-class="text-uppercase text-weight-bold text-center rounded-5"
|
||||
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
|
||||
popup-content-style="border: 2px solid var(--q-accent)"
|
||||
@blur="onBlurShiftTypeSelect"
|
||||
@update:model-value="option => shift.type = option.value"
|
||||
|
|
@ -198,9 +196,10 @@
|
|||
</q-select>
|
||||
</div>
|
||||
|
||||
<div class="col row flex-center text-uppercase rounded-5 q-pa-xs">
|
||||
<div class="col row items-start text-uppercase rounded-5 q-pa-xs">
|
||||
<!-- punch in field -->
|
||||
<q-input
|
||||
ref="start_time"
|
||||
v-model="shift.start_time"
|
||||
dense
|
||||
:borderless="(shift.is_approved && isTimesheetApproved)"
|
||||
|
|
@ -208,11 +207,15 @@
|
|||
type="time"
|
||||
:standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
|
||||
label-slot
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
hide-bottom-space
|
||||
:rules="[shift_rules.isTimeRequired]"
|
||||
:label-color="!shift.is_approved ? 'accent' : 'white'"
|
||||
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
|
||||
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 && !isTimesheetApproved ? '' : 'cursor-not-allowed inset-shadow')"
|
||||
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
|
||||
input-style="font-size: 1.2em;"
|
||||
:style="shift.is_approved ? 'background-color: #0a7d32 !important;' : ''"
|
||||
>
|
||||
<template #label>
|
||||
|
|
@ -226,6 +229,7 @@
|
|||
|
||||
<!-- punch out field -->
|
||||
<q-input
|
||||
ref="end_time"
|
||||
v-model="shift.end_time"
|
||||
:standout="$q.dark.isActive ? 'bg-blue-grey-3' : 'bg-blue-grey-9'"
|
||||
dense
|
||||
|
|
@ -233,6 +237,10 @@
|
|||
:readonly="(shift.is_approved && isTimesheetApproved)"
|
||||
type="time"
|
||||
label-slot
|
||||
lazy-rules
|
||||
no-error-icon
|
||||
hide-bottom-space
|
||||
:rules="[shift_rules.isTimeRequired]"
|
||||
:label-color="!shift.is_approved ? 'accent' : 'white'"
|
||||
:input-class="'text-weight-medium ' + (shift.id === -2 ? 'text-white ' : ' ') + (shift.is_approved ? 'text-white cursor-not-allowed q-px-sm' : '')"
|
||||
input-style="font-size: 1.2em;"
|
||||
|
|
@ -250,7 +258,7 @@
|
|||
</q-input>
|
||||
|
||||
<!-- comment and delete buttons -->
|
||||
<div :class="ui_store.is_mobile_mode ? 'col-12 row' : 'col-auto'">
|
||||
<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' : ''"
|
||||
|
|
@ -347,3 +355,17 @@
|
|||
class="q-mx-md"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.q-field--error) {
|
||||
background-color: var(--q-negative) !important;
|
||||
}
|
||||
|
||||
:deep(.q-field--error .q-field__bottom) {
|
||||
color: white;
|
||||
font-weight: 900;
|
||||
border-radius: 0 0 5px 5px;
|
||||
padding-top: 0;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,30 +2,34 @@
|
|||
setup
|
||||
lang="ts"
|
||||
>
|
||||
/* eslint-disable */
|
||||
import ShiftList from 'src/modules/timesheets/components/shift-list.vue';
|
||||
import ExpenseDialog from 'src/modules/timesheets/components/expense-dialog.vue';
|
||||
import PayPeriodNavigator from 'src/modules/shared/components/pay-period-navigator.vue';
|
||||
import TimesheetErrorWidget from 'src/modules/timesheets/components/timesheet-error-widget.vue';
|
||||
import LoadingOverlay from 'src/modules/shared/components/loading-overlay.vue';
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
|
||||
import { computed } from 'vue';
|
||||
import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
|
||||
import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
|
||||
import { useExpensesStore } from 'src/stores/expense-store';
|
||||
import { useShiftApi } from 'src/modules/timesheets/composables/use-shift-api';
|
||||
import { useTimesheetStore } from 'src/stores/timesheet-store';
|
||||
|
||||
|
||||
const expenses_store = useExpensesStore();
|
||||
const timesheet_store = useTimesheetStore();
|
||||
const timesheet_api = useTimesheetApi();
|
||||
const shift_api = useShiftApi();
|
||||
const has_shift_errors = computed(() => timesheet_store.all_current_shifts.filter(shift => shift.has_error === true).length > 0);
|
||||
|
||||
const { mode = 'normal' } = defineProps<{
|
||||
mode?: 'approval' | 'normal';
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="column flex-center full-width"
|
||||
>
|
||||
<div class="column flex-center full-width">
|
||||
<LoadingOverlay v-model="timesheet_store.is_loading" />
|
||||
|
||||
<q-card
|
||||
|
|
@ -64,8 +68,8 @@
|
|||
v-if="mode === 'normal'"
|
||||
push
|
||||
rounded
|
||||
:disable="timesheet_store.is_loading"
|
||||
color="accent"
|
||||
:disable="timesheet_store.is_loading || has_shift_errors"
|
||||
:color="timesheet_store.is_loading || has_shift_errors ? 'grey-5' : 'accent'"
|
||||
icon="upload"
|
||||
:label="$t('shared.label.save')"
|
||||
class="q-mr-md"
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export class Shift {
|
|||
comment: string | undefined;
|
||||
is_approved: boolean;
|
||||
is_remote: boolean;
|
||||
error?: string;
|
||||
has_error: boolean;
|
||||
|
||||
constructor() {
|
||||
this.id = -1;
|
||||
|
|
@ -40,9 +40,17 @@ export class Shift {
|
|||
this.comment = undefined;
|
||||
this.is_approved = false;
|
||||
this.is_remote = false;
|
||||
this.has_error = false;
|
||||
}
|
||||
}
|
||||
|
||||
export interface ShiftOption {
|
||||
label: string;
|
||||
value: ShiftType;
|
||||
icon: string;
|
||||
icon_color: string;
|
||||
}
|
||||
|
||||
export interface ShiftAPIResponse {
|
||||
ok: boolean;
|
||||
data?: {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { date } from "quasar";
|
||||
import { date, patterns, type ValidationRule } from "quasar";
|
||||
import type { Shift } from "src/modules/timesheets/models/shift.models";
|
||||
|
||||
export const isShiftOverlap = (shifts: Shift[]): boolean => {
|
||||
|
|
@ -24,3 +24,11 @@ export const isShiftOverlap = (shifts: Shift[]): boolean => {
|
|||
|
||||
return false;
|
||||
};
|
||||
|
||||
export const useShiftRules = (time_required_error: string) => {
|
||||
const isTimeRequired: ValidationRule<string> = (time_string: string) => (!!time_string && patterns.testPattern.time(time_string)) || time_required_error;
|
||||
|
||||
return {
|
||||
isTimeRequired,
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { ref } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { defineStore } from 'pinia';
|
||||
import { unwrapAndClone } from 'src/utils/unwrap-and-clone';
|
||||
import { timesheetApprovalService } from 'src/modules/timesheet-approval/services/timesheet-approval-service';
|
||||
|
|
@ -13,6 +13,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
const is_loading = ref<boolean>(false);
|
||||
const pay_period = ref<PayPeriod>();
|
||||
const timesheets = ref<Timesheet[]>([]);
|
||||
const all_current_shifts = computed(() => timesheets.value.flatMap(week => week.days.flatMap(day => day.shifts)) ?? []);
|
||||
const initial_timesheets = ref<Timesheet[]>([]);
|
||||
|
||||
const pay_period_overviews = ref<TimesheetOverview[]>([]);
|
||||
|
|
@ -119,6 +120,7 @@ export const useTimesheetStore = defineStore('timesheet', () => {
|
|||
current_pay_period_overview,
|
||||
selected_employee_name,
|
||||
timesheets,
|
||||
all_current_shifts,
|
||||
initial_timesheets,
|
||||
getPayPeriodByDateOrYearAndNumber,
|
||||
getTimesheetOverviews,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user