Refactor event and repetition validation logic.

Simplify and centralize event scheduling and repetition validation by consolidating error handling and duration calculations. Introduced reusable utility functions and constants, improved error messaging, and streamlined runtime behavior to improve maintainability and clarity.

Author: janoliver20

src/components/dialog/StudyDialog.vue

@@ -4,7 +4,7 @@ Prevention -- A research institute of the Ludwig Boltzmann Gesellschaft,
 Oesterreichische Vereinigung zur Foerderung der wissenschaftlichen Forschung).
 Licensed under the Elastic License 2.0. */
 <script setup lang="ts">
-  import { computed, inject, reactive, ref, Ref, watch } from 'vue';
+  import { inject, reactive, ref, Ref, watch } from 'vue';
   import InputText from 'primevue/inputtext';
   import Calendar from 'primevue/calendar';
   import Textarea from 'primevue/textarea';
@@ -15,13 +15,12 @@ Licensed under the Elastic License 2.0. */
     DurationUnitEnum,
     Study,
   } from '../../generated-sources/openapi';
-  import { dateToDateString } from '../../utils/dateUtils';
+  import { createLuxonDateTime, dateToDateString } from '../../utils/dateUtils';
   import { useI18n } from 'vue-i18n';
-  import { MoreTableChoice } from '../../models/MoreTableModel';
   import { useGlobalStore } from '../../stores/globalStore';
-  import { DateTime, DurationLikeObject } from 'luxon';
   import ErrorLabel from '../forms/ErrorLabel.vue';
-  import { roundAndCeil } from '../../utils/dataUtils';
+  import { useErrorQueue } from '../../composable/useErrorHandling';
+  import { calcStudyDuration } from '../../utils/studyUtils';
 
   const dateFormat = useGlobalStore().getDateFormat;
 
@@ -57,40 +56,6 @@ Licensed under the Elastic License 2.0. */
 
   const maxStudyDuration = ref<number>(0);
 
-  const calcMaxStudyDuration = (
-    duration: Duration,
-    start: Date,
-    end: Date,
-  ): number => {
-    if (duration.unit) {
-      const startDateTime = DateTime.fromJSDate(start).set({
-        hour: 0,
-        minute: 0,
-      });
-      const endDateTime = DateTime.fromJSDate(end).set({
-        hour: 23,
-        minute: 59,
-      });
-      if (
-        !startDateTime.isValid ||
-        !endDateTime.isValid ||
-        startDateTime > endDateTime
-      ) {
-        return 0;
-      }
-      return roundAndCeil(
-        startDateTime
-          .diff(endDateTime)
-          .as(
-            duration.unit
-              ?.toString()
-              ?.toLowerCase() as keyof DurationLikeObject,
-          ),
-      );
-    }
-    return -1;
-  };
-
   const contactInstitute: Ref<string> = ref(study.contact?.institute ?? '');
   const contactPerson: Ref<string> = ref(
     study.contact?.person && study.contact?.person !== 'pending'
@@ -121,90 +86,67 @@ Licensed under the Elastic License 2.0. */
     }
   }
 
