fix(ZMS-3253 ZMS-1891 ZMS-3415): Replicate frontend validation in the backend for the availability opening hours to improve data integrity and frontend validation messaging

zmsadmin/js/page/availabilityDay/form/conflicts.js

@@ -11,26 +11,31 @@ const renderConflictList = (conflictList) => {
     let conflictDatesByMessage = [];
     conflictList.map(collection => {
         collection.conflicts.map((conflict) => {
-            if (! conflictDatesByMessage[conflict.message]) {
-                Object.assign({}, conflictDatesByMessage[conflict.message] = []);
+            const existingConflict = conflictDatesByMessage.find(
+                item => item.message === conflict.message
+            );
+
+            if (existingConflict) {
+                existingConflict.dates.push(formatDate(collection.date));
+            } else {
+                conflictDatesByMessage.push({
+                    message: conflict.message,
+                    dates: [formatDate(collection.date)]
+                });
             }
-            conflictDatesByMessage[conflict.message].push(formatDate(collection.date))
-        })
-    })
+        });
+    });
 
     return (
-        Object.keys(conflictDatesByMessage).map((key, index) => {
-            return (
-                <div key={index}>
-                    <div><strong>{ conflictDatesByMessage[key].join(", ")  }</strong></div>
-                    <div key={index}>- {key}</div>
-                </div>
-            )
-        })
-    )
-
-
-}
+        conflictDatesByMessage.map((item, index) => (
+            <div key={index} style={{ marginBottom: '1rem' }}>
+                {/* Convert newlines in the message to <br /> tags */}
+                <div dangerouslySetInnerHTML={{ __html: item.message.replace(/\n/g, '<br />') }} />
+            </div>
+        ))
+    );
+};
+
 
 const Conflicts = (props) => {
     const conflicts = Object.keys(props.conflictList).map(key => {

zmsadmin/js/page/availabilityDay/form/errors.js

@@ -1,15 +1,20 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
 
-const renderErrors = errors => Object.keys(errors).map(key => {
-    return (
+const renderErrors = (errors) => 
+    Object.keys(errors).map(key => (
         <div key={errors[key].id}>
             {errors[key].itemList.map((item, index) => {
-                return <div key={index}>{item[0].message}</div>
-            })}   
+                if (Array.isArray(item)) {
+                    return item.map((nestedItem, nestedIndex) => (
+                        <div key={`${index}-${nestedIndex}`}>{nestedItem.message}</div>
+                    ));
+                } else {
+                    return <div key={index}>{item.message}</div>;
+                }
+            })}
         </div>
-    )
-})
+    ));
 
 const Errors = (props) => {
     return (
@@ -18,15 +23,15 @@ const Errors = (props) => {
             <h3>Folgende Fehler sind bei der Prüfung Ihrer Eingaben aufgetreten:</h3>
             {renderErrors(props.errorList)}
         </div> : null
-    )
-}
+    );
+};
 
 Errors.defaultProps = {
-    errorList: []
-}
+    errorList: {}
+};
 
 Errors.propTypes = {
     errorList: PropTypes.object
-}
+};
 
-export default Errors
+export default Errors;

zmsadmin/js/page/availabilityDay/form/footerButtons.js

@@ -4,14 +4,12 @@ import PropTypes from 'prop-types'
 const FooterButtons = (props) => {
     const { hasConflicts, stateChanged, data, onNew, onPublish, onAbort, hasSlotCountError } = props
     return (
-        <div className="form-actions" style={{"marginTop":"0", "padding":"0.75em"}}>    
-                 <button title="Neue Öffnungszeit anlegen und bearbeiten" className="button button--diamond button-new" onClick={onNew} disabled={(stateChanged || hasConflicts || data)}>neue Öffnungszeit</button> 
-                <button title="Alle Änderungen werden zurückgesetzt" className="button btn" type="abort" onClick={onAbort} disabled={(!stateChanged && !hasConflicts && !data)}>Abbrechen</button>
-                <button title="Alle Änderungen werden gespeichert" className="button button--positive button-save" type="save" value="publish" onClick={onPublish} disabled={(!stateChanged  || hasSlotCountError)}>Alle Änderungen aktivieren
-                </button>
-
+        <div className="form-actions" style={{ "marginTop": "0", "padding": "0.75em" }}>
+            <button title="Neue Öffnungszeit anlegen und bearbeiten" className="button button--diamond button-new" onClick={onNew} disabled={(stateChanged || hasConflicts || data)}>neue Öffnungszeit</button>
+            <button title="Alle Änderungen werden zurückgesetzt" className="button btn" type="abort" onClick={onAbort} disabled={(!stateChanged && !hasConflicts && !data)}>Abbrechen</button>
+            <button title="Alle Änderungen werden gespeichert" className="button button--positive button-save" type="save" value="publish" onClick={onPublish} disabled={(!stateChanged || hasSlotCountError || hasConflicts)}>Alle Änderungen aktivieren
+            </button>
         </div>
-
     )
 }
 

