Skip to content

Commit ef5e6f8

Browse files
habarthierry-huehabarthierry-hue
committed
Ticket #891 : Add a grid component in the form builder
1 parent fc46949 commit ef5e6f8

17 files changed

Lines changed: 359 additions & 120 deletions

‎formbuilder/FormBuilder/Components/Drag/DraggableFormElement.razor‎

Lines changed: 6 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
@if(IsEditModeEnabled)
88
{
9-
<div class="draggableElement" @attributes="DraggableElementsAttributes" @ondragstart="@(() => HandleDragStart())">
9+
<div class="draggableElement" @ondragstart:stopPropagation="true" draggable="true" @ondragstart="@(() => HandleDragStart())">
1010
<div class="info">
1111
@Record.GetType().Name
1212
</div>
@@ -17,25 +17,11 @@
1717
{
1818
<RadzenButton Icon="settings" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.ExtraSmall" Click="(async (e) => await HandleViewSettings())" />
1919
}
20-
21-
@if (!IsBlocked)
22-
{
23-
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.ExtraSmall" Click="@HandleRemove" />
24-
}
20+
<RadzenButton Icon="delete" ButtonStyle="ButtonStyle.Primary" Size="ButtonSize.ExtraSmall" Click="@HandleRemove" />
2521
</li>
2622
</ul>
2723
</div>
28-
@if (IsDropZoneEnabled)
29-
{
30-
<DropZoneComponent ClassName="top" Dropped="@HandleEltDroppedTop"></DropZoneComponent>
31-
@Children
32-
<DropZoneComponent ClassName="bottom" Dropped="@HandleEltDroppedBottom"></DropZoneComponent>
33-
}
34-
else
35-
{
36-
@Children
37-
}
38-
24+
@Children
3925
@if (IsOverlayDisplayed)
4026
{
4127
<div class="overlay">
@@ -57,100 +43,25 @@ else
5743
[Parameter] public TRecord Record { get; set; }
5844
[Parameter] public bool IsViewSettingsDisabled { get; set; } = false;
5945

60-
public Dictionary<string, object> DraggableElementsAttributes
61-
{
62-
get
63-
{
64-
if (IsDraggedEnabled)
65-
{
66-
return new Dictionary<string, object> { { "draggable", "true" } };
67-
}
68-
69-
return new Dictionary<string, object>();
70-
}
71-
}
72-
73-
public bool IsDropZoneEnabled
74-
{
75-
get
76-
{
77-
return !ParentContext.IsParentBlocked;
78-
}
79-
}
80-
81-
public bool IsBlocked
82-
{
83-
get
84-
{
85-
return ParentContext.IsParentBlocked || Context.FormEditorContext.IsEltInvolvedInWorkflow(Record);
86-
}
87-
}
88-
8946
public bool IsOverlayDisplayed
9047
{
9148
get
9249
{
93-
return !ParentContext.IsParentBlocked && Context.FormEditorContext.IsEltInvolvedInWorkflow(Record);
94-
}
95-
}
96-
97-
public bool IsDraggedEnabled
98-
{
99-
get
100-
{
101-
return !ParentContext.IsParentBlocked;
50+
return Context.FormEditorContext.IsEltInvolvedInWorkflow(Record);
10251
}
10352
}
10453

10554
public string ClassName
10655
{
10756
get
10857
{
109-
return $"draggableElement" + (IsBlocked ? " isInvolved" : string.Empty);
58+
return $"draggableElement";
11059
}
11160
}
11261

11362
private void HandleDragStart()
11463
{
115-
Context.FormEditorContext.SelectInstance(Record, HandleCurrentEltDropped);
116-
}
117-
118-
private void HandleEltDroppedTop() => HandleEltDropped(false);
119-
120-
private void HandleEltDroppedBottom() => HandleEltDropped(true);
121-
122-
private void HandleEltDropped(bool isBottom)
123-
{
124-
IFormElementRecord eltRecord = null;
125-
int projectedEltIndex = ParentContext.Index;
126-
switch(Context.FormEditorContext.SelectionType)
127-
{
128-
case SelectionTypes.DEFINITION:
129-
var def = Context.FormEditorContext.SelectedEltDefinition;
130-
eltRecord = Activator.CreateInstance(def.RecordType) as IFormElementRecord;
131-
eltRecord.Id = Guid.NewGuid().ToString();
132-
eltRecord.CorrelationId = Guid.NewGuid().ToString();
133-
break;
134-
case SelectionTypes.RECORD:
135-
eltRecord = Context.FormEditorContext.SelectedEltInstance;
136-
if (eltRecord == null) return;
137-
if (eltRecord == (IFormElementRecord)Record) return;
138-
var existingEltIndex = ParentContext.Elements.IndexOf(eltRecord);
139-
if(existingEltIndex != -1 && projectedEltIndex > existingEltIndex)
140-
projectedEltIndex--;
141-
142-
break;
143-
}
144-
145-
if (eltRecord == null) return;
146-
Context.FormEditorContext.DropElement();
147-
projectedEltIndex = isBottom ? projectedEltIndex + 1 : projectedEltIndex;
148-
if (projectedEltIndex >= ParentContext.Elements.Count()) ParentContext.Elements.Add(eltRecord);
149-
else
150-
{
151-
ParentContext.Elements.Remove(eltRecord);
152-
ParentContext.Elements.Insert(projectedEltIndex, eltRecord);
153-
}
64+
Context.FormEditorContext.SelectInstance(Record, ParentContext, HandleCurrentEltDropped);
15465
}
15566

15667
private void HandleCurrentEltDropped()

‎formbuilder/FormBuilder/Components/Drag/DropZoneComponent.razor‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@
44
ondragover="event.preventDefault()"
55
@ondrop="@(async(e) => await HandleDrop())"
66
@ondragenter="HandleDragEnter"
7-
@ondragleave="HandleDragLeave"></div>
7+
@ondragleave="HandleDragLeave">
8+
@if (Children != null)
9+
{
10+
@Children
11+
}
12+
</div>
813

914
@code {
1015
bool IsActive { get; set; }
1116
[Parameter] public string ClassName { get; set; }
1217
[Parameter] public EventCallback Dropped { get; set; }
18+
[Parameter] public RenderFragment Children { get; set; }
1319

1420
private async Task HandleDrop()
1521
{

‎formbuilder/FormBuilder/Components/Form/FormEditor.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
<ul class="elements">
8585
@foreach (var def in definitions.Where(d => d.Category == ElementDefinitionCategories.LAYOUT))
8686
{
87-
<li>
87+
<li draggable="true" @ondragstart="@(() => HandleDragStart(def))">
8888
<div class="icon"><RadzenIcon Icon="@def.Icon" class="icon" /></div><span class="text">@def.Type</span>
8989
</li>
9090
}

‎formbuilder/FormBuilder/Components/FormElements/Divider/DividerLayoutRecord.cs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,6 @@ namespace FormBuilder.Components.FormElements.Divider;
55
public class DividerLayoutRecord : BaseFormLayoutRecord
66
{
77
public override string Type => DividerLayoutDefinition.TYPE;
8+
9+
public override int NbElements => 0;
810
}

‎formbuilder/FormBuilder/Components/FormElements/EditableLayoutComponent.razor‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
@using System.Collections.ObjectModel
2+
@using FormBuilder.Components.Drag
3+
@using FormBuilder.Helpers
4+
@using FormBuilder.Models
5+
@using System.Collections.Specialized
6+
@implements IDisposable
7+
8+
@for(var i = 0; i < Record.NbElements; i++)
9+
{
10+
var columnIndex = i;
11+
if (IsStack)
12+
{
13+
if(!IsEditModeEnabled)
14+
{
15+
@CreateComponent(columnIndex)
16+
}
17+
else
18+
{
19+
<DropZoneComponent Dropped="@(() => HandleEltDropped(columnIndex))"></DropZoneComponent>
20+
@CreateComponent(columnIndex)
21+
}
22+
}
23+
else
24+
{
25+
<RadzenColumn Size="@Size" class="rowColumn">
26+
@if (!IsEditModeEnabled)
27+
{
28+
@CreateComponent(columnIndex)
29+
}
30+
else
31+
{
32+
<DropZoneComponent ClassName="fullHeight" Dropped="@(() => HandleEltDropped(columnIndex))">
33+
<Children>
34+
<RadzenColumn Size="@Size">
35+
@CreateComponent(columnIndex)
36+
</RadzenColumn>
37+
</Children>
38+
</DropZoneComponent>
39+
}
40+
</RadzenColumn>
41+
}
42+
}
43+
44+
@code {
45+
[Inject]
46+
private IRenderFormElementsHelper renderFormsElementsHelper
47+
{
48+
get; set;
49+
}
50+
51+
[Parameter]
52+
53+
public BaseFormLayoutRecord Record
54+
{
55+
get; set;
56+
}
57+
58+
[Parameter]
59+
public int Size
60+
{
61+
get; set;
62+
}
63+
64+
[Parameter]
65+
public bool IsStack
66+
{
67+
get; set;
68+
}
69+
70+
[Parameter]
71+
public bool IsEditModeEnabled
72+
{
73+
get; set;
74+
}
75+
76+
[Parameter]
77+
public WorkflowContext Context
78+
{
79+
get; set;
80+
}
81+
82+
[Parameter]
83+
public ParentEltContext ParentContext
84+
{
85+
get; set;
86+
}
87+
88+
private bool isBlocked { get; set; }
89+
private int currentLevel { get; set; }
90+
91+
public void Dispose()
92+
{
93+
if (Record != null)
94+
{
95+
Record.Elements.CollectionChanged -= HandleCollectionChanged;
96+
}
97+
}
98+
99+
private RenderFragment CreateComponent(int i) => builder =>
100+
{
101+
renderFormsElementsHelper.Render(builder, isBlocked, currentLevel, Record.Elements, Context, IsEditModeEnabled, i);
102+
};
103+
104+
protected override void OnParametersSet()
105+
{
106+
base.OnParametersSet();
107+
if(Record != null)
108+
{
109+
currentLevel = ParentContext?.ParentLevel == null ? 0 : ParentContext.ParentLevel + 1;
110+
isBlocked = Context.FormEditorContext.IsEltInvolvedInWorkflow(Record);
111+
Record.Elements.CollectionChanged += HandleCollectionChanged;
112+
}
113+
}
114+
115+
private void HandleEltDropped(int newIndex)
116+
{
117+
IFormElementRecord eltRecord = null;
118+
switch (Context.FormEditorContext.SelectionType)
119+
{
120+
case SelectionTypes.DEFINITION:
121+
var def = Context.FormEditorContext.SelectedEltDefinition;
122+
if(def == null) return;
123+
eltRecord = Activator.CreateInstance(def.RecordType) as IFormElementRecord;
124+
eltRecord.Id = Guid.NewGuid().ToString();
125+
eltRecord.CorrelationId = Guid.NewGuid().ToString();
126+
break;
127+
case SelectionTypes.RECORD:
128+
eltRecord = Context.FormEditorContext.SelectedEltInstance;
129+
if (eltRecord == null) return;
130+
if (eltRecord == (IFormElementRecord)Record)
131+
{
132+
Context.FormEditorContext.DropElement();
133+
return;
134+
}
135+
136+
if (Record.Elements.Contains(eltRecord))
137+
{
138+
var currentIndex = Record.Elements.IndexOf(eltRecord);
139+
if(currentIndex < newIndex)
140+
{
141+
newIndex--;
142+
}
143+
}
144+
break;
145+
}
146+
147+
if (eltRecord == null) return;
148+
if (Context.FormEditorContext.SelectedEltInstanceParent != null)
149+
{
150+
Context.FormEditorContext.SelectedEltInstanceParent.Elements.Remove(eltRecord);
151+
}
152+
153+
if (newIndex >= Record.Elements.Count())
154+
{
155+
Record.Elements.Add(eltRecord);
156+
}
157+
else
158+
{
159+
Record.Elements.Insert(newIndex, eltRecord);
160+
}
161+
162+
Context.FormEditorContext.DropElement();
163+
}
164+
165+
private void HandleCollectionChanged(object? sender, NotifyCollectionChangedEventArgs args)
166+
{
167+
StateHasChanged();
168+
}
169+
}

‎formbuilder/FormBuilder/Components/FormElements/Row/RowLayout.razor‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
@using FormBuilder.Components.Drag
2+
3+
<DraggableFormElement TDialog="EmptyDialog" Context="@Context" Record="@Value" TRecord="RowLayoutRecord" ParentContext="@ParentContext" IsViewSettingsDisabled="true" IsEditModeEnabled="@IsEditModeEnabled">
4+
<Children>
5+
<RadzenRow>
6+
<EditableLayoutComponent IsEditModeEnabled="@IsEditModeEnabled"
7+
Record="@Value"
8+
Context="@Context"
9+
IsStack=false
10+
Size="@ComputeSize()"></EditableLayoutComponent>
11+
</RadzenRow>
12+
</Children>
13+
</DraggableFormElement>

0 commit comments

Comments
 (0)