N°3581 - Dashlet: Fix pill not being completely clickable

application/displayblock.class.inc.php

@@ -1016,13 +1016,13 @@ JS
 		$oBlock = new UIContentBlockWithJSRefreshCallback(null, ["ibo-dashlet-header-dynamic--container"]);
 		foreach ($aStateLabels as $sStateValue => $sStateLabel) {
 			$aCount = $aCounts[$sStateValue];
-			$oBadge = PillFactory::MakeForState($sClass, $sStateValue);
 			$sHyperlink = $aCount['link'];
 			$sCountLabel = $aCount['label'];
-			$sColor = $oBadge->GetColor();
-			$oBadge->AddHtml("<a class=\"ibo-dashlet-header-dynamic--count ibo-pill-is-{$sColor}\" href=\"$sHyperlink\">$sCountLabel</a>");
-			$oBadge->AddHtml("<span class=\"ibo-dashlet-header-dynamic--label ibo-pill-is-{$sColor}\">$sStateLabel</span>");
-			$oBlock->AddSubBlock($oBadge);
+			$oPill = PillFactory::MakeForState($sClass, $sStateValue)
+				->SetUrl($sHyperlink)
+				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--count\">$sCountLabel</span>")
+				->AddHtml("<span class=\"ibo-dashlet-header-dynamic--label\">$sStateLabel</span>");
+			$oBlock->AddSubBlock($oPill);
 		}
 		$aExtraParams['query_params'] = $this->m_oFilter->GetInternalParams();
 		$aRefreshParams = ['filter' => $this->m_oFilter->ToOQL(), "extra_params" => json_encode($aExtraParams)];

css/backoffice/components/_pill.scss

@@ -82,7 +82,7 @@ $ibo-pill-states-colors: (
 );
 
 @each $sType, $aColors in $ibo-pill-states-colors {
-  .ibo-pill-is-#{$sType} {
+  .ibo-pill.ibo-is-#{$sType} {
     color: map-get($aColors, 'secondary-color');
     background-color: map-get($aColors, 'primary-color');
   }

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

@@ -20,13 +20,25 @@ use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
  */
 class Pill extends UIContentBlock
 {
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-pill';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/pill/layout';
+
 	/** @var string */
 	protected $sColor;
+	/** @var string URL to go to if the pill is clicked */
+	protected $sUrl;
 
+	/**
+	 * Pill constructor.
+	 *
+	 * @param string $sColor
+	 */
 	public function __construct(string $sColor)
 	{
-		parent::__construct(null, ["ibo-pill ibo-pill-is-{$sColor}"]);
+		parent::__construct();
 		$this->SetColor($sColor);
+		$this->SetUrl('');
 	}
 
 	/**
@@ -48,4 +60,32 @@ class Pill extends UIContentBlock
 
 		return $this;
 	}
+
+	/**
+	 * @return string
+	 */
+	public function GetUrl(): string
+	{
+		return $this->sUrl;
+	}
+
+	/**
+	 * @param string $sUrl
+	 *
+	 * @return $this
+	 */
+	public function SetUrl(string $sUrl)
+	{
+		$this->sUrl = $sUrl;
+
+		return $this;
+	}
+
+	/**
+	 * @return bool
+	 */
+	public function HasUrl(): bool
+	{
+		return !empty($this->sUrl);
+	}
 }

sources/application/UI/Base/Component/Pill/PillFactory.php

@@ -20,7 +20,12 @@ use Combodo\iTop\Application\UI\Helper\UIHelper;
  */
 class PillFactory
 {
-
+	/**
+	 * @param string $sClass
+	 * @param string $sStateCode
+	 *
+	 * @return \Combodo\iTop\Application\UI\Base\Component\Pill\Pill
+	 */
 	public static function MakeForState(string $sClass, string $sStateCode)
 	{
 		$sColor = UIHelper::GetColorFromStatus($sClass, $sStateCode);

templates/base/components/badge/layout.html.twig

@@ -1,3 +0,0 @@
-{# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
-{# @license     http://opensource.org/licenses/AGPL-3.0 #}
-{% extends "base/layouts/content-block/layout.html.twig" %}

templates/base/components/pill/layout.html.twig

@@ -0,0 +1,11 @@
+{# @copyright   Copyright (C) 2010-2021 Combodo SARL #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+{% set sTagName = oUIBlock.HasUrl() ? 'a' : 'span' %}
+<{{ sTagName }} id="{{ oUIBlock.GetId() }}"
+    {% if oUIBlock.HasUrl() %}href="{{ oUIBlock.GetUrl()|raw }}"{% endif %}
+    class="ibo-pill ibo-is-{{ oUIBlock.GetColor() }}"
+    data-role="ibo-pill">
+    {% for oSubBlock in oUIBlock.GetSubBlocks() %}
+        {{ render_block(oSubBlock, {aPage: aPage}) }}
+    {% endfor %}
+</{{ sTagName }}>