N°2847 Finish UX/UI for new caselog entry

2026-04-20 09:08:42 +02:00 · 2020-10-02 10:53:47 +02:00
parent c2fe1bc5cb
commit b3bb77c8ee
12 changed files with 217 additions and 36 deletions
--- a/css/backoffice/layout/activity-panel/_activity-entry.scss
+++ b/css/backoffice/layout/activity-panel/_activity-entry.scss
@@ -211,26 +211,4 @@ $ibo-activity-entry--sub-information--text-color: $ibo-color-grey-700 !default;
 	color: $ibo-activity-entry--sub-information--text-color;

 	@extend %ibo-font-ral-nor-50;
-}
-
-.ibo-activity-panel--body--add-caselog-entry--toggler{
-	@extend %ibo-baseline-centered-content;
-	border-radius: $ibo-border-radius-full;
-	width: 36px;
-	height: 36px;
-	background-color: $ibo-color-primary-600;
-	color: $ibo-color-white-100;
-	position: absolute;
-	right: 12px;
-	box-shadow: $ibo-elevation-100;
-	> i{
-		height: 100%;
-		width: 100%;
-		text-align: center;
-		font-size: 16px;
-		line-height: 33px;
-	}
-	&:hover {
-		color: $ibo-color-white-100;
-	}
 }
--- a/css/backoffice/layout/activity-panel/_activitynewentryform.scss
+++ b/css/backoffice/layout/activity-panel/_activitynewentryform.scss
@@ -2,13 +2,60 @@
 * copyright   Copyright (C) 2010-2020 Combodo SARL
 * license     http://opensource.org/licenses/AGPL-3.0
 */
