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/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;
+	}
 }