Merge pull request #6135 from abpframework/extra-properties-autocomplete

Add Lookup Options To The Extra Properties

framework/src/Volo.Abp.AspNetCore.Mvc.Contracts/Volo/Abp/AspNetCore/Mvc/ApplicationConfigurations/ObjectExtending/ExtensionPropertyUiDto.cs

@@ -8,5 +8,6 @@ namespace Volo.Abp.AspNetCore.Mvc.ApplicationConfigurations.ObjectExtending
         public ExtensionPropertyUiTableDto OnTable { get; set; }
         public ExtensionPropertyUiFormDto OnCreateForm { get; set; }
         public ExtensionPropertyUiFormDto OnEditForm { get; set; }
+        public ExtensionPropertyUiLookupDto Lookup { get; set; }
     }
 }

framework/src/Volo.Abp.AspNetCore.Mvc.Contracts/Volo/Abp/AspNetCore/Mvc/ApplicationConfigurations/ObjectExtending/ExtensionPropertyUiLookupDto.cs

@@ -0,0 +1,13 @@
+using System;
+
+namespace Volo.Abp.AspNetCore.Mvc.ApplicationConfigurations.ObjectExtending
+{
+    [Serializable]
+    public class ExtensionPropertyUiLookupDto
+    {
+        public string Url { get; set; }
+        public string ResultListPropertyName { get; set; }
+        public string DisplayPropertyName { get; set; }
+        public string ValuePropertyName { get; set; }
+    }
+}

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelper.cs

@@ -21,6 +21,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
         [HtmlAttributeName("required-symbol")]
         public bool DisplayRequiredSymbol { get; set; } = true;
 
+        public string AutocompleteApiUrl { get; set; }
+
+        public string AutocompleteItemsPropertyName { get; set; }
+
+        public string AutocompleteDisplayPropertyName { get; set; }
+
+        public string AutocompleteValuePropertyName { get; set; }
+
         public AbpSelectTagHelper(AbpSelectTagHelperService tagHelperService)
             : base(tagHelperService)
         {

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap/TagHelpers/Form/AbpSelectTagHelperService.cs

@@ -78,20 +78,37 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form
             var selectTagHelper = new SelectTagHelper(_generator)
             {
                 For = TagHelper.AspFor,
-                Items = GetSelectItems(context, output),
                 ViewContext = TagHelper.ViewContext
             };
 
+            if (TagHelper.AutocompleteApiUrl.IsNullOrEmpty())
+            {
+                selectTagHelper.Items = GetSelectItems(context, output);
+            }
+
             var selectTagHelperOutput = await selectTagHelper.ProcessAndGetOutputAsync(GetInputAttributes(context, output), context, "select", TagMode.StartTagAndEndTag);
 
             selectTagHelperOutput.Attributes.AddClass("form-control");
             selectTagHelperOutput.Attributes.AddClass(GetSize(context, output));
             AddDisabledAttribute(selectTagHelperOutput);
             AddInfoTextId(selectTagHelperOutput);
+            AddAutocompleteAttributes(selectTagHelperOutput);
 
             return selectTagHelperOutput;
         }
 
+        protected virtual void AddAutocompleteAttributes(TagHelperOutput output)
+        {
+            if (!TagHelper.AutocompleteApiUrl.IsNullOrEmpty())
+            {
+                output.Attributes.AddClass("auto-complete-select");
+                output.Attributes.Add("data-autocomplete-api-url", TagHelper.AutocompleteApiUrl);
+                output.Attributes.Add("data-autocomplete-items-property", TagHelper.AutocompleteItemsPropertyName);
+                output.Attributes.Add("data-autocomplete-display-property", TagHelper.AutocompleteDisplayPropertyName);
+                output.Attributes.Add("data-autocomplete-value-property", TagHelper.AutocompleteValuePropertyName);
+            }
+        }
+
         protected virtual void AddDisabledAttribute(TagHelperOutput inputTagHelperOutput)
         {
             var disabledAttribute = TagHelper.AspFor.ModelExplorer.GetAttribute<DisabledInput>();

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/bootstrap/dom-event-handlers.js

@@ -71,6 +71,50 @@
         $timeagos.timeago();
     }
 
