integrated radzen layout, fixed cors issue, added save form button

src/FormBuilder.API/Configurations/CorsConfiguration.cs

@@ -0,0 +1,17 @@
+namespace FormBuilder.API.Configurations;
+
+public static class CorsConfiguration
+{
+    public static void ConfigureCors(this WebApplicationBuilder builder)
+    {
+        builder.Services.AddCors(options =>
+        {
+            options.AddPolicy("AnyCors", cors =>
+            {
+                cors.AllowAnyOrigin()
+                    .AllowAnyHeader()
+                    .AllowAnyMethod();
+            });
+        });
+    }
+}

src/FormBuilder.API/Startup.cs

@@ -8,6 +8,7 @@ public static class Startup
     public static WebApplication ConfigureServices(this WebApplicationBuilder builder)
     {
         builder.ConfigureLogger();
+        builder.ConfigureCors();
         builder.ConfigureControllers();
         builder.ConfigureSwagger();
         builder.ConfigureDatabase();
@@ -24,6 +25,7 @@ public static WebApplication ConfigurePipeline(this WebApplication app)
             app.UseSwaggerUI();
         }
 
+        app.UseCors("AnyCors");
         app.UseHttpsRedirection();
         app.MapControllers();
         return app;

src/FormBuilder.DesignerApp/Layout/MainLayout.razor

@@ -1,11 +1,37 @@
 @inherits LayoutComponentBase
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu/>
-    </div>
-
-    <main class="content">
-        @Body
-    </main>
+<PageTitle>Blazor Form Builder</PageTitle>
+<RadzenComponents />
+
+<RadzenLayout>
+    <RadzenHeader>
+        <RadzenRow class="h-100">
+            <RadzenColumn class="d-flex" Size="3">
+                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem">
+                    <RadzenSidebarToggle Click="@ToggleSidebar"/>
+                    <RadzenText class="ms-2" Text="Blazor Form Builder" TextStyle="TextStyle.H5" />
+                </RadzenStack>
+            </RadzenColumn>
+        </RadzenRow>
+    </RadzenHeader>
+
+    <RadzenSidebar @bind-Expanded="@_sidebarExpanded">
+        <RadzenPanelMenu>
+            <RadzenPanelMenuItem Text="Designer" Icon="home" Path="/designer"/>
+            <RadzenPanelMenuItem Text="Renderer" Icon="build" Path="/renderer"/>
+        </RadzenPanelMenu>
+    </RadzenSidebar>
+
+    <RadzenBody>
+        <div class="rz-p-5">
+            @Body
+        </div>
+    </RadzenBody>
+</RadzenLayout>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
 </div>
+

src/FormBuilder.DesignerApp/Layout/MainLayout.razor.cs

@@ -0,0 +1,13 @@
+using Microsoft.AspNetCore.Components;
+
+namespace FormBuilder.DesignerApp.Layout;
+
+public partial class MainLayout : LayoutComponentBase
+{
+    private bool _sidebarExpanded = true;
+
+    private void ToggleSidebar()
+    {
+        _sidebarExpanded = !_sidebarExpanded;
+    }
+}

src/FormBuilder/Components/FormBuilder.razor

@@ -3,8 +3,15 @@
 <RadzenRow class="vh-100">
     <RadzenColumn Size="12" SizeMD="9" SizeLG="10">
         <RadzenStack Orientation="Orientation.Vertical" Gap="1rem">
+            @if (_formId is not null)
+            {
+                <RadzenFormField Text="Form ID">
+                    <RadzenTextBox Value="@_formId" ReadOnly="true" />
+                </RadzenFormField>
+            }
+
             <RadzenFormField Text="Form Name">
-                <RadzenTextBox @bind-Value="_formDefinition.Name" />
+                <RadzenTextBox @bind-Value="_formDefinition.Name"/>
             </RadzenFormField>
 
             <DropZone TData="Action" Drop="(e) => HandleDropField(e)" Zone="FieldsZone">
@@ -58,7 +65,7 @@
         <RadzenStack Class="mt-3" Orientation="Orientation.Vertical">
             <RadzenText TextStyle="TextStyle.H5" TextAlign="TextAlign.Center">Properties</RadzenText>
             <PropertyEditor @bind-SelectedField="_selectedField" FieldTypeChanged="(e) => HandleFieldTypeChanged(e)"/>
-            <RadzenButton Text="Save Form"/>
+            <RadzenButton Text="Save Form" Click="SaveFormAsync" Disabled="_isLoading"/>
         </RadzenStack>
     </RadzenColumn>
 </RadzenRow>

src/FormBuilder/Components/FormBuilder.razor.cs

@@ -1,6 +1,9 @@
 using FormBuilder.Factories;
 using FormBuilder.Models;
+using FormBuilder.Services;
+using FormBuilder.Shared.Models;
 using Microsoft.AspNetCore.Components;
+using Radzen;
 
 namespace FormBuilder.Components;
 
@@ -11,6 +14,19 @@ public partial class FormBuilder : ComponentBase
 {
     private FormDefinition _formDefinition = new();
     private Field? _selectedField;
+    private string? _formId;
+    private bool _isLoading;
+
+    #region Injected Services
+
+    [Inject]
+    private FormService FormService { get; set; } = default!;
+
+    [Inject] 
+    private NotificationService NotificationService { get; set; } = default!;
+
+    #endregion
+
 
     private void AddField(FieldType fieldType)
     {
@@ -65,4 +81,32 @@ private void SwapFields(Field targetField, Field droppedField)
         var fields = _formDefinition.Fields;
         (fields[targetIndex], fields[droppedIndex]) = (fields[droppedIndex], fields[targetIndex]);
     }
+
+    private async Task SaveFormAsync()
+    {
+        _isLoading = true;
+        Result result;
+
+        if (string.IsNullOrEmpty(_formId))
+        {
+            var createFormResult = await FormService.CreateFormAsync(_formDefinition);
+            result = createFormResult;
+            _formId = createFormResult is { Success: true, Data: not null } ? createFormResult.Data.Id : null;
+        }
+        else
+        {
+            result = await FormService.UpdateFormAsync(_formId, _formDefinition);
+        }
+
+        if (result.Success)
+        {
+            NotificationService.Notify(NotificationSeverity.Success, "Form saved successfully");
+        }
+        else
+        {
+            NotificationService.Notify(NotificationSeverity.Error, result.Error);
+        }
+
+        _isLoading = false;
+    }
 }

src/FormBuilder/Components/FormField.razor

@@ -7,15 +7,15 @@
         {
             case TextField textField:
                 <RadzenTextBox
-                    Name="@textField.Id"
+                    Name="@textField.Name"
                     @bind-Value="textField.Value"
                     Placeholder="@textField.Placeholder"
                     ReadOnly="Disabled">
                 </RadzenTextBox>
                 break;
             case SelectField selectField:
                 <RadzenDropDown
-                    Name="@Field.Id"
+                    Name="@Field.Name"
                     @bind-Value="selectField.Value"
                     Data="@selectField.Options"
                     Placeholder="@selectField.Placeholder"
@@ -26,23 +26,23 @@
                 break;
             case NumericIntField numericIntField:
                 <RadzenNumeric
-                    Name="@numericIntField.Id"
+                    Name="@numericIntField.Name"
                     @bind-Value="numericIntField.Value"
                     Placeholder="@numericIntField.Placeholder"
                     ReadOnly="Disabled">
                 </RadzenNumeric>
                 break;
             case NumericDoubleField numericDoubleField:
                 <RadzenNumeric
-                    Name="@numericDoubleField.Id"
+                    Name="@numericDoubleField.Name"
                     @bind-Value="numericDoubleField.Value"
                     Placeholder="@numericDoubleField.Placeholder"
                     ReadOnly="Disabled">
                 </RadzenNumeric>
                 break;
             case DateField dateField:
                 <RadzenDatePicker
-                    Name="@dateField.Id"
+                    Name="@dateField.Name"
                     @bind-Value="dateField.Value"
                     Placeholder="@dateField.Placeholder"
                     ReadOnly="Disabled"/>

src/FormBuilder/Components/PropertyEditor.razor

@@ -5,7 +5,7 @@
     <RadzenTemplateForm Data="@SelectedField">
         <RadzenStack Orientation="Orientation.Vertical">
             <RadzenFormField Text="ID">
-                <RadzenTextBox @bind-Value="SelectedField.Id" Disabled="true"/>
+                <RadzenTextBox @bind-Value="SelectedField.Name" Disabled="true"/>
             </RadzenFormField>
             <RadzenFormField Text="Input Type">
                 <RadzenDropDown