feat(Table): advance search dialog support UseSearchForm parameter

src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor

@@ -11,6 +11,29 @@
     <p>@((MarkupString)Localizer["SearchTableTips"].Value)</p>
 </Tips>
 
+<DemoBlock Title="@Localizer["SearchFormTitle"]"
+           Introduction="@Localizer["SearchFormIntro"]"
+           Name="SearchForm">
+    <section ignore>
+        <p>@((MarkupString)Localizer["SearchFormDesc"].Value)</p>
+        <div>@((MarkupString)Localizer["SearchFormTips"].Value)</div>
+    </section>
+    <Table TItem="Foo"
+           IsPagination="true" PageItemsSource="@PageItemsSource" SearchMode="SearchMode.Top"
+           IsStriped="true" IsBordered="true"
+           ShowSearch="true" UseSearchForm="true"
+           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
+           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
+        <TableColumns>
+            <TableColumn @bind-Field="@context.DateTime" Width="180" Searchable="true" />
+            <TableColumn @bind-Field="@context.Name" Searchable="true" SearchFormItemMetadata="_nameSearchFormItemMetadata" />
+            <TableColumn @bind-Field="@context.Address" Searchable="true" SearchFormItemMetadata="_addressSearchFormItemMetadata" />
+            <TableColumn @bind-Field="@context.Count" Searchable="true" />
+            <TableColumn @bind-Field="@context.Education" Searchable="true" />
+        </TableColumns>
+    </Table>
+</DemoBlock>
+
 <DemoBlock Title="@Localizer["SearchTableTitle"]"
            Introduction="@Localizer["SearchTableIntro"]"
            Name="SearchTable">
@@ -65,19 +88,22 @@
     items = items.Where(options.Searches.GetFilterFunc&lt;Foo&gt;(FilterLogic.Or));
 }</Pre>
         <GroupBox Title="@Localizer["AutoGenerateSearchGroupBoxTitle"]" class="mb-3">
-            <div class="row g-3 form-inline">
-                <div class="col-12 col-sm-3">
+            <div class="bb-grid">
+                <div class="bb-grid-item">
                     <Switch DisplayText="@Localizer["DisplayText1"]" ShowLabel="true" @bind-Value="SearchModeFlag" />
                 </div>
-                <div class="col-12 col-sm-3">
+                    <div class="bb-grid-item">
                     <Switch DisplayText="@Localizer["DisplayText2"]" ShowLabel="true" @bind-Value="ShowSearchText" />
                 </div>
-                <div class="col-12 col-sm-3">
+                    <div class="bb-grid-item">
                     <Switch DisplayText="@Localizer["DisplayText3"]" ShowLabel="true" @bind-Value="ShowResetButton" />
                 </div>
-                <div class="col-12 col-sm-3">
+                <div class="bb-grid-item">
                     <Switch DisplayText="@Localizer["DisplayText4"]" ShowLabel="true" @bind-Value="ShowSearchButton" IsDisabled="SearchModeFlag" />
                 </div>
+                <div class="bb-grid-item">
+                    <Switch DisplayText="@Localizer["DisplayText5"]" ShowLabel="true" @bind-Value="UseSearchForm" />
+                </div>
             </div>
         </GroupBox>
     </section>
@@ -87,6 +113,7 @@
            ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
            ShowSearch="true" ShowResetButton="ShowResetButton" ShowSearchButton="ShowSearchButton" ShowSearchText="ShowSearchText"
            AddModalTitle="@Localizer["AddModelTitle"]" EditModalTitle="@Localizer["EditModelTitle"]"
+           UseSearchForm="UseSearchForm" SearchItems="_searchItems"
            OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
         <TableColumns>
             <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" />
@@ -157,25 +184,3 @@
         </CustomerSearchTemplate>
     </Table>
 </DemoBlock>
