Allow InputList component to be localizable and support multiple instances on a page. Implement icon localization in Page Add/Edit using IconResources.resx

Oqtane.Client/IconResources.cs

@@ -0,0 +1,14 @@
+namespace Oqtane
+{
+    /// <summary>
+    /// Dummy class used to collect shared resource strings for this application
+    /// </summary>
+    /// <remarks>
+    /// This class is mostly used with IStringLocalizer and IHtmlLocalizer interfaces.
+    /// The class must reside at the project root.
+    /// </remarks>
+    public class IconResources
+    {
+
+    }
+}

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

@@ -113,7 +113,7 @@
                     <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-8">
-                            <InputList Value="@_icon" ValueChanged="IconChanged" InputValues="@_icons" />
+                            <InputList Value="@_icon" ValueChanged="IconChanged" DataList="@_icons" ResourceKey="Icon" ResourceType="@_iconresources" />
                         </div>
                         <div class="col-sm-1">
                             <i class="@_icon"></i>
@@ -232,6 +232,7 @@
     private bool _refresh = false;
     protected Page _parent = null;
     protected Dictionary<string, string> _icons;
+    private string _iconresources = "";
 
     protected override async Task OnInitializedAsync()
     {
@@ -247,6 +248,7 @@
                 }
             }
             _icons = await SystemService.GetIconsAsync();
+            _iconresources = typeof(IconResources).FullName;
 
             // 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)))

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

@@ -125,7 +125,7 @@
                         <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-8">
-                                <InputList Value="@_icon" ValueChanged="IconChanged" InputValues="@_icons" />
+                                <InputList Value="@_icon" ValueChanged="IconChanged" DataList="@_icons" ResourceKey="Icon" ResourceType="@_iconresources" />
                             </div>
                             <div class="col-sm-1">
                                 <i class="@_icon"></i>
@@ -317,6 +317,7 @@
     protected Page _page = null;
     protected Page _parent = null;
     protected Dictionary<string, string> _icons;
