fix(ZMS-3253 ZMS-3466 ZMS-3415 ZMS-1891): 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/datepicker.js

@@ -22,7 +22,7 @@ class AvailabilityDatePicker extends Component
             availabilityList: this.props.attributes.availabilitylist,
             minDate: moment.unix(this.props.attributes.availability.startDate).toDate(),
             minTime: setHours(setMinutes(new Date(), 1), 0),
-            maxTime: setHours(setMinutes(new Date(), 59), 23),
+            maxTime: setHours(setMinutes(new Date(), 59), 22),
             datePickerIsOpen: false,
             timPickerIsOpen: false
         }
@@ -124,34 +124,72 @@ class AvailabilityDatePicker extends Component
         if (this.state.kind === 'exclusion') {
             return;
         }
-        var times = []
-        this.state.availabilityList.map(availability => {
-            if (availability.id !== this.state.availability.id &&
+        var times = [];
+
+        // Add maintenance window times (22:00-01:00)
+        const selectedDate = moment(this.state.selectedDate);
+        for (let minute = 1; minute < 60; minute++) {
+            times.push(selectedDate.clone().hour(22).minute(minute).toDate());
+        }
+        for (let minute = 0; minute < 59; minute++) {
+            times.push(selectedDate.clone().hour(0).minute(minute).toDate());
+        }
+
+        // Filter and sort availabilities
+        const availabilities = [...this.state.availabilityList]
+            .filter(availability => 
+                availability.id !== this.state.availability.id &&
                 availability.type == this.state.availability.type &&
                 this.isWeekDaySelected(this.state.selectedDate, availability)
-            ) {
-                const startTime = moment(availability.startTime, 'hh:mm')
-                    .add(this.state.availability.slotTimeInMinutes, "m");
-                const startOnDay = moment(this.state.selectedDate)
-                    .set({"h": startTime.hours(), "m": startTime.minutes()})
-                    .toDate()
-
-                const endTime = moment(availability.endTime, 'hh:mm')
-                    .subtract(this.state.availability.slotTimeInMinutes, "m");
-                const endOnDay = moment(this.state.selectedDate)
-                    .set({"h": endTime.hours(), "m": endTime.minutes()})
-                    .toDate()
-
-                var currentTime = new Date(startOnDay)
-                while (currentTime < endOnDay) {
-                    times = [...times, new Date(currentTime)]
-                    currentTime = moment(currentTime)
-                        .add(this.state.availability.slotTimeInMinutes, "m")
-                        .toDate()
-                }
-                times = [...times, endOnDay]
+            )
+            .sort((a, b) => {
+                const timeA = moment(a.startTime, 'HH:mm');
+                const timeB = moment(b.startTime, 'HH:mm');
+                return timeA.diff(timeB);
+            });
+
+        // Add regular excluded times
+        availabilities.forEach(availability => {
+            const startTime = moment(availability.startTime, 'hh:mm')
+                .add(this.state.availability.slotTimeInMinutes, "m");
+            const startOnDay = moment(this.state.selectedDate)
+                .set({"h": startTime.hours(), "m": startTime.minutes()})
+                .toDate();
+
+            const endTime = moment(availability.endTime, 'hh:mm')
+                .subtract(this.state.availability.slotTimeInMinutes, "m");
+            const endOnDay = moment(this.state.selectedDate)
+                .set({"h": endTime.hours(), "m": endTime.minutes()})
+                .toDate();
+
+            var currentTime = new Date(startOnDay);
+            while (currentTime < endOnDay) {
+                times.push(new Date(currentTime));
+                currentTime = moment(currentTime)
+                    .add(this.state.availability.slotTimeInMinutes, "m")
+                    .toDate();
             }
+            times.push(endOnDay);
         });
+
+        // Add boundary timestamps between adjacent availabilities
+        for (let i = 0; i < availabilities.length - 1; i++) {
+            const current = availabilities[i];
+            const next = availabilities[i + 1];
+
+            const currentEnd = moment(current.endTime, 'HH:mm');
+            const nextStart = moment(next.startTime, 'HH:mm');
+
+            // If they're adjacent (end time of one equals start time of next)
+            if (currentEnd.format('HH:mm') === nextStart.format('HH:mm')) {
+                // Add the boundary timestamp to excluded times
+                const boundaryTime = moment(this.state.selectedDate)
+                    .set({"h": currentEnd.hours(), "m": currentEnd.minutes()})
+                    .toDate();
+                times.push(boundaryTime);
+            }
+        }
+
         this.setState({excludeTimeList: times});
     }
 
@@ -256,13 +294,23 @@ class AvailabilityDatePicker extends Component
             return className;
         }
 
-        /*
         const filterPassedTime = (time) => {
-            const currentDate = this.state.selectedDate;
-            const selectedDate = new Date(time);
-            return currentDate.getTime() < selectedDate.getTime();
-          };
+            if (!moment(this.state.selectedDate).isSame(moment.unix(this.props.attributes.today), 'day')) {
+                return true;
+            }
 
+            const BUFFER_MINUTES = 60; // Minimum minutes needed between current time and next slot
+            const currentTime = moment();
+            const timeToCheck = moment(time);
+
+            // Calculate minutes difference between times
+            const minutesDiff = timeToCheck.diff(currentTime, 'minutes');
+
+            // Disable if time is in past or too close to current time
+            return minutesDiff >= BUFFER_MINUTES;
+        };
+
+        /*
         const isWeekday = date => {
             const day = date.getDay();
             return day !== 0 && day !== 6;
@@ -337,7 +385,7 @@ class AvailabilityDatePicker extends Component
                                 minTime={this.state.minTime}
                                 maxTime={this.state.maxTime}
                                 excludeTimes={this.state.excludeTimeList}
-                                //filterTime={filterPassedTime}
+                                filterTime={filterPassedTime}
                                 disabled={this.props.attributes.disabled}
                                 onInputClick={this.openTimePicker}
                                 onKeyDown={this.tpKeyDownHandler}

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: []
-}
+};
 
 Errors.propTypes = {
     errorList: PropTypes.object
-}
+};
 
-export default Errors
+export default Errors;

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

@@ -2,26 +2,55 @@ import React from 'react'
 import PropTypes from 'prop-types'
 
 const FooterButtons = (props) => {
-    const { hasConflicts, stateChanged, data, onNew, onPublish, onAbort, hasSlotCountError } = props
+    const { hasConflicts, hasErrors, stateChanged, data, onNew, onPublish, onAbort, hasSlotCountError, availabilitylist } = props;
+
+    const hasNewAvailabilities = availabilitylist?.some(
+        availability => availability?.tempId?.includes('__temp__')
+    );
+
     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={( data || hasConflicts)}
+            >
+                neue Öffnungszeit
+            </button>
+            <button
+                title="Alle Änderungen werden zurückgesetzt"
+                className="button btn"
+                type="abort"
+                onClick={onAbort}
+                disabled={!stateChanged && !hasNewAvailabilities && !hasConflicts && !hasErrors}
+            >
+                Abbrechen
+            </button>
+            <button
+                title="Alle Änderungen werden gespeichert"
+                className="button button--positive button-save"
+                type="save"
+                value="publish"
+                onClick={onPublish}
+                disabled={(!stateChanged && !hasNewAvailabilities) || hasSlotCountError || hasConflicts || hasErrors}
+            >
+                Alle Änderungen aktivieren
+            </button>
         </div>
-
     )
 }
 
 FooterButtons.propTypes = {
     data: PropTypes.object,
     hasConflicts: PropTypes.bool,
+    hasErrors: PropTypes.bool,
     stateChanged: PropTypes.bool,
     onNew: PropTypes.func,
     onPublish: PropTypes.func,
-    onAbort: PropTypes.func
+    onAbort: PropTypes.func,
+    hasSlotCountError: PropTypes.bool,
+    availabilitylist: PropTypes.array
 }
 
 export default FooterButtons

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, hasErrors, hasSlotCountError } = props
+    const disabled = ((data && (! data.id || data.__modified === true)) || hasConflicts || hasErrors || 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={disabled || props.isCreatingExclusion}>Aktualisieren</button>
             </div>
         </div>
     )
@@ -30,6 +30,8 @@ const FormButtons = (props) => {
 FormButtons.propTypes = {
     data: PropTypes.object,
     hasConflicts: PropTypes.bool,
+    hasErrors: PropTypes.bool,
+    hasSlotCountError: PropTypes.bool,
     onCopy: PropTypes.func,
     onExclusion: PropTypes.func,
     onEditInFuture: PropTypes.func,

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) {
@@ -38,36 +39,40 @@ class AvailabilityForm extends Component {
         }
 
         const hasConflicts = ((
-                this.props.conflictList.itemList && 
-                Object.keys(this.props.conflictList.itemList).length
-            ) || 
+            this.props.conflictList.itemList &&
+            Object.keys(this.props.conflictList.itemList).length
+        )) ? true : false
+
+        const hasErrors = (
             (
                 this.props.errorList &&
                 Object.keys(this.props.errorList).length
-        )) ? true : false
+            )) ? true : false
 
         return (
             <div>
-                {<FormContent 
-                    today = {this.props.today} 
+                {<FormContent
+                    today={this.props.today}
                     availabilityList={this.props.availabilityList}
                     setErrorRef={this.props.setErrorRef}
                     errorList={this.props.errorList}
                     conflictList={this.props.conflictList}
                     {... { data, onChange }} />}
-                {<FormButtons 
-                    data = {data}
-                    onCopy={this.props.onCopy} 
+                {<FormButtons
+                    data={data}
+                    onCopy={this.props.onCopy}
                     onExclusion={this.props.onExclusion}
-                    onEditInFuture={this.props.onEditInFuture} 
+                    onEditInFuture={this.props.onEditInFuture}
                     onDelete={this.props.onDelete}
                     onUpdateSingle={this.props.onUpdateSingle}
                     selectedDate={this.props.selectedDate}
                     hasConflicts={hasConflicts}
+                    hasErrors={hasErrors}
+                    hasSlotCountError={hasSlotCountError(this.props)}
                     isCreatingExclusion={this.props.isCreatingExclusion}
                 />}
             </div>
-        )   
+        )
     }
 }