N°3551 - Migrate module to new UIBlock system : Customer Survey

css/backoffice/vendors/_jquery-multiselect.scss

@@ -111,3 +111,27 @@ button.ui-multiselect > span {
   margin:1px 0; 
   text-decoration:none 
 }
+
+/**for multiselect in 3.0*/
+.ui-dialog-titlebar.ui-multiselect-header {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.ui-dialog-titlebar.ui-multiselect-header ul {
+  padding-left: 0px;
+  width:100%;
+}
+.ui-dialog-titlebar.ui-multiselect-header a{
+  color:$ibo-color-grey-900;
+  font-weight:normal;
+}
+.ui-multiselect, .ui-multiselect-menu, .ui-multiselect-header{
+  background-color: $ibo-color-grey-100;
+}
+button.ui-multiselect {
+  padding-right:10px !important;
+}
+button.ui-multiselect .fas{
+  float:right;
+  padding-left:10px;
+}

js/jquery.multiselect.js

@@ -59,7 +59,7 @@
       // jQuery UI 1.9+, and otherwise fallback to a custom string.
       this._namespaceID = this.eventNamespace || ('multiselect' + multiselectID);
 
-      var button = (this.button = $('<button type="button"><span class="ui-icon ui-icon-triangle-1-s"></span></button>'))
+      var button = (this.button = $('<button type="button"><span class="fas fa-caret-down"></span></button>'))
         .addClass('ui-multiselect ui-widget ui-state-default ui-corner-all')
         .addClass(o.classes)
         .attr({ 'title':el.attr('title'), 'aria-haspopup':true, 'tabIndex':el.attr('tabIndex') })
@@ -70,26 +70,25 @@
           .appendTo(button),
 
         menu = (this.menu = $('<div />'))
-          .addClass('ui-multiselect-menu ui-widget ui-widget-content ui-corner-all')
+          .addClass('ui-dialog ui-multiselect-menu ui-widget ui-widget-content ui-corner-all')
           .addClass(o.classes)
           .appendTo($(o.appendTo)),
 
         header = (this.header = $('<div />'))
-          .addClass('ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix')
+          .addClass('ui-dialog-titlebar  ui-corner-all ui-multiselect-header ui-helper-clearfix')
           .appendTo(menu),
 
         headerLinkContainer = (this.headerLinkContainer = $('<ul />'))
-          .addClass('ui-helper-reset')
           .html(function() {
             if(o.header === true) {
-              return '<li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>' + o.checkAllText + '</span></a></li><li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>' + o.uncheckAllText + '</span></a></li>';
+              return '<li><a class="ui-multiselect-all" href="#"><i class="far fa-square"></i> <span>' + o.checkAllText + '/' + o.uncheckAllText + '</span></a></li>';
             } else if(typeof o.header === "string") {
               return '<li>' + o.header + '</li>';
             } else {
               return '';
             }
           })
-          .append('<li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li>')
+         // .append('<li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><i class="far fa-window-close"></i></a></li>')
           .appendTo(header),
 
         checkboxContainer = (this.checkboxContainer = $('<ul />'))
@@ -300,7 +299,17 @@
 
           // check all / uncheck all
         } else {
-          self[$(this).hasClass('ui-multiselect-all') ? 'checkAll' : 'uncheckAll']();
+           if ($(this).hasClass('ui-multiselect-all'))
+           {
+           	   self. checkAll();
+	           $(this).removeClass('ui-multiselect-all').addClass('ui-multiselect-none');
+	           $(this).find('.fa-square').removeClass('fa-square').addClass('fa-check-square');
+           } else {
+           	    self.uncheckAll();
+	           $(this).removeClass('ui-multiselect-none').addClass('ui-multiselect-all');
+	           $(this).find('.fa-check-square').removeClass('fa-check-square').addClass('fa-square');
+	       }
+
         }
 
         e.preventDefault();

setup/wizardcontroller.class.inc.php

@@ -15,6 +15,7 @@
 //
 //   You should have received a copy of the GNU Affero General Public License
 //   along with iTop. If not, see <http://www.gnu.org/licenses/>
+use Combodo\iTop\Application\UI\Base\Component\Html\Html;
 
 /**
  * Engine for displaying the various pages of a "wizard"
@@ -381,6 +382,18 @@ abstract class WizardStep
 	 * @return void
 	 */
 	abstract public function Display(WebPage $oPage);
