From ec0c98bb0faefa22bc6500ee1cb4f1b50e82cf27 Mon Sep 17 00:00:00 2001
From: acognet <anne-catherine.cognet@combodo.com>
Date: Thu, 13 Jan 2022 10:52:18 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B04482=20-=20Polishing=20:=20Export=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 core/csvbulkexport.class.inc.php              |  3 +--
 core/excelbulkexport.class.inc.php            |  3 +--
 core/pdfbulkexport.class.inc.php              |  3 +--
 core/spreadsheetbulkexport.class.inc.php      |  3 +--
 .../input/_input-with-label.scss              | 12 +++++++++
 pages/csvimport.php                           |  3 +--
 .../Base/Component/Input/InputWithLabel.php   | 27 +++++++++++++++++++
 .../UI/Base/Component/Input/tInputLabel.php   | 25 +++++++++++++++++
 .../components/input/inputlabel.html.twig     |  2 +-
 .../components/input/inputwithlabel.html.twig |  4 +--
 webservices/export-v2.php                     | 23 ++++------------
 11 files changed, 77 insertions(+), 31 deletions(-)

diff --git a/core/csvbulkexport.class.inc.php b/core/csvbulkexport.class.inc.php
index 36eb3cf71..50a92f8f0 100644
--- a/core/csvbulkexport.class.inc.php
+++ b/core/csvbulkexport.class.inc.php
@@ -220,16 +220,15 @@ class CSVBulkExport extends TabularBulkExport
 
 				$sFormatInput = '<input type="text" size="15" name="date_format" id="csv_custom_date_time_format" title="" value="'.htmlentities($sDateTimeFormat, ENT_QUOTES, 'UTF-8').'"/>';
 				$oRadioCustom = InputUIBlockFactory::MakeForInputWithLabel(Dict::Format('Core:BulkExport:DateTimeFormatCustom_Format', $sFormatInput), "csv_date_format_radio", "custom", "csv_date_time_format_custom", "radio");
