N°2313 - Markup extensibility: Improve success message display during the workflow

This commit is contained in:
Molkobain
2020-02-05 12:09:31 +01:00
parent 110a030902
commit 3d2a844fef
7 changed files with 85 additions and 34 deletions

View File

@@ -140,6 +140,30 @@ $(function()
me.element.find('.form_field').removeClass('has-success has-warning has-error');
me.element.find('.form_field .help-block').html('');
// Determine where we go in case validation is successful
var sRuleType = me.options.submit_rule.category;
var bRedirectInModal = me.options.submit_rule.modal;
var sRedirectUrl = me.options.submit_rule.url;
// - The validation might want us to be redirect elsewhere
if(oValidation.valid)
{
// Checking if we have to redirect to another page
// Typically this happens when applying a stimulus, we redirect to the transition form
if(oValidation.redirection !== undefined)
{
var oRedirection = oValidation.redirection;
if(oRedirection.modal !== undefined)
{
bRedirectInModal = oRedirection.modal;
}
if(oRedirection.url !== undefined)
{
sRedirectUrl = oRedirection.url;
}
sRuleType = 'redirect';
}
}
// For each type of messages (error, warning, success)...
for(var sMessageType in oMessages)
{
@@ -158,13 +182,50 @@ $(function()
}
else
{
oHelpBlock = me.element.find('.form_alerts .alert.alert-' + sMessageType);
oHelpBlock.show();
// Success messages are displayed out of the form as it will be closed
if(sMessageType === 'success')
{
// If not redirecting in a modal, will be set as session message
if((sRuleType === 'redirect') && (bRedirectInModal === false))
{
oHelpBlock = null;
}
// Otherwise, display it in main page
else
{
oHelpBlock = $('#session-messages');
}
}
// Warning and error messages are displayed in the form
else
{
oHelpBlock = me.element.find('.form_alerts .alert.alert-' + sMessageType);
oHelpBlock.show();
}
}
// ... add the message to its help block
for(var i in oMessages[sMessageType][sFieldId])
{
oHelpBlock.append($('<p>' + oMessages[sMessageType][sFieldId][i] + '</p>'));
var sMessageContent = oMessages[sMessageType][sFieldId][i];
// Note: We might want to expose some routes directly in JS to ease their use
if(oHelpBlock === null && me.options.session_message_endpoint !== null)
{
$.post(
me.options.session_message_endpoint,
{
sSeverity: sMessageType,
sContent: sMessageContent,
},
);
}
else if(oHelpBlock.attr('id') === 'session-messages')
{
oHelpBlock.append($('<div class="alert alert-dismissible alert-' + sMessageType + '" data-object-class="' + oData.form.object_class + '" data-object-id="' + oData.form.object_id + '"><button type="button" class="close" data-dismiss="alert" aria-label="X"><span class="fas fa-times"></span></button>' + sMessageContent + '</div>'));
}
else
{
oHelpBlock.append($('<p>' + sMessageContent + '</p>'));
}
}
}
}
@@ -172,35 +233,18 @@ $(function()
// Scrolling to top so the user can see messages
$('body').scrollTop(0);
// If everything is okay, we close the form and reload it.
// If everything is okay, we close the form and apply the submit rule.
if(oValidation.valid)
{
var bRedirectInModal = me.options.submit_rule.modal;
var sRedirectUrl = me.options.submit_rule.url;
$('body').trigger('unregister_blocker.portal.itop', {'sBlockerId': me.element.attr('id')});
// Checking if we have to redirect to another page
// Typically this happens when applying a stimulus, we redirect to the transition form
if(oValidation.redirection !== undefined)
{
var oRedirection = oValidation.redirection;
if(oRedirection.modal !== undefined)
{
bRedirectInModal = oRedirection.modal;
}
if(oRedirection.url !== undefined)
{
sRedirectUrl = oRedirection.url;
}
me._applyRedirectRule(sRedirectUrl, bRedirectInModal);
}
else if(me.options.submit_rule.category === 'redirect')
if(sRuleType === 'redirect')
{
me._applyRedirectRule(sRedirectUrl, bRedirectInModal);
}
// Close rule only needs to be applied to non modal forms (modal is always closed on submit)
else if(me.options.submit_rule.category === 'close')
else if(sRuleType === 'close')
{
me._applyCloseRule();
}

View File

@@ -32,7 +32,6 @@ use Combodo\iTop\Form\Field\LabelField;
use Combodo\iTop\Form\Form;
use Combodo\iTop\Form\FormManager;
use Combodo\iTop\Portal\Helper\ApplicationHelper;
use Combodo\iTop\Portal\Helper\SessionMessageHelper;
use CoreCannotSaveObjectException;
use DBObject;
use DBObjectSearch;
@@ -1156,9 +1155,7 @@ class ObjectFormManager extends FormManager
if ($bWasModified)
{
/** @var \Combodo\iTop\Portal\Helper\SessionMessageHelper $oSessionMessageHelper */
$oSessionMessageHelper = $this->oContainer->get('session_message_helper');
$oSessionMessageHelper->AddMessage(uniqid(), Dict::Format('Brick:Portal:Object:Form:Message:ObjectSaved', $this->oObject->GetName()), SessionMessageHelper::ENUM_SEVERITY_OK, array('object_class' => $sObjectClass, 'object_id' => $this->oObject->GetKey()));
$aData['messages']['success'] += array('_main' => array(Dict::Format('Brick:Portal:Object:Form:Message:ObjectSaved', $this->oObject->GetName())));
}
}
catch (Exception $e)

View File

@@ -80,6 +80,7 @@
{% if form.submit_rule is not null %}submit_rule: {{ form.submit_rule|json_encode|raw }}{% endif %},
{% if form.cancel_rule is not null %}cancel_rule: {{ form.cancel_rule|json_encode|raw }}{% endif %},
endpoint: "{{ form.renderer.GetEndpoint()|raw }}",
session_message_endpoint: "{{ app['url_generator'].generate('p_session_message_add')|raw }}",
is_modal: {% if tIsModal == true %}true{% else %}false{% endif %}
});

