N°8641 - Dashboard editor front-end first commit for Form SDK integration.

* No dashlet edition
* Dashboard are not persisted
* Unable to load a dashboard from an endpoint (refresh)
* Grid library need proper npm integration

sources/Application/UI/Base/Component/Dashlet/DashletWrapper.php

@@ -0,0 +1,51 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Component\Dashlet;
+
+
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+class DashletWrapper extends UIBlock {
+	public const BLOCK_CODE = 'ibo-dashlet-wrapper';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/components/dashlet/dashlet-wrapper';
+
+	protected $oDashlet;
+	protected $sDashletClass;
+	protected $sDashletId;
+
+	public function __construct($oDashlet, ?string $sDashletId = null, ?string $sDashletClass = null) {
+		parent::__construct(null);
+
+		$this->oDashlet = $oDashlet;
+		$this->sDashletId = $sDashletId;
+		$this->sDashletClass = $sDashletClass;
+	}
+
+	public function GetDashlet() {
+		return $this->oDashlet;
+	}
+
+	public function GetDashletId(): ?string
+	{
+		return $this->sDashletId;
+	}
+
+	public function SetDashletId(?string $sDashletId): DashletWrapper
+	{
+		$this->sDashletId = $sDashletId;
+
+		return $this;
+	}
+
+	public function GetDashletClass(): ?string
+	{
+		return $this->sDashletClass;
+	}
+
+	public function SetDashletClass(?string $sDashletClass)
+	{
+		$this->sDashletClass = $sDashletClass;
+
+		return $this;
+	}
+}

sources/Application/UI/Base/Layout/Dashboard/DashboardGrid.php

@@ -0,0 +1,63 @@
+<?php
+
+/**
+ * @copyright   Copyright (C) 2010-2025 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\Dashboard;
+
+use Combodo\iTop\Application\UI\Base\Component\Dashlet\DashletWrapper;
+use Combodo\iTop\Application\UI\Base\tJSRefreshCallback;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+class DashboardGrid extends UIBlock
+{
+	use tJSRefreshCallback;
+
+	public const BLOCK_CODE                     = 'ibo-dashboard-grid';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/dashboard/grid/layout';
+
+	public const DEFAULT_JS_FILES_REL_PATH      = [
+		'js/layouts/dashboard/dashboard-grid.js',
+	];
+
+	/** @var DashboardGridSlot[] */
+	protected $aSlots;
+
+	public function __construct(?string $sId = null)
+	{
+		parent::__construct($sId);
+		$this->aSlots = [];
+	}
+
+	/**
+	 * @return DashboardGridSlot[]
+	 */
+	public function GetSlots(): array
+	{
+		return $this->aSlots;
+	}
+
+	public function SetSlots(array $aSlots): DashboardGrid
+	{
+		$this->aSlots = $aSlots;
+
+		return $this;
+	}
+
+	public function AddSlot(DashboardGridSlot $oSlot): DashboardGrid
+	{
+		$this->aSlots[] = $oSlot;
+
+		return $this;
+	}
+
+	public function AddDashlet(UIBlock $oDashlet, ?string $sDashletId = null, ?string $sDashletClass = null): DashboardGrid {
+		$oWrapper = new DashletWrapper($oDashlet, $sDashletId, $sDashletClass);
+		$oSlot = new DashboardGridSlot(null, $oWrapper);
+		$this->AddSlot($oSlot);
+
+		return $this;
+	}
+}

sources/Application/UI/Base/Layout/Dashboard/DashboardGridSlot.php

