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/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

@@ -1,27 +1,91 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import moment from 'moment'
 
 const FooterButtons = (props) => {
-    const { hasConflicts, stateChanged, data, onNew, onPublish, onAbort, hasSlotCountError } = props
+    const { 
+        hasConflicts, 
+        hasErrors, 
+        stateChanged, 
+        data, 
+        onNew, 
+        onPublish, 
+        onAbort, 
+        hasSlotCountError, 
+        availabilitylist,
+        selectedDate 
+    } = props;
+
+    const hasNewAvailabilities = availabilitylist?.some(
+        availability => availability?.tempId?.includes('__temp__')
+    );
+
+    const hasSplitInProgress = (() => {
+        let hasOriginWithId = false;
+        let hasExclusion = false;
+        let hasFuture = false;
+
+        availabilitylist?.forEach(availability => {
+            if (availability?.kind) {
+                if (availability.kind === 'origin' && availability.id) {
+                    hasOriginWithId = true;
+                } else if (availability.kind === 'exclusion') {
+                    hasExclusion = true;
+                } else if (availability.kind === 'future') {
+                    hasFuture = true;
+                }
+            }
+        });
+
+        return hasOriginWithId && (hasExclusion || hasFuture);
+    })();
+
+    const isPastDate = moment.unix(selectedDate).isBefore(moment(), 'day');
+
     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 || hasSplitInProgress || isPastDate}
+            >
+                neue Öffnungszeit
+            </button>
+            <button
+                title="Alle Änderungen werden zurückgesetzt"
+                className="button btn"
+                type="abort"
+                onClick={onAbort}
+                disabled={(!stateChanged && !hasNewAvailabilities && !hasConflicts && !hasErrors) || isPastDate}
+            >
+                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 || isPastDate}
+            >
+                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,
+    selectedDate: PropTypes.number.isRequired
 }
 
-export default FooterButtons
+export default FooterButtons

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

@@ -1,27 +1,63 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import moment from 'moment'
 
 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,
+        isCreatingExclusion
+    } = props;
+
+    const disabled = ((data && (!data.id || data.__modified === true)) || hasConflicts || hasErrors || hasSlotCountError);
+    const isPastDate = moment.unix(selectedDate).isBefore(moment(), 'day');
+
     return (
         <div className="body">
             <div className="form-actions">
                 <button onClick={onDelete}
                     title="Ausgewählte Öffnungszeit löschen"
-                    className="button button--destructive button-delete" disabled={disabled}>Löschen</button>
+                    className="button button--destructive button-delete"
+                >Löschen</button>
                 <button onClick={onCopy}
                     title="Öffnungszeit kopieren und bearbeiten"
-                    className="button button--diamond" disabled={disabled}>Kopieren</button>
-                <button onClick={onExclusion}
+                    className="button button--diamond"
+                    disabled={disabled || isPastDate}>Kopieren</button>
+                <button
+                    onClick={onExclusion}
                     title="Ausnahme von dieser Öffnungszeit eintragen"
-                    className="button button--diamond" disabled={disabled || data.endDate == selectedDate}>Ausnahme</button>
+                    className="button button--diamond"
+                    disabled={disabled || data.endDate == selectedDate || isCreatingExclusion || isPastDate}
+                >
+                    Ausnahme
+                </button>
                 <button onClick={onEditInFuture}
                     title="Öffnungszeit ab diesem Tag ändern"
-                    className="button button--diamond" disabled={disabled || data.startDate == selectedDate}>Ab diesem Tag ändern</button> 
+                    className="button button--diamond"
+                    disabled={disabled || data.startDate == selectedDate || isPastDate}>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) ||
+                        !data.__modified ||
+                        hasConflicts ||
+                        hasErrors ||
+                        hasSlotCountError ||
+                        isCreatingExclusion ||
+                        isPastDate
+                    }
+                >
+                    Aktualisieren
+                </button>
             </div>
         </div>
     )
@@ -30,6 +66,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,
@@ -39,4 +77,4 @@ FormButtons.propTypes = {
     isCreatingExclusion: PropTypes.bool
 }
 
-export default FormButtons
+export default FormButtons

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>
-        )   
+        )
     }
 }