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

datamodels/2.x/itop-portal-base/portal/public/js/portal_form_handler.js

@@ -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)
 							{
@@ -157,14 +181,51 @@ $(function()
 										oHelpBlock = oField.find('.help-block');
 									}
 									else
+									{
+										// 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(sRuleType === 'redirect')
-								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')
 								{
 									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();
 								}

datamodels/2.x/itop-portal-base/portal/src/Form/ObjectFormManager.php

@@ -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 */
+					$aData['messages']['success'] += array('_main' => array(Dict::Format('Brick:Portal:Object:Form:Message:ObjectSaved', $this->oObject->GetName())));
-					$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()));
 				}
 			}
 			catch (Exception $e)

datamodels/2.x/itop-portal-base/portal/templates/bricks/object/mode_create.html.twig

@@ -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 %}
 		});
 		

datamodels/2.x/itop-portal-base/portal/templates/helpers/session_messages/session_message.html.twig

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

datamodels/2.x/itop-portal-base/portal/templates/helpers/session_messages/session_messages.html.twig

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

datamodels/2.x/itop-portal-base/portal/templates/home/layout.html.twig

@@ -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 %}

datamodels/2.x/itop-portal-base/portal/templates/layout.html.twig

@@ -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'] %}
+							{% include 'itop-portal-base/portal/templates/helpers/session_messages/session_messages.html.twig' %}
-								<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 %}
 						</div>
 					</section>
 					<section class="row" id="main-header">