@@ -0,0 +1,104 @@
+<?php
+
+/**
+ * @copyright   Copyright (C) 2010-2025 Combodo SAS
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Base\Layout\Dashboard;
+
+use Combodo\iTop\Application\UI\Base\tJSRefreshCallback;
+use Combodo\iTop\Application\UI\Base\UIBlock;
+
+class DashboardGridSlot extends UIBlock
+{
+	use tJSRefreshCallback;
+	public const BLOCK_CODE = 'ibo-dashboard-grid-slot';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/dashboard/grid/slot';
+	/** @var int|null */
+	protected $iPositionX;
+	/** @var int|null */
+	protected $iPositionY;
+	/** @var int|null */
+	protected $iWidth;
+	/** @var int|null */
+	protected $iHeight;
+	protected $oDashlet;
+
+	public function __construct(?string $sId = null, ?UIBlock $oDashlet = null, ?int $iPositionX = null, ?int $iPositionY = null, ?int $iWidth = null, ?int $iHeight = null)
+	{
+		parent::__construct($sId);
+		$this->oDashlet = $oDashlet;
+
+		$this->iPositionX = random_int(0, 10) || $iPositionX;
+		$this->iPositionY = random_int(0, 8) || $iPositionY;
+		$this->iWidth = random_int(1, 5) || $iWidth;
+		$this->iHeight = random_int(1, 4) || $iHeight;
+	}
+
+
+	public function GetSubBlocks(): array
+	{
+		return [$this->oUIBlock];
+	}
+
+	public function GetPositionX(): ?int
+	{
+		return $this->iPositionX;
+	}
+
+	public function SetPositionX(?int $iPositionX): DashboardGridSlot
+	{
+		$this->iPositionX = $iPositionX;
+
+		return $this;
+	}
+
+	public function GetPositionY(): ?int
+	{
+		return $this->iPositionY;
+	}
+
+	public function SetPositionY(?int $iPositionY): DashboardGridSlot
+	{
+		$this->iPositionY = $iPositionY;
+
+		return $this;
+	}
+
+	public function GetWidth(): ?int
+	{
+		return $this->iWidth;
+	}
+
+	public function SetWidth(?int $iWidth): DashboardGridSlot
+	{
+		$this->iWidth = $iWidth;
+
+		return $this;
+	}
+
+	public function GetHeight(): ?int
+	{
+		return $this->iHeight;
+	}
+
+	public function SetHeight(?int $iHeight): DashboardGridSlot
+	{
+		$this->iHeight = $iHeight;
+
+		return $this;
+	}
+
+	public function GetDashlet(): ?UIBlock
+	{
+		return $this->oDashlet;
+	}
+
+	public function SetDashlet(?UIBlock $oDashlet): DashboardGridSlot
+	{
+		$this->oDashlet = $oDashlet;
+
+		return $this;
+	}
+}

sources/Application/UI/Base/Layout/Dashboard/DashboardLayout.php

@@ -7,13 +7,25 @@
 
 namespace Combodo\iTop\Application\UI\Base\Layout\Dashboard;
 
+use Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
+use Combodo\iTop\Application\UI\Base\Component\Input\Select\SelectOption;
+use Combodo\iTop\Application\UI\Base\Component\Input\Select\SelectOptionUIBlockFactory;
 use Combodo\iTop\Application\UI\Base\Layout\UIContentBlock;
 use Combodo\iTop\Application\UI\Base\UIBlock;
+use Dict;
+use function Combodo\iTop\Application\UI\Base\Component\Button\ButtonUIBlockFactory;
 