+				$oRadioCustom->SetDescription(Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip'));
 				$oRadioCustom->GetInput()->SetIsChecked($sDateTimeFormat !== (string)AttributeDateTime::GetFormat());
 				$oRadioCustom->SetBeforeInput(false);
 				$oRadioCustom->GetInput()->AddCSSClass('ibo-input-checkbox');
 				$oFieldSetDate->AddSubBlock($oRadioCustom);
 
-				$sJSTooltip = json_encode('<div class="date_format_tooltip">'.Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip').'</div>');
 
 				$oP->add_ready_script(
 					<<<EOF
-$('#csv_custom_date_time_format').tooltip({content: function() { return $sJSTooltip; } });
 $('#form_part_csv_options').on('preview_updated', function() { FormatDatesInPreview('csv', 'csv'); });
 $('#csv_date_time_format_default').on('click', function() { FormatDatesInPreview('csv', 'csv'); });
 $('#csv_date_time_format_custom').on('click', function() { FormatDatesInPreview('csv', 'csv'); });
diff --git a/core/excelbulkexport.class.inc.php b/core/excelbulkexport.class.inc.php
index ac7dc5b3f..caecf7111 100644
--- a/core/excelbulkexport.class.inc.php
+++ b/core/excelbulkexport.class.inc.php
@@ -111,16 +111,15 @@ class ExcelBulkExport extends TabularBulkExport
 
 				$sFormatInput = '<input type="text" size="15" name="date_format" id="excel_custom_date_time_format" title="" value="'.htmlentities($sDateTimeFormat, ENT_QUOTES, 'UTF-8').'"/>';
 				$oRadioCustom = InputUIBlockFactory::MakeForInputWithLabel(Dict::Format('Core:BulkExport:DateTimeFormatCustom_Format', $sFormatInput), "excel_date_format_radio", "custom", "excel_date_time_format_custom", "radio");
+				$oRadioCustom->SetDescription(Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip'));
 				$oRadioCustom->GetInput()->SetIsChecked($sDateTimeFormat !== (string)AttributeDateTime::GetFormat());
 				$oRadioCustom->SetBeforeInput(false);
 				$oRadioCustom->GetInput()->AddCSSClass('ibo-input-checkbox');
 				$oFieldSetDate->AddSubBlock($oRadioCustom);
 
 
-				$sJSTooltip = json_encode('<div class="date_format_tooltip">'.Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip').'</div>');
 				$oP->add_ready_script(
 					<<<EOF
-$('#excel_custom_date_time_format').tooltip({content: function() { return $sJSTooltip; } });
 $('#form_part_xlsx_options').on('preview_updated', function() { FormatDatesInPreview('excel', 'xlsx'); });
 $('#excel_date_time_format_default').on('click', function() { FormatDatesInPreview('excel', 'xlsx'); });
 $('#excel_date_time_format_custom').on('click', function() { FormatDatesInPreview('excel', 'xlsx'); });
diff --git a/core/pdfbulkexport.class.inc.php b/core/pdfbulkexport.class.inc.php
index f40fa77c9..ba25a61ed 100644
--- a/core/pdfbulkexport.class.inc.php
+++ b/core/pdfbulkexport.class.inc.php
@@ -95,15 +95,14 @@ class PDFBulkExport extends HTMLBulkExport
 
 				$sFormatInput = '<input type="text" size="15" name="date_format" id="pdf_custom_date_time_format" title="" value="'.htmlentities($sDateTimeFormat, ENT_QUOTES, 'UTF-8').'"/>';
 				$oRadioCustom = InputUIBlockFactory::MakeForInputWithLabel(Dict::Format('Core:BulkExport:DateTimeFormatCustom_Format', $sFormatInput), "pdf_date_format_radio", "custom", "pdf_date_time_format_custom", "radio");
+				$oRadioCustom->SetDescription(Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip'));
 				$oRadioCustom->GetInput()->SetIsChecked($sDateTimeFormat !== (string)AttributeDateTime::GetFormat());
 				$oRadioCustom->SetBeforeInput(false);
 				$oRadioCustom->GetInput()->AddCSSClass('ibo-input-checkbox');
 				$oFieldSetDate->AddSubBlock($oRadioCustom);
 
-				$sJSTooltip = json_encode('<div id="date_format_tooltip">'.Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip').'</div>');
 				$oP->add_ready_script(
 					<<<EOF
-$('#pdf_custom_date_time_format').tooltip({content: function() { return $sJSTooltip; } });
 $('#form_part_pdf_options').on('preview_updated', function() { FormatDatesInPreview('pdf', 'html'); });
 $('#pdf_date_time_format_default').on('click', function() { FormatDatesInPreview('pdf', 'html'); });
 $('#pdf_date_time_format_custom').on('click', function() { FormatDatesInPreview('pdf', 'html'); });
diff --git a/core/spreadsheetbulkexport.class.inc.php b/core/spreadsheetbulkexport.class.inc.php
index b96ab17f6..50629d400 100644
--- a/core/spreadsheetbulkexport.class.inc.php
+++ b/core/spreadsheetbulkexport.class.inc.php
@@ -84,15 +84,14 @@ class SpreadsheetBulkExport extends TabularBulkExport
 
 				$sFormatInput = '<input type="text" size="15" name="date_format" id="spreadsheet_custom_date_time_format" title="" value="'.htmlentities($sDateTimeFormat, ENT_QUOTES, 'UTF-8').'"/>';
 				$oRadioCustom = InputUIBlockFactory::MakeForInputWithLabel(Dict::Format('Core:BulkExport:DateTimeFormatCustom_Format', $sFormatInput), "spreadsheet_date_format_radio", "custom", "spreadsheet_date_time_format_custom", "radio");
+				$oRadioCustom->SetDescription(Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip'));
 				$oRadioCustom->GetInput()->SetIsChecked($sDateTimeFormat !== (string)AttributeDateTime::GetFormat());
 				$oRadioCustom->GetInput()->AddCSSClass('ibo-input-checkbox');
 				$oRadioCustom->SetBeforeInput(false);
 				$oFieldSetDate->AddSubBlock($oRadioCustom);
 
-				$sJSTooltip = json_encode('<div class="date_format_tooltip">'.Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip').'</div>');
 				$oP->add_ready_script(
 					<<<EOF
-$('#spreadsheet_custom_date_time_format').tooltip({content: function() { return $sJSTooltip; } });
 $('#form_part_spreadsheet_options').on('preview_updated', function() { FormatDatesInPreview('spreadsheet', 'spreadsheet'); });
 $('#spreadsheet_date_time_format_default').on('click', function() { FormatDatesInPreview('spreadsheet', 'spreadsheet'); });
 $('#spreadsheet_date_time_format_custom').on('click', function() { FormatDatesInPreview('spreadsheet', 'spreadsheet'); });
diff --git a/css/backoffice/blocks-integrations/input/_input-with-label.scss b/css/backoffice/blocks-integrations/input/_input-with-label.scss
index 84341dd01..637d8ba19 100644
--- a/css/backoffice/blocks-integrations/input/_input-with-label.scss
+++ b/css/backoffice/blocks-integrations/input/_input-with-label.scss
@@ -11,4 +11,16 @@ $ibo-input--spacing-left--with-label: $ibo-spacing-300 !default;
 select + label, label + select, label > select,
 input + label, label + input, label > input {
   margin-left: $ibo-input--spacing-left--with-label;
+}
+
+label.ibo-has-description {
+  &::after {
+    content: $ibo-field--label--description--content;
+    padding-left: $ibo-field--label--description--padding-left;
+    vertical-align: top;
+
+    cursor: pointer;
+    color: $ibo-field--label--description--color;
+    @extend %ibo-font-ral-bol-50;
+  }
 }
\ No newline at end of file
diff --git a/pages/csvimport.php b/pages/csvimport.php
index 70c2ba262..886c16352 100644
--- a/pages/csvimport.php
+++ b/pages/csvimport.php
@@ -1328,6 +1328,7 @@ EOF
 
 		$sFormatInput = '<input type="text" size="15" name="custom_date_time_format" id="excel_custom_date_time_format" title="" value="'.htmlentities($sCustomDateTimeFormat, ENT_QUOTES, 'UTF-8').'"/>';
 		$oRadioCustom = InputUIBlockFactory::MakeForInputWithLabel(Dict::Format('UI:CSVImport:CustomDateTimeFormat', $sFormatInput), "date_time_format", "custom", "radio_date_time_custom", "radio");
+		$oRadioCustom->SetDescription(Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip'));
 		$oRadioCustom->GetInput()->SetIsChecked($sDateTimeFormat !== (string)AttributeDateTime::GetFormat());
 		$oRadioCustom->SetBeforeInput(false);
 		$oRadioCustom->GetInput()->AddCSSClass('ibo-input-checkbox');
@@ -1424,11 +1425,9 @@ EOF
 	}
 EOF
 	);
-		$sJSTooltip = json_encode('<div class="date_format_tooltip">'.Dict::S('UI:CSVImport:CustomDateTimeFormatTooltip').'</div>');
 		$oPage->add_ready_script(
 <<<EOF
 DoPreview();
-$('#custom_date_time_format').tooltip({content: function() { return $sJSTooltip; } });
 $('#custom_date_time_format').on('click', function() { $('#radio_date_time_custom').prop('checked', true); });
 EOF
 		);
diff --git a/sources/application/UI/Base/Component/Input/InputWithLabel.php b/sources/application/UI/Base/Component/Input/InputWithLabel.php
index 1fc10ef7a..2285898d7 100644
--- a/sources/application/UI/Base/Component/Input/InputWithLabel.php
+++ b/sources/application/UI/Base/Component/Input/InputWithLabel.php
@@ -25,6 +25,8 @@ class InputWithLabel extends UIBlock
 	protected $oInput;
 	/** @var bool Label before input ? */
 	protected $bBeforeInput;
+	/**@String $sDescription for tooltip*/
+	protected $sDescription;
 
 	/**
 	 * @param string $sLabel
@@ -102,4 +104,29 @@ class InputWithLabel extends UIBlock
 		$this->sLabel = $sLabel;
 		return $this;
 	}
+
+	/**
+	 * @return mixed
+	 */
+	public function GetDescription()
+	{
+		return $this->sDescription;
+	}
+
+	/**
+	 * @param mixed $sDescription
+	 */
+	public function SetDescription($sDescription)
+	{
+		$this->sDescription = $sDescription;
+		return $this;
+	}
+	/**
+	 * @return bool
+	 */
+	public function HasDescription(): bool
+	{
+		return $this->sDescription != null;
+	}
+
 }
\ No newline at end of file
diff --git a/sources/application/UI/Base/Component/Input/tInputLabel.php b/sources/application/UI/Base/Component/Input/tInputLabel.php
index 7e92bcdff..afb08a13e 100644
--- a/sources/application/UI/Base/Component/Input/tInputLabel.php
+++ b/sources/application/UI/Base/Component/Input/tInputLabel.php
@@ -18,6 +18,8 @@ trait tInputLabel
 	protected $bIsLabelBefore = true;
 	/** @var string|null Label to display with the input (null for no label) */
 	protected $sLabel = null;
+	/**@String $sDescription for tooltip*/
+	protected $sDescription;
 
 	/**
 	 * @return bool
@@ -85,4 +87,27 @@ trait tInputLabel
 	{
 		return $this->sLabel != null;
 	}
+	/**
+	 * @return mixed
+	 */
+	public function GetDescription()
+	{
+		return $this->sDescription;
+	}
+
+	/**
+	 * @param mixed $sDescription
+	 */
+	public function SetDescription($sDescription)
+	{
+		$this->sDescription = $sDescription;
+		return $this;
+	}
+	/**
+	 * @return bool
+	 */
+	public function HasDescription(): bool
+	{
+		return $this->sDescription != null;
+	}
 }
\ No newline at end of file
diff --git a/templates/base/components/input/inputlabel.html.twig b/templates/base/components/input/inputlabel.html.twig
index 6045bc7f2..b9d557ed2 100644
--- a/templates/base/components/input/inputlabel.html.twig
+++ b/templates/base/components/input/inputlabel.html.twig
@@ -1,3 +1,3 @@
 {# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
-<label for="{{ oUIBlock.GetId() }}">{{ oUIBlock.GetLabel() |raw }}</label>
\ No newline at end of file
+<label  for="{{ oUIBlock.GetId() }}" {% if oUIBlock.HasDescription() %} class="ibo-has-description" data-tooltip-content="{{ oUIBlock.GetDescription() |raw }}" data-tooltip-max-width="600px" data-tooltip-html-enabled="true"{% endif %}>{{ oUIBlock.GetLabel() |raw }}</label>
\ No newline at end of file
diff --git a/templates/base/components/input/inputwithlabel.html.twig b/templates/base/components/input/inputwithlabel.html.twig
index de770a7ef..147ab1cba 100644
--- a/templates/base/components/input/inputwithlabel.html.twig
+++ b/templates/base/components/input/inputwithlabel.html.twig
@@ -1,10 +1,10 @@
 {% block iboInputLabel %}
     {% if oUIBlock.IsLabelBefore() %}
-        <label for="{{ oUIBlock.GetId() }}">{{ oUIBlock.GetLabel() |raw }}</label>
+        <label  for="{{ oUIBlock.GetId() }}" {% if oUIBlock.HasDescription() %} class="ibo-has-description" data-tooltip-content="{{ oUIBlock.GetDescription() |raw }}" data-tooltip-max-width="600px" data-tooltip-html-enabled="true"{% endif %}>{{ oUIBlock.GetLabel() |raw }}</label>
         {{ render_block(oUIBlock.GetInput()) }}
     {% else %}
         {{ render_block(oUIBlock.GetInput()) }}
-        <label for="{{ oUIBlock.GetId() }}">{{ oUIBlock.GetLabel() |raw }}</label>
+         <label  for="{{ oUIBlock.GetId() }}" {% if oUIBlock.HasDescription() %} class="ibo-has-description" data-tooltip-content="{{ oUIBlock.GetDescription() |raw }}" data-tooltip-max-width="600px" data-tooltip-html-enabled="true"{% endif %}>{{ oUIBlock.GetLabel() |raw }}</label>
     {% endif %}
 {% endblock %}
 
diff --git a/webservices/export-v2.php b/webservices/export-v2.php
index 1ba005da2..4e50a44b2 100644
--- a/webservices/export-v2.php
+++ b/webservices/export-v2.php
@@ -13,6 +13,7 @@ use Combodo\iTop\Application\UI\Base\Component\Input\InputUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\Select\SelectOptionUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\SelectUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Input\TextArea;
+use Combodo\iTop\Application\UI\Base\Component\Panel\PanelUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Component\Title\TitleUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlockUIBlockFactory;
 
@@ -122,10 +123,11 @@ function Usage(Page $oP)
 
 function DisplayExpressionForm(WebPage $oP, $sAction, $sExpression = '', $sExceptionMessage = '')
 {
-	$oP->AddSubBlock(TitleUIBlockFactory::MakeForPage(Dict::S('Core:BulkExport:ScopeDefinition')));
+	$oPanel = PanelUIBlockFactory::MakeNeutral(Dict::S('Core:BulkExport:ScopeDefinition'));
+	$oP->AddSubBlock($oPanel);
 	$oForm = FormUIBlockFactory::MakeStandard('form');
 	$oForm->SetAction($sAction);
-	$oP->AddSubBlock($oForm);
+	$oPanel->AddSubBlock($oForm);
 
 	$oForm->AddSubBlock(InputUIBlockFactory::MakeForHidden('interactive', '1'));
 
@@ -149,26 +151,11 @@ function DisplayExpressionForm(WebPage $oP, $sAction, $sExpression = '', $sExcep
 	$oSearch->UpdateContextFromUser();
 	$oQueries = new DBObjectSet($oSearch);
 	while ($oQuery = $oQueries->Fetch()) {
-		$oSelect->AddSubBlock(SelectOptionUIBlockFactory::MakeForSelectOption($oQuery->GetKey(), htmlentities($oQuery->Get('name'), ENT_QUOTES, 'UTF-8'), false));
+		$oSelect->AddSubBlock(SelectOptionUIBlockFactory::MakeForSelectOption($oQuery->GetKey(), $oQuery->Get('name'), false));
 	}
 	$oFieldPhraseBook->AddSubBlock($oSelect);
 	$oForm->AddSubBlock($oFieldPhraseBook);
 
-	/*oP->add('<table style="width:100%" class="export_parameters">');
-	$sExpressionHint = empty($sExceptionMessage) ? '' : '<tr><td colspan="2">'.htmlentities($sExceptionMessage, ENT_QUOTES, 'UTF-8').'</td></tr>';
-	$oP->add('<tr><td class="column-label"><span style="white-space: nowrap;"><input type="radio" name="query_mode" value="oql" id="radio_oql" checked><label for="radio_oql">'.Dict::S('Core:BulkExportLabelOQLExpression').'</label></span></td>');
-	$oP->add('<td><textarea style="width:100%" cols="70" rows="8" name="expression" id="textarea_oql" placeholder="'.Dict::S('Core:BulkExportQueryPlaceholder').'">'.htmlentities($sExpression, ENT_QUOTES, 'UTF-8').'</textarea></td></tr>');
-	$oP->add($sExpressionHint);
-	$oP->add('<tr><td class="column-label"><span style="white-space: nowrap;"><input type="radio" name="query_mode" value="phrasebook" id="radio_phrasebook"><label for="radio_phrasebook">'.Dict::S('Core:BulkExportLabelPhrasebookEntry').'</label></span></td>');
-	$oP->add('<td><select name="query" id="select_phrasebook">');
-	$oP->add('<option value="">'.Dict::S('UI:SelectOne').'</option>');
-	$oSearch = DBObjectSearch::FromOQL('SELECT QueryOQL');
-	$oSearch->UpdateContextFromUser();
-	$oQueries = new DBObjectSet($oSearch);
-	while ($oQuery = $oQueries->Fetch()) {
-		$oP->add('<option value="'.$oQuery->GetKey().'">'.htmlentities($oQuery->Get('name'), ENT_QUOTES, 'UTF-8').'</option>');
-	}
-	$oP->add('</select></td></tr>');*/
 	$oForm->AddSubBlock(ButtonUIBlockFactory::MakeForPrimaryAction(Dict::S('UI:Button:Next'), "", "", true, "next-btn"));
 	$oP->p('<a target="_blank" href="'.utils::GetAbsoluteUrlAppRoot().'webservices/export-v2.php">'.Dict::S('Core:BulkExportCanRunNonInteractive').'</a>');
 	$oP->p('<a target="_blank" href="'.utils::GetAbsoluteUrlAppRoot().'webservices/export.php">'.Dict::S('Core:BulkExportLegacyExport').'</a>');