+    private string _iconresources = "";
 
     protected override async Task OnInitializedAsync()
     {
@@ -326,6 +327,7 @@
             _pageId = Int32.Parse(PageState.QueryString["id"]);
             _page = await PageService.GetPageAsync(_pageId);
             _icons = await SystemService.GetIconsAsync();
+            _iconresources = Utilities.GetFullTypeName(typeof(IconResources).AssemblyQualifiedName);
 
             if (_page != null && UserSecurity.IsAuthorized(PageState.User, PermissionNames.Edit, _page.PermissionList))
             {

Oqtane.Client/Modules/Controls/InputList.razor

@@ -1,24 +1,35 @@
 @namespace Oqtane.Modules.Controls
 @using System.Linq.Expressions;
-@inherits ModuleControlBase
+@inherits LocalizableComponent
-<input type="text" value="@Value" list="Dictionarylist" class="form-select" @onchange="(e => OnChange(e))" />
+
-<datalist id="Dictionarylist" value="@Value">
+<input type="text" value="@Value" list="@_id" class="form-select" @onchange="(e => OnChange(e))" />
-    @foreach(var iv in InputValues)
+<datalist id="@_id" value="@Value">
+    @foreach(var kvp in DataList)
     {
-        <option value="@iv.Value">@iv.Key</option>
+        <option value="@kvp.Value">@Localize(kvp.Key, kvp.Key)</option>
     }
 </datalist>
 
 @code {
+    private string _id;
+
     [Parameter]
     public string Value { get; set; }
+
     [EditorRequired]
     [Parameter]    
-    public Dictionary<string, string> InputValues { get; set; }
+    public Dictionary<string, string> DataList { get; set; }
+
     [EditorRequired]
     [Parameter]
     public EventCallback<string> ValueChanged { get; set; }
 
+    protected override void OnInitialized()
+    {
+        // create unique id for component
+        _id = "DataList_" + Guid.NewGuid().ToString("N");
+    }
+
     protected void OnChange(ChangeEventArgs e)
     {
         if (string.IsNullOrWhiteSpace(e.Value.ToString())) { return; }

Oqtane.Client/Resources/IconResources.resx

@@ -0,0 +1,123 @@
+<?xml version="1.0" encoding="utf-8"?>
+<root>
+  <!-- 
+    Microsoft ResX Schema 
+    
+    Version 2.0
+    
+    The primary goals of this format is to allow a simple XML format 
+    that is mostly human readable. The generation and parsing of the 
+    various data types are done through the TypeConverter classes 
+    associated with the data types.
+    
+    Example:
+    
+    ... ado.net/XML headers & schema ...
+    <resheader name="resmimetype">text/microsoft-resx</resheader>
+    <resheader name="version">2.0</resheader>
+    <resheader name="reader">System.Resources.ResXResourceReader, System.Windows.Forms, ...</resheader>
+    <resheader name="writer">System.Resources.ResXResourceWriter, System.Windows.Forms, ...</resheader>
+    <data name="Name1"><value>this is my long string</value><comment>this is a comment</comment></data>
+    <data name="Color1" type="System.Drawing.Color, System.Drawing">Blue</data>
+    <data name="Bitmap1" mimetype="application/x-microsoft.net.object.binary.base64">
+        <value>[base64 mime encoded serialized .NET Framework object]</value>
+    </data>
+    <data name="Icon1" type="System.Drawing.Icon, System.Drawing" mimetype="application/x-microsoft.net.object.bytearray.base64">
+        <value>[base64 mime encoded string representing a byte array form of the .NET Framework object]</value>
+        <comment>This is a comment</comment>
+    </data>
+                
+    There are any number of "resheader" rows that contain simple 
+    name/value pairs.
+    
+    Each data row contains a name, and value. The row also contains a 
+    type or mimetype. Type corresponds to a .NET class that support 
+    text/value conversion through the TypeConverter architecture. 
+    Classes that don't support this are serialized and stored with the 
+    mimetype set.
+    
+    The mimetype is used for serialized objects, and tells the 
+    ResXResourceReader how to depersist the object. This is currently not 
+    extensible. For a given mimetype the value must be set accordingly:
+    
+    Note - application/x-microsoft.net.object.binary.base64 is the format 
+    that the ResXResourceWriter will generate, however the reader can 
+    read any of the formats listed below.
+    
+    mimetype: application/x-microsoft.net.object.binary.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Binary.BinaryFormatter
+            : and then encoded with base64 encoding.
+    
+    mimetype: application/x-microsoft.net.object.soap.base64
+    value   : The object must be serialized with 
+            : System.Runtime.Serialization.Formatters.Soap.SoapFormatter
+            : and then encoded with base64 encoding.
+
+    mimetype: application/x-microsoft.net.object.bytearray.base64
+    value   : The object must be serialized into a byte array 
+            : using a System.ComponentModel.TypeConverter
+            : and then encoded with base64 encoding.
+    -->
+  <xsd:schema id="root" xmlns="" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:msdata="urn:schemas-microsoft-com:xml-msdata">
+    <xsd:import namespace="http://www.w3.org/XML/1998/namespace" />
+    <xsd:element name="root" msdata:IsDataSet="true">
+      <xsd:complexType>
+        <xsd:choice maxOccurs="unbounded">
+          <xsd:element name="metadata">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" />
+              </xsd:sequence>
+              <xsd:attribute name="name" use="required" type="xsd:string" />
+              <xsd:attribute name="type" type="xsd:string" />
+              <xsd:attribute name="mimetype" type="xsd:string" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="assembly">
+            <xsd:complexType>
+              <xsd:attribute name="alias" type="xsd:string" />
+              <xsd:attribute name="name" type="xsd:string" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="data">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+                <xsd:element name="comment" type="xsd:string" minOccurs="0" msdata:Ordinal="2" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" msdata:Ordinal="1" />
+              <xsd:attribute name="type" type="xsd:string" msdata:Ordinal="3" />
+              <xsd:attribute name="mimetype" type="xsd:string" msdata:Ordinal="4" />
+              <xsd:attribute ref="xml:space" />
+            </xsd:complexType>
+          </xsd:element>
+          <xsd:element name="resheader">
+            <xsd:complexType>
+              <xsd:sequence>
+                <xsd:element name="value" type="xsd:string" minOccurs="0" msdata:Ordinal="1" />
+              </xsd:sequence>
+              <xsd:attribute name="name" type="xsd:string" use="required" />
+            </xsd:complexType>
+          </xsd:element>
+        </xsd:choice>
+      </xsd:complexType>
+    </xsd:element>
+  </xsd:schema>
+  <resheader name="resmimetype">
+    <value>text/microsoft-resx</value>
+  </resheader>
+  <resheader name="version">
+    <value>2.0</value>
+  </resheader>
+  <resheader name="reader">
+    <value>System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <resheader name="writer">
+    <value>System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089</value>
+  </resheader>
+  <data name="Icon.Home" xml:space="preserve">
+    <value>Home</value>
+  </data>
+</root>