N°903 - Portal : Search / Filter on Browse mode mosaic

datamodels/2.x/itop-portal-base/portal/public/css/portal.scss

@@ -497,6 +497,34 @@ table .group-actions a.glyphicon-menu-hamburger{
 	display: block;
 }
 
+/*********/
+/* Mosaïc Filter Management */
+/*********/
+/*
+* Css to fix nthchild (4n) item which has 0 margin by default in iTop.
+* Since we change order with filtering it messes up wrap up display.
+*/
+.mosaic-group-item {
+    margin-right: 1%!important;
+}
+
+.filter-center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-right: 15vw;
+}
+
+@media (min-width: 992px) {
+    #brick_content_toolbar > div label input{
+        width: 15vw;
+        height: 30px;
+    }
+    #brick-content-table_filter label input{
+        width: 15vw;
+    }
+}
+
 
 /****************/
 /* - List mode  */

datamodels/2.x/itop-portal-base/portal/templates/bricks/browse/mode_mosaic.html.twig

@@ -7,6 +7,13 @@
 {% endblock %}
 
 {% block bBrowseMainContent %}
+	{# Filter Input for Mosaïc  #}
+	<div class="row" id="brick_content_toolbar">
+        <div class="col-xs-4 col-sm-2 col-lg-1"></div>
+        <div class="col-xs-8 col-sm-10 col-lg-11 filter-center">
+            <label>{{'Portal:Datatables:Language:Search'|dict_s}}<input type="search" class="form-control input-sm" id="search" placeholder="" aria-controls="brick_main_table" value=""></label>
+        </div>
+    </div>
 	<div id="brick_content_mosaic">
 		{% block bBrowseMosaicContent %}
 			<div class="mosaic-group ipb-is-visible" data-level-id="L">
@@ -32,6 +39,36 @@
 	{{ parent() }}
 
 	<script type="text/javascript">
+		// Filter Triggering on change of the input
+    	$("#search").on("input", function () {
+			// Managing insensitive Casing
+    	    var searchValue = $(this).val().toLowerCase();
+    	    $(".mosaic-group-item").each(function () {
+    	      if (!$(this).hasClass("mosaic-group-back")) {
+				//Taking into account description
+    	        var nameElement = $(this).find(".mosaic-item-name");
+    	        var descriptionElement = $(this).find(".mosaic-item-description");
+    	        var dataTitleElement = $(this).find("a");
+
+    	        var name = nameElement.length ? nameElement.text().toLowerCase() : "";
+    	        var description = descriptionElement.length ? descriptionElement.text().toLowerCase() : "";
+    	        var dataTitle = dataTitleElement.length && dataTitleElement.attr("data-original-title") ? dataTitleElement.attr("data-original-title").toLowerCase() : "";
+
+				// Filtering are operating for name, title and description
+				// Note this work for all the level at once therefore it will keep showing a service if there is subcategory with the filter keyword in it.
+    	        if (name.indexOf(searchValue) === -1 && description.indexOf(searchValue) === -1 && dataTitle.indexOf(searchValue) === -1) {
+    	            $(this).hide();
+    	        } else {
+    	            $(this).show();
+    	        }
+    	      }
+    	  });
+		  // Reseting Filter value on Family and Service service selection
+     	  $(".mosaic-group-item").on("click", function () {
+    	    $("#search").val('');
+    	    $(".mosaic-group-item").show();
+    	  });
+    	});
 		var sBrowseMode = '{{ sBrowseMode }}';
 		var oLevelsProperties = {{ aLevelsProperties|raw }};
 		var oRawDatas = {{ aItems|raw }};