-
-<DemoBlock Title="@Localizer["SearchFormTitle"]"
-           Introduction="@Localizer["SearchFormIntro"]"
-           Name="SearchForm">
-    <section ignore>
-        <div>@((MarkupString)Localizer["SearchFormDesc"].Value)</div>
-    </section>
-    <Table TItem="Foo"
-           IsPagination="true" PageItemsSource="@PageItemsSource" SearchMode="SearchMode.Top"
-           IsStriped="true" IsBordered="true"
-           ShowSearch="true" UseSearchForm="true"
-           ShowToolbar="true" IsMultipleSelect="true" ShowExtendButtons="true"
-           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync">
-        <TableColumns>
-            <TableColumn @bind-Field="@context.DateTime" Width="180" Searchable="true" />
-            <TableColumn @bind-Field="@context.Name" Searchable="true" SearchFormItemMetaData="_nameSearchFormItemMetaData" />
-            <TableColumn @bind-Field="@context.Address" Searchable="true" SearchFormItemMetaData="_addressSearchFormItemMetaData" />
-            <TableColumn @bind-Field="@context.Count" Searchable="true" />
-            <TableColumn @bind-Field="@context.Education" Searchable="true" />
-        </TableColumns>
-    </Table>
-</DemoBlock>

src/BootstrapBlazor.Server/Components/Samples/Table/TablesSearch.razor.cs

@@ -34,19 +34,23 @@ public partial class TablesSearch
 
     private SearchMode SearchModeValue { get; set; }
 
+    private bool UseSearchForm { get; set; }
+
+    private List<ISearchItem> _searchItems = [];
+
     private bool SearchModeFlag
     {
         get => SearchModeValue == SearchMode.Popup;
         set => SearchModeValue = value ? SearchMode.Popup : SearchMode.Top;
     }
 
-    private ISearchFormItemMetaData _nameSearchFormItemMetaData = new StringSearchMetaData()
+    private ISearchFormItemMetadata _nameSearchFormItemMetadata = new StringSearchMetadata()
     {
         PlaceHolder = "请输入名称搜索（支持模糊匹配）",
         FilterAction = FilterAction.Contains,
     };
 
-    private ISearchFormItemMetaData _addressSearchFormItemMetaData = new StringSearchMetaData()
+    private ISearchFormItemMetadata _addressSearchFormItemMetadata = new StringSearchMetadata()
     {
         PlaceHolder = "请输入地址搜索（支持模糊匹配）",
         FilterAction = FilterAction.Contains,
@@ -58,6 +62,7 @@ private bool SearchModeFlag
     protected override void OnInitialized()
     {
         base.OnInitialized();
+
         Items = Foo.GenerateFoo(FooLocalizer);
         SearchItems = new List<SelectedItem>()
         {
@@ -77,6 +82,11 @@ protected override void OnInitialized()
                 Value = Localizer["SelectedItemValue2"].Value
             },
         };
+
+        _searchItems = [
+            new SearchItem(nameof(Foo.Name), typeof(string), FooLocalizer[nameof(Foo.Name)]),
+            new SearchItem(nameof(Foo.DateTime), typeof(DateTime), FooLocalizer[nameof(Foo.DateTime)])
+        ];
     }
 
     private static Task<Foo> OnAddAsync() => Task.FromResult(new Foo() { DateTime = DateTime.Now });

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -5061,10 +5061,12 @@
     "DisplayText2": "Fuzzy Search",
     "DisplayText3": "Display reset",
     "DisplayText4": "Display Search",
+    "DisplayText5": "SearchForm",
     "EditModelTitle": "Edit Test Data Window",
     "NamePlaceholder": "Please enter your name within 50 characters",
-    "SearchFormDesc": "When <code>UseSearchForm</code> is enabled and <code>SearchItems</code> is not provided, it will default to using <code>TableColumn</code> with <code>Searchable=\"true\"</code>. You can customize the metadata through the <code>SearchFormItemMetaData</code> property in <code>TableColumn</code>",
+    "SearchFormDesc": "When <code>UseSearchForm</code> is enabled and <code>SearchItems</code> is not provided, it will default to using <code>TableColumn</code> with <code>Searchable=\"true\"</code>. You can customize the metadata through the <code>SearchFormItemMetadata</code> property in <code>TableColumn</code>",
     "SearchFormIntro": "Enable the search form feature by setting <code>UseSearchForm=\"true\"</code>, and configure the search items within the form using <code>SearchItems</code>, suitable for scenarios with custom complex search conditions",