zmsadmin/js/page/availabilityDay/form/formButtons.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const FormButtons = (props) => {
-    const { data, onCopy, onExclusion, onEditInFuture, onUpdateSingle, onDelete, selectedDate, hasConflicts } = props
-    const disabled = ((data && (! data.id || data.__modified === true)) || hasConflicts);
+    const { data, onCopy, onExclusion, onEditInFuture, onUpdateSingle, onDelete, selectedDate, hasConflicts, hasSlotCountError } = props
+    const disabled = ((data && (! data.id || data.__modified === true)) || hasConflicts || hasSlotCountError);
     return (
         <div className="body">
             <div className="form-actions">
@@ -21,7 +21,7 @@ const FormButtons = (props) => {
                     className="button button--diamond" disabled={disabled || data.startDate == selectedDate}>Ab diesem Tag ändern</button> 
                 <button onClick={onUpdateSingle}
                     title="Öffnungszeit aktualisieren"
-                    className="button button--diamond" disabled={(data && !data.id) || hasConflicts || props.isCreatingExclusion}>Aktualisieren</button>
+                    className="button button--diamond" disabled={(data && !data.id) || hasConflicts || hasSlotCountError || props.isCreatingExclusion}>Aktualisieren</button>
             </div>
         </div>
     )

zmsadmin/js/page/availabilityDay/form/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import FormButtons from './formButtons'
 import FormContent from './content'
 import { getDataValuesFromForm, cleanupFormData, getFormValuesFromData } from '../helpers'
+import { hasSlotCountError } from '../form/validate';
 
 class AvailabilityForm extends Component {
     constructor(props) {
@@ -64,6 +65,7 @@ class AvailabilityForm extends Component {
                     onUpdateSingle={this.props.onUpdateSingle}
                     selectedDate={this.props.selectedDate}
                     hasConflicts={hasConflicts}
+                    hasSlotCountError={hasSlotCountError(this.props)}
                     isCreatingExclusion={this.props.isCreatingExclusion}
                 />}
             </div>

zmsadmin/js/page/availabilityDay/form/validate.js

@@ -1,34 +1,143 @@
-import moment from 'moment'
+import moment from 'moment';
 
 const validate = (data, props) => {
-    const currentTime = new Date()
-    const today = moment(props.today, 'X')
-    today.set('hour', currentTime.getHours())
-    today.set('minute', currentTime.getMinutes())
-    today.set('second', currentTime.getSeconds())
-
-    const selectedDate = moment(props.timestamp, 'X')
-    const yesterday = selectedDate.startOf('day').clone().subtract(1, 'days')
-    const tomorrow = selectedDate.startOf('day').clone().add(1, 'days')
-    
+    const currentTime = new Date();
+    const today = moment(props.today, 'X');
+    today.set('hour', currentTime.getHours());
+    today.set('minute', currentTime.getMinutes());
+    today.set('second', currentTime.getSeconds());
+
+    const selectedDate = moment(props.timestamp, 'X');
+    const yesterday = selectedDate.startOf('day').clone().subtract(1, 'days');
+    const tomorrow = selectedDate.startOf('day').clone().add(1, 'days');
+
     let errorList = {
         id: data.id || data.tempId,
         itemList: []
-    }
+    };
+
+    errorList.itemList.push(validateNullValues(data));
+    errorList.itemList.push(validateTimestampAndTimeFormats(data));
+    errorList.itemList.push(validateStartTime(today, tomorrow, selectedDate, data));
+    errorList.itemList.push(validateEndTime(today, yesterday, selectedDate, data));
+    errorList.itemList.push(validateOriginEndTime(today, yesterday, selectedDate, data));
+    errorList.itemList.push(validateType(data));
+    errorList.itemList.push(validateSlotTime(data));
 
-    errorList.itemList.push(validateStartTime(today, tomorrow, selectedDate, data))
-    errorList.itemList.push(validateEndTime(today, yesterday, selectedDate, data))
-    errorList.itemList.push(validateOriginEndTime(today, yesterday, selectedDate, data))
-    errorList.itemList.push(validateType(data))
-    errorList.itemList.push(validateSlotTime(data))
-
     errorList.itemList = errorList.itemList.filter(el => el.length);
-    let valid = (0 < errorList.itemList.length) ? false : true
+    let valid = (0 < errorList.itemList.length) ? false : true;
 
     return {
         valid,
         errorList
+    };
+};
+
+function validateNullValues(data) {
+    let errorList = [];
+
+    if (!data.startDate) {
+        errorList.push({
+            type: 'startDateNull',
+            message: 'Das Startdatum darf nicht leer sein.'
+        });
+    }
+
+    if (!data.endDate) {
+        errorList.push({
+            type: 'endDateNull',
+            message: 'Das Enddatum darf nicht leer sein.'
+        });
+    }
+
+    if (!data.startTime) {
+        errorList.push({
+            type: 'startTimeNull',
+            message: 'Die Startzeit darf nicht leer sein.'
+        });
+    }
+
+    if (!data.endTime) {
+        errorList.push({
+            type: 'endTimeNull',
+            message: 'Die Endzeit darf nicht leer sein.'
+        });
+    }
+
+    return errorList;
+}
+
+function validateTimestampAndTimeFormats(data) {
+    let errorList = [];
+    const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
+
+    let isStartDateValid = isValidTimestamp(data.startDate);
+    let isEndDateValid = isValidTimestamp(data.endDate);
+
+    if (!isStartDateValid) {
+        errorList.push({
+            type: 'startDateInvalid',
+            message: 'Das Startdatum ist kein gültiger Zeitstempel.'
+        });
+    }
+
+    if (!isEndDateValid) {
+        errorList.push({
+            type: 'endDateInvalid',
+            message: 'Das Enddatum ist kein gültiger Zeitstempel.'
+        });
+    }
+
+    if (data.startTime) {
+        if (!timeRegex.test(data.startTime)) {
+            errorList.push({
+                type: 'startTimeFormat',
+                message: 'Die Startzeit muss im Format "HH:mm:ss" oder "HH:mm" vorliegen.'
+            });
+        }
+    } else {
+        errorList.push({
+            type: 'startTimeMissing',
+            message: 'Die Startzeit darf nicht leer sein.'
+        });
+    }
+
+    if (data.endTime) {
+        if (!timeRegex.test(data.endTime)) {
+            errorList.push({
+                type: 'endTimeFormat',
+                message: 'Die Endzeit muss im Format "HH:mm:ss" oder "HH:mm" vorliegen.'
+            });
+        }
+    } else {
+        errorList.push({
+            type: 'endTimeMissing',
+            message: 'Die Endzeit darf nicht leer sein.'
+        });
     }
+
+    if (isStartDateValid && isEndDateValid) {
+        if (new Date(data.startDate) > new Date(data.endDate)) {
+            errorList.push({
+                type: 'dateOrderInvalid',
+                message: 'Das Startdatum darf nicht nach dem Enddatum liegen.'
+            });
+        }
+    }
+
+    return errorList;
+}
+
+function isValidTimestamp(timestamp) {
+    return !Number.isNaN(Number(timestamp)) && moment.unix(timestamp).isValid();
+}
+
+function parseTimestampAndTime(dateTimestamp, timeStr) {
+    const date = moment.unix(dateTimestamp);
+    if (!date.isValid()) return null;
+
+    const [hours, minutes, seconds] = timeStr.split(':').map((val, index) => parseInt(val || 0));
+    return date.set({ hour: hours, minute: minutes, second: seconds });
 }
 
 function validateStartTime(today, tomorrow, selectedDate, data) {
@@ -48,15 +157,15 @@ function validateStartTime(today, tomorrow, selectedDate, data) {
             message: `Das Startdatum der Öffnungszeit muss vor dem ${tomorrow.format('DD.MM.YYYY')} liegen.`
         })
     }
-/*
-    if (isOrigin && startTime.isBefore(today.startOf('day'), 'day') && data.__modified) {
-        errorList.push({
-            type: 'startTimeOrigin', 
-            message: 'Öffnungszeiten in der Vergangenheit lassen sich nicht bearbeiten '
-            + '(Der Terminanfang am "'+startDateTime.format('DD.MM.YYYY')+' liegt vor dem heutigen Tag").'
-        })
-    }
-*/
+    /*
+        if (isOrigin && startTime.isBefore(today.startOf('day'), 'day') && data.__modified) {
+            errorList.push({
+                type: 'startTimeOrigin', 
+                message: 'Öffnungszeiten in der Vergangenheit lassen sich nicht bearbeiten '
+                + '(Der Terminanfang am "'+startDateTime.format('DD.MM.YYYY')+' liegt vor dem heutigen Tag").'
+            })
+        }
+    */
 
     if ((startHour == "00" && startMinute == "00") || (endHour == "00" && endMinute == "00")) {
         errorList.push({
@@ -83,14 +192,17 @@ function validateEndTime(today, yesterday, selectedDate, data) {
     if (dayMinutesEnd <= dayMinutesStart) {
         errorList.push({
             type: 'endTime', 
-            message: 'Die Uhrzeit "von" muss kleiner der Uhrzeit "bis" sein.'
+            message: 'Die Endzeit darf nicht vor der Startzeit liegen.'
         })
-    } else if (startTimestamp >= endTimestamp) {
+    } 
+
+    if (startTimestamp >= endTimestamp) {
         errorList.push({
             type: 'endTime', 
-            message: 'Das Startdatum muss nach dem Enddatum sein.'
+            message: 'Das Enddatum darf nicht vor dem Startdatum liegen.'
         })
     }
+
     return errorList;
 }
 

zmsadmin/js/page/availabilityDay/helpers.js

@@ -187,10 +187,6 @@ export const cleanupAvailabilityForSave = availability => {
         delete newAvailability.tempId;
     }
 
-    if (newAvailability.kind) {
-        delete newAvailability.kind;
-    }
-
     return newAvailability;
 }