+    abp.dom.initializers.initializeAutocompleteSelects = function ($autocompleteSelects) {
+        if ($autocompleteSelects.length) {
+            $autocompleteSelects.each(function () {
+                var $select = $(this);
+                var url = $(this).data("autocompleteApiUrl");
+                var displayName = $(this).data("autocompleteDisplayProperty");
+                var displayValue = $(this).data("autocompleteValueProperty");
+                var itemsPropertyName = $(this).data("autocompleteItemsProperty");
+                $select.select2({
+                    ajax: {
+                        url: url,
+                        dataType: "json",
+                        data: function (params) {
+                            var query = {
+                                search: params.term
+                            };
+                            return query;
+                        },
+                        processResults: function (data) {
+                            var retVal = [];
+                            var items = [];
+                            if (itemsPropertyName == "") {
+                                items = data;
+                            }
+                            else {
+                                items = data[itemsPropertyName];
+                            }
+                            items.forEach(function (item, index) {
+                                retVal.push({
+                                    id: item[displayValue],
+                                    text: item[displayName]
+                                })
+                            });
+                            return {
+                                results: retVal
+                            };
+                        }
+                    },
+                    width: '100%'
+                });
+            });
+        }
+    }
+
     abp.libs = abp.libs = abp.libs || {};
     abp.libs.bootstrapDatepicker = {
         packageName: "bootstrap-datepicker",
@@ -91,7 +135,7 @@
                     locale: abp.localization.currentCulture.name
                 }).toLocaleString();
         },
-        getOptions: function($input) { //$input may needed if developer wants to override this method
+        getOptions: function ($input) { //$input may needed if developer wants to override this method
             return {
                 todayBtn: "linked",
                 autoclose: true,
@@ -121,6 +165,7 @@
         abp.dom.initializers.initializeTimeAgos(args.$el.findWithSelf('.timeago'));
         abp.dom.initializers.initializeForms(args.$el.findWithSelf('form'), true);
         abp.dom.initializers.initializeScript(args.$el);
+        abp.dom.initializers.initializeAutocompleteSelects(args.$el.findWithSelf('.auto-complete-select'));
     });
 
     abp.dom.onNodeRemoved(function (args) {
@@ -139,7 +184,9 @@
         abp.dom.initializers.initializeTimeAgos($('.timeago'));
         abp.dom.initializers.initializeDatepickers($(document));
         abp.dom.initializers.initializeForms($('form'));
+        abp.dom.initializers.initializeAutocompleteSelects($('.auto-complete-select'));
         $('[data-auto-focus="true"]').first().findWithSelf('input,select').focus();
+
     });
 
 })(jQuery);

framework/src/Volo.Abp.AspNetCore.Mvc/Volo/Abp/AspNetCore/Mvc/ApplicationConfigurations/ObjectExtending/CachedObjectExtensionsDtoService.cs

@@ -49,7 +49,7 @@ namespace Volo.Abp.AspNetCore.Mvc.ApplicationConfigurations.ObjectExtending
             }
 
             FillEnums(objectExtensionsDto);
-              
+
             return objectExtensionsDto;
         }
 
@@ -140,6 +140,13 @@ namespace Volo.Abp.AspNetCore.Mvc.ApplicationConfigurations.ObjectExtending
                     OnTable = new ExtensionPropertyUiTableDto
                     {
                         IsVisible = propertyConfig.UI.OnTable.IsVisible
+                    },
+                    Lookup = new ExtensionPropertyUiLookupDto
+                    {
+                        Url = propertyConfig.UI.Lookup.Url,
+                        ResultListPropertyName = propertyConfig.UI.Lookup.ResultListPropertyName,
+                        DisplayPropertyName = propertyConfig.UI.Lookup.DisplayPropertyName,
+                        ValuePropertyName = propertyConfig.UI.Lookup.ValuePropertyName
                     }
                 }
             };

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/ObjectExtending/IBasicObjectExtensionPropertyInfo.cs

@@ -2,6 +2,7 @@
 using System.Collections.Generic;
 using JetBrains.Annotations;
 using Volo.Abp.Localization;
+using Volo.Abp.ObjectExtending.Modularity;
 
 namespace Volo.Abp.ObjectExtending
 {

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/ObjectExtending/Modularity/ExtensionPropertyConfiguration.cs

@@ -28,7 +28,7 @@ namespace Volo.Abp.ObjectExtending.Modularity
 
         [NotNull]
         public Dictionary<string, object> Configuration { get; }
-        
+
         /// <summary>
         /// Single point to enable/disable this property for the clients (UI and API).
         /// If this is false, the configuration made in the <see cref="UI"/> and the <see cref="Api"/>
@@ -42,7 +42,7 @@ namespace Volo.Abp.ObjectExtending.Modularity
 
         [NotNull]
         public ExtensionPropertyUiConfiguration UI { get; }
-        
+
         [NotNull]
         public ExtensionPropertyApiConfiguration Api { get; }
 

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/ObjectExtending/Modularity/ExtensionPropertyLookupConfiguration.cs

@@ -0,0 +1,10 @@
+namespace Volo.Abp.ObjectExtending.Modularity
+{
+    public class ExtensionPropertyLookupConfiguration
+    {
+        public string Url { get; set; }
+        public string ResultListPropertyName { get; set; } = "items";
+        public string DisplayPropertyName { get; set; } = "text";
+        public string ValuePropertyName { get; set; } = "id";
+    }
+}

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/ObjectExtending/Modularity/ExtensionPropertyUiConfiguration.cs

@@ -13,11 +13,15 @@ namespace Volo.Abp.ObjectExtending.Modularity
         [NotNull]
         public ExtensionPropertyUiFormConfiguration OnEditForm { get; }
 
+        [NotNull]
+        public ExtensionPropertyLookupConfiguration Lookup { get; set; }
+
         public ExtensionPropertyUiConfiguration()
         {
             OnTable = new ExtensionPropertyUiTableConfiguration();
             OnCreateForm = new ExtensionPropertyUiFormConfiguration();
             OnEditForm = new ExtensionPropertyUiFormConfiguration();
+            Lookup = new ExtensionPropertyLookupConfiguration();
         }
     }
 }

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/ObjectExtending/Modularity/ModuleExtensionConfigurationHelper.cs

