composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-05-20 07:42:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* No dashlet edition
* Dashboard are not persisted
* Unable to load a dashboard from an endpoint (refresh)
* Grid library need proper npm integration
This commit is contained in:
Stephen Abello
2026-01-06 15:23:51 +01:00
parent 3e879c64a7
commit a713e1b56e
167 changed files with 32266 additions and 763 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/base/layouts/dashboard/grid/layout.html.twig Normal file
View File

@@ -0,0 +1,5 @@
<ibo-dashboard-grid class="ibo-dashboard--grid grid-stack">
{% for oSubBlock in oUIBlock.GetSlots() %}
{{ render_block(oSubBlock, {aPage: aPage}) }}
{% endfor %}
</ibo-dashboard-grid>

9
templates/base/layouts/dashboard/grid/slot.html.twig Normal file
View File

@@ -0,0 +1,9 @@
<ibo-dashboard-grid-slot
gs-x="{{ random(10) }}"
gs-y="{{ random(6) }}"
gs-w="{{ random(5) }}"
gs-h="{{ random(5) }}"
id=""
class="grid-stack-item">
{{ render_block(oUIBlock.GetDashlet(), {aPage: aPage}) }}
</ibo-dashboard-grid-slot>

21
templates/base/layouts/dashboard/layout.html.twig
View File

@@ -8,9 +8,20 @@
{{ render_block(oUIBlock.GetToolbar(), {aPage: aPage}) }}
</div>
{% endif %}
<div class="ibo-dashboard--grid" data-role="ibo-dashboard--grid">
{% for oSubBlock in oUIBlock.GetDashboardRows() %}
{{ render_block(oSubBlock, {aPage: aPage}) }}
{% endfor %}
</div>
<ibo-dashboard id="{{ oUIBlock.GetId() }}" class="ibo-dashboard" data-role="ibo-dashboard" data-edit-mode="view">
<div class="ibo-dashboard--form">
<div class="ibo-dashboard--form--inputs">
Editing{{ render_block(oUIBlock.GetTitleInput(), {aPage: aPage}) }}{{ render_block(oUIBlock.GetRefreshInput(), {aPage: aPage}) }}
</div>
<div class="ibo-dashboard--form--actions">
{{ render_block(oUIBlock.GetButtonsToolbar(), {aPage: aPage}) }}
</div>
</div>
{{ render_block(oUIBlock.GetGrid(), {aPage: aPage}) }}
<button id="saveBtn">Save layout</button>
<button id="loadBtn">Load layout</button>
</ibo-dashboard>
{% endapply %}

13
templates/base/layouts/dashlet-panel/dashlet-entry.html.twig Normal file
View File

@@ -0,0 +1,13 @@
<button class="ibo-dashlet-entry"
data-dashlet-class="{{ oUIBlock.GetDashletClass() }}"
data-min-width="{{ oUIBlock.GetDashletMinWidth() }}"
data-min-height="{{ oUIBlock.GetDashletMinHeight() }}"
data-preferred-width="{{ oUIBlock.GetDashletPreferredWidth() }}"
data-preferred-height="{{ oUIBlock.GetDashletPreferredHeight() }}"
>
<div class="ibo-dashlet-entry--icon"><img src="{{ oUIBlock.GetDashletIcon() }}" alt="{{ oUIBlock.GetDashletLabel() }} icon"/></div>
<div class="ibo-dashlet-entry--content">
<div class="ibo-dashlet-entry--title">{{ oUIBlock.GetDashletLabel() }}</div>
<div class="ibo-dashlet-entry--description">{{ oUIBlock.GetDashletDescription() }}</div>
</div>
</button>

11
templates/base/layouts/dashlet-panel/layout.html.twig Normal file
View File

@@ -0,0 +1,11 @@
<div id={{ oUIBlock.GetId() }} class="ibo-dashlet-panel">
<div class ="ibo-dashlet-panel--title">
Add a dashlet
</div>
<div class="ibo-dashlet-panel--entries">
{% for oSubBlock in oUIBlock.GetSubBlocks() %}
{{ render_block(oSubBlock, {aPage: aPage}) }}
{% endfor %}
</div>
<div class="ibo-dashlet-panel--form-container ibo-is-hidden"></div>
</div>

13
templates/base/layouts/dashlet-panel/layout.js.twig Normal file
View File

@@ -0,0 +1,13 @@
(() => {
const oDashletEntries = document.querySelectorAll('#{{ oUIBlock.GetId() }} .ibo-dashlet-entry');
$('#{{ oUIBlock.GetId() }} .ibo-dashlet-entry').on('click', (event) => {
const sDashletClass = event.currentTarget.getAttribute('data-dashlet-class');
const oDashboard = document.querySelector('ibo-dashboard');
oDashboard.AddNewDashlet(sDashletClass, {
'minW': event.currentTarget.getAttribute('data-min-width'),
'minH': event.currentTarget.getAttribute('data-min-height'),
'w': event.currentTarget.getAttribute('data-preferred-width'),
'h': event.currentTarget.getAttribute('data-preferred-height')
});
});
})();