+    "SearchFormTips": "Enabling <code>UseSearchForm</code> will prevent <code>SearchTemplate</code>, <code>CustomerSearchModel</code>, and <code>CustomerSearchTemplate</code> from taking effect.",
     "SearchFormTitle": "Search Form",
     "SearchTableGroupBoxText": "Search Criteria",
     "SearchTableIntro": "Set <code>ShowSearch</code> to display the query component, customize the search UI by setting the <code>SearchTemplate</code> template",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -5061,9 +5061,11 @@
     "DisplayText2": "模糊搜索",
     "DisplayText3": "显示清空",
     "DisplayText4": "显示搜索",
+    "DisplayText5": "搜索表单",
     "EditModelTitle": "编辑测试数据窗口",
     "NamePlaceholder": "请输入姓名，50字以内",
-    "SearchFormDesc": "使用 <code>UseSearchForm</code> 开启搜索表单时未提供 <code>SearchItems</code> 默认尝试使用设置 <code>Searchable=\"true\"</code> 的 <code>TableColumn</code> 进行构建，可以通过 <code>TableColumn</code> 中的 <code>SearchFormItemMetaData</code> 属性定制化元数据",
+    "SearchFormDesc": "使用 <code>UseSearchForm</code> 开启搜索表单时未提供 <code>SearchItems</code> 默认尝试使用设置 <code>Searchable=\"true\"</code> 的 <code>TableColumn</code> 进行构建，可以通过 <code>TableColumn</code> 中的 <code>SearchFormItemMetadata</code> 属性定制化元数据",
+    "SearchFormTips": "开启 <code>UseSearchForm</code> 后 <code>SearchTemplate</code> <code>CustomerSearchModel</code> <code>CustomerSearchTemplate</code> 均不生效",
     "SearchFormIntro": "通过设置 <code>UseSearchForm=\"true\"</code> 开启搜索表单功能，通过 <code>SearchItems</code> 配置搜索表单内搜索项，适用于自定义复杂搜索条件的场景",
     "SearchFormTitle": "搜索表单",
     "SearchTableGroupBoxText": "搜索条件",

src/BootstrapBlazor.Server/wwwroot/css/site.css

@@ -398,3 +398,21 @@ code {
     .icon-list .bb-iconpark-icon {
         --bb-svg-icon-width: 16px;
     }
+
+.bb-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+}
+
+.bb-grid-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+    .bb-grid-item > .form-label {
+        min-width: 80px;
+        text-align: right;
+        margin-right: .5rem;
+        margin-bottom: 0;
+    }

src/BootstrapBlazor/Attributes/AutoGenerateColumnAttribute.cs

@@ -180,7 +180,7 @@ public class AutoGenerateColumnAttribute : AutoGenerateBaseAttribute, ITableColu
 
     bool? ITableColumn.Searchable { get => Searchable; set => Searchable = value ?? false; }
 
-    ISearchFormItemMetaData? ITableColumn.SearchFormItemMetaData { get; set; }
+    ISearchFormItemMetadata? ITableColumn.SearchFormItemMetadata { get; set; }
 
     bool? ITableColumn.Filterable { get => Filterable; set => Filterable = value ?? false; }
 

src/BootstrapBlazor/Components/Dialog/DialogBase.cs

@@ -69,16 +69,9 @@ public abstract class DialogBase<TModel> : BootstrapModuleComponentBase
     public bool ShowUnsetGroupItemsOnTop { get; set; }
 
     /// <summary>
-    /// <para lang="zh">OnInitialized 方法</para>
-    /// <para lang="en">OnInitialized Method</para>
+    /// <para lang="zh">通过模型标签获得所有搜索列集合</para>
+    /// <para lang="en">Gets all searchable columns by model attributes</para>
     /// </summary>