+// TODO 3.3 Remove old dashboard methods, make dict entries for elements, etc
 class DashboardLayout extends UIBlock
 {
 	public const BLOCK_CODE = 'ibo-dashboard';
 	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/dashboard/layout';
+	public const DEFAULT_JS_FILES_REL_PATH = [
+		'js/layouts/dashboard/dashboard.js',
+		'js/layouts/dashboard/dashboard-grid.js',
+		'js/layouts/dashboard/dashboard-grid-slot.js',
+		'js/layouts/dashboard/dashlet.js',
+	];
 
 	/** @var string */
 	protected $sTitle;
@@ -24,6 +36,12 @@ class DashboardLayout extends UIBlock
 	/** @var int */
 	protected $iRows;
 
+	protected $oDashboardGrid;
+
+	protected $oTitleInput;
+	protected $oRefreshInput;
+	protected $oButtonsToolbar;
+
 	public function __construct(?string $sId = null)
 	{
 		parent::__construct($sId);
@@ -31,6 +49,48 @@ class DashboardLayout extends UIBlock
 		$this->iRows = 0;
 		$this->sTitle = '';
 		$this->oToolbar = new UIContentBlock(null, ['ibo-dashboard--top-bar-toolbar']);
+		$this->oTitleInput = $this->MakeTitleInput();
+		$this->oRefreshInput = $this->MakeRefreshInput();
+		$this->oButtonsToolbar = $this->MakeButtonsToolbar();
+	}
+
+	public function MakeTitleInput() {
+		$oTitleInput = new \Combodo\iTop\Application\UI\Base\Component\Input\Input();
+		$oTitleInput->SetName('dashboard_title');
+		$oTitleInput->SetType('text');
+		$oTitleInput->SetPlaceholder('Enter the dashboard title...');
+
+		return $oTitleInput;
+	}
+
+	public function MakeRefreshInput() {
+		$oRefreshInput = \Combodo\iTop\Application\UI\Base\Component\Input\Select\SelectUIBlockFactory::MakeForSelect('refresh_interval');
+		$aRefreshRateOptions = [
+			['value' => '0', 'label' => 'No auto-refresh'],
+			['value' => '30', 'label' => 'Every 30 seconds'],
+			['value' => '60', 'label' => 'Every 1 minute'],
+			['value' => '300', 'label' => 'Every 5 minutes'],
+			['value' => '600', 'label' => 'Every 10 minutes'],
+			['value' => '1800', 'label' => 'Every 30 minutes'],
+			['value' => '3600', 'label' => 'Every 1 hour'],
+		];
+
+		foreach ($aRefreshRateOptions as $aOptionData) {
+			$oOption = SelectOptionUIBlockFactory::MakeForSelectOption($aOptionData['value'], $aOptionData['label'], false);
+			$oRefreshInput->AddOption($oOption);
+		}
+
+		return $oRefreshInput;
+	}
+	public function MakeButtonsToolbar() {
+		$oContainer = new UIContentBlock(null, ['ibo-dashboard--buttons-toolbar']);
+		$oCancelButton = ButtonUIBlockFactory::MakeForCancel(Dict::S('UI:Button:Cancel'), 'cancel', 'cancel');
+		$oSaveButton = ButtonUIBlockFactory::MakeForPrimaryAction(Dict::S('UI:Button:Save'), 'save', 'save');
+
+		$oContainer->AddSubBlock($oCancelButton);
+		$oContainer->AddSubBlock($oSaveButton);
+
+		return $oContainer;
 	}
 
 	/**
@@ -50,7 +110,7 @@ class DashboardLayout extends UIBlock
 
 	public function GetSubBlocks(): array
 	{
-		return array_merge($this->aDashboardRows, [$this->oToolbar]);
+		return array_merge($this->aDashboardRows, [$this->oToolbar, $this->oRefreshInput, $this->oTitleInput, $this->oButtonsToolbar, $this->oDashboardGrid]);
 	}
 
 	/**
@@ -90,6 +150,8 @@ class DashboardLayout extends UIBlock
 	public function SetTitle(string $sTitle)
 	{
 		$this->sTitle = $sTitle;
+
+		$this->oTitleInput->SetValue($sTitle);
 	}
 
 	/**
@@ -99,4 +161,27 @@ class DashboardLayout extends UIBlock
 	{
 		return $this->aDashboardRows;
 	}
+
+	public function SetGrid(DashboardGrid $oDashboardGrid) {
+		$this->oDashboardGrid = $oDashboardGrid;
+
+		return $this;
+	}
+
+	public function GetGrid() {
+		return $this->oDashboardGrid;
+	}
+
+	public function GetTitleInput()
+	{
+		return $this->oTitleInput;
+	}
+
+	public function GetRefreshInput() {
+		return $this->oRefreshInput;
+	}
+
+	public function GetButtonsToolbar() {
+		return $this->oButtonsToolbar;
+	}
 }

sources/Application/UI/Base/Layout/DashletPanel/DashletEntry.php

@@ -0,0 +1,163 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Layout\DashletPanel;
+
+use Combodo\iTop\Application\UI\Base\UIBlock;
+use utils;
+
+class DashletEntry extends UIBlock {
+	public const BLOCK_CODE = 'ibo-dashlet-entry';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/dashlet-panel/dashlet-entry';
+
+	protected $sDashletLabel;
+	protected $sDashletClass;
+	protected $sDashletIcon;
+	protected $sDashletDescription;
+	protected $sDashletMinWidth;
+	protected $sDashletMinHeight;
+	protected $sDashletPreferredWidth;
+	protected $sDashletPreferredHeight;
+
+
+	public function __construct(string $sDashletClass, string $sDashletLabel, string $sDashletDescription, string $sDashletIconRelUrl, ?string $sId = null)
+	{
+		parent::__construct($sId);
+
+		$this->sDashletClass = $sDashletClass;
+		$this->sDashletLabel = $sDashletLabel;
+		$this->sDashletIcon = utils::GetAbsoluteUrlAppRoot().$sDashletIconRelUrl;
+		$this->sDashletDescription = $sDashletDescription;
+
+		$this->AddDataAttribute('role', static::BLOCK_CODE);
+	}
+
+	public function GetDashletLabel(): string
+	{
+		return $this->sDashletLabel;
+	}
+
+	public function SetDashletLabel(string $sDashletLabel): DashletEntry
+	{
+		$this->sDashletLabel = $sDashletLabel;
+
+		return $this;
+	}
+
+	public function GetDashletClass(): string
+	{
+		return $this->sDashletClass;
+	}
+
+	public function SetDashletClass(string $sDashletClass): DashletEntry
+	{
+		$this->sDashletClass = $sDashletClass;
+
+		return $this;
+	}
+
+	public function GetDashletIcon(): string
+	{
+		return $this->sDashletIcon;
+	}
+
+	public function SetDashletIcon(string $sDashletIcon): DashletEntry
+	{
+		$this->sDashletIcon = $sDashletIcon;
+
+		return $this;
+	}
+
+	public function GetDashletDescription(): string
+	{
+		return $this->sDashletDescription;
+	}
+
+	public function SetDashletDescription(string $sDashletDescription): DashletEntry
+	{
+		$this->sDashletDescription = $sDashletDescription;
+
+		return $this;
+	}
+
+	/**
+	 * @return mixed
+	 */
+	public function GetDashletPreferredHeight()
+	{
+		return $this->sDashletPreferredHeight;
+	}
+
+	/**
+	 * @param mixed $sDashletPreferredHeight
+	 *
+	 * @return DashletEntry
+	 */
+	public function SetDashletPreferredHeight($sDashletPreferredHeight)
+	{
+		$this->sDashletPreferredHeight = $sDashletPreferredHeight;
+
+		return $this;
+	}
+
+	/**
+	 * @return mixed
+	 */
+	public function GetDashletPreferredWidth()
+	{
+		return $this->sDashletPreferredWidth;
+	}
+
+	/**
+	 * @param mixed $sDashletPreferredWidth
+	 *
+	 * @return DashletEntry
+	 */
+	public function SetDashletPreferredWidth($sDashletPreferredWidth)
+	{
+		$this->sDashletPreferredWidth = $sDashletPreferredWidth;
+
+		return $this;
+	}
+
+	/**
+	 * @return mixed
+	 */
+	public function GetDashletMinHeight()
+	{
+		return $this->sDashletMinHeight;
+	}
+
+	/**
+	 * @param mixed $sDashletMinHeight
+	 *
+	 * @return DashletEntry
+	 */
+	public function SetDashletMinHeight($sDashletMinHeight)
+	{
+		$this->sDashletMinHeight = $sDashletMinHeight;
+
+		return $this;
+	}
+
+	/**
+	 * @return mixed
+	 */
+	public function GetDashletMinWidth()
+	{
+		return $this->sDashletMinWidth;
+	}
+
+	/**
+	 * @param mixed $sDashletMinWidth
+	 *
+	 * @return DashletEntry
+	 */
+	public function SetDashletMinWidth($sDashletMinWidth)
+	{
+		$this->sDashletMinWidth = $sDashletMinWidth;
+
+		return $this;
+	}
+
+
+}

