added remove validator button

suxrobGM · Aug 2, 2024 · a541afc · a541afc
1 parent 41f3939
commit a541afc
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 13 deletions.
diff --git a/src/FormBuilder/Components/FieldValidatorsEditor.razor b/src/FormBuilder/Components/FieldValidatorsEditor.razor
@@ -37,22 +37,58 @@
             {
                 case RequiredValidator requiredValidator:
                     <RadzenAccordionItem Text="Required Validator" Icon="check">
-                        <ValidatorPropertyEditor Validator="@requiredValidator"/>
+                        <ValidatorPropertyEditor Validator="@requiredValidator">
+                            <Header>
+                                <RadzenButton
+                                    Text="Remove"
+                                    ButtonStyle="ButtonStyle.Danger"
+                                    Size="ButtonSize.Small"
+                                    Click="() => RemoveValidator(validator)">
+                                </RadzenButton>
+                            </Header>
+                        </ValidatorPropertyEditor>
                     </RadzenAccordionItem>
                     break;
                 case EmailValidator emailValidator:
                     <RadzenAccordionItem Text="Email Validator" Icon="mail">
-                        <ValidatorPropertyEditor Validator="@emailValidator"/>
+                        <ValidatorPropertyEditor Validator="@emailValidator">
+                            <Header>
+                                <RadzenButton
+                                    Text="Remove"
+                                    ButtonStyle="ButtonStyle.Danger"
+                                    Size="ButtonSize.Small"
+                                    Click="() => RemoveValidator(validator)">
+                                </RadzenButton>
+                            </Header>
+                        </ValidatorPropertyEditor>
                     </RadzenAccordionItem>
                     break;
                 case LengthValidator lengthValidator:
                     <RadzenAccordionItem Text="Length Validator" Icon="abc">
-                        <ValidatorPropertyEditor Validator="@lengthValidator"/>
+                        <ValidatorPropertyEditor Validator="@lengthValidator">
+                            <Header>
+                                <RadzenButton
+                                    Text="Remove"
+                                    ButtonStyle="ButtonStyle.Danger"
+                                    Size="ButtonSize.Small"
+                                    Click="() => RemoveValidator(validator)">
+                                </RadzenButton>
+                            </Header>
+                        </ValidatorPropertyEditor>
                     </RadzenAccordionItem>
                     break;
                 case NumericRangeValidator numericRangeValidator:
                     <RadzenAccordionItem Text="Numeric Range Validator" Icon="filter_1">
-                        <ValidatorPropertyEditor Validator="@numericRangeValidator"/>
+                        <ValidatorPropertyEditor Validator="@numericRangeValidator">
+                            <Header>
+                                <RadzenButton
+                                    Text="Remove"
+                                    ButtonStyle="ButtonStyle.Danger"
+                                    Size="ButtonSize.Small"
+                                    Click="() => RemoveValidator(validator)">
+                                </RadzenButton>
+                            </Header>
+                        </ValidatorPropertyEditor>
                     </RadzenAccordionItem>
                     break;
             }

diff --git a/src/FormBuilder/Components/FieldValidatorsEditor.razor.cs b/src/FormBuilder/Components/FieldValidatorsEditor.razor.cs
@@ -15,7 +15,22 @@ public partial class FieldValidatorsEditor : ComponentBase
 
     private void AddValidator(ValidatorType validatorType)
     {
+        if (HasValidator(validatorType))
+        {
+            return;
+        }
+
         var validator = ValidatorFactory.Create(validatorType);
         Field.Validators.Add(validator);
     }
+
+    private void RemoveValidator(Validator validator)
+    {
+        Field.Validators.Remove(validator);
+    }
+
+    private bool HasValidator(ValidatorType validatorType)
+    {
+        return Field.Validators.Any(v => v.Type == validatorType);
+    }
 }
diff --git a/src/FormBuilder/Components/FormField.razor b/src/FormBuilder/Components/FormField.razor
@@ -15,13 +15,25 @@
                 </RadzenTextBox>
                 break;
             case SelectField selectField:
-                <RadzenDropDown
-                    Name="@Field.Name"
-                    @bind-Value="selectField.Value"
-                    Data="@selectField.Options"
-                    Placeholder="@selectField.Placeholder"
-                    ReadOnly="Disabled">
-                </RadzenDropDown>
+                if (Disabled)
+                {
+                    <RadzenTextBox
+                        Name="@Field.Name"
+                        @bind-Value="selectField.Value"
+                        Placeholder="@selectField.Placeholder"
+                        ReadOnly="Disabled">
+                    </RadzenTextBox>
+                }
+                else
+                {
+                    <RadzenDropDown
+                        Name="@Field.Name"
+                        @bind-Value="selectField.Value"
+                        Data="@selectField.Options"
+                        Placeholder="@selectField.Placeholder">
+                    </RadzenDropDown>
+                }
+
                 break;
             case NumericField<int> numericIntField:
                 <RadzenNumeric

diff --git a/src/FormBuilder/Components/FormField.razor.cs b/src/FormBuilder/Components/FormField.razor.cs
@@ -1,5 +1,4 @@
-using System.Globalization;
-using FormBuilder.Models;
+using FormBuilder.Models;
 using Microsoft.AspNetCore.Components;
 
 namespace FormBuilder.Components;

diff --git a/src/FormBuilder/Components/ValidatorPropertyEditor.razor b/src/FormBuilder/Components/ValidatorPropertyEditor.razor
@@ -2,6 +2,7 @@
 @typeparam TValue where TValue : FormBuilder.Models.Validator
 
 <RadzenStack Orientation="Orientation.Vertical">
+    @Header
     <RadzenFormField Text="Error Text">
         <RadzenTextBox @bind-Value="@Validator.Text"/>
     </RadzenFormField>

diff --git a/src/FormBuilder/Components/ValidatorPropertyEditor.razor.cs b/src/FormBuilder/Components/ValidatorPropertyEditor.razor.cs
@@ -9,6 +9,9 @@ public partial class ValidatorPropertyEditor<TValue> : ComponentBase where TValu
 
     [Parameter, EditorRequired]
     public TValue Validator { get; set; } = default!;
+
+    [Parameter]
+    public RenderFragment? Header { get; set; }
 
     #endregion
 }
diff --git a/src/FormBuilder/Models/Fields/Field.cs b/src/FormBuilder/Models/Fields/Field.cs
@@ -104,13 +104,17 @@ private void HandleValidatorsCollectionChanged(object? sender, NotifyCollectionC
             {
                 validator.PropertyChanged += RaiseValidatorsChanged;
             }
+
+            OnPropertyChanged(nameof(Validators)); // Notify that the collection has changed
         }
         else if (args is { Action: NotifyCollectionChangedAction.Remove, OldItems: not null })
         {
             foreach (Validator validator in args.OldItems)
             {
                 validator.PropertyChanged -= RaiseValidatorsChanged;
             }
+
+            OnPropertyChanged(nameof(Validators));
         }
     }