-    protected override void OnInitialized()
-    {
-        base.OnInitialized();
-
-        if (Model == null)
-        {
-            throw new InvalidOperationException("Model value not set to null");
-        }
-    }
+    /// <returns></returns>
+    protected IEnumerable<IEditorItem> GetItemsByColumns() => Utility.GenerateColumns<TModel>(item => item.GetSearchable());
 }

src/BootstrapBlazor/Components/Dialog/EditDialog.razor.cs

@@ -165,6 +165,11 @@ protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
+        if (Model == null)
+        {
+            throw new InvalidOperationException($"参数 {nameof(Model)} 未赋值; {nameof(Model)} can not be null.");
+        }
+
         CloseButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.DialogCloseButtonIcon);
         SaveButtonIcon ??= IconTheme.GetIconByKey(ComponentIcons.DialogSaveButtonIcon);
 
@@ -173,6 +178,11 @@ protected override void OnParametersSet()
 
         CloseConfirmTitle ??= Localizer[nameof(CloseConfirmTitle)];
         CloseConfirmContent ??= Localizer[nameof(CloseConfirmContent)];
+
+        if (BodyTemplate == null)
+        {
+            Items ??= GetItemsByColumns();
+        }
     }
 
     private async Task<bool> OnClosingCallback()

src/BootstrapBlazor/Components/Dialog/SearchDialog.razor

@@ -1,24 +1,31 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @typeparam TModel
 @inherits DialogBase<TModel>
 