View File

@@ -0,0 +1,4 @@
<div class="{{ aSessionMessage['css_classes'] }}" {{ aSessionMessage['metadata']|raw }}>
<button type="button" class="close" data-dismiss="alert" aria-label="X"><span class="fas fa-times"></span></button>
{{ aSessionMessage['message'] }}
</div>

View File

@@ -0,0 +1,5 @@
<div id="session-messages">
{% for aSessionMessage in app['session_message_helper'] %}
{% include 'itop-portal-base/portal/templates/helpers/session_messages/session_message.html.twig' with {aSessionMessage: aSessionMessage} %}
{% endfor %}
</div>

View File

@@ -9,6 +9,11 @@
<div class="container-fluid" id="main-wrapper">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2">
<section class="row">
<div class="col-xs-12">
{% include 'itop-portal-base/portal/templates/helpers/session_messages/session_messages.html.twig' %}
</div>
</section>
<section class="row tiles_wrapper">
{% for brick in app['brick_collection'].home_ordering %}
{% if brick.GetVisibleHome %}

View File

@@ -325,14 +325,9 @@
<div class="container-fluid" id="main-wrapper">
<div class="row">
<div class="col-xs-12 col-sm-9 col-md-10 col-sm-offset-3 col-md-offset-2">
<section class="row" id="session-messages">
<section class="row">
<div class="col-xs-12">
{% for aSessionMessage in app['session_message_helper'] %}
<div class="{{ aSessionMessage['css_classes'] }}" {{ aSessionMessage['metadata']|raw }}>
<button type="button" class="close" data-dismiss="alert" aria-label="X"><span class="fas fa-times"></span></button>
{{ aSessionMessage['message'] }}
</div>
{% endfor %}
{% include 'itop-portal-base/portal/templates/helpers/session_messages/session_messages.html.twig' %}
</div>
</section>
<section class="row" id="main-header">