N°3649 - Activity panel: Add transitions to the save button using the button group

This commit is contained in:
Molkobain
2021-03-24 19:43:17 +01:00
parent 318d8ce3c9
commit 573a6d82fe
7 changed files with 55 additions and 80 deletions

View File

@@ -392,10 +392,12 @@ We hope youll enjoy this version as much as we enjoyed imagining and creating
'UI:Button:Query' => ' Query ',
'UI:Button:Ok' => 'Ok',
'UI:Button:Save' => 'Save',
'UI:Button:SaveAnd' => 'Save and %1$s',
'UI:Button:Cancel' => 'Cancel',
'UI:Button:Close' => 'Close',
'UI:Button:Apply' => 'Apply',
'UI:Button:Send' => 'Send',
'UI:Button:SendAnd' => 'Send and %1$s',
'UI:Button:Back' => ' << Back ',
'UI:Button:Restart' => ' |<< Restart ',
'UI:Button:Next' => ' Next >> ',

View File

@@ -385,10 +385,12 @@ Dict::Add('FR FR', 'French', 'Français', array(
'UI:Button:Query' => ' Lancer la requête ',
'UI:Button:Ok' => 'Ok',
'UI:Button:Save' => 'Sauver',
'UI:Button:SaveAnd' => 'Sauver et %1$s',
'UI:Button:Cancel' => 'Annuler',
'UI:Button:Close' => 'Fermer',
'UI:Button:Apply' => 'Appliquer',
'UI:Button:Send' => 'Send~~',
'UI:Button:Send' => 'Envoyer',
'UI:Button:SendAnd' => 'Envoyer et %1$s',
'UI:Button:Back' => ' << Retour ',
'UI:Button:Restart' => ' |<< Recommencer ',
'UI:Button:Next' => ' Suite >> ',

View File

@@ -205,8 +205,8 @@ $(function()
me._onCancelledEntryForm();
});
// - Entry form submission request
this.element.on('request_submission.caselog_entry_form.itop', function () {
me._onRequestSubmission();
this.element.on('requested_submission.caselog_entry_form.itop', function (oEvent, oData) {
me._onRequestSubmission(oEvent, oData);
});
// Entries
@@ -414,7 +414,7 @@ $(function()
* been edited and the user hasn't dismiss the dialog.
* @private
*/
_onRequestSubmission: function () {
_onRequestSubmission: function (oEvent, oData) {
// Check lock state
if (this.enums.lock_status.locked_by_myself !== this.options.lock_status) {
CombodoJSConsole.Debug('ActivityPanel: Could not submit entries, current user does not have the lock on the object');
@@ -427,7 +427,8 @@ $(function()
}
// Else push data directly to the server
else {
this._SendEntriesToServer();
let sStimulusCode = (undefined !== oData.stimulus_code) ? oData.stimulus_code : null
this._SendEntriesToServer(sStimulusCode);
}
},
_onCaseLogClosedMessageClick: function (oEntryElem) {
@@ -812,9 +813,11 @@ $(function()
},
/**
* Send the edited case logs entries to the server
* @param sStimulusCode {string} Stimulus code to apply after the entries are saved
* @return {void}
* @private
*/
_SendEntriesToServer: function () {
_SendEntriesToServer: function (sStimulusCode = null) {
const me = this;
const oEntries = this._GetEntriesFromAllForms();
@@ -861,15 +864,10 @@ $(function()
// For now, we don't hide the forms as the user may want to add something else
me.element.find(me.js_selectors.caselog_entry_form).trigger('clear_entry.caselog_entry_form.itop');
// TODO 3.0.0: Redirect to transition page if necessary (buttons need to be added)
// // Redirect to stimulus
// if(sStimulusCode !== null){
// window.location.href = GetAbsoluteUrlAppRoot()+'pages/UI.php?operation=stimulus&class='+sObjClass+'&id='+sObjId+'&stimulus='+sStimulusCode;
// }
// TODO 3.0.0: If no stimulus
// On done, lock was release, remove message
// On done, renew transaction ID
// Redirect to stimulus
if (null !== sStimulusCode) {
window.location.href = GetAbsoluteUrlAppRoot()+'pages/UI.php?operation=stimulus&class='+me._GetHostObjectClass()+'&id='+me._GetHostObjectID()+'&stimulus='+sStimulusCode;
}
})
.always(function () {
// Always, unfreeze case logs

View File

@@ -43,7 +43,7 @@ $(function() {
main_actions: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"]',
cancel_button: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="cancel"]',
save_button: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="save"]',
save_choices_picker: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="save"] + [data-role="ibo-popover-menu"]',
save_choices_picker: '[data-role="ibo-caselog-entry-form--action-buttons--main-actions"] [data-role="ibo-button"][name="save"] + [data-role="ibo-button"]',
},
enums:
{
@@ -132,6 +132,11 @@ $(function() {
me._HideEntryForm();
});
// Form submission
this.element.on('save_entry.caselog_entry_form.itop', function (oEvent, oData) {
me._RequestSubmission(oData.stimulus_code);
});
// Form enable/disable submission
this.element.on('disable_submission.caselog_entry_form.itop', function () {
me._DisableSubmission();
@@ -166,8 +171,19 @@ $(function() {
_IsSubmitAutonomous: function () {
return this.options.submit_mode === this.enums.submit_mode.autonomous;
},
_RequestSubmission: function () {
this.element.trigger('request_submission.caselog_entry_form.itop');
/**
* @param sStimulusCode {string} Optional stimulus code to apply after submission
* @return {void}
* @private
*/
_RequestSubmission: function (sStimulusCode = null) {
let oData = {};
if (null !== sStimulusCode) {
oData['stimulus_code'] = sStimulusCode;
}
this.element.trigger('requested_submission.caselog_entry_form.itop', oData);
},
// - Form
_GetCKEditorInstance: function () {
@@ -182,10 +198,10 @@ $(function() {
// TODO 3.0.0: This should also clear the form (input, lock, send button, ...)
},
_DisableSubmission: function () {
this.element.find(this.js_selectors.save_button).prop('disabled', true);
this.element.find(this.js_selectors.save_button+', '+this.js_selectors.save_choices_picker).prop('disabled', true);
},
_EnableSubmission: function () {
this.element.find(this.js_selectors.save_button).prop('disabled', false);
this.element.find(this.js_selectors.save_button+', '+this.js_selectors.save_choices_picker).prop('disabled', false);
},
_EnterPendingSubmissionState: function () {
this._GetCKEditorInstance().setReadOnly(true);
@@ -277,7 +293,7 @@ $(function() {
this._UpdateSubmitButtonState();
},
_UpdateSubmitButtonState: function() {
this.element.find(this.js_selectors.save_button).prop('disabled', this._IsInputEmpty());
this.element.find(this.js_selectors.save_button+', '+this.js_selectors.save_choices_picker).prop('disabled', this._IsInputEmpty());
},
_UpdateEditingVisualHint: function() {
const sEvent = this._IsInputEmpty() ? 'emptied' : 'draft';

View File

@@ -7,7 +7,6 @@ namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\CaseLogEntryForm
use cmdbAbstractObject;
use Combodo\iTop\Application\UI\Base\Component\Input\RichText\RichText;
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
use Combodo\iTop\Application\UI\Base\UIBlock;
use DBObject;
@@ -46,8 +45,6 @@ class CaseLogEntryForm extends UIContentBlock
protected $sSubmitMode;
/** @var \Combodo\iTop\Application\UI\Base\Component\Input\RichText\RichText $oTextInput The main input to write a case log entry */
protected $oTextInput;
/** @var \Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu Menu for possible options on the send button */
protected $oSendButtonPopoverMenu;
/** @var array $aMainActionButtons The form main actions (send, cancel, ...) */
protected $aMainActionButtons;
/** @var array $aExtraActionButtons The form extra actions, can be populated through a public API */
@@ -263,34 +260,6 @@ class CaseLogEntryForm extends UIContentBlock
return $this;
}
/**
* @return \Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu
*/
public function GetSendButtonPopoverMenu(): PopoverMenu
{
return $this->oSendButtonPopoverMenu;
}
/**
* @param \Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu $oCaseLogSelectionPopOverMenu
* @return $this
*/
public function SetSendButtonPopoverMenu(PopoverMenu $oCaseLogSelectionPopOverMenu)
{
$this->oSendButtonPopoverMenu = $oCaseLogSelectionPopOverMenu;
return $this;
}
/**
* Return true is there is a PopoverMenu for the send button
*
* @return bool
*/
public function HasSendButtonPopoverMenu(): bool
{
return $this->oSendButtonPopoverMenu !== null;
}
/**
* @inheritdoc
*/
@@ -307,10 +276,6 @@ class CaseLogEntryForm extends UIContentBlock
$aSubBlocks[$oMainActionButton->GetId()] = $oMainActionButton;
}
if ($this->HasSendButtonPopoverMenu()) {
$aSubBlocks[$this->GetSendButtonPopoverMenu()->GetId()] = $this->GetSendButtonPopoverMenu();
}
return $aSubBlocks;
}

View File

@@ -11,6 +11,7 @@ namespace Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\CaseLogEntryForm
use cmdbAbstractObject;
use Combodo\iTop\Application\UI\Base\Component\Button\Button;
use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\ButtonGroup\ButtonGroupUIBlockFactory;
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenu;
use Combodo\iTop\Application\UI\Base\Component\PopoverMenu\PopoverMenuItem\PopoverMenuItemFactory;
use Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\CaseLogEntryForm\CaseLogEntryForm;
@@ -36,11 +37,16 @@ class CaseLogEntryFormFactory
{
$oCaseLogEntryForm = new CaseLogEntryForm($oObject, $sCaseLogAttCode);
$oCaseLogEntryForm->SetSubmitModeFromHostObjectMode($sObjectMode)
->AddMainActionButtons(static::PrepareCancelButton())
->AddMainActionButtons(static::PrepareSaveButton());
->AddMainActionButtons(static::PrepareCancelButton());
// TODO 3.0.0: Will be fixed by N°3649
// ->SetSendButtonPopoverMenu(static::PrepareSendActionSelectionPopoverMenu($oObject, $sCaseLogAttCode));
$oSaveButton = static::PrepareSaveButton();
$oTransitionsMenu = static::PrepareTransitionsSelectionPopoverMenu($oObject, $sCaseLogAttCode);
if (true === $oTransitionsMenu->HasItems()) {
$oButtonGroup = ButtonGroupUIBlockFactory::MakeButtonWithOptionsMenu($oSaveButton, $oTransitionsMenu);
$oCaseLogEntryForm->AddMainActionButtons($oButtonGroup);
} else {
$oCaseLogEntryForm->AddMainActionButtons($oSaveButton);
}
return $oCaseLogEntryForm;
}
@@ -64,7 +70,7 @@ class CaseLogEntryFormFactory
return $oButton;
}
protected static function PrepareSendActionSelectionPopoverMenu(DBObject $oObject, string $sCaseLogAttCode): PopoverMenu
protected static function PrepareTransitionsSelectionPopoverMenu(DBObject $oObject, string $sCaseLogAttCode): PopoverMenu
{
$sObjClass = get_class($oObject);
@@ -74,19 +80,6 @@ class CaseLogEntryFormFactory
$sCaseLogEntryFormDataRole = CaseLogEntryForm::BLOCK_CODE;
// Standard, just save
$oMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
new JSPopupMenuItem(
CaseLogEntryForm::BLOCK_CODE.'--add-action--'.$sCaseLogAttCode.'--save',
Dict::S('UI:Button:Save'),
<<<JS
$(this).closest('[data-role="{$sCaseLogEntryFormDataRole}"]').trigger('add_to_caselog.caselog_entry_form.itop', {caselog_att_code: '{$sCaseLogAttCode}'});
JS
)
);
$oMenu->AddItem($sSectionId, $oMenuItem);
// Transitions
// Note: This code is inspired from cmdbAbstract::DisplayModifyForm(), it might be better to factorize it
$aTransitions = $oObject->EnumTransitions();
if (!isset($aExtraParams['custom_operation']) && count($aTransitions)) {
@@ -100,9 +93,9 @@ JS
$oMenuItem = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
new JSPopupMenuItem(
CaseLogEntryForm::BLOCK_CODE.'--add-action--'.$sCaseLogAttCode.'--stimulus--'.$sStimulusCode,
$aStimuli[$sStimulusCode]->GetLabel(),
Dict::Format('UI:Button:SendAnd', $aStimuli[$sStimulusCode]->GetLabel()),
<<<JS
$(this).closest('[data-role="{$sCaseLogEntryFormDataRole}"]').trigger('add_to_caselog.caselog_entry_form.itop', {caselog_att_code: '{$sCaseLogAttCode}', stimulus_code: '{$sStimulusCode}'});
$(this).closest('[data-role="{$sCaseLogEntryFormDataRole}"]').trigger('save_entry.caselog_entry_form.itop', {stimulus_code: '{$sStimulusCode}'});
JS
)
);

View File

@@ -1,3 +1,4 @@
{% apply spaceless %}
<form id="{{ oUIBlock.GetId() }}"
class="ibo-caselog-entry-form {% if oUIBlock.IsSubmitAutonomous() and (bInitOpened == false) %}ibo-is-closed{% endif %}"
data-role="ibo-caselog-entry-form"
@@ -17,9 +18,6 @@
{% for FormActionButton in oUIBlock.GetMainActionButtons() %}
{{ render_block(FormActionButton, {aPage: aPage}) }}
{% endfor %}
{% if oUIBlock.HasSendButtonPopoverMenu() %}
{{ render_block(oUIBlock.GetSendButtonPopoverMenu(), {aPage: aPage}) }}
{% endif %}
</div>
</div>
<div class="ibo-caselog-entry-form--text-input" data-role="ibo-caselog-entry-form--text-input">
@@ -31,4 +29,5 @@
</span>
<span class="ibo-caselog-entry-form--lock-message" data-role="ibo-caselog-entry-form--lock-message"></span>
</div>
</form>
</form>
{% endapply %}