From 60e28c8455785ebdcd14fec2b75f34a7b039aa5b Mon Sep 17 00:00:00 2001
From: Ahmet <ahmet.cotur@hotmail.com>
Date: Wed, 23 Sep 2020 17:59:17 +0300
Subject: [PATCH] Improved feature management blazor modal

Closes: https://github.com/abpframework/abp/issues/5540
---
 .../Components/FeatureManagementModal.razor   | 125 +++++++++---------
 .../FeatureManagementModal.razor.cs           |  21 ++-
 2 files changed, 83 insertions(+), 63 deletions(-)

diff --git a/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor b/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor
index f59eea6d57..ef5c8751ae 100644
--- a/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor
+++ b/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor
@@ -11,75 +11,80 @@
             <CloseButton Clicked="CloseModal" />
         </ModalHeader>
         <ModalBody MaxHeight="50">
-            @if (_groups == null)
-            {
-                <span>@L["NoFeatureFoundMessage"]</span>
-            }
-            else
-            {
-                <Tabs TabPosition="TabPosition.Left" Pills="true" SelectedTab="@GetNormalizedGroupName(_groups.First().Name)">
-                    <Items>
-                        @foreach (var group in _groups)
-                        {
-                            <Tab Name="@GetNormalizedGroupName(group.Name)">
-                                <span>@group.DisplayName</span>
-                            </Tab>
-                        }
-                    </Items>
-                    <Content>
-                        @foreach (var group in _groups)
-                        {
-                            <TabPanel Name="@GetNormalizedGroupName(group.Name)">
-                                <h4>@group.DisplayName</h4>
-                                
-                                @foreach (var feature in group.Features)
-                                {
-                                    var disabled = IsDisabled(feature.Provider.Name);
+            <EditForm id="UpdateFeaturesForm" OnValidSubmit="SaveAsync">
+                @if (_groups == null)
+                {
+                    <span>@L["NoFeatureFoundMessage"]</span>
+                }
+                else
+                {
+                    <Tabs TabPosition="TabPosition.Left" Pills="true" SelectedTab="@GetNormalizedGroupName(_groups.First().Name)">
+                        <Items>
+                            @foreach (var group in _groups)
+                            {
+                                <Tab Name="@GetNormalizedGroupName(group.Name)">
+                                    <span>@group.DisplayName</span>
+                                </Tab>
+                            }
+                        </Items>
+                        <Content>
+                            @foreach (var group in _groups)
+                            {
+                                <TabPanel Name="@GetNormalizedGroupName(group.Name)">
+                                    <h4>@group.DisplayName</h4>
                                     
-                                    if (feature.ValueType is FreeTextStringValueType)
+                                    @foreach (var feature in group.Features)
                                     {
-                                        <Field>
-                                            <FieldLabel>@feature.DisplayName</FieldLabel>
-                                            <TextEdit Disabled="@disabled" @bind-text="@feature.Value" />
-                                            @if (feature.Description != null)
-                                            {
-                                                <span>@feature.Description</span>
-                                            }
-                                        </Field>
-                                    }
-
-                                    if (feature.ValueType is SelectionStringValueType)
-                                    {
-                                        var items = ((SelectionStringValueType) feature.ValueType).ItemSource.Items;
+                                        var disabled = IsDisabled(feature.Provider.Name);
                                         
-                                        <Field>
-                                            <FieldLabel>@feature.DisplayName</FieldLabel>
-                                            <Select TValue="string" SelectedValue="feature.Value">
-                                                @foreach (var item in items)
+                                        if (feature.ValueType is FreeTextStringValueType)
+                                        {
+                                            <Field>
+                                                <FieldLabel>@feature.DisplayName</FieldLabel>
+                                                <TextEdit 
+                                                    Disabled="@disabled" 
+                                                    Text="@feature.Value"
+                                                    TextChanged="@(async(v) => await OnFeatureValueChangedAsync(v, feature))" />
+                                                @if (feature.Description != null)
                                                 {
-                                                    <SelectItem Value="@item.Value">@item.DisplayText</SelectItem>
+                                                    <span>@feature.Description</span>
                                                 }
-                                            </Select>
-                                        </Field>
+                                            </Field>
+                                        }
+    
+                                        if (feature.ValueType is SelectionStringValueType)
+                                        {
+                                            var items = ((SelectionStringValueType) feature.ValueType).ItemSource.Items;
+                                            
+                                            <Field>
+                                                <FieldLabel>@feature.DisplayName</FieldLabel>
+                                                <Select TValue="string" SelectedValue="feature.Value">
+                                                    @foreach (var item in items)
+                                                    {
+                                                        <SelectItem Value="@item.Value">@item.DisplayText</SelectItem>
+                                                    }
+                                                </Select>
+                                            </Field>
+                                        }
+    
+                                        if (feature.ValueType is ToggleStringValueType)
+                                        {
+                                            <Field>
+                                                <Check TValue="bool" @bind-checked="@_toggleValues[feature.Name]">@feature.DisplayName</Check>
+                                            </Field>
+                                        }
                                     }
-
-                                    if (feature.ValueType is ToggleStringValueType)
-                                    {
-                                        <Field>
-                                            <Check TValue="bool" @bind-checked="@ToggleValues[feature.Name]">@feature.DisplayName</Check>
-                                        </Field>
-                                    }
-                                }
-                                
-                            </TabPanel>
-                        }
-                    </Content>
-                </Tabs>
-            }
+                                    
+                                </TabPanel>
+                            }
+                        </Content>
+                    </Tabs>
+                }
+            </EditForm>
         </ModalBody>
         <ModalFooter>
             <Button Color="Color.Secondary" Clicked="CloseModal">@L["Cancel"]</Button>
