💄 iTop 3.0.0 badge dashlet : make whole badge clickable (#191)

Would be better to have only one handler on the dashboard side but we want to respect code responsibility !
So until we have a system for components to print "static" code (that will be printed only once whatever number of component instances we have in the page), we are doing it the "old" way : calling a JQuery widget in the component JS Twig.

css/backoffice/components/dashlet/_dashlet-badge.scss

@@ -22,14 +22,14 @@ $ibo-dashlet-badge--action-icon--margin-right: 6px !default;
 
 /* Rules */
 .ibo-dashlet-badge{
-	//min-width: $ibo-dashlet-badge--min-width;
-	flex-basis: $ibo-dashlet-badge--min-width;
-	flex-grow: 1;
-	flex-shrink: 1;
-	padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x;
-	background-color: $ibo-dashlet-badge--background-color;
-	border: $ibo-dashlet-badge--border;
-	border-radius: $ibo-dashlet-badge--border-radius;
+  //min-width: $ibo-dashlet-badge--min-width;
+  flex-basis: $ibo-dashlet-badge--min-width;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: $ibo-dashlet-badge--padding-y $ibo-dashlet-badge--padding-x;
+  background-color: $ibo-dashlet-badge--background-color;
+  border: $ibo-dashlet-badge--border;
+  border-radius: $ibo-dashlet-badge--border-radius;
 }
 .ibo-dashlet-badge--body{
 	display: flex;

js/components/dashlet/dashlet-badge.js

@@ -0,0 +1,69 @@
+/*
+ * Copyright (C) 2013-2020 Combodo SARL
+ *
+ * This file is part of iTop.
+ *
+ * iTop is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * iTop is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ */
+
+;
+$(function () {
+	$.widget('itop.dashlet_badge',
+		{
+			options: {},
+			js_selectors:
+				{
+					dashlet_container: '[data-role="ibo-dashlet"]',
+					dashlet_actions: '[data-role="ibo-dashlet-badge--actions"]',
+					dashlet_action_list: '[data-role="ibo-dashlet-badge--action-list"]'
+				},
+			$dashlet_container: null,
+
+			_create: function () {
+				this.$dashlet_container = $(
+					this.element
+						.parents(this.js_selectors.dashlet_container)
+						.get(-1)
+				);
+
+				this._setStyle();
+				this._bindEvents();
+			},
+			// events bound via _bind are removed automatically
+			// revert other modifications here
+			_destroy: function () {
+			},
+			_setStyle: function () {
+				this.$dashlet_container.css("cursor", "pointer");
+			},
+			_bindEvents: function () {
+				const me = this;
+
+				this.$dashlet_container.on('click', function (oEvent) {
+					me._onComponentClick(oEvent);
+				});
+			},
+			_onComponentClick: function (oEvent) {
+				let $eventTarget = $(oEvent.target);
+
+				if ($eventTarget.is(this.js_selectors.dashlet_actions)) {
+					return;
+				}
+
+				let $listLink = $eventTarget
+					.closest(this.js_selectors.dashlet_container)
+					.find(this.js_selectors.dashlet_action_list);
+				$listLink[0].click();
+			}
+		})
+});

sources/application/UI/Base/Component/Dashlet/DashletBadge.php

@@ -11,7 +11,11 @@ namespace Combodo\iTop\Application\UI\Base\Component\Dashlet;
 class DashletBadge extends DashletContainer
 {
 	public const BLOCK_CODE = 'ibo-dashlet-badge';
-	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dashlet/dashletbadge';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dashlet/dashlet-badge';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/components/dashlet/dashlet-badge';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+		'js/components/dashlet/dashlet-badge.js',
+	];
 
 	/** @var string */
 	protected $sClassIconUrl;

sources/application/UI/Base/Component/Dashlet/DashletContainer.php

@@ -14,4 +14,11 @@ class DashletContainer extends UIContentBlock
 {
 	public const BLOCK_CODE = 'ibo-dashlet';
 	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/content-block/layout';
+
+	public function __construct(string $sId = null, array $aContainerClasses = [])
+	{
+		parent::__construct($sId, $aContainerClasses);
+
+		$this->AddDataAttribute('role', static::BLOCK_CODE);
+	}
 }

templates/base/components/dashlet/dashlet-badge.html.twig

@@ -1,12 +1,13 @@
 {# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
 {# @license     http://opensource.org/licenses/AGPL-3.0 #}
 {% apply spaceless %}
-    <div class="ibo-dashlet-badge--body{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" id="{{ oUIBlock.GetId() }}">
+    <div class="ibo-dashlet-badge--body{% if oUIBlock.IsHidden() %} ibo-is-hidden{% endif %}" id="{{ oUIBlock.GetId() }}"
+         data-role="ibo-dashlet-badge--body">
         <div class="ibo-dashlet-badge--icon-container">
             <img class="ibo-dashlet-badge--icon" src="{{ oUIBlock.GetClassIconUrl() }}">
         </div>
         <div class="ibo-dashlet-badge--actions">
-            <a class="ibo-dashlet-badge--action-list" href="{{ oUIBlock.GetHyperlink() }}">
+            <a class="ibo-dashlet-badge--action-list" href="{{ oUIBlock.GetHyperlink() }}" data-role="ibo-dashlet-badge--action-list">
                 <span class="ibo-dashlet-badge--action-list-count">{{ oUIBlock.GetCount() }}</span>
                 <span class="ibo-dashlet-badge--action-list-label">{{ oUIBlock.GetClassLabel() }}</span>
             </a>

templates/base/components/dashlet/dashlet-badge.js.twig

@@ -0,0 +1 @@
+$('#{{ oUIBlock.GetId() }}').dashlet_badge();