-@if (BodyTemplate != null)
+@if (UseSearchForm)
+{
+    <SearchForm Items="SearchItems" RowType="RowType" ItemsPerRow="ItemsPerRow" LabelAlign="LabelAlign" ShowLabel="ShowLabel" ShowUnsetGroupItemsOnTop="ShowUnsetGroupItemsOnTop"
+                SearchFormLocalizerOptions="SearchFormLocalizerOptions" OnChanged="OnSearchFormFilterChanged">
+        <Buttons>
+            @RenderButtons
+        </Buttons>
+    </SearchForm>
+}
+else if (BodyTemplate != null)
 {
     <div class="form-body">
         @BodyTemplate.Invoke(Model)
     </div>
     <div class="form-footer">
-        <DialogCloseButton Icon="@ClearIcon" Text="@ResetButtonText" OnClickWithoutRender="@OnResetSearchClick" />
-        <DialogCloseButton Color="Color.Primary" Icon="@SearchIcon" Text="@QueryButtonText" OnClickWithoutRender="@OnSearchClick" />
+        @RenderButtons
     </div>
 }
 else
 {
     <CascadingValue Value="true" IsFixed="true" Name="IsSearch">
         <EditorForm TModel="TModel" Model="Model" Items="Items" RowType="RowType" ItemsPerRow="ItemsPerRow" LabelAlign="LabelAlign" ShowLabel="ShowLabel" ShowUnsetGroupItemsOnTop="ShowUnsetGroupItemsOnTop">
             <Buttons>
-                <DialogCloseButton Icon="@ClearIcon" Text="@ResetButtonText" OnClickWithoutRender="@OnResetSearchClick" />
-                <DialogCloseButton Color="Color.Primary" Icon="@SearchIcon" Text="@QueryButtonText" OnClickWithoutRender="@OnSearchClick" />
+                @RenderButtons
             </Buttons>
         </EditorForm>
     </CascadingValue>

src/BootstrapBlazor/Components/Dialog/SearchDialog.razor.cs

@@ -59,6 +59,34 @@ public partial class SearchDialog<TModel>
     [Parameter]
     public string? SearchIcon { get; set; }
 
+    /// <summary>
+    /// <para lang="zh">获得/设置 是否使用 SearchForm 组件进行搜索条件编辑 默认 false 不使用</para>
+    /// <para lang="en">Gets or sets Whether to use SearchForm component for editing search conditions. Default is false</para>
+    /// </summary>
+    [Parameter]
+    public bool UseSearchForm { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 搜索表单项集合</para>
+    /// <para lang="en">Gets or sets Search Form Items collection</para>
+    /// </summary>
+    [Parameter]
+    public List<ISearchItem>? SearchItems { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 过滤器改变回调事件 Func 版本</para>
+    /// <para lang="en">Gets or sets the filter changed callback event Func version</para>
+    /// </summary>
+    [Parameter]
+    public Func<FilterKeyValueAction, Task>? OnChanged { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 搜索表单本地化配置项</para>
+    /// <para lang="en">Gets or sets Search Form Localization Options</para>
+    /// </summary>
+    [Parameter]
+    public SearchFormLocalizerOptions? SearchFormLocalizerOptions { get; set; }
+
     [Inject]
     [NotNull]
     private IStringLocalizer<SearchDialog<TModel>>? Localizer { get; set; }
@@ -68,8 +96,7 @@ public partial class SearchDialog<TModel>
     private IIconTheme? IconTheme { get; set; }
 
     /// <summary>
-    /// <para lang="zh">OnParametersSet 方法</para>
-    /// <para lang="en">OnParametersSet Method</para>
+    /// <inheritdoc/>
     /// </summary>
     protected override void OnParametersSet()
     {
@@ -80,5 +107,42 @@ protected override void OnParametersSet()
 
         ClearIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchDialogClearIcon);
         SearchIcon ??= IconTheme.GetIconByKey(ComponentIcons.SearchDialogSearchIcon);
+
+        if (UseSearchForm)
+        {
+            return;
+        }
+
+        if (BodyTemplate != null)
+        {
+            return;
+        }
+
+        Items ??= GetItemsByColumns();
     }
+
+    private async Task OnSearchFormFilterChanged(FilterKeyValueAction action)
+    {
+        // 通知父组件过滤器改变事件，此时并没有触发 OnSearchClick 搜索事件，父组件可以在 OnChanged 事件中获取当前过滤器状态并决定是否触发搜索事件
+        if (OnChanged != null)
+        {
+            await OnChanged(action);
+        }
+    }
+
+    private RenderFragment RenderButtons => builder =>
+    {
+        builder.OpenComponent<DialogCloseButton>(0);
+        builder.AddAttribute(10, nameof(DialogCloseButton.Icon), ClearIcon);
+        builder.AddAttribute(20, nameof(DialogCloseButton.Text), ResetButtonText);
+        builder.AddAttribute(30, nameof(DialogCloseButton.OnClickWithoutRender), OnResetSearchClick);
+        builder.CloseComponent();
+
+        builder.OpenComponent<DialogCloseButton>(100);
+        builder.AddAttribute(101, nameof(DialogCloseButton.Color), Color.Primary);
+        builder.AddAttribute(110, nameof(DialogCloseButton.Icon), SearchIcon);
+        builder.AddAttribute(120, nameof(DialogCloseButton.Text), QueryButtonText);
+        builder.AddAttribute(130, nameof(DialogCloseButton.OnClickWithoutRender), OnSearchClick);
+        builder.CloseComponent();
+    };
 }

src/BootstrapBlazor/Components/Dialog/SearchDialogOption.cs

@@ -92,4 +92,28 @@ public SearchDialogOption()
     /// <para lang="en">Gets or sets Search Callback Delegate</para>
     /// </summary>
     public Func<Task>? OnSearchClick { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 是否使用 SearchForm 组件进行搜索条件编辑 默认 false 不使用</para>
+    /// <para lang="en">Gets or sets Whether to use SearchForm component for editing search conditions. Default is false</para>
+    /// </summary>
+    public bool UseSearchForm { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 搜索表单项集合</para>
+    /// <para lang="en">Gets or sets Search Form Items collection</para>
+    /// </summary>
+    public List<ISearchItem>? SearchItems { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 过滤器改变回调事件 Func 版本</para>
+    /// <para lang="en">Gets or sets the filter changed callback event Func version</para>
+    /// </summary>
+    public Func<FilterKeyValueAction, Task>? OnFilterChanged { get; set; }
+
+    /// <summary>
+    /// <para lang="zh">获得/设置 搜索表单本地化配置项</para>
+    /// <para lang="en">Gets or sets Search Form Localization Options</para>
+    /// </summary>
+    public SearchFormLocalizerOptions? SearchFormLocalizerOptions { get; set; }
 }