Skip to content

Commit e94926d

Browse files
roncodesroncodes
authored
Merge pull request #121 from fleetbase/feature/template-builder-component
feat: add TemplateBuilder component system
2 parents 192eb9c + ec3a4ed commit e94926d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+4504
-23
lines changed

‎addon/components/template-builder.hbs‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
{{! Template Builder — top-level layout }}
2+
<div class="tb-root flex flex-col h-full w-full bg-gray-100 dark:bg-gray-950 overflow-hidden" ...attributes>
3+
4+
{{! ================================================================ }}
5+
{{! TOOLBAR }}
6+
{{! ================================================================ }}
7+
<TemplateBuilder::Toolbar
8+
@zoom={{this.zoom}}
9+
@selectedElement={{this.selectedElement}}
10+
@canUndo={{this.canUndo}}
11+
@canRedo={{this.canRedo}}
12+
@isSaving={{@isSaving}}
13+
@onAddElement={{this.addElement}}
14+
@onZoomIn={{this.zoomIn}}
15+
@onZoomOut={{this.zoomOut}}
16+
@onZoomReset={{this.zoomReset}}
17+
@onUndo={{this.undo}}
18+
@onRedo={{this.redo}}
19+
@onPreview={{this.preview}}
20+
@onSave={{this.save}}
21+
@onRotateElement={{this.rotateElement}}
22+
@onClose={{@onClose}}
23+
@closeIcon={{@closeIcon}}
24+
@closeLabel={{@closeLabel}}
25+
/>
26+
27+
{{! ================================================================ }}
28+
{{! MAIN AREA: Layers/Queries | Canvas | Properties }}
29+
{{! ================================================================ }}
30+
<div class="flex flex-1 min-h-0 overflow-hidden">
31+
32+
{{! LEFT: Layers + Queries panel }}
33+
<div class="tb-panel-left w-52 flex-shrink-0 border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden flex flex-col">
34+
35+
{{! Tab switcher }}
36+
<div class="flex border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
37+
<button
38+
type="button"
39+
class="flex-1 flex items-center justify-center space-x-1.5 py-2 text-xs font-medium transition-colors
40+
{{if (eq this.leftPanelTab 'layers')
41+
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 -mb-px'
42+
'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
43+
{{on "click" (fn this.setLeftPanelTab "layers")}}
44+
>
45+
<FaIcon @icon="layer-group" class="w-3 h-3" />
46+
<span>Layers</span>
47+
</button>
48+
<button
49+
type="button"
50+
class="flex-1 flex items-center justify-center space-x-1.5 py-2 text-xs font-medium transition-colors
51+
{{if (eq this.leftPanelTab 'queries')
52+
'text-blue-600 dark:text-blue-400 border-b-2 border-blue-500 -mb-px'
53+
'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'}}"
54+
{{on "click" (fn this.setLeftPanelTab "queries")}}
55+
>
56+
<FaIcon @icon="database" class="w-3 h-3" />
57+
<span>Queries</span>
58+
{{#if this.queries.length}}
59+
<span class="ml-0.5 px-1 py-0 rounded-full bg-indigo-100 dark:bg-indigo-900/40 text-indigo-600 dark:text-indigo-400 text-xs leading-4">{{this.queries.length}}</span>
60+
{{/if}}
61+
</button>
62+
</div>
63+
64+
{{! Panel content }}
65+
<div class="flex-1 overflow-hidden flex flex-col">
66+
{{#if (eq this.leftPanelTab "layers")}}
67+
<TemplateBuilder::LayersPanel
68+
@elements={{this.elements}}
69+
@selectedElement={{this.selectedElement}}
70+
@onSelectElement={{this.selectElement}}
71+
@onUpdateElement={{this.updateElement}}
72+
@onDeleteElement={{this.deleteElement}}
73+
@onReorderElement={{this.reorderElement}}
74+
/>
75+
{{else}}
76+
<TemplateBuilder::QueriesPanel
77+
@queries={{this.queries}}
78+
@onQueriesChange={{this.handleQueriesChange}}
79+
/>
80+
{{/if}}
81+
</div>
82+
</div>
83+
84+
{{! CENTER: Canvas area (scrollable) }}
85+
<div class="tb-canvas-area flex-1 overflow-auto p-8 flex items-start justify-center">
86+
<TemplateBuilder::Canvas
87+
@template={{this.template}}
88+
@selectedElement={{this.selectedElement}}
89+
@zoom={{this.zoom}}
90+
@onSelectElement={{this.selectElement}}
91+
@onMoveElement={{this.moveElement}}
92+
@onResizeElement={{this.resizeElement}}
93+
@onDeselectAll={{this.deselectAll}}
94+
/>
95+
</div>
96+
97+
{{! RIGHT: Properties panel }}
98+
<div class="tb-panel-right w-64 flex-shrink-0 border-l border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden flex flex-col">
99+
<TemplateBuilder::PropertiesPanel
100+
@selectedElement={{this.selectedElement}}
101+
@template={{this.template}}
102+
@contextSchemas={{this.contextSchemas}}
103+
@onUpdateElement={{this.updateElement}}
104+
@onUpdateTemplate={{this.updateTemplate}}
105+
@onOpenVariablePicker={{this.openVariablePicker}}
106+
/>
107+
</div>
108+
</div>
109+
110+
{{! ================================================================ }}
111+
{{! VARIABLE PICKER MODAL }}
112+
{{! ================================================================ }}
113+
<TemplateBuilder::VariablePicker
114+
@isOpen={{this.variablePickerOpen}}
115+
@contextSchemas={{this.enrichedContextSchemas}}
116+
@onInsert={{this.handleVariableInsert}}
117+
@onClose={{this.closeVariablePicker}}
118+
/>
119+
</div>

0 commit comments

Comments
 (0)