N°3648 - Feedback alpha 3.0 : finish relation edition

application/ui.extkeywidget.class.inc.php

@@ -138,7 +138,7 @@ class UIExtKeyWidget
 		$sMessage = Dict::S('UI:Message:EmptyList:UseSearchForm');
 		$sAttrFieldPrefix = ($this->bSearchMode) ? '' : 'attr_';
 
-		$sHTMLValue = "<div class=\"field_input_zone field_input_extkey ibo-input-wrapper ibo-input-select-wrapper\" data-validation=\"untouched\" tabindex=0>";
+		$sHTMLValue = "<div class=\"field_input_zone field_input_extkey ibo-input-wrapper ibo-input-select-wrapper--with-buttons\" data-attcode=\"".$this->sAttCode."\"  data-validation=\"untouched\" tabindex=0>";
 		$sFilter = addslashes($oAllowedValues->GetFilter()->ToOQL());
 		if($this->bSearchMode)
 		{

css/backoffice/components/_datatable.scss

@@ -45,6 +45,7 @@ $ibo-datatable--sorting--opacity: 0.3 !default;
 $ibo-datatable--sorting--right: 1em !default;
 
 $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-panel--body--padding-bottom !default;
+$ibo-datatable--selection-validation-buttons-toolbar--margin-top: 10px !default;
 
 .ibo-datatable {
 	padding-bottom: $ibo-datatable--padding-y;
@@ -55,7 +56,6 @@ $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-pane
 		padding-right: $ibo-datatable-cell-row--padding-x;
 		padding-left: $ibo-datatable-cell-row--padding-x;
 		@extend %ibo-font-ral-med-100;
-
 		a {
 			color: $ibo-datatable-cell-row--link--color;
 		}
@@ -177,4 +177,5 @@ $ibo-datatable-panel--body--padding: $ibo-panel--body--padding-top 0px $ibo-pane
 // For cancel / OK / next... selection validation buttons
 .ibo-datatable--selection-validation-buttons-toolbar {
 	clear: both;
+  margin-top: $ibo-datatable--selection-validation-buttons-toolbar--margin-top;
 }

css/backoffice/components/_field.scss

@@ -129,4 +129,7 @@ $ibo-field--value--padding-bottom--is-fullscreen: $ibo-field--label--padding-y--
       padding: $ibo-field--value--padding-top--is-fullscreen $ibo-field--value--padding-x--is-fullscreen $ibo-field--value--padding-bottom--is-fullscreen $ibo-field--value--padding-x--is-fullscreen;
     }
   }
-}
+}
+.mailto, .tel{
+  white-space:nowrap;
+}

css/backoffice/components/input/_input-select.scss

@@ -1,3 +1,7 @@
+$ibo-input-select--value--min-midth: 50px;
+
+$ibo-input-select-autocomplete--value--min-midth: 150px;
+$ibo-input-select-selectize--value--min-midth: 150px;
 $ibo-input-select-selectize--value--height: 100% !default;
 $ibo-input-select-selectize--value--line-height: $ibo-input--height !default;
 
@@ -12,21 +16,23 @@ $ibo-input-select-wrapper--after--color: $ibo-color-grey-900 !default;
 
 $ibo-input-select--action-button--height: 28px !default;
 $ibo-input-select--action-button--width: 23px !default;
-$ibo-input-select--action-button--margin-top: 1px !default;
+$ibo-input-select--action-button--margin-top: 0px !default;
 $ibo-input-select--action-button--margin-right: 20px !default;
 $ibo-input-select--action-button--background-color: inherit !default;
 $ibo-input-select--action-button--color: $ibo-color-grey-800 !default;
 $ibo-input-select--action-button--padding-x: 2px !default;