sources/Application/UI/Base/Layout/DashletPanel/DashletPanel.php

@@ -0,0 +1,42 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Layout\DashletPanel;
+
+use Combodo\iTop\Application\UI\Base\UIBlock;
+use Dashlet;
+
+class DashletPanel extends UIBlock {
+	public const BLOCK_CODE = 'ibo-dashlet-panel';
+	public const DEFAULT_HTML_TEMPLATE_REL_PATH = 'base/layouts/dashlet-panel/layout';
+	public const DEFAULT_JS_TEMPLATE_REL_PATH = 'base/layouts/dashlet-panel/layout';
+
+	protected $aDashletsEntries = [];
+
+	public function __construct(string $sId = null, array $aContainerClasses = [])
+	{
+		parent::__construct($sId, $aContainerClasses);
+
+		$this->AddDataAttribute('role', static::BLOCK_CODE);
+	}
+
+	public function AddDashletEntry(DashletEntry $oDashletEntry) {
+		$this->aDashletsEntries[] = $oDashletEntry;
+
+		return $this;
+	}
+
+	public function GetDashletEntries() : array {
+		return $this->aDashletsEntries;
+	}
+
+	public function SetDashletEntries(array $aDashletEntries) {
+		$this->aDashletsEntries = $aDashletEntries;
+
+		return $this;
+	}
+
+	public function GetSubBlocks(): array
+	{
+		return $this->aDashletsEntries;
+	}
+}

