Merge pull request #3169 from leigh-pointer/InputList

Add InputList control to select values from a dictionary of string

Oqtane.Client/Modules/Admin/Pages/Add.razor

@@ -111,8 +111,11 @@
                     </div>
                     <div class="row mb-1 align-items-center">
                         <Label Class="col-sm-3" For="icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
-                        <div class="col-sm-9">
+                        <div class="col-sm-8">
-                            <input id="icon" class="form-control" @bind="@_icon" />
+                            <InputList Value="@_icon" ValueChanged="IconChanged" InputValues="@IconList" />
+                        </div>
+                        <div class="col-sm-1">
+                            <i class="@_icon"></i>
                         </div>
                     </div>
                     <div class="row mb-1 align-items-center">
@@ -215,7 +218,7 @@
     private string _url;
     private string _ispersonalizable = "False";
     private string _title;
-    private string _icon = string.Empty;
+    private string _icon { get; set; } = string.Empty;
     private string _themetype = string.Empty;
     private string _containertype = string.Empty;
     private string _headcontent;
@@ -227,6 +230,7 @@
     private RenderFragment ThemeSettingsComponent { get; set; }
     private bool _refresh = false;
     protected Page _parent = null;
+    protected Dictionary<string, string> IconList = new();
 
     protected override async Task OnInitializedAsync()
     {
@@ -242,6 +246,20 @@
                 }
             }
 
+            Type iconsType = typeof(Icons);
+            System.Reflection.FieldInfo[] fields = iconsType.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static | System.Reflection.BindingFlags.GetField);
+
+            foreach (System.Reflection.FieldInfo field in fields)
+            {
+                if (field.FieldType == typeof(string))
+                {
+                    string fieldName = field.Name;
+                    string fieldValue = (string)field.GetValue(null);
+
+                    IconList.Add(fieldName, fieldValue);
+                }
+            }
+
             // if admin or user has edit access to parent page
             if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Admin) || (_parent != null && UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, _parent.PermissionList)))
             {
@@ -482,4 +500,8 @@
             NavigationManager.NavigateTo(NavigateUrl());
         }
     }
+    private void IconChanged(string NewIcon)
+    {
+        _icon = NewIcon;
+    }
 }

Oqtane.Client/Modules/Admin/Pages/Edit.razor

@@ -123,8 +123,11 @@
                         </div>
                         <div class="row mb-1 align-items-center">
                             <Label Class="col-sm-3" For="icon" HelpText="Optionally provide an icon class name for this page which will be displayed in the site navigation" ResourceKey="Icon">Icon: </Label>
-                            <div class="col-sm-9">
+                            <div class="col-sm-8">
-                                <input id="icon" class="form-control" @bind="@_icon" maxlength="50" />
+                                <InputList Value="@_icon" ValueChanged="IconChanged" InputValues="@IconList" />
+                            </div>
+                            <div class="col-sm-1">
+                                <i class="@_icon"></i>
                             </div>
                         </div>
                         <div class="row mb-1 align-items-center">
@@ -292,7 +295,7 @@
     private string _url;
     private string _ispersonalizable;
     private string _title;
-    private string _icon;
+    private string _icon { get; set; }
     private string _themetype;
     private string _containertype = "-";
     private Type _themeSettingsType;
@@ -312,7 +315,7 @@
     private bool _refresh = false;
     protected Page _page = null;
     protected Page _parent = null;
-
+    protected Dictionary<string, string> IconList = new();
     protected override async Task OnInitializedAsync()
     {
         try
@@ -352,6 +355,20 @@
                 _icon = _page.Icon;
                 _ispersonalizable = _page.IsPersonalizable.ToString();
 
+                Type iconsType = typeof(Icons);
+                System.Reflection.FieldInfo[] fields = iconsType.GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static | System.Reflection.BindingFlags.GetField);
+
+                foreach (System.Reflection.FieldInfo field in fields)
+                {
+                    if (field.FieldType == typeof(string))
+                    {
+                        string fieldName = field.Name;
+                        string fieldValue = (string)field.GetValue(null);
+
+                        IconList.Add(fieldName, fieldValue);
+                    }
+                }
+
                 // appearance
                 _title = _page.Title;
                 _themetype = _page.ThemeType;
@@ -660,4 +677,9 @@
         }
     }
 
+    private void IconChanged(string NewIcon)
+    {
+        _icon = NewIcon;
+    }
+
 }

Oqtane.Client/Modules/Controls/InputList.razor

@@ -0,0 +1,31 @@
+@namespace Oqtane.Modules.Controls
+@using System.Linq.Expressions;
+@inherits ModuleControlBase
+<input type="text" value="@Value" list="Dictionarylist" class="form-select" @onchange="(e => OnChange(e))" />
+<datalist id="Dictionarylist" value="@Value">
+    @foreach(var iv in InputValues)
+    {
+        <option value="@iv.Value">@iv.Key</option>
+    }
+</datalist>
+
+@code {
+    [Parameter]
+    public string Value { get; set; }
+    [EditorRequired]
+    [Parameter]    
+    public Dictionary<string, string> InputValues { get; set; }
+    [EditorRequired]
+    [Parameter]
+    public EventCallback<string> ValueChanged { get; set; }
+
+    protected void OnChange(ChangeEventArgs e)
+    {
+        if (string.IsNullOrWhiteSpace(e.Value.ToString())) { return; }
+        Value = e.Value.ToString();
+        if (ValueChanged.HasDelegate)
+        {
+            ValueChanged.InvokeAsync(Value);
+        }
+    }
+}