+
+$ibo-activity-new-entry-form--width: 100% !default;
+$ibo-activity-new-entry-form--background-color: $ibo-activity-panel--tab-toolbar--background-color !default;
+$ibo-activity-new-entry-form--padding: $ibo-activity-panel--tab-toolbar--height 14px 14px 14px !default;
+
+$ibo-activity-new-entry-form--actions--margin-top: 5px !default;
+
+$ibo-activity-panel--body--add-caselog-entry--toggler--right: 4px !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--margin-top: calc(#{$ibo-activity-panel--tab-toolbar--height} + 4px) !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--diameter: 36px !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--background-color: $ibo-color-primary-600 !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--color: $ibo-color-white-100 !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--border-radius: $ibo-border-radius-full !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--box-shadow: $ibo-elevation-100 !default;
+
+$ibo-activity-panel--body--add-caselog-entry--toggler--icon--height: 100% !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--icon--width: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--height !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--icon--font-size: 16px !default;
+$ibo-activity-panel--body--add-caselog-entry--toggler--icon--line-height: 33px !default;
 .ibo-activity-new-entry-form{
-	width: 100%;
-	background-color: $ibo-color-grey-200;
-	padding: 32px 14px 14px 32px;
+	display: none;
+	$ibo-activity-new-entry-form--width: 100%;
+	background-color: $ibo-activity-new-entry-form--background-color;
+	padding: $ibo-activity-new-entry-form--padding;
 }	
 .ibo-activity-new-entry-form--actions{
-	margin-top: 5px;
 	display: flex;
 	justify-content: space-between;
+	margin-top: $ibo-activity-new-entry-form--actions--margin-top;
+}
+
+
+.ibo-activity-panel--body--add-caselog-entry--toggler{
+	@extend %ibo-baseline-centered-content;
+	float: right;
+	right: $ibo-activity-panel--body--add-caselog-entry--toggler--right;
+	margin-top: $ibo-activity-panel--body--add-caselog-entry--toggler--margin-top;
+	
+	width: $ibo-activity-panel--body--add-caselog-entry--toggler--diameter;
+	height: $ibo-activity-panel--body--add-caselog-entry--toggler--diameter;
+	
+	background-color: $ibo-activity-panel--body--add-caselog-entry--toggler--background-color;
+	color: $ibo-activity-panel--body--add-caselog-entry--toggler--color;
+	
+	border-radius: $ibo-activity-panel--body--add-caselog-entry--toggler--border-radius;
+	box-shadow: $ibo-activity-panel--body--add-caselog-entry--toggler--box-shadow;
+	> i{
+		text-align: center;
+		height: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--height;
+		width: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--width;
+		font-size: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--font-size;
+		line-height: $ibo-activity-panel--body--add-caselog-entry--toggler--icon--line-height;
+	}
+	&:hover {
+		color: $ibo-activity-panel--body--add-caselog-entry--toggler--color;
+	}
 }
--- a/js/layouts/activity-new-entry-form.js
+++ b/js/layouts/activity-new-entry-form.js
@@ -0,0 +1,90 @@
+/*
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+;
+$(function() {
+	$.widget('itop.activity_new_entry_form',
+		{
+			// default options
+			options:
+				{
+					target_caselog: null,
+					target_type: null,
+					text_input_id: '',
+				},
+			css_classes:
+				{
+					is_expanded: 'ibo-is-expanded',
+					is_opened: 'ibo-is-opened',
+					is_closed: 'ibo-is-closed',
+					is_active: 'ibo-is-active',
+					is_hidden: 'ibo-is-hidden',
+				},
+			js_selectors:
+				{
+					panel: '[data-role="ibo-activity-panel"]',
+					toggler: '[data-role="ibo-activity-panel--body--add-caselog-entry--toggler"]',
+					form: '[data-role="ibo-activity-new-entry-form"]',
+					right_actions: '[data-role="ibo-activity-new-entry-form--action-buttons--right-actions"]',
+					caselog_picker: '[data-role="ibo-popover-menu"]',
+				},
+
+			// the constructor
+			_create: function () {
+				let me = this;
+				me._HideNewEntryForm();
+				$(this.js_selectors.toggler).on('click', function(oEvent){
+					me._ShowNewEntryForm();
+				});
+				$(this.js_selectors.panel).on('show-caselog-tab', function(oEvent, sTabType, sCaseLogAttCode){
+					me.options.target_type = sTabType;
+					if(sTabType === 'caselog')
+					{
+						me.options.target_caselog = sCaseLogAttCode;
+					}
+				});
+				$(this.js_selectors.right_actions).on('submit', function(oEvent, sTargetType, sTargetCaseLog){
+					sTargetType = (sTargetType !== undefined) ? sTargetType : me.options.target_type;
+					sTargetCaseLog = (sTargetCaseLog !== undefined) ? sTargetCaseLog : me.options.target_caselog;
+					if(sTargetType === 'caselog')
+					{
+						me._SubmitNewEntryToCaselog(CKEDITOR.instances[me.options.text_input_id].getData(), sTargetCaseLog)
+					}
+					else
+					{
+						$(this).children(me.js_selectors.caselog_picker).show();
+					}
+				});
+				$(this.js_selectors.right_actions).on('cancel', function(oEvent){
+					me._HideNewEntryForm();
+				});
+			},
+			_ShowNewEntryForm: function () {
+				$(this.js_selectors.form).show();
+				$(this.js_selectors.toggler).hide();
+			},
+			_HideNewEntryForm: function () {
+				$(this.js_selectors.form).hide();
+				$(this.js_selectors.toggler).show();
+			},
+			_SubmitNewEntryToCaselog: function(sData, sCaselog)
+			{
+				alert('Submited '+ sData +' to ' + sCaselog + ' caselog');
+			}
+		});
+});
--- a/js/layouts/activity-panel.js
+++ b/js/layouts/activity-panel.js
@@ -198,6 +198,7 @@ $(function()
 				this._HideAllEntries();
 				this.element.find(this.js_selectors.entry+'[data-entry-caselog-attribute-code="'+sCaseLogAttCode+'"]').removeClass(this.css_classes.is_hidden);
 				this._UpdateEntryGroupsVisibility();
+				this.element.trigger('show-caselog-tab', ['caselog', sCaseLogAttCode]);
 			},
 			_ShowActivityTab: function()
 			{
@@ -205,6 +206,7 @@ $(function()
 				this._OpenAllMessages();
 				this._ShowAllEntries();
 				this._ApplyEntryFilters();
+				this.element.trigger('show-caselog-tab', 'activity');
 			},
 			// - Helpers on messages
 			_OpenMessage: function(oEntryElem)
--- a/sources/application/UI/Component/PopoverMenu/PopoverMenuFactory.php
+++ b/sources/application/UI/Component/PopoverMenu/PopoverMenuFactory.php
@@ -243,4 +243,29 @@ class PopoverMenuFactory

 		return $oMenu;
 	}
+
+	public static function MakeMenuForActivityNewEntryFormSubmit(array $aCaseLogs): PopoverMenu
+	{
+		$oMenu = new PopoverMenu();
+		$sMenuId = $oMenu->GetId();
+
+		$aItems = [];
+		foreach ($aCaseLogs as $sCaseLogAttCode => $sCaseLogLabel) {
+			// JS
+			$aItems[] = PopoverMenuItemFactory::MakeFromApplicationPopupMenuItem(
+				new JSPopupMenuItem(
+					$sCaseLogAttCode,
+					$sCaseLogLabel,
+					<<<JS
+$('#$sMenuId').hide();
+$(this).parents('[data-role="ibo-activity-new-entry-form--action-buttons--right-actions"]').trigger('submit', ['caselog', '$sCaseLogAttCode']);
+JS
+				));
+		}
+
+		$oMenu->AddSection('ibo-activity-new-entry-new-entry--submit--caselogs')
+			->SetItems('ibo-activity-new-entry-new-entry--submit--caselogs', $aItems);
+
+		return $oMenu;
+	}
 }
--- a/sources/application/UI/Layout/ActivityPanel/ActivityNewEntryForm/ActivityNewEntryForm.php
+++ b/sources/application/UI/Layout/ActivityPanel/ActivityNewEntryForm/ActivityNewEntryForm.php
@@ -4,6 +4,7 @@
 * @license     http://opensource.org/licenses/AGPL-3.0
 */
 namespace Combodo\iTop\Application\UI\Layout\ActivityPanel\ActivityNewEntryForm;
+use Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenu;
 use Combodo\iTop\Application\UI\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\UIBlock;
 /**
@@ -17,9 +18,14 @@ class ActivityNewEntryForm extends UIContentBlock
 	public const BLOCK_CODE = 'ibo-activitynewentryform';
 	public const HTML_TEMPLATE_REL_PATH = 'layouts/activity-panel/activitynewentryform/layout';
 	public const JS_TEMPLATE_REL_PATH = 'layouts/activity-panel/activitynewentryform/layout';
+	public const JS_FILES_REL_PATH = [
+		'js/layouts/activity-new-entry-form.js',
+	];

 	/** @var \Combodo\iTop\Application\UI\Component\Input\RichText\RichText $oFormTextInput */
 	protected $oFormTextInput;
+	/** @var \Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenu */
+	protected $oCaseLogSelectionPopOverMenu;
 	/** @var array $aTextInputActionButtons */
 	protected $aTextInputActionButtons;
 	/** @var array $aFormActionButtons */
@@ -108,6 +114,24 @@ class ActivityNewEntryForm extends UIContentBlock
 		$this->aFormActionButtons[] = $oFormActionButtons;
 	}

