chg: [CRUD] Improved validation message feedback

pull/67/head
mokaddem 2021-06-30 12:18:58 +02:00
parent 186fba395a
commit 25ca89a701
2 changed files with 30 additions and 11 deletions

View File

@ -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'])) {

View File

@ -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 {