updated docs

BlazorFormBuilder.sln

@@ -12,6 +12,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Docs", "Docs", "{110FAC20-0
 		docs\integration-guide.md = docs\integration-guide.md
 		docs\form-renderer.md = docs\form-renderer.md
 		docs\api-reference.md = docs\api-reference.md
+		docs\form-editor.md = docs\form-editor.md
 	EndProjectSection
 EndProject
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Scripts", "Scripts", "{1CF934BD-6E84-458A-8BA9-B35C6CB684D5}"

README.md

@@ -76,4 +76,5 @@ Once the projects are running, you can access them via the following URLs:
 ## Documentation
 - **[API Reference](docs/api-reference.md)**: Learn how to use the Form Builder API to create, update, delete, and retrieve forms and LOV data.
 - **[Integration Guide](docs/integration-guide.md)**: Integrate the Blazor Form Builder with your existing Blazor application.
+- **[Form Editor Component Reference](docs/form-editor.md)**: Design forms in your Blazor application using the `FormEditor` component.
 - **[Form Renderer Component Reference](docs/form-renderer.md)**: Render forms in your Blazor application using the `FormRenderer` component.

docs/api-reference.md

@@ -55,6 +55,11 @@ Gets a paged list of forms.
 |------|-------------|
 | 200  | Success     |
 
+Sample request,
+```
+GET /api/forms?OrderBy=formName&Page=1&PageSize=10
+```
+
 Response body example,
 ```json
 {
@@ -65,7 +70,12 @@ Response body example,
     {
       "id": 1,
       "formName": "Form 1",
-      "formDesign": "{JSON Data}",
+      "formDesign": "{JSON Data}"
+    },
+    {
+      "id": 2,
+      "formName": "Form 2",
+      "formDesign": "{JSON Data}"
     }
   ]
 }
@@ -88,7 +98,7 @@ Success response body example,
 {
   "success": true,
   "data": {
-    "id": 1,
+    "id": 1, // Returned form ID
     "formName": "Form 1",
     "formDesign": "{JSON Data}"
   }
@@ -132,6 +142,11 @@ Updates a form by its id.
 |------|------------|------------------|----------|--------|
 | id   | path       | Existing form ID | Yes      | string |
 
+Sample request,
+```
+PUT /api/forms/1
+```
+
 Example request body,
 ```json
 {
@@ -185,6 +200,32 @@ Gets a paged list of List IDs.
 |------|-------------|
 | 200  | Success     |
 
+Sample request,
+```
+GET /api/lov?Page=1&PageSize=10
+```
+
+Response body example,
+```json
+{
+  "success": true,
+  "pageSize": 10,
+  "pagesCount": 1,
+  "data": [
+    {
+      "id": 1,
+      "listId": 1,
+      "listValue": "Value 1"
+    },
+    {
+      "id": 2,
+      "listId": 2,
+      "listValue": "Value 2"
+    }
+  ]
+}
+```
+
 ### POST `/api/lov`
 ##### Summary:
 
@@ -203,6 +244,10 @@ Request body example,
     {
       "listId": 1,
       "listValue": "Value 1"
+    },
+    {
+      "listId": 2,
+      "listValue": "Value 2"
     }
   ]
 }
@@ -225,6 +270,11 @@ Gets list of values filtered by ListId
 |------|-------------|
 | 200  | Success     |
 
+Sample request,
+```
+GET /api/lov/1
+```
+
 Success response body example,
 ```json
 {
@@ -234,12 +284,22 @@ Success response body example,
       "id": 1,
       "listId": 1,
       "listValue": "Value 1"
+    },
+    {
+      "id": 2,
+      "listId": 1,
+      "listValue": "Value 2"
+    },
+    {
+      "id": 3,
+      "listId": 1,
+      "listValue": "Value 3"
     }
   ]
 }
 ```
 
-### POST `/api/lov/batch-delete`
+### POST `/api/lov/delete`
 ##### Summary:
 
 Batch delete list of values

docs/form-editor.md