+	/**
+	 * @return PopoverMenu
+	 */
+	public function GetCaseLogSelectionPopOverMenu(): PopoverMenu
+	{
+		return $this->oCaseLogSelectionPopOverMenu;
+	}
+
+	/**
+	 * @param PopoverMenu $oCaseLogSelectionPopOverMenu
+	 * @return $this
+	 */
+	public function SetCaseLogSelectionPopOverMenu(PopoverMenu $oCaseLogSelectionPopOverMenu): ActivityNewEntryForm
+	{
+		$this->oCaseLogSelectionPopOverMenu = $oCaseLogSelectionPopOverMenu;
+		return $this;
+	}
+

 	public function GetSubBlocks() : array
 	{
--- a/sources/application/UI/Layout/ActivityPanel/ActivityNewEntryForm/ActivityNewEntryFormFactory.php
+++ b/sources/application/UI/Layout/ActivityPanel/ActivityNewEntryForm/ActivityNewEntryFormFactory.php
@@ -10,6 +10,7 @@ namespace Combodo\iTop\Application\UI\Layout\ActivityPanel\ActivityNewEntryFormF

 use Combodo\iTop\Application\UI\Component\Button\ButtonFactory;
 use Combodo\iTop\Application\UI\Component\Input\RichText\RichText;
+use Combodo\iTop\Application\UI\Component\PopoverMenu\PopoverMenuFactory;
 use Combodo\iTop\Application\UI\Layout\ActivityPanel\ActivityNewEntryForm\ActivityNewEntryForm;

 /**
@@ -22,14 +23,20 @@ use Combodo\iTop\Application\UI\Layout\ActivityPanel\ActivityNewEntryForm\Activi
 */
 class ActivityNewEntryFormFactory
 {
-	public static function MakeForObjectDetailsActivityPanel(): ActivityNewEntryForm
+	public static function MakeForObjectDetailsActivityPanel($aCaseLogs): ActivityNewEntryForm
 	{
 		$oActivityNewEntryForm = new ActivityNewEntryForm();
 		$oActivityNewEntryForm->SetFormTextInput(new RichText());
-		$oActivityNewEntryForm->AddFormActionButtons(ButtonFactory::MakeForSecondaryAction('Cancel'));
-		$oActivityNewEntryForm->AddFormActionButtons(ButtonFactory::MakeForValidationAction('Send'));
-		$oActivityNewEntryForm->AddFormActionButtons(ButtonFactory::MakeForValidationAction('Send....'));
-		$oActivityNewEntryForm->AddTextInputActionButtons(ButtonFactory::MakeForSecondaryAction('Templates')->SetColor('blue'));
+		$oActivityNewEntryForm->AddFormActionButtons(ButtonFactory::MakeForSecondaryAction('Cancel')
+			->SetOnClickJsCode("$(this).parents('[data-role=\"ibo-activity-new-entry-form--action-buttons--right-actions\"]').trigger('cancel');"));
+		$oActivityNewEntryForm->AddFormActionButtons(ButtonFactory::MakeForValidationAction('Send')
+			->SetColor('cyan')
+			->SetIconClass('fas fa-paper-plane')
+			->SetOnClickJsCode("$(this).parents('[data-role=\"ibo-activity-new-entry-form--action-buttons--right-actions\"]').trigger('submit');"));
+		//$oActivityNewEntryForm->AddTextInputActionButtons(ButtonFactory::MakeForSecondaryAction('Templates')->SetColor('blue'));
+		
+		$oActivityNewEntryForm->SetCaseLogSelectionPopOverMenu(PopoverMenuFactory::MakeMenuForActivityNewEntryFormSubmit($aCaseLogs));
+		
 		return $oActivityNewEntryForm;
 	}
 }
--- a/sources/application/UI/Layout/ActivityPanel/ActivityPanelFactory.php
+++ b/sources/application/UI/Layout/ActivityPanel/ActivityPanelFactory.php
@@ -73,7 +73,13 @@ class ActivityPanelFactory

 		if($oActivityPanel->HasCaseLogTabs())
 		{
-			$oActivityPanel->SetNewEntryForm(ActivityNewEntryFormFactory::MakeForObjectDetailsActivityPanel());
+			//TODO 2.8.0 check write rights
+			$aCaseLogsForNewEntryForm = [];
+			foreach ($aCaseLogAttCodes as $sCaseLogAttCode){
+				$aCaseLogsForNewEntryForm[$sCaseLogAttCode] = MetaModel::GetLabel($sObjClass, $sCaseLogAttCode);
+			}
+			
+			$oActivityPanel->SetNewEntryForm(ActivityNewEntryFormFactory::MakeForObjectDetailsActivityPanel($aCaseLogsForNewEntryForm));
 		}
 		// Retrieve history changes (including case logs entries)
 		// - Prepare query to retrieve changes
--- a/templates/components/input/richtext/layout.html.twig
+++ b/templates/components/input/richtext/layout.html.twig
@@ -1,4 +1,4 @@
 {% extends "components/input/layout.html.twig" %}
 {% block iboInput %}
-	<textarea id="{{ oUIBlock.GetId() }}" class="htmlEditor" title="$sHelpText" name="{{ oUIBlock.GetName() }}" ></textarea>
+	<textarea id="{{ oUIBlock.GetId() }}" class="htmlEditor" name="{{ oUIBlock.GetName() }}" ></textarea>
 {% endblock %}
--- a/templates/layouts/activity-panel/activitynewentryform/layout.html.twig
+++ b/templates/layouts/activity-panel/activitynewentryform/layout.html.twig
@@ -1,4 +1,4 @@
-<div class="ibo-activity-new-entry-form">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-activity-new-entry-form" data-role="ibo-activity-new-entry-form">
 	<div class="ibo-activity-new-entry-form--text-input" data-role="ibo-activity-new-entry-form--text-input">
 		{{ render_block(oUIBlock.GetFormTextInput(), {aPage: aPage}) }}
 	</div>
@@ -8,10 +8,11 @@
 				{{ render_block(TextInputActionButton, {aPage: aPage}) }}
 			{% endfor %}
 		</div>
-		<div class="ibo-activity-new-entry-form--action-buttons--right-actions">
+		<div class="ibo-activity-new-entry-form--action-buttons--right-actions" data-role="ibo-activity-new-entry-form--action-buttons--right-actions">
 			{% for FormActionButton in oUIBlock.GetFormActionButtons() %}
 				{{ render_block(FormActionButton, {aPage: aPage}) }}
 			{% endfor %}
+			{{ render_block(oUIBlock.GetCaseLogSelectionPopOverMenu(), {aPage: aPage}) }}
 		</div>
 	</div>
 </div>
--- a/templates/layouts/activity-panel/activitynewentryform/layout.js.twig
+++ b/templates/layouts/activity-panel/activitynewentryform/layout.js.twig
@@ -0,0 +1 @@
+$('#{{ oUIBlock.GetId() }}').activity_new_entry_form({target_tab: 'activity', text_input_id: '{{ oUIBlock.GetFormTextInput().GetId()}}' });
--- a/templates/layouts/activity-panel/layout.html.twig
+++ b/templates/layouts/activity-panel/layout.html.twig
@@ -1,4 +1,4 @@
-<div id="{{ oUIBlock.GetId() }}" class="ibo-activity-panel">
+<div id="{{ oUIBlock.GetId() }}" class="ibo-activity-panel" data-role="ibo-activity-panel">
 	<div class="ibo-activity-panel--header">
 		<div class="ibo-activity-panel--tabs">
 			{% for sCaseLogAttCode, aCaseLogData in oUIBlock.GetCaseLogTabs() %}
				`@@ -0,0 +1 @@`
				`$('#{{ oUIBlock.GetId() }}').activity_new_entry_form({target_tab: 'activity', text_input_id: '{{ oUIBlock.GetFormTextInput().GetId()}}' });`