@@ -155,6 +155,7 @@ namespace Volo.Abp.ObjectExtending.Modularity
                         property.Validators.AddRange(propertyConfig.Validators);
                         property.DefaultValue = propertyConfig.DefaultValue;
                         property.DefaultValueFactory = propertyConfig.DefaultValueFactory;
+                        property.Lookup = propertyConfig.UI.Lookup;
                     }
                 );
         }

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/ObjectExtending/ObjectExtensionPropertyInfo.cs

@@ -3,6 +3,7 @@ using System.Collections.Generic;
 using System.ComponentModel.DataAnnotations;
 using JetBrains.Annotations;
 using Volo.Abp.Localization;
+using Volo.Abp.ObjectExtending.Modularity;
 using Volo.Abp.Reflection;
 
 namespace Volo.Abp.ObjectExtending
@@ -57,6 +58,9 @@ namespace Volo.Abp.ObjectExtending
         [CanBeNull]
         public Func<object> DefaultValueFactory { get; set; }
 
+        [NotNull]
+        public ExtensionPropertyLookupConfiguration Lookup { get; set; }
+
         public ObjectExtensionPropertyInfo(
             [NotNull] ObjectExtensionInfo objectExtension,
             [NotNull] Type type,
@@ -72,6 +76,7 @@ namespace Volo.Abp.ObjectExtending
 
             Attributes.AddRange(ExtensionPropertyHelper.GetDefaultAttributes(Type));
             DefaultValue = TypeHelper.GetDefaultValue(Type);
+            Lookup = new ExtensionPropertyLookupConfiguration();
         }
 
         public object GetDefaultValue()

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/CreateModal.cshtml

@@ -17,17 +17,21 @@
         <abp-modal-header title="@L["NewRole"].Value"></abp-modal-header>
         <abp-modal-body>
             <abp-input asp-for="Role.Name" />
-            
+
             <abp-input asp-for="Role.IsDefault" />
-            
+
             <abp-input asp-for="Role.IsPublic" />
