-
Notifications
You must be signed in to change notification settings - Fork 2.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Content list owner filter #15470
Closed
Closed
Content list owner filter #15470
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
ef263cb
Owner filter dropdown with lazy loaded users
douwinga adb12a1
Fix issue with hammering endpoint
douwinga 915b061
Filtering by owner using userid
douwinga d337160
User username instead of userid
douwinga 251022c
Always include selected owner
douwinga a70eaa6
mark selected owner as selected
douwinga 2c725c6
Page size is now a constant
douwinga 26c53d2
Added depends-on
douwinga ce55fc2
Smaller page size and fix paging
douwinga abf19c4
Only load users on first dropdown trigger
douwinga File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
56 changes: 55 additions & 1 deletion
56
src/OrchardCore.Modules/OrchardCore.Contents/Views/ContentsAdminListFilters.cshtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,12 +1,66 @@ | ||
@model ContentOptionsViewModel | ||
@{ | ||
var formActionWithoutTypeName = Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "List", contentTypeId = "" }); | ||
var ownerFilterUserSearchUrl = Url.RouteUrl(new { area = "OrchardCore.Contents", controller = "Admin", action = "OwnerFilterUserSearch" }); | ||
} | ||
<div class="btn-group filter"> | ||
@if (Model.ContentTypeOptions.Count > 0) | ||
{ | ||
<select asp-for="SelectedContentType" asp-items="Model.ContentTypeOptions" class="selectpicker contenttypes-selectpicker show-tick me-2" data-header="@T["Filter by content type"]" data-selected-text-format="static" data-width="fit" data-dropdown-align-right="auto" title="@T["Content Type"]" data-style="btn-sm" data-live-search="true"></select> | ||
} | ||
<select asp-for="ContentsStatus" asp-items="@Model.ContentStatuses" class="selectpicker contentstatuses-selectpicker show-tick me-2" data-header="@T["Filter by status"]" data-selected-text-format="static" data-width="fit" data-dropdown-align-right="auto" title="@T["Show"]" data-style="btn-sm"></select> | ||
<button type="button" id="contentowners-selectpicker-button" class="btn dropdown-toggle btn-sm me-2">@T["Owner"]</button> | ||
<select asp-for="SelectedOwnerUserName" style="display:none;" class="ajax-selectpicker contentowners-selectpicker show-tick me-2" data-header="@T["Filter by owner"]" data-selected-text-format="static" data-width="fit" data-dropdown-align-right="auto" title="@T["Owner"]" data-style="btn-sm" data-live-search="true" data-size="10"></select> | ||
<select asp-for="OrderBy" asp-items="@Model.ContentSorts" class="selectpicker contentsorts-selectpicker show-tick" data-header="@T["Sort by"]" data-width="fit" data-selected-text-format="static" data-dropdown-align-right="true" title="@T["Sort"]" data-style="btn-sm"></select> | ||
</div> | ||
|
||
<script depends-on="jQuery" at="Foot"> | ||
$(function () { | ||
douwinga marked this conversation as resolved.
Show resolved
Hide resolved
|
||
var selectedOwnerUserName = '@Model.SelectedOwnerUserName'; | ||
var ownerFilterSelect = $('#@Html.IdFor(m => m.SelectedOwnerUserName)'); | ||
var ownerFilterButton = $('#contentowners-selectpicker-button'); | ||
|
||
// bootstrap-select has an issue with hammering the server, so we use flags to only make a request | ||
// if something changes that would warrant another request | ||
var ownerFilterPreviousPage; | ||
var ownerFilterPreviousSearchTerm; | ||
|
||
// Hack: boostrap-select v1.14.0-beta3 makes the intitial ajax request on initialization and has no way of controlling that. | ||
// It also does not allow switching from static data to ajax data after the fact. Therefore we have this hack where on click | ||
// of a 'dummy' button we initialize the bootstrap-select for the owner filter and then remove the dummy button. | ||
ownerFilterButton.on('click', function (event) { | ||
event.stopPropagation(); | ||
|
||
ownerFilterSelect.selectpicker({ | ||
chunkSize: 50, | ||
source: { | ||
pageSize: 50, | ||
data: function (callback, page) { | ||
if (ownerFilterPreviousPage !== page) { | ||
ownerFilterPreviousPage = page; | ||
|
||
$.ajax('@ownerFilterUserSearchUrl', { data: { page, selectedOwnerUserName } }) | ||
.then((response) => callback(response.results, response.hasMoreResults)); | ||
} | ||
}, | ||
search: function (callback, page, searchTerm) { | ||
if (ownerFilterPreviousPage !== page || ownerFilterPreviousSearchTerm !== searchTerm) { | ||
ownerFilterPreviousPage = page; | ||
ownerFilterPreviousSearchTerm = searchTerm; | ||
|
||
$.ajax('@ownerFilterUserSearchUrl', { data: { page, searchTerm, selectedOwnerUserName } }) | ||
.then((response) => callback(response.results, response.hasMoreResults)); | ||
} | ||
} | ||
} | ||
}).selectpicker('hide'); | ||
|
||
// once the owner filter selectpicker is loaded, swap out the button and show the dropdown | ||
ownerFilterSelect.on('loaded.bs.select', function (e, clickedIndex, isSelected, previousValue) { | ||
ownerFilterButton.remove(); | ||
ownerFilterSelect.show(); | ||
ownerFilterSelect.selectpicker('show') | ||
ownerFilterSelect.selectpicker('toggle'); | ||
}); | ||
}); | ||
}) | ||
</script> |
13 changes: 13 additions & 0 deletions
13
...Core.Modules/OrchardCore.Contents/Views/Items/ContentsAdminFilters-Owner.Thumbnail.cshtml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
@model ShapeViewModel<ContentOptionsViewModel> | ||
@{ | ||
var term = Model.Value.FilterResult.FirstOrDefault(x => x.TermName == "owner"); | ||
} | ||
|
||
<h4 class="card-title">@T["Owner"]</h4> | ||
<pre class="mb-3">@(term?.ToString() ?? "owner:...")</pre> | ||
<p>@T["Filters on the owner of a content item."]</p> | ||
<div class="d-block text-end"> | ||
<span> | ||
<i class="fa-solid fa-sm fa-minus text-primary" aria-hidden="true"></i> | ||
</span> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We may need to cache this for optimization otherwise we'll significantly increase the server load.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had the same thought. It at least isn't page blocking with it loading after page render. I was thinking it would be fine if it would only start loading users when the select dropdown is shown, but bootstrap-select does not make that easy. Thoughts?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@douwinga we agree on your suggestion to only load the list on the first drop down, and maybe less than 50, probably something close to what the drop down can fit by default.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If "Owner" is indexed, you may also not have to load all users, but just the distinct values of this field.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@douwinga a better idea Sebestien mentioned was to not load any users by default. If the user clicks on the filter menu, then make an AJAX request that would fetch the first 50 users as you are doing today. This way you don't need to cache anything and also you don't need to render anything on every single request.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MikeAlhayek ya, I am just struggling to implement that with bootstrap-select
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
let me know what you think. I made it load the data on first dropdown toggle. It is gross, but I am not sure how else to do it. bootstrap-select needs help, but I want to use it for this so that it is consistent with all the other filter dropdowns,