-$ibo-input-select--action-button--padding-y: 6px !default;
+$ibo-input-select--action-button--padding-y: 0px !default;
 
 $ibo-input-select--action-button--padding-left: 5px !default;
 
 .ibo-input-select{
 	appearance: none;
 	display: inline-block;
+  min-width: $ibo-input-select--value--min-midth;
 	&.ibo-input-selectize{
     padding-right:0;
     padding-left:0;
+    min-width: $ibo-input-select-selectize--value--min-midth !important;
 		input{
       border-width: 0px;
       border-color: white;
@@ -40,11 +46,21 @@ $ibo-input-select--action-button--padding-left: 5px !default;
 		}
 	}
 }
-
+.ibo-input-select-autocomplete{
+  min-width: $ibo-input-select-autocomplete--value--min-midth !important;
+}
+.ibo-input-selectize {
+  min-width: $ibo-input-select-selectize--value--min-midth !important;
+  >div{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
 .ibo-input-select-wrapper{
 	position:relative;
 }
-.ibo-input-select-wrapper .selectize-control
+.ibo-input-select-wrapper--with-buttons .selectize-control
 {
 	display: inline-block;
 	width: $ibo-input-select-wrapper--width;
@@ -64,9 +80,35 @@ $ibo-input-select--action-button--padding-left: 5px !default;
 	color: $ibo-input-select-wrapper--after--color;
 	pointer-events: none;
 }
+.ibo-input-select-wrapper--with-buttons{
+  position:relative;
+  display:flex;
+  >.selectize-control{
+
+  }
+}
+.ibo-input-select-container{
+display: flex;
+}
+.ibo-input-select-wrapper--with-buttons::after{
+  position: static;
+  content: "\f0d7";
+  font-family: "Font Awesome 5 Free";
+  font-weight: 600;
+
+  height: $ibo-input-select-wrapper--after--height;
+  margin-left: $ibo-input-select-wrapper--after--margin-left;
+  margin-top: $ibo-input-select-wrapper--after--margin-top;
+  padding-top: $ibo-input-select-wrapper--after--padding-top;
+
+  background-color: $ibo-input-select-wrapper--after--background-color;
+  color: $ibo-input-select-wrapper--after--color;
+  pointer-events: none;
+  z-index: 100;
+}
 .ibo-input-select--action-buttons{
   position: absolute;
-  display: initial;
+  display: flex;
   height: $ibo-input-select--action-button--height;
   margin-top: $ibo-input-select--action-button--margin-top;
   margin-right: $ibo-input-select--action-button--margin-right;
@@ -76,6 +118,8 @@ $ibo-input-select--action-button--padding-left: 5px !default;
   color: $ibo-input-select--action-button--color;
   padding: $ibo-input-select--action-button--padding-y $ibo-input-select--action-button--padding-x;
   text-align: right;
+  bottom:0;
+  top:0;
   right:0;
 }
 

js/extkeywidget.js

@@ -15,24 +15,29 @@
  *
  * You should have received a copy of the GNU Affero General Public License
  */
-var KEY_BACKSPACE = 8;
+/*
-var KEY_RETURN    = 13;
+* Plugin to change the behaviour of enter and backspace buttons
-Selectize.define('custom_itop', function(options) {
+* if the inputText is null when iti push on enter, the field is put to null
+* when we push on backspace, it clean the input text, in order to autocmplete
+* */
+Selectize.define('custom_itop', function(aOptions) {
+	var KEY_BACKSPACE = 8;
+	var KEY_RETURN    = 13;
 	var self = this;
 
-	options.text = options.text || function(option) {
+	aOptions.text = aOptions.text || function(aOptions) {
-		return option[this.settings.labelField];
+		return aOptions[this.settings.labelField];
 	};
 
 	this.onKeyDown = (function() {
 		var original = self.onKeyDown;
 		return function(e) {
-			var index, option;
+			var iIndex;
 			switch (e.keyCode) {
 				case KEY_BACKSPACE:
 					if (e.keyCode === KEY_BACKSPACE && this.$control_input.val() === '' && !this.$activeItems.length) {
-						index = this.caretPos-1;
+						iIndex = this.caretPos-1;
-						if (index >= 0 && index < this.items.length) {
+						if (iIndex >= 0 && iIndex < this.items.length) {
 							this.clear(true);
 							e.preventDefault();
 							return;
@@ -43,14 +48,12 @@ Selectize.define('custom_itop', function(options) {
 						//case nothing selected ->delete selection
 						if (!self.$activeOption || self.currentResults.query == "") {
 							self.deleteSelection(e);
-							//if(self.getOption("") != "undefined"){
+							self.setValue("");
-								self.setValue("");
-							//}
 							return;
 						}
 					}
 			}
-			return original.apply(this, arguments);
+			return original.apply(this);
 		};
 	})();
 });
@@ -78,6 +81,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 		// make sure that the form is clean
 		$('#'+this.id+'_btnRemove').prop('disabled', true);
 		$('#'+this.id+'_linksToRemove').val('');
+
 	}
 	this.AddSelectize = function (options, initValue) {
 		let $select = $('#'+me.id).selectize({
@@ -117,6 +121,9 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 		});
 		let $selectize = $select[0].selectize; // This stores the selectize object to a variable (with name 'selectize')
 		$selectize.setValue(initValue, true);
+		var iPaddingRight = 	$('#'+this.id).parent().find('.ibo-input-select--action-buttons')[0].childElementCount*20+15;
+		 $('#'+this.id).parent().find('.ibo-input-select').css('padding-right',iPaddingRight);
+
 	}
 	this.AddAutocomplete = function(iMinChars, sWizHelperJSON)
 	{
@@ -171,7 +178,6 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 			autoFocus: true,
 			minLength: iMinChars,
 			focus: function (event, ui) {
-				// $('#label_$this->iId').val( ui.item.label );
 				return false;
 			},
 			select: function (event, ui) {
@@ -214,6 +220,8 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 					$('#label_'+me.id).autocomplete("search");
 				}
 			});
+		var iPaddingRight = 	$('#'+this.id).parent().find('.ibo-input-select--action-buttons')[0].childElementCount*20+15;
+		$('#'+this.id).parent().find('.ibo-input-select').css('padding-right',iPaddingRight);
 	};
 
 	this.StopPendingRequest = function () {
@@ -359,8 +367,7 @@ function ExtKeyWidget(id, sTargetClass, sFilter, sTitle, bSelectMode, oWizHelper
 		theMap.operation = 'searchObjectsToSelect'; // Override what is defined in the form itself
 		theMap.sAttCode = me.sAttCode,
 
-			sSearchAreaId = '#dr_'+me.id;
+		sSearchAreaId = '#dr_'+me.id;
-		//$(sSearchAreaId).html('<div style="text-align:center;width:100%;height:24px;vertical-align:middle;"><img src="../images/indicator.gif" /></div>');
 		$(sSearchAreaId).block();
 		me.UpdateButtons();
 

templates/base/components/datatable/layout.ready.js.twig

@@ -42,7 +42,7 @@ else
 {
     maxHeight{{ sListId }} = maxHeight{{ sListId }} -50;
 }
-console.warn('#{{ oUIBlock.GetId() }}');
+
 var oTable{{ sListId }} = $('#{{ oUIBlock.GetId() }}').DataTable({
     language: {
         processing: "{{ 'UI:Datatables:Language:Processing'|dict_s }}",
@@ -95,8 +95,6 @@ var oTable{{ sListId }} = $('#{{ oUIBlock.GetId() }}').DataTable({
         }
     },
     drawCallback: function () {
-        console.warn('la');
-        console.warn($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val());
         if ($(this).closest('.ibo-panel--body').find('[name=selectionMode]').val() === "negative")
         {
             $(this).closest('.dataTables_wrapper').find('.checkAll')[0].checked = true;