-  const errors = ref<MoreTableChoice[]>([]);
+  const { errors, clearError, getError, addError } = useErrorQueue();
 
   function checkRequiredFields(): void {
     errors.value = [];
     if (!returnStudy.title) {
-      errors.value.push({ label: 'title', value: t('study.error.addTitle') });
+      addError({ label: 'title', value: t('study.error.addTitle') });
     }
     if (!returnStudy.consentInfo) {
-      errors.value.push({
+      addError({
         label: 'consentInfo',
         value: t('study.error.addConsentInfo'),
       });
     }
     if (!returnStudy.participantInfo) {
-      errors.value.push({
+      addError({
         label: 'participantInfo',
         value: t('study.error.addParticipantInfo'),
       });
     }
     if (!contactPerson.value && !contactEmail.value) {
-      errors.value.push({
+      addError({
         label: 'contactInfo',
         value: t('study.error.addContactInfo'),
       });
     } else if (!contactPerson.value) {
-      errors.value.push({
+      addError({
         label: 'contactPerson',
         value: t('study.error.addContactPerson'),
       });
     } else if (!contactEmail.value) {
-      errors.value.push({
+      addError({
         label: 'contactEmail',
         value: t('study.error.addContactEmail'),
       });
     }
   }
 
-  const getError = computed(
-    () =>
-      (label: string | string[]): string | null | undefined => {
-        if (Array.isArray(label)) {
-          for (const lbl of label) {
-            const error = errors.value.find((el) => el.label === lbl)?.value;
-            if (error !== null && error !== undefined) {
-              return error;
-            }
-          }
-        } else {
-          return errors.value.find((el) => el.label === label)?.value;
-        }
-        return null;
-      },
-  );
-
-  const clearError = (label: string | string[]): void => {
-    if (Array.isArray(label)) {
-      errors.value = errors.value.filter((el) => !label.includes(el.label));
-    } else {
-      errors.value = errors.value.filter((el) => el.label !== label);
-    }
-  };
-
-  watch([start, end], ([newStart, newEnd]) => {
-    if (newEnd < newStart) {
-      end.value = newStart;
-    }
-  });
-
   watch(
     [studyDuration, start, end],
     ([newDuration, newStart, newEnd]) => {
-      const maxDuration = calcMaxStudyDuration(newDuration, newStart, newEnd);
-      if (maxDuration < 0) {
+      if (newEnd < newStart) {
+        end.value = newStart;
+      }
+      const maxDuration = calcStudyDuration(
+        createLuxonDateTime(newStart),
+        createLuxonDateTime(newEnd),
+        newDuration,
+      );
+      if (!maxDuration?.value) {
         return;
       } else {
-        maxStudyDuration.value = maxDuration;
+        maxStudyDuration.value = maxDuration.value;
       }
 
       if (studyDuration.value && studyDuration.value > maxStudyDuration.value) {
-        studyDuration.value = maxStudyDuration.value;
-        errors.value = errors.value.filter((err) => err.label !== 'duration');
-        errors.value.push({
+        clearError('duration');
+        addError({
           label: 'duration',
-          value: t('study.error.durationSmallerThanStudySpan'),
+          value: t('study.error.durationSmallerThanStudySpan', {
+            maxDuration: maxStudyDuration.value,
+          }),
         });
       }
     },
@@ -455,6 +397,7 @@ Licensed under the Elastic License 2.0. */
           class="!ml-2"
           type="submit"
           :label="$t('global.labels.save')"
+          :disabled="errors.length > 0"
           @click="checkRequiredFields"
         />
       </div>

src/components/shared/RelativeScheduler.vue

@@ -20,7 +20,7 @@
     correctEvent,
     correctEventRepetition,
   } from '../../utils/relativeScheduleUtils';
-  import { studyDuration } from '../../utils/studyUtils';
+  import { calcStudyDurationFromStudy } from '../../utils/studyUtils';
   import ErrorLabel from '../forms/ErrorLabel.vue';
   import { useErrorQueue } from '../../composable/useErrorHandling';
   import { valueToMinutes } from '../../utils/durationUtils';
@@ -30,7 +30,7 @@
   const studyStore = useStudyStore();
   const { study } = storeToRefs(studyStore);
   const maxDuration = computed((): Duration | undefined =>
-    studyDuration(study.value),
+    calcStudyDurationFromStudy(study.value),
   );
 
   const schedule: RelativeEvent = dialogRef.value.data.scheduler;
@@ -292,33 +292,17 @@
       newFrequency,
       newEndRep,
     ]) => {
-      const correctedEvent = correctEvent(
-        newStartOffset,
-        newEndOffset,
-        newStartTime,
-        newEndTime,
-        maxDuration.value,
-      );
-      if (correctedEvent.offsetCorrected) {
-        addError({
-          label: 'scheduleTooLong',
-          value: t('scheduler.dialog.relativeSchedule.error.scheduleTooLong'),
-        });
-      }
-      if (
-        startTime.value !== (correctedEvent.correctStart ?? startTime.value) ||
-        endTime.value !== (correctedEvent.correctEnd ?? endTime.value)
-      ) {
-        startTime.value = correctedEvent.correctStart ?? startTime.value;
-        endTime.value = correctedEvent.correctEnd ?? endTime.value;
-        addError({
-          label: 'startTimeBeforeEnd',
-          value: t(
-            'scheduler.dialog.relativeSchedule.error.startTimeBeforeEnd',
-          ),
-        });
-      }
       if (maxDuration.value) {
+        const errorInEvent = correctEvent(
+          newStartOffset,
+          newEndOffset,
+          newStartTime,
+          newEndTime,
+          maxDuration.value,
+        );
+        if (errorInEvent) {
+          addError(errorInEvent);
+        }
         const correctedRepetition = correctEventRepetition(
           startOffset.value,
           startTime.value,
@@ -327,30 +311,20 @@
           newFrequency,
           newEndRep,
           maxDuration.value,
+          !repeatChecked.value,
         );
         repetitionEnabled.value = correctedRepetition.repetitionEnabled;
         frequencyXTimes.value = correctedRepetition.numberOfRepetitions;
         if (!correctedRepetition.repetitionEnabled) {
           repeatChecked.value = false;
-        } else {
-          calcRepetition();
         }
+        calcRepetition();
         if (repeatChecked.value) {
-          if (correctedRepetition.frequencyCorrected) {
-            addError({
-              label: 'repetitionTooLong',
-              value: t(
-                'scheduler.dialog.relativeSchedule.error.rrrule.repetitionTooLong',
-              ),
-            });
+          if (correctedRepetition.frequencyError) {
+            addError(correctedRepetition.frequencyError);
           }
-          if (correctedRepetition.frequencyEndCorrected) {
-            addError({
-              label: 'repetitionEndTooLong',
-              value: t(
-                'scheduler.dialog.relativeSchedule.error.rrrule.repetitionEndTooLong',
-              ),
-            });
+          if (correctedRepetition.frequencyEndError) {
+            addError(correctedRepetition.frequencyEndError);
           }
         }
       }
@@ -410,7 +384,7 @@
               (newVal) => {
                 const dateVal = Array.isArray(newVal) ? newVal[0] : newVal;
                 startTime = createLuxonDateTime(dateVal) || startTime;
-                clearError(['startTimeBeforeEnd']);
+                clearError(['offsetCorrection']);
               }
             "
           />
@@ -434,7 +408,7 @@
             :min="1"
             @blur="calcRepetition()"
             @input="
-              clearError(['dtend', 'scheduleTooLong', 'startTimeBeforeEnd'])
+              clearError(['dtend', 'startTimeBeforeEnd', 'offsetCorrection'])
             "
           />
         </div>
@@ -450,14 +424,14 @@
               (newVal) => {
                 const dateVal = Array.isArray(newVal) ? newVal[0] : newVal;
                 endTime = createLuxonDateTime(dateVal) || endTime;
-                clearError(['startTimeBeforeEnd']);
+                clearError(['startTimeBeforeEnd', 'offsetCorrection']);
               }
             "
           />
         </div>
       </div>
       <ErrorLabel
-        :error="getError(['dtend', 'scheduleTooLong', 'startTimeBeforeEnd'])"
+        :error="getError(['dtend', 'offsetCorrection'])"
         class="col-span-5 col-start-2 border-l-2 pl-3"
       />
     </div>
@@ -501,28 +475,26 @@
               $t('scheduler.dialog.relativeSchedule.placeholder.enterNumber')
             "
             :min="1"
-            @input="clearError(['rrruleFreq', 'repetitionTooLong'])"
+            @input="clearError(['rrruleFreq', 'frequencyError'])"
           />
           <Dropdown
             v-model="frequency.unit"
             :options="repetitionUnit"
             :option-label="'label'"
             :option-value="'value'"
             class="col-span-3 ml-4"
-            @change="clearError(['rrruleFreq', 'repetitionTooLong'])"
+            @change="clearError(['rrruleFreq', 'frequencyError'])"
           />
         </div>
         <div v-if="frequencyXTimes !== undefined" class="col-span-2">
           {{
-            `${$t(
-              'scheduler.dialog.relativeSchedule.rrrule.repeated',
-            )}: ${frequencyXTimes} ${$t(
-              'scheduler.dialog.relativeSchedule.rrrule.times',
-            )}`
+            $t('scheduler.dialog.relativeSchedule.rrrule.runTime', {
+              repetitionNum: frequencyXTimes,
+            })
           }}
         </div>
         <ErrorLabel
-          :error="getError(['rrruleFreq', 'repetitionTooLong'])"
+          :error="getError(['rrruleFreq', 'frequencyError'])"
           class="col-span-5 col-start-2 border-l-2 pl-3"
         />
 
@@ -537,15 +509,15 @@
             "
             class="z-10"
             :min="1"
-            @input="clearError(['rrruleEndAfter', 'repetitionEndTooLong'])"
+            @input="clearError(['rrruleEndAfter', 'frequencyEndError'])"
           />
           <Dropdown
             v-model="endRep.unit"
             :options="repetitionUnit"
             option-label="label"
             option-value="value"
             class="z-10 col-span-3 ml-4"
-            @change="clearError(['rrruleEndAfter', 'repetitionEndTooLong'])"
+            @change="clearError(['rrruleEndAfter', 'frequencyEndError'])"
           />
         </div>
         <div v-if="totalDays && totalDays > 0" class="col-span-2">
@@ -554,7 +526,7 @@
           }}
         </div>
         <ErrorLabel
-          :error="getError(['rrruleEndAfter', 'repetitionEndTooLong'])"
+          :error="getError(['rrruleEndAfter', 'frequencyEndError'])"
           class="col-span-5 col-start-2 border-l-2 pl-3"
         />
       </div>
@@ -571,7 +543,11 @@
           :label="$t('global.labels.cancel')"
           @click="cancel()"
         />
-        <Button :label="$t('global.labels.save')" @click="save()" />
+        <Button
+          :disabled="errors.length > 0"
+          :label="$t('global.labels.save')"
+          @click="save()"
+        />
       </div>
     </div>
   </div>

src/constants.ts

@@ -0,0 +1,2 @@
+export const minutesInDay = 1440;
+export const minutesInHour = 60;