-            <Button Color="Color.Primary" Clicked="SaveAsync">@L["Save"]</Button>
+            <Button form="UpdateFeaturesForm" Color="Color.Primary" Clicked="SaveAsync">@L["Save"]</Button>
         </ModalFooter>
     </ModalContent>
 </Modal>
\ No newline at end of file
diff --git a/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor.cs b/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor.cs
index 40aba610eb..f1805a620f 100644
--- a/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor.cs
+++ b/modules/feature-management/src/Volo.Abp.FeatureManagement.Blazor/Components/FeatureManagementModal.razor.cs
@@ -3,6 +3,7 @@ using System.Linq;
 using System.Threading.Tasks;
 using Blazorise;
 using Microsoft.AspNetCore.Components;
+using Volo.Abp.AspNetCore.Components.WebAssembly;
 using Volo.Abp.Features;
 using Volo.Abp.Validation.StringValues;
 
@@ -11,6 +12,8 @@ namespace Volo.Abp.FeatureManagement.Blazor.Components
     public partial class FeatureManagementModal
     {
         [Inject] private IFeatureAppService FeatureAppService { get; set; }
+        
+        [Inject] protected IUiMessageService UiMessageService { get; set; }
 
         private Modal _modal;
         
@@ -19,7 +22,7 @@ namespace Volo.Abp.FeatureManagement.Blazor.Components
         
         private List<FeatureGroupDto> _groups { get; set; }
 
-        private Dictionary<string, bool> ToggleValues;
+        private Dictionary<string, bool> _toggleValues;
         
         public async Task OpenAsync(string providerName, string providerKey)
         {
@@ -28,7 +31,7 @@ namespace Volo.Abp.FeatureManagement.Blazor.Components
 
             _groups = (await FeatureAppService.GetAsync(_providerName, _providerKey)).Groups;
 
-            ToggleValues = _groups
+            _toggleValues = _groups
                 .SelectMany(x => x.Features)
                 .Where(x => x.ValueType is ToggleStringValueType)
                 .ToDictionary(x => x.Name, x => bool.Parse(x.Value));
@@ -48,7 +51,7 @@ namespace Volo.Abp.FeatureManagement.Blazor.Components
                 Features = _groups.SelectMany(g => g.Features).Select(f => new UpdateFeatureDto
                 {
                     Name = f.Name,
-                    Value = f.ValueType is ToggleStringValueType ? ToggleValues[f.Name].ToString() : f.Value
+                    Value = f.ValueType is ToggleStringValueType ? _toggleValues[f.Name].ToString() : f.Value
                 }).ToList()
             };
             
@@ -66,5 +69,17 @@ namespace Volo.Abp.FeatureManagement.Blazor.Components
         {
             return providerName != _providerName && providerName != DefaultValueFeatureValueProvider.ProviderName;
         }
+
+        private async Task OnFeatureValueChangedAsync(string value, FeatureDto feature)
+        {
+            if (feature.ValueType.Validator.IsValid(value))
+            {
+                feature.Value = value;
+            }
+            else
+            {
+                await UiMessageService.WarnAsync(L["Volo.Abp.FeatureManagement:InvalidFeatureValue", feature.DisplayName]);
+            }
+        }
     }
 }
\ No newline at end of file