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

js/layouts/dashboard/dashboard-grid.js

@@ -0,0 +1,113 @@
+class IboGrid extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+
+		/** @type {number} */
+		this.columnsCount = 12;
+		/** @type {boolean} unused yet*/
+		this.bEditable = false;
+		/** @type {GridStack|null} GridStack instance */
+		this.oGrid = null;
+		/** @type {Array<IboGridSlot>} */
+		this.aSlots = [];
+
+
+		this.SetupGrid();
+	}
+
+	SetupGrid() {
+		let aCandidateSlots = Array.from(this.querySelectorAll('ibo-dashboard-grid-slot'));
+		aCandidateSlots.forEach(oSlot => {
+			const aAttrs = ['gs-x', 'gs-y', 'gs-w', 'gs-h', 'id'];
+			aAttrs.forEach(sAttr => {
+				const sVal = oSlot.getAttribute(sAttr) || oSlot.getAttribute('data-'+sAttr);
+				if (sVal !== null) {
+					oSlot.setAttribute(sAttr, sVal);
+				}
+			});
+		});
+
+		this.oGrid = GridStack.init({
+			column: this.columnsCount,
+			marginTop: 8,
+			marginLeft: 8,
+			marginRight: 0,
+			marginBottom: 0,
+			resizable: {handles: 'all'},
+			disableDrag: true,
+			disableResize: true,
+			float: true
+		}, this);
+	}
+
+	getSlots() {
+		return this.oGrid.getGridItems();
+	}
+
+	SetEditable(bIsEditable) {
+		this.bEditable = bIsEditable;
+		if (this.oGrid !== null) {
+			this.oGrid.enableMove(bIsEditable);
+			this.oGrid.enableResize(bIsEditable);
+		}
+	}
+
+	AddDashlet(sDashlet, aOptions = {}) {
+		// Get the dashlet as an object
+		const oParser = new DOMParser();
+		const oDocument = oParser.parseFromString(sDashlet, 'text/html');
+		const oDashlet = oDocument.body.firstChild;
+
+		const oSlot = IboGridSlot.MakeNew(oDashlet);
+
+		this.append(oSlot);
+
+		let aDefaultOptions = {
+			autoPosition: !(aOptions.hasOwnProperty('x') || aOptions.hasOwnProperty('y')),
+		}
+		this.oGrid.makeWidget(oSlot, Object.assign(aDefaultOptions, aOptions));
+
+		return oDashlet.sDashletId;
+	}
+
+	CloneDashlet(sDashletId) {
+		const aSlots = this.getSlots();
+		for (let oSlot of aSlots) {
+
+			if (oSlot.oDashlet && oSlot.oDashlet.sDashletId === sDashletId) {
+				const sWidth = oSlot.iWidth;
+				const sHeight = oSlot.iHeight;
+
+				// TODO 3.3: Should ask a rendered dashlet for its content to avoid duplicating IDs
+				// Still we'll position it automatically and take care of height/width
+
+				const sDashletContent = oSlot.oDashlet.innerHTML;
+				this.AddDashlet(sDashletContent, {
+					'w': sWidth,
+					'h': sHeight
+				});
+				break;
+			}
+		}
+	}
+	RemoveDashlet(sDashletId) {
+		const aSlots = this.getSlots();
+		for (let oSlot of aSlots) {
+			if (oSlot.oDashlet && oSlot.oDashlet.sDashletId === sDashletId) {
+				this.oGrid.removeWidget(oSlot);
+				break;
+			}
+		}
+	}
+	Serialize() {
+		const aSlots = this.getSlots();
+		return aSlots.map(oSlot => {
+			return oSlot.Serialize();
+		});
+	}
+}
+
+customElements.define('ibo-dashboard-grid', IboGrid);