N°931 TagSet widget : fix empty widget on creation form

Now displays a placeholder
The + icon can't be used as is cause it's inserted with ::after, and without tags it can't be right aligned

application/cmdbabstract.class.inc.php

@@ -2031,6 +2031,8 @@ EOF
 					$oPage->add_linked_stylesheet(utils::GetAbsoluteUrlAppRoot().'css/selectize.default.css');
 					$oPage->add_linked_script(utils::GetAbsoluteUrlAppRoot().'/js/jquery.itop-tagset-widget.js');
 
+					$oPage->add_dict_entry('Core:AttributeTagSet:placeholder');
+
 					/** @var \ormTagSet $value */
 					$sJson = static::GetTagSetJsonForWidget($value, $sClass, $sAttCode);
 					$sInputId = "attr_{$sFormPrefix}{$sAttCode}";

css/light-grey.css

@@ -2900,6 +2900,7 @@ div.selectize-input {
   width: auto;
   min-width: 8em;
 }
+
 div.selectize-input.has-items:after {
   content: "➕";
   display: inline-block;

dictionaries/en.dictionary.itop.core.php

@@ -36,6 +36,7 @@ Dict::Add('EN US', 'English', 'English', array(
 
     'Core:AttributeTagSet' => 'List of tags',
     'Core:AttributeTagSet+' => '',
+	'Core:AttributeTagSet:placeholder' => 'click to add',
 
     'Core:AttributeCaseLog' => 'Log',
     'Core:AttributeCaseLog+' => '',

dictionaries/fr.dictionary.itop.core.php

@@ -428,7 +428,8 @@ Dict::Add('FR FR', 'French', 'Français', array(
 	'Core:AttributeLinkedSet+' => 'Liste d\'objets d\'une classe donnée et pointant sur l\'objet courant',
     'Core:AttributeTagSet' => 'Liste d\'étiquettes',
     'Core:AttributeTagSet+' => '',
-    'Core:AttributeLinkedSetIndirect' => 'Objets liés (1-n)',
+	'Core:AttributeTagSet:placeholder' => 'cliquer pour ajouter',
+	'Core:AttributeLinkedSetIndirect' => 'Objets liés (1-n)',
 	'Core:AttributeLinkedSetIndirect+' => 'Liste d\'objets d\'une classe donnée et liés à l\'objet courant via une classe intermédiaire',
 	'Core:AttributeInteger' => 'Nombre entier',
 	'Core:AttributeInteger+' => 'Valeur numérique entière',

js/jquery.itop-tagset-widget.js

@@ -123,6 +123,7 @@ $.widget('itop.tagset_widget',
 				searchField: 'label',
 				options: this.possibleValues,
 				create: false,
+				placeholder: Dict.S("Core:AttributeTagSet:placeholder"),
 				onInitialize: function () {
 					var selectizeWidget = this;
 					tagSetWidget._onInitialize(selectizeWidget);

test/tagset_widget_poc.html

@@ -24,6 +24,11 @@
     <meta charset="UTF-8">
     <title>TagSet fields widget test</title>
 
+    <script>
+		var aDictEntries = {"Core:AttributeTagSet:placeholder": "click to add"};
+    </script>
+
+    <script src="../js/utils.js"></script>
     <script src="../js/jquery-3.3.1.min.js"></script>
     <script src="../js/jquery-ui-1.11.4.custom.min.js"></script>
     <script src="../js/selectize.min.js"></script>