-            
+
             @foreach (var propertyInfo in ObjectExtensionManager.Instance.GetProperties<CreateModalModel.RoleInfoModel>())
             {
-                if (propertyInfo.Type.IsEnum)
+                if (propertyInfo.Type.IsEnum || !propertyInfo.Lookup.Url.IsNullOrEmpty())
                 {
                     <abp-select asp-for="Role.ExtraProperties[propertyInfo.Name]"
-                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"></abp-select>
+                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
+                                autocomplete-api-url="@propertyInfo.Lookup.Url"
+                                autocomplete-items-property-name="@propertyInfo.Lookup.ResultListPropertyName"
+                                autocomplete-display-property-name="@propertyInfo.Lookup.DisplayPropertyName"
+                                autocomplete-value-property-name="@propertyInfo.Lookup.ValuePropertyName"></abp-select>
                 }
                 else
                 {

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Roles/EditModal.cshtml

@@ -17,9 +17,9 @@
         <abp-modal-header title="@L["Edit"].Value"></abp-modal-header>
         <abp-modal-body>
             <abp-input asp-for="Role.Id" />
-            
+
             <abp-input asp-for="Role.ConcurrencyStamp" />
-            
+
             @if (Model.Role.IsStatic)
             {
                 <abp-input asp-for="Role.Name" readonly="true" />
@@ -28,17 +28,21 @@
             {
                 <abp-input asp-for="Role.Name" />
             }
-            
+
             <abp-input asp-for="Role.IsDefault" />
-            
+
             <abp-input asp-for="Role.IsPublic" />
-            
+
             @foreach (var propertyInfo in ObjectExtensionManager.Instance.GetProperties<CreateModalModel.RoleInfoModel>())
             {
-                if (propertyInfo.Type.IsEnum)
+                if (propertyInfo.Type.IsEnum || !propertyInfo.Lookup.Url.IsNullOrEmpty())
                 {
                     <abp-select asp-for="Role.ExtraProperties[propertyInfo.Name]"
-                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"></abp-select>
+                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
+                                autocomplete-api-url="@propertyInfo.Lookup.Url"
+                                autocomplete-items-property-name="@propertyInfo.Lookup.ResultListPropertyName"
+                                autocomplete-display-property-name="@propertyInfo.Lookup.DisplayPropertyName"
+                                autocomplete-value-property-name="@propertyInfo.Lookup.ValuePropertyName"></abp-select>
                 }
                 else
                 {

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/CreateModal.cshtml

@@ -29,10 +29,14 @@
 
                     @foreach (var propertyInfo in ObjectExtensionManager.Instance.GetProperties<CreateModalModel.UserInfoViewModel>())
                     {
-                        if (propertyInfo.Type.IsEnum)
+                        if (propertyInfo.Type.IsEnum || !propertyInfo.Lookup.Url.IsNullOrEmpty())
                         {
                             <abp-select asp-for="UserInfo.ExtraProperties[propertyInfo.Name]"
-                                        label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"></abp-select>
+                                        label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
+                                        autocomplete-api-url="@propertyInfo.Lookup.Url"
+                                        autocomplete-items-property-name="@propertyInfo.Lookup.ResultListPropertyName"
+                                        autocomplete-display-property-name="@propertyInfo.Lookup.DisplayPropertyName"
+                                        autocomplete-value-property-name="@propertyInfo.Lookup.ValuePropertyName"></abp-select>
                         }
                         else
                         {

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml

@@ -31,10 +31,14 @@
 
                     @foreach (var propertyInfo in ObjectExtensionManager.Instance.GetProperties<EditModalModel.UserInfoViewModel>())
                     {
-                        if (propertyInfo.Type.IsEnum)
+                        if (propertyInfo.Type.IsEnum || !propertyInfo.Lookup.Url.IsNullOrEmpty())
                         {
                             <abp-select asp-for="UserInfo.ExtraProperties[propertyInfo.Name]"
-                                        label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"></abp-select>
+                                        label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
+                                        autocomplete-api-url="@propertyInfo.Lookup.Url"
+                                        autocomplete-items-property-name="@propertyInfo.Lookup.ResultListPropertyName"
+                                        autocomplete-display-property-name="@propertyInfo.Lookup.DisplayPropertyName"
+                                        autocomplete-value-property-name="@propertyInfo.Lookup.ValuePropertyName"></abp-select>
                         }
                         else
                         {

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/Pages/TenantManagement/Tenants/CreateModal.cshtml

@@ -21,13 +21,17 @@
             <abp-input asp-for="Tenant.AdminEmailAddress" />
 
             <abp-input asp-for="Tenant.AdminPassword" />
-            
+
             @foreach (var propertyInfo in ObjectExtensionManager.Instance.GetProperties<CreateModalModel.TenantInfoModel>())
             {
-                if (propertyInfo.Type.IsEnum)
+                if (propertyInfo.Type.IsEnum || !propertyInfo.Lookup.Url.IsNullOrEmpty())
                 {
                     <abp-select asp-for="Tenant.ExtraProperties[propertyInfo.Name]"
-                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"></abp-select>
+                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
+                                autocomplete-api-url="@propertyInfo.Lookup.Url"
+                                autocomplete-items-property-name="@propertyInfo.Lookup.ResultListPropertyName"
+                                autocomplete-display-property-name="@propertyInfo.Lookup.DisplayPropertyName"
+                                autocomplete-value-property-name="@propertyInfo.Lookup.ValuePropertyName"></abp-select>
                 }
                 else
                 {

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/Pages/TenantManagement/Tenants/EditModal.cshtml

@@ -20,10 +20,14 @@
             <abp-input asp-for="Tenant.Name" label="@L["TenantName"].Value" />
             @foreach (var propertyInfo in ObjectExtensionManager.Instance.GetProperties<EditModalModel.TenantInfoModel>())
             {
-                if (propertyInfo.Type.IsEnum)
+                if (propertyInfo.Type.IsEnum || !propertyInfo.Lookup.Url.IsNullOrEmpty())
                 {
                     <abp-select asp-for="Tenant.ExtraProperties[propertyInfo.Name]"
-                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"></abp-select>
+                                label="@propertyInfo.GetLocalizedDisplayName(StringLocalizerFactory)"
+                                autocomplete-api-url="@propertyInfo.Lookup.Url"
+                                autocomplete-items-property-name="@propertyInfo.Lookup.ResultListPropertyName"
+                                autocomplete-display-property-name="@propertyInfo.Lookup.DisplayPropertyName"
+                                autocomplete-value-property-name="@propertyInfo.Lookup.ValuePropertyName"></abp-select>
                 }
                 else
                 {