+	/**
+	 * Displays the wizard page for the current class/state
+	 * return UIBlock
+	 * The name of the input fields (and their id if one is supplied) MUST NOT start with "_"
+	 * (this is reserved for the wizard's own parameters)
+	 * @return \Combodo\iTop\Application\UI\Base\UIBlock
+	 * @since 3.0.0
+	 */
+	public function DisplayBlock(WebPage $oPage)
+	{
+		return new Html($this->Display($oPage));
+	}
 
 	/**
 	 * Processes the page's parameters and (if moving forward) returns the next step/state to be displayed

sources/Controller/AjaxRenderController.php

@@ -316,7 +316,7 @@ class AjaxRenderController
 		}
 
 		// Filter the list to removed linked set since we are not able to display them here
-		$sIdName = "";
+		$sIdName = isset($extraParams["id_for_select"])?$extraParams["id_for_select"]:"";
 		$aOrderBy = array();
 		$iSortIndex = 0;
 

sources/application/UI/Base/Component/DataTable/DataTable.php

@@ -168,4 +168,19 @@ class DataTable extends UIContentBlock
 		return "$('#".$this->sId."').DataTable().clearPipeline();
 				$('#".$this->sId."').DataTable().ajax.reload(null, false);";
 	}
+
+	public function GetDisabledSelect(): array
+	{
+		$aExtraParams = $this->aAjaxData['extra_params'];
+		if(isset($aExtraParams['selection_enabled']) ){
+			$aListDisabled = [];
+			foreach( $aExtraParams['selection_enabled'] as $sKey=>$bValue){
+				if ($bValue == false) {
+					$aListDisabled[] = $sKey;
+				}
+			}
+			return $aListDisabled;
+		}
+		return [];
+	}
 }

sources/application/UI/Base/Component/DataTable/DataTableUIBlockFactory.php

@@ -884,6 +884,8 @@ class DataTableUIBlockFactory extends AbstractUIBlockFactory
 			'selected_rows',        /** array list of Ids already selected when displaying the datatable */
 			'display_aliases',      /** string comma separated list of class aliases to display */
 			'list_id',              /** string list outer id */
+			'selection_enabled',    	/** list of id in witch select is allowed, if not exists all lines are selectable */
+			'id_for_select', /**give definition of id for select checkbox*/
 		];
 	}
 }

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

@@ -184,7 +184,7 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
         {% if oUIBlock.GetOption("select_mode") is not empty %}
         updateDataTableSelection('{{ sListId }}');
         {% if oUIBlock.GetOption("select_mode") != "single" %}
-        this.api().on('select', function (oEvent, dt, type, indexes) {
+            this.api().on('select', function (oEvent, dt, type, indexes) {
             if (bSelectAllowed{{ oUIBlock.GetId() }})
             {
                 let aData = oTable{{ sListIDForVarSuffix }}.rows(indexes).data().toArray();
@@ -295,7 +295,11 @@ var oTable{{ sListIDForVarSuffix }} = $('#{{ oUIBlock.GetId() }}').DataTable({
         });
         {% endif %}
 
-
+        {% if oUIBlock.GetDisabledSelect() is not empty %}
+            {% for key in oUIBlock.GetDisabledSelect() %}
+                $('.selectList{{ oUIBlock.GetId() }}[value={{ key }}]').prop("disabled","disabled");
+            {% endfor %}
+        {% endif %}
         {% endif %}
     }
 });

templates/base/layouts/content-block/layout.html.twig

@@ -14,16 +14,9 @@
                     data-{{ sName }}="{{ sValue }}"
                 {% endfor %}
             {% endif %}
-            >
-        {% endif %}
-
-        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
-            {{ render_block(oSubBlock, {aPage: aPage}) }}
-        {% endfor %}
-
-        {% if bHasDiv %}
-            </div>
-        {% endif %}
+            > {% endif %}
+        {% for oSubBlock in oUIBlock.GetSubBlocks() %} {{ render_block(oSubBlock, {aPage: aPage}) }} {% endfor %}
+        {% if bHasDiv %} </div> {% endif %}
 
     {% endblock %}
 {% endapply %}