You've already forked AstralRinth
forked from didirus/AstralRinth
feat(frontend): update search to reset to page 1 (#3192)
Fixes #3176 **Changes**: - Sets the pagination to page one if the search is updated. This is the norm on most websites, and how users expect it to work. - Join `setPage` into `updateSearchResults` - Take a page number in `updateSearchResults` - Remove unused param to `updateSearchResults` - Update `watch` to not double requests - use `scrollToTop` utility function
This commit is contained in:
@@ -168,7 +168,7 @@
|
|||||||
name="Sort by"
|
name="Sort by"
|
||||||
:options="sortTypes"
|
:options="sortTypes"
|
||||||
:display-name="(option) => option?.display"
|
:display-name="(option) => option?.display"
|
||||||
@change="updateSearchResults(1)"
|
@change="updateSearchResults()"
|
||||||
>
|
>
|
||||||
<span class="font-semibold text-primary">Sort by: </span>
|
<span class="font-semibold text-primary">Sort by: </span>
|
||||||
<span class="font-semibold text-secondary">{{ selected }}</span>
|
<span class="font-semibold text-secondary">{{ selected }}</span>
|
||||||
@@ -181,7 +181,7 @@
|
|||||||
:default-value="maxResults"
|
:default-value="maxResults"
|
||||||
:model-value="maxResults"
|
:model-value="maxResults"
|
||||||
class="!w-auto flex-grow md:flex-grow-0"
|
class="!w-auto flex-grow md:flex-grow-0"
|
||||||
@change="updateSearchResults(1)"
|
@change="updateSearchResults()"
|
||||||
>
|
>
|
||||||
<span class="font-semibold text-primary">View: </span>
|
<span class="font-semibold text-primary">View: </span>
|
||||||
<span class="font-semibold text-secondary">{{ selected }}</span>
|
<span class="font-semibold text-secondary">{{ selected }}</span>
|
||||||
@@ -206,7 +206,7 @@
|
|||||||
:page="currentPage"
|
:page="currentPage"
|
||||||
:count="pageCount"
|
:count="pageCount"
|
||||||
class="mx-auto sm:ml-auto sm:mr-0"
|
class="mx-auto sm:ml-auto sm:mr-0"
|
||||||
@switch-page="setPage"
|
@switch-page="updateSearchResults"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<SearchFilterControl
|
<SearchFilterControl
|
||||||
@@ -296,7 +296,7 @@
|
|||||||
:page="currentPage"
|
:page="currentPage"
|
||||||
:count="pageCount"
|
:count="pageCount"
|
||||||
class="justify-end"
|
class="justify-end"
|
||||||
@switch-page="setPage"
|
@switch-page="updateSearchResults"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -545,19 +545,13 @@ const pageCount = computed(() =>
|
|||||||
results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
|
results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
|
||||||
);
|
);
|
||||||
|
|
||||||
function setPage(newPageNumber) {
|
|
||||||
currentPage.value = newPageNumber;
|
|
||||||
|
|
||||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
|
||||||
|
|
||||||
updateSearchResults();
|
|
||||||
}
|
|
||||||
|
|
||||||
function scrollToTop(behavior = "smooth") {
|
function scrollToTop(behavior = "smooth") {
|
||||||
window.scrollTo({ top: 0, behavior });
|
window.scrollTo({ top: 0, behavior });
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateSearchResults() {
|
function updateSearchResults(pageNumber) {
|
||||||
|
currentPage.value = pageNumber || 1;
|
||||||
|
scrollToTop();
|
||||||
noLoad.value = true;
|
noLoad.value = true;
|
||||||
|
|
||||||
if (query.value === null) {
|
if (query.value === null) {
|
||||||
@@ -590,8 +584,8 @@ function updateSearchResults() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
watch([currentFilters, requestParams], () => {
|
watch([currentFilters], () => {
|
||||||
updateSearchResults();
|
updateSearchResults(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
function cycleSearchDisplayMode() {
|
function cycleSearchDisplayMode() {
|
||||||
|
|||||||
Reference in New Issue
Block a user