add Search capability to Pager and include in management UIs

Oqtane.Client/Modules/Admin/Files/Index.razor

@@ -8,27 +8,28 @@
 
 @if (_files != null)
 {
-    <div class="container">
+    <div class="row">
-        <div class="row mb-1 align-items-center">
+        <div class="col-md mb-1">
-            <div class="col-sm-2">
+            <ActionLink Action="Edit" Text="Add Folder" Class="btn btn-secondary" ResourceKey="AddFolder" />
-                <label class="control-label">@Localizer["Folder"] </label>
+        </div>
-            </div>            
+        <div class="col-md-8 mb-1">
-            <div class="col-sm-6">
+            <div class="input-group">
+                <span class="input-group-text">@Localizer["Folder"]:</span>
                 <select class="form-select" @onchange="(e => FolderChanged(e))">
                     @foreach (Folder folder in _folders)
                     {
                         <option value="@(folder.FolderId)">@(new string('-', folder.Level * 2))@(folder.Name)</option>
                     }
                 </select>
-            </div>            
-            <div class="col-sm-4">
                 <ActionLink Action="Edit" Text="Edit Folder" Class="btn btn-secondary" Parameters="@($"id=" + _folderId.ToString())" ResourceKey="EditFolder" />&nbsp;
-                <ActionLink Action="Edit" Text="Add Folder" Class="btn btn-secondary" ResourceKey="AddFolder" />&nbsp;
-                <ActionLink Action="Add" Text="Upload Files" Parameters="@($"id=" + _folderId.ToString())" ResourceKey="UploadFiles" />
             </div>
         </div>
+        <div class="col-md mb-1 text-end">
+            <ActionLink Action="Add" Text="Upload Files" Parameters="@($"id=" + _folderId.ToString())" ResourceKey="UploadFiles" />
+        </div>
     </div>
-    <Pager Items="@_files">
+
+    <Pager Items="@_files" AllowSearch="True" SearchProperties="Name">
         <Header>
         <th style="width: 1px;">&nbsp;</th>
         <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Jobs/Index.razor

@@ -15,7 +15,7 @@ else
     <br />
     <br />
 
-    <Pager Items="@_jobs">
+    <Pager Items="@_jobs" AllowSearch="True" SearchProperties="Name">
         <Header>
             <th style="width: 1px;">&nbsp;</th>
             <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Languages/Index.razor

@@ -14,7 +14,7 @@ else
 {
     <ActionLink Action="Add" Text="Add Language" ResourceKey="AddLanguage" />
 
-    <Pager Items="@_languages">
+    <Pager Items="@_languages" AllowSearch="True" SearchProperties="Name,Code">
         <Header>
             <th style="width: 1px;">&nbsp;</th>
             <th>@SharedLocalizer["Name"]</th>

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

@@ -9,7 +9,7 @@
 {
     <ActionLink Action="Add" Text="Add Page" ResourceKey="AddPage" />
 
-    <Pager Items="@PageState.Pages.Where(item => !item.IsDeleted)">
+    <Pager Items="@PageState.Pages.Where(item => !item.IsDeleted)" AllowSearch="True" SearchProperties="Name">
         <Header>
         <th style="width: 1px;">&nbsp;</th>
         <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Profiles/Index.razor

@@ -12,7 +12,7 @@ else
 {
 	<ActionLink Action="Add" Text="Add Profile" Security="SecurityAccessLevel.Edit" ResourceKey="AddProfile" />
 
-    <Pager Items="@_profiles">
+    <Pager Items="@_profiles" AllowSearch="True" SearchProperties="Title,Category">
         <Header>
             <th style="width: 1px;">&nbsp;</th>
             <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Roles/Index.razor

@@ -12,7 +12,7 @@ else
 {
 	<ActionLink Action="Add" Text="Add Role" Security="SecurityAccessLevel.Edit" ResourceKey="AddRole" />
 
-    <Pager Items="@_roles">
+    <Pager Items="@_roles" AllowSearch="True" SearchProperties="Name">
         <Header>
             <th style="width: 1px;">&nbsp;</th>
             <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Sites/Index.razor

@@ -14,7 +14,7 @@ else
 {
     <ActionLink Action="Add" Text="Add Site" ResourceKey="AddSite" />
 
-    <Pager Items="@_sites">
+    <Pager Items="@_sites" AllowSearch="True" SearchProperties="Name">
         <Header>
             <th style="width: 1px;">&nbsp;</th>
             <th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/UrlMappings/Index.razor

@@ -28,7 +28,7 @@ else
 				</div>
 			</div>
 			<br/>
-			<Pager Items="@_urlMappings">
+            <Pager Items="@_urlMappings" AllowSearch="True" SearchProperties="Url">
 				<Header>
 					<th style="width: 1px;">&nbsp;</th>
 					<th style="width: 1px;">&nbsp;</th>

Oqtane.Client/Modules/Admin/Users/Index.razor

@@ -17,21 +17,10 @@ else
 {
     <TabStrip>
         <TabPanel Name="Users" Heading="Users" ResourceKey="Users">
-			<div class="container">
+			<ActionLink Action="Add" Text="Add User" Security="SecurityAccessLevel.Edit" ResourceKey="AddUser" />&nbsp;
-				<div class="row mb-1 align-items-center">
+            <ActionLink Text="Import Users" Class="btn btn-secondary ms-2" Action="Users" Security="SecurityAccessLevel.Admin" ResourceKey="ImportUsers"/>
-					<div class="col-sm-4">
+
-						<ActionLink Action="Add" Text="Add User" Security="SecurityAccessLevel.Edit" ResourceKey="AddUser" />&nbsp;
+            <Pager Items="@users" RowClass="align-middle" AllowSearch="True" SearchProperties="Username,Email,DisplayName">
-                        <ActionLink Text="Import Users" Class="btn btn-secondary" Action="Users" Security="SecurityAccessLevel.Admin" ResourceKey="ImportUsers"/>                    
-                    </div>
-					<div class="col-sm-4">
-						<input class="form-control" @bind="@_search" />
-					</div>
-					<div class="col-sm-4">
-						<button type="button" class="btn btn-secondary" @onclick="OnSearch">@SharedLocalizer["Search"]</button>
-					</div>
-				</div>
-			</div>
-			<Pager Items="@users" RowClass="align-middle">
 				<Header>
 					<th style="width: 1px;">&nbsp;</th>
 					<th style="width: 1px;">&nbsp;</th>
@@ -368,9 +357,7 @@ else
 }
 
 @code {
-    private List<UserRole> allusers;
     private List<UserRole> users;
-    private string _search = "";
 
     private string _allowregistration;
     private string _allowsitelogin;
@@ -423,7 +410,6 @@ else
 
     protected override async Task OnInitializedAsync()
     {
-        await LoadUserSettingsAsync();
         await LoadUsersAsync(true);
 
         var settings = await SettingService.GetSiteSettingsAsync(PageState.Site.SiteId);
@@ -478,32 +464,14 @@ else
     {
         if (load)
         {
-            allusers = await UserRoleService.GetUserRolesAsync(PageState.Site.SiteId, RoleNames.Registered);
+            users = await UserRoleService.GetUserRolesAsync(PageState.Site.SiteId, RoleNames.Registered);
             if (UserSecurity.IsAuthorized(PageState.User, RoleNames.Host))
             {
                 var hosts = await UserRoleService.GetUserRolesAsync(PageState.Site.SiteId, RoleNames.Host);
-                allusers.AddRange(hosts);
+                users.AddRange(hosts);
-                allusers = allusers.OrderBy(u => u.User.DisplayName).ToList();
+                users = users.OrderBy(u => u.User.DisplayName).ToList();
             }           
         }
-
-		users = allusers;
-		if (!string.IsNullOrEmpty(_search))
-		{
-			users = users.Where(item =>
-				(
-					item.User.Username.Contains(_search, StringComparison.OrdinalIgnoreCase) ||
-					item.User.Email.Contains(_search, StringComparison.OrdinalIgnoreCase) ||
-					item.User.DisplayName.Contains(_search, StringComparison.OrdinalIgnoreCase)
-				)
-			).ToList();
-		}
-	}
-
-	private async Task OnSearch()
-	{
-		await UpdateUserSettingsAsync();
-		await LoadUsersAsync(false);
 	}
 
 	private async Task DeleteUser(UserRole UserRole)
@@ -526,21 +494,6 @@ else
 		}
 	}
 
-	private string settingSearch = "AU-search";
-
-	private async Task LoadUserSettingsAsync()
-	{
-		Dictionary<string, string> settings = await SettingService.GetUserSettingsAsync(PageState.User.UserId);
-		_search = SettingService.GetSetting(settings, settingSearch, "");
-	}
-
-	private async Task UpdateUserSettingsAsync()
-	{
-		Dictionary<string, string> settings = await SettingService.GetUserSettingsAsync(PageState.User.UserId);
-		settings = SettingService.SetSetting(settings, settingSearch, _search);
-		await SettingService.UpdateUserSettingsAsync(settings, PageState.User.UserId);
-	}
-
 	private async Task SaveSiteSettings()
 	{
 		try

Oqtane.Client/Modules/Controls/Pager.razor

@@ -5,6 +5,15 @@
 
 @if (ItemList != null)
 {
+    @if (AllowSearch == "True")
+    {
+        <div class="input-group my-3">
+            <input id="search" class="form-control" @bind="@_search" />
+            <button type="button" class="btn btn-primary" @onclick="Search">@Localizer["Search"]</button>
+            <button type="button" class="btn btn-secondary" @onclick="Reset">@Localizer["Reset"]</button>
+        </div>
+    }
+
     @if ((Toolbar == "Top" || Toolbar == "Both") && _pages > 0 && Items.Count() > _maxItems)
     {
         <ul class="pagination justify-content-center my-2">
@@ -175,6 +184,9 @@
     private int _startPage = 0;
     private int _endPage = 0;
     private int _columns = 0;
+    private string _search = "";
+
+    private IEnumerable<TableItem> AllItems;
 
     [Parameter]
     public string Format { get; set; } // Table or Grid
@@ -221,6 +233,12 @@
     [Parameter]
     public Action<int> OnPageChange { get; set; } // a method to be executed in the calling component when the page changes
 
+    [Parameter]
+    public string AllowSearch { get; set; } // allow user to search items
+
+    [Parameter]
+    public string SearchProperties { get; set; } // comma delimited list of property names to include in search
+
     private IEnumerable<TableItem> ItemList { get; set; }
 
     protected override void OnInitialized()
@@ -230,6 +248,8 @@
 
     protected override void OnParametersSet()
     {
+        AllItems = Items;
+
         if (string.IsNullOrEmpty(Format))
         {
             Format = "Table";
@@ -276,6 +296,11 @@
             }
         }
 
+        if (string.IsNullOrEmpty(AllowSearch) || string.IsNullOrEmpty(SearchProperties))
+        {
+            AllowSearch = "False";
+        }
+
         if (!string.IsNullOrEmpty(PageSize))
         {
             _maxItems = int.Parse(PageSize);
@@ -323,10 +348,10 @@
         {
             _endPage = _pages;
         }
-		ItemList = Items.Skip((_page - 1) * _maxItems).Take(_maxItems);
+        ItemList = Items.Skip((_page - 1) * _maxItems).Take(_maxItems);
-		StateHasChanged();
+        StateHasChanged();
-		OnPageChange?.Invoke(_page);
+        OnPageChange?.Invoke(_page);
-	}
+    }
 
     public void UpdateList(int page)
     {
@@ -369,4 +394,44 @@
 
         UpdateList(_page);
     }
+
+    public void Search()
+    {
+        if (!string.IsNullOrEmpty(_search))
+        {
+            Items = AllItems.Where(item =>
+            {
+                var values = SearchProperties.Split(',')
+                    .Select(itemType => GetPropertyValue(item, itemType))
+                    .Where(value => value != null)
+                    .Select(value => value.ToString().ToLower());
+
+                return values.Any(value => value.Contains(_search.ToLower()));
+            }).ToList();
+        }
+        else
+        {
+            Items = AllItems;
+        }
+        _pages = (int)Math.Ceiling(Items.Count() / (decimal)_maxItems);
+        UpdateList(1);
+    }
+
+    private object GetPropertyValue(object obj, string propertyName)
+    {
+        var propertyInfo = obj.GetType().GetProperty(propertyName);
+        if (propertyInfo != null)
+        {
+            return propertyInfo.GetValue(obj);
+        }
+        return null;
+    }
+
+    public void Reset()
+    {
+        _search = "";
+        Items = AllItems;
+        _pages = (int)Math.Ceiling(Items.Count() / (decimal)_maxItems);
+        UpdateList(1);
+    }
 }