From 25ca89a701d37915608b188e72d057f5b58c7028 Mon Sep 17 00:00:00 2001
From: mokaddem <sami.mokaddem@circl.lu>
Date: Wed, 30 Jun 2021 12:18:58 +0200
Subject: [PATCH] chg: [CRUD] Improved validation message feedback

---
 src/Controller/Component/CRUDComponent.php | 32 +++++++++++++++++-----
 webroot/js/bootstrap-helper.js             |  9 +++---
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/Controller/Component/CRUDComponent.php b/src/Controller/Component/CRUDComponent.php
index e2e8fbe..2c4704d 100644
--- a/src/Controller/Component/CRUDComponent.php
+++ b/src/Controller/Component/CRUDComponent.php
@@ -165,7 +165,8 @@ class CRUDComponent extends Component
                 }
             } else {
                 $this->Controller->isFailResponse = true;
-                $validationMessage = $this->prepareValidationError($data);
+                $validationErrors = $data->getErrors();
+                $validationMessage = $this->prepareValidationMessage($validationErrors);
                 $message = __(
                     '{0} could not be added.{1}',
                     $this->ObjectAlias,
@@ -174,7 +175,7 @@ class CRUDComponent extends Component
                 if ($this->Controller->ParamHandler->isRest()) {
                     $this->Controller->restResponsePayload = $this->RestResponse->viewData($message, 'json');
                 } else if ($this->Controller->ParamHandler->isAjax()) {
-                    $this->Controller->ajaxResponsePayload = $this->RestResponse->ajaxFailResponse($this->ObjectAlias, 'add', $data, $message, $validationMessage);
+                    $this->Controller->ajaxResponsePayload = $this->RestResponse->ajaxFailResponse($this->ObjectAlias, 'add', $data, $message, $validationErrors);
                 } else {
                     $this->Controller->Flash->error($message);
                 }
@@ -183,6 +184,21 @@ class CRUDComponent extends Component
         $this->Controller->set('entity', $data);
     }
 
+    private function prepareValidationMessage($errors)
+    {
+        $validationMessage = '';
+        if (!empty($errors)) {
+            if (count($errors) == 1) {
+                $field = array_keys($errors)[0];
+                $fieldError = implode(', ', array_values($errors[$field]));
+                $validationMessage = __('{0}: {1}', $field, $fieldError);
+            } else {
+                $validationMessage = __('There has been validation issues with multiple fields');
+            }
+        }
+        return $validationMessage;
+    }
+
     private function prepareValidationError($data)
     {
         $validationMessage = '';
@@ -192,7 +208,7 @@ class CRUDComponent extends Component
                 foreach ($errorData as $key => $value) {
                     $errorMessages[] = $value;
                 }
-                $validationMessage .= __(' {1}', $field, implode(',', $errorMessages));
+                $validationMessage .= __('{0}: {1}', $field, implode(',', $errorMessages));
             }
         }
         return $validationMessage;
@@ -261,14 +277,15 @@ class CRUDComponent extends Component
                     }
                 }
             } else {
-                $validationMessage = $this->prepareValidationError($data);
+                $validationErrors = $data->getErrors();
+                $validationMessage = $this->prepareValidationMessage($validationErrors);
                 $message = __(
                     __('{0} could not be modified.'),
                     $this->ObjectAlias
                 );
                 if ($this->Controller->ParamHandler->isRest()) {
                 } else if ($this->Controller->ParamHandler->isAjax()) {
-                    $this->Controller->ajaxResponsePayload = $this->RestResponse->ajaxFailResponse($this->ObjectAlias, 'edit', $data, $message, $data->getErrors());
+                    $this->Controller->ajaxResponsePayload = $this->RestResponse->ajaxFailResponse($this->ObjectAlias, 'edit', $data, $message, $validationErrors);
                 } else {
                     $this->Controller->Flash->error($message);
                 }
@@ -699,7 +716,8 @@ class CRUDComponent extends Component
                     }
                 }
             } else {
-                $validationMessage = $this->prepareValidationError($data);
+                $validationErrors = $data->getErrors();
+                $validationMessage = $this->prepareValidationMessage($validationErrors);
                 $message = __(
                     '{0} could not be modified.{1}',
                     $this->ObjectAlias,
@@ -707,7 +725,7 @@ class CRUDComponent extends Component
                 );
                 if ($this->Controller->ParamHandler->isRest()) {
                 } else if ($this->Controller->ParamHandler->isAjax()) {
-                    $this->Controller->ajaxResponsePayload = $this->RestResponse->ajaxFailResponse($this->ObjectAlias, 'toggle', $message, $validationMessage);
+                    $this->Controller->ajaxResponsePayload = $this->RestResponse->ajaxFailResponse($this->ObjectAlias, 'toggle', $message, $validationErrors);
                 } else {
                     $this->Controller->Flash->error($message);
                     if (empty($params['redirect'])) {
diff --git a/webroot/js/bootstrap-helper.js b/webroot/js/bootstrap-helper.js
index 09e5719..6c4176b 100644
--- a/webroot/js/bootstrap-helper.js
+++ b/webroot/js/bootstrap-helper.js
@@ -996,21 +996,22 @@ class FormValidationHelper {
     injectValidationErrorInForm(fieldName, errors) {
         const inputField = Array.from(this.form).find(node => { return node.name == fieldName })
         if (inputField !== undefined) {
-            const $messageNode = this.buildValidationMessageNode(errors)
+            const $messageNode = this.buildValidationMessageNode(fieldName, errors)
             const $inputField = $(inputField)
             $inputField.addClass('is-invalid')
             $messageNode.insertAfter($inputField)
         } else {
-            const $messageNode = this.buildValidationMessageNode(errors, true)
+            const $messageNode = this.buildValidationMessageNode(fieldName, errors, true)
             const $flashContainer = $(this.form).parent().find('#flashContainer')
             $messageNode.insertAfter($flashContainer)
         }
     }
 
-    buildValidationMessageNode(errors, isAlert=false) {
+    buildValidationMessageNode(fieldName, errors, isAlert=false) {
         const $messageNode = $('<div></div>')
         if (isAlert) {
             $messageNode.addClass('alert alert-danger').attr('role', 'alert')
+            $messageNode.append($('<strong></strong>').text(`${fieldName}: `))
         } else {
             $messageNode.addClass('invalid-feedback')
         }
@@ -1020,7 +1021,7 @@ class FormValidationHelper {
                 if (hasMultipleErrors) {
                     $messageNode.append($('<li></li>').text(error))
                 } else {
-                    $messageNode.text(error)
+                    $messageNode.append($('<span></span>').text(error))
                 }
             }
         } else {