sources/Application/UI/Base/Layout/DashletPanel/DashletPanelFactory.php

@@ -0,0 +1,36 @@
+<?php
+
+namespace Combodo\iTop\Application\UI\Base\Layout\DashletPanel;
+
+
+use Combodo\iTop\Service\Dashboard\DashletService;
+
+class DashletPanelFactory {
+	public static function MakeForDashboardEditor(string $sId = null): DashletPanel
+	{
+		$oDashletPanel = new DashletPanel($sId);
+
+		$aAvailableDashlets = DashletService::GetAvailableDashlets();
+
+		foreach ($aAvailableDashlets as $sDashletClass => $aDashletInformation) {
+			$oDashletEntry = new DashletEntry($sDashletClass, $aDashletInformation['label'], $aDashletInformation['description'], $aDashletInformation['icon']);
+
+			if(isset($aDashletInformation['min_width'])) {
+				$oDashletEntry->SetDashletMinWidth($aDashletInformation['min_width']);
+			}
+			if(isset($aDashletInformation['min_height'])) {
+				$oDashletEntry->SetDashletMinHeight($aDashletInformation['min_height']);
+			}
+			if(isset($aDashletInformation['preferred_width'])) {
+				$oDashletEntry->SetDashletPreferredWidth($aDashletInformation['preferred_width']);
+			}
+			if(isset($aDashletInformation['preferred_height'])) {
+				$oDashletEntry->SetDashletPreferredHeight($aDashletInformation['preferred_height']);
+			}
+
+			$oDashletPanel->AddDashletEntry($oDashletEntry);
+		}
+
+		return $oDashletPanel;
+	}
+}

sources/Application/UI/Base/Layout/PageContent/PageContentFactory.php

@@ -22,6 +22,8 @@ namespace Combodo\iTop\Application\UI\Base\Layout\PageContent;
 
 use cmdbAbstractObject;
 use Combodo\iTop\Application\UI\Base\Layout\ActivityPanel\ActivityPanelFactory;
+use Combodo\iTop\Application\UI\Base\Layout\DashletPanel\DashletPanel;
+use Combodo\iTop\Application\UI\Base\Layout\DashletPanel\DashletPanelFactory;
 use Combodo\iTop\Application\UI\Base\Layout\Object\ObjectFactory;
 use DBObject;
 
@@ -71,4 +73,14 @@ class PageContentFactory
 
 		return $oLayout;
 	}
+
+	public static function MakeForDashboard() {
+		$oLayout = new PageContentWithSideContent();
+
+		// TODO 3.3 Add dashboard specific blocks
+		$oDashletPanel = DashletPanelFactory::MakeForDashboardEditor();
+		$oLayout->AddSideBlock($oDashletPanel);
+
+		return $oLayout;
+	}
 }