@@ -0,0 +1,105 @@
+# Form Editor Component Reference
+
+The Form Editor component is a tool for designing dynamic forms. With this component, you can add, edit, and delete form elements interactively. 
+It provides a user-friendly interface for building forms, including support for drag-and-drop functionality. 
+In addition, the Form Editor allows you to configure form element properties and validators.
+
+## User Interface Overview
+
+The Form Editor component offers an intuitive UI for form design:
+
+![Form Editor](./img/form-editor-1.jpg?raw=true)
+
+It consists of the following main areas:
+- **Fields**: The area where you can add form elements by dragging and dropping or by clicking the `Add Field` button.
+- **Property Editor**: The UI on the right side of the editor where you can configure the properties of the selected form element.
+- **Generated JSON**: The JSON representation of the designed form.
+
+### Supported Form Elements
+
+You can add the following form elements to your forms:
+
+- **TextField**: Corresponds to the `RadzenTextBox` component.
+- **NumericIntField**: Corresponds to the `RadzenNumeric` component (integer values).
+- **NumericDecimalField**: Corresponds to the `RadzenNumeric` component (decimal values).
+- **DateField**: Corresponds to the `RadzenDatePicker` component.
+- **SelectField**: Corresponds to the `RadzenDropDown` component.
+
+These elements can be added by dragging and dropping them from the toolbox to the `Fields` area in the editor.
+Also, you can rearrange the form elements by dragging them within the `Fields` area.
+
+## Property Editor UI
+
+When a form element is selected in the `Fields` area, the `Property Editor` UI appears on the right side of the Form Editor. This UI allows you to configure the properties of the selected form element.
+
+![Property Editor](./img/form-editor-2.jpg?raw=true)
+
+### Common Properties for All Fields
+
+- **ID**: The unique identifier for the form element. This property is disabled for editing.
+- **Type**: The type of the form element.
+- **Label**: The label displayed alongside the form element.
+- **Placeholder**: The placeholder text within the form element.
+- **Hint**: The hint text displayed below the form element.
+- **Read Only**: A boolean value indicating whether the form element is read-only.
+- **Disabled**: A boolean value indicating whether the form element is disabled and cannot be interacted with.
+
+### Additional Properties by Field Type
+
+#### Numeric Fields (NumericIntField, NumericDecimalField)
+- **Step**: The increment/decrement step value for the numeric field.
+- **Show Up Down**: A boolean value indicating whether the up and down buttons are displayed for the numeric field.
+- **Format**: The format string for the numeric field (e.g., `C` for currency). For more details on format strings, see the [Microsoft documentation](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings).
+
+#### Date Field
+- **Date Format**: The format string for the date field (e.g., `dd/MM/yyyy`). For more details on date format strings, see the [Microsoft documentation](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings).
+
+#### Select Field
+- **List ID**: The ID of the list of values (LOV) to use for the select field. This ID is used to fetch the list of values from the API. The component uses virtualization to load data on demand.
+- **List Values**: The list of values to display in the select field when the `List ID` is specified.
+
+## Field Validators UI
+
+The `Property Editor` UI includes a `Field Validators` section, where you can add, edit, and delete form field validators.
+
+![Field Validators](./img/form-editor-3.jpg?raw=true)
+
+### Available Validators
+
+- **Required Validator**: Ensures the form field is not left empty. Applies to all form elements.
+    - **Show Required Hint**: Indicates whether the required hint is displayed below the form field when it is empty.
+- **Email Validator**: Validates that the form field contains a valid email address. Applies to the `TextField`.
+- **Length Validator**: Ensures the form field value meets the specified length requirements. Applies to the `TextField`.
+    - **Min Length**: The minimum allowed length of the form field value.
+    - **Max Length**: The maximum allowed length of the form field value.
+- **Range Validator**: Ensures the form field value is within a specified numeric range. Applies to `NumericIntField` and `NumericDecimalField`.
+    - **Min Value**: The minimum allowed value for the form field.
+    - **Max Value**: The maximum allowed value for the form field.
+
+### Common Properties for All Validators
+
+- **Error Text**: The error message displayed when validation fails.
+- **Show as Popup**: Indicates whether the error message is displayed as a popup instead of inline below the form field.
+
+## Form Services Customization
+
+The FormBuilder components (`FormEditor` and `FormRenderer`) rely on the following services:
+
+- **IFormSerializer**: Handles serialization and deserialization of form data.
+- **IFormApi**: Manages interactions with the Form REST API.
+- **ILovApi**: Manages interactions with the List of Values (LOV) REST API.
+
+These services come with default implementations that work out of the box. However, you can customize them by implementing your own services and registering them in the service collection.
+
+To register your custom services, use the `AddScoped` method in the `Program.cs` file:
+
+```csharp
+builder.Services.AddScoped<IFormSerializer, CustomFormSerializer>();
+builder.Services.AddScoped<IFormApi, CustomFormApi>();
+builder.Services.AddScoped<ILovApi, CustomLovApi>();
+```
+
+## Load Form Dialog
+To load an existing form into the Form Editor, click the `Load Form` button in the toolbar. 
+This action opens a dialog where you can enter either the form ID or the JSON data of the form to load.
+If you enter the form ID, the Form Editor fetches the form data from the API based on the ID.

docs/integration-guide.md

@@ -38,14 +38,14 @@ builder.Services.AddFormBuilder(options =>
 });
 ```
 
-## Step 3: Add `<InitComponents />`
+## Step 3: Add `<InitFormBuilder />`
 
-Add the `<InitComponents />` component to the layout file to initialize the Radzen components and load static files.
+Add the `<InitFormBuilder />` component to the layout file to initialize the Radzen components and load static files.
 
 For example, add the following code to the `MainLayout.razor` file:
 
 ```html
-<InitComponents />
+<InitFormBuilder />
 ```
 
 And don't forget to include namespace in the `_Imports.razor` file:

src/FormBuilder.API/Controllers/LovController.cs

@@ -56,7 +56,7 @@ public async Task<ActionResult<Result>> AddListOfValues(BatchAddLovCommand comma
     /// <param name="command">
     /// The command containing the list of ListIds to delete
     /// </param>
-    [HttpPost("batch-delete")]
+    [HttpPost("delete")]
     public async Task<ActionResult<Result>> BatchDeleteListOfValues(BatchDeleteLovCommand command)
     {
         var result = await _lovService.DeleteListOfValuesAsync(command);

src/FormBuilder.DesignerApp/Layout/MainLayout.razor

@@ -1,7 +1,7 @@
 @inherits LayoutComponentBase
 
 <PageTitle>Blazor Form Builder</PageTitle>
-<InitComponents />
+<InitFormBuilder />
 
 <RadzenLayout>
     <RadzenHeader>

src/FormBuilder/Components/InitComponents.razor.cs → src/FormBuilder/Components/InitFormBuilder.razor.cs

@@ -7,21 +7,22 @@ namespace FormBuilder.Components;
 /// <summary>
 /// Initializes the overlay Radzen components such as the dialog, notification, and tooltip and loads the static files.
 /// It also sets the theme for the Radzen components.
+/// Use this component only in the layout or root component. For example, in the `MainLayout.razor` file.
 /// </summary>
 [SupportedOSPlatform("browser")]
-public partial class InitComponents : ComponentBase
+public partial class InitFormBuilder : ComponentBase
 {
     [Inject]
     private FormBuilderOptions Options { get; set; } = default!;
 
     protected override async Task OnInitializedAsync()
     {
-        await JSHost.ImportAsync(nameof(InitComponents), 
-            "/_content/FormBuilder/Components/InitComponents.js");
+        await JSHost.ImportAsync(nameof(InitFormBuilder), 
+            "/_content/FormBuilder/Components/InitFormBuilder.js");
 
         LoadStaticFiles();
     }
 
-    [JSImport("loadStaticFiles", nameof(InitComponents))]
+    [JSImport("loadStaticFiles", nameof(InitFormBuilder))]
     internal static partial void LoadStaticFiles();
 }