diff --git a/app/models/index-card-search.ts b/app/models/index-card-search.ts index 65bfa3b9e6..39bdd4d9e2 100644 --- a/app/models/index-card-search.ts +++ b/app/models/index-card-search.ts @@ -19,6 +19,30 @@ export default class IndexCardSearchModel extends Model { @belongsTo('index-property-search', { inverse: null }) relatedPropertySearch!: AsyncBelongsTo & IndexPropertySearchModel; + + get firstPageCursor() { + if (this.searchResultPage.links.first?.href) { + const firstPageLinkUrl = new URL(this.searchResultPage.links.first?.href); + return firstPageLinkUrl.searchParams.get('page[cursor]'); + } + return null; + } + + get prevPageCursor() { + if (this.searchResultPage.links.prev?.href) { + const prevPageLinkUrl = new URL(this.searchResultPage.links.prev?.href); + return prevPageLinkUrl.searchParams.get('page[cursor]'); + } + return null; + } + + get nextPageCursor() { + if (this.searchResultPage.links.next?.href) { + const nextPageLinkUrl = new URL(this.searchResultPage.links.next?.href); + return nextPageLinkUrl.searchParams.get('page[cursor]'); + } + return null; + } } declare module 'ember-data/types/registries/model' { diff --git a/app/search/controller.ts b/app/search/controller.ts index 175d12a00e..233cad0754 100644 --- a/app/search/controller.ts +++ b/app/search/controller.ts @@ -6,7 +6,8 @@ import { OnSearchParams, ResourceTypeFilterValue } from 'osf-components/componen export default class SearchController extends Controller { @tracked cardSearchText?: string = ''; @tracked sort?: string = '-relevance'; - @tracked resourceType?: ResourceTypeFilterValue | null = null; + @tracked resourceType?: ResourceTypeFilterValue | null = null; + @tracked page?: string = ''; queryParams = ['cardSearchText', 'page', 'sort', 'resourceType']; @@ -15,5 +16,6 @@ export default class SearchController extends Controller { this.cardSearchText = queryOptions.cardSearchText; this.sort = queryOptions.sort; this.resourceType = queryOptions.resourceType; + this.page = queryOptions.page; } } diff --git a/app/search/template.hbs b/app/search/template.hbs index 74ccec3055..461716ba38 100644 --- a/app/search/template.hbs +++ b/app/search/template.hbs @@ -2,10 +2,11 @@ diff --git a/lib/osf-components/addon/components/search-page/component.ts b/lib/osf-components/addon/components/search-page/component.ts index 70dae23f48..54d6139dfa 100644 --- a/lib/osf-components/addon/components/search-page/component.ts +++ b/lib/osf-components/addon/components/search-page/component.ts @@ -48,7 +48,6 @@ export interface OnSearchParams { interface SearchArgs { onSearch?: (obj: OnSearchParams) => void; - query?: string; cardSearchText: string; cardSearchFilters: Filter[]; propertyCard: IndexCardModel; @@ -59,6 +58,7 @@ interface SearchArgs { defaultQueryOptions: Record; provider?: ProviderModel; showResourceTypeFilter: boolean; + page: string; } const searchDebounceTime = 100; @@ -69,15 +69,18 @@ export default class SearchPage extends Component { @service store!: Store; @service media!: Media; - @tracked searchText?: string; + @tracked cardSearchText?: string; @tracked searchResults?: SearchResultModel[]; @tracked propertySearch?: IndexPropertySearchModel; - @tracked page?: number = 1; + @tracked page?: string = ''; @tracked totalResultCount?: number; + @tracked firstPageCursor?: string | null; + @tracked prevPageCursor?: string | null; + @tracked nextPageCursor?: string | null; constructor( owner: unknown, args: SearchArgs) { super(owner, args); - this.searchText = this.args.query; + this.cardSearchText = this.args.cardSearchText; this.sort = this.args.sort; this.resourceType = this.args.resourceType; taskFor(this.search).perform(); @@ -188,7 +191,7 @@ export default class SearchPage extends Component { @waitFor async search() { try { - const cardSearchText = this.searchText; + const cardSearchText = this.cardSearchText; const { page, sort, activeFilters, resourceType } = this; let filterQueryObject = activeFilters.reduce((acc, filter) => { acc[filter.property] = filter.value; @@ -202,21 +205,30 @@ export default class SearchPage extends Component { filterQueryObject = { ...filterQueryObject, ...this.args.defaultQueryOptions }; const searchResult = await this.store.queryRecord('index-card-search', { cardSearchText, - page, + 'page[cursor]': page, sort, cardSearchFilter: filterQueryObject, }); + this.firstPageCursor = searchResult.firstPageCursor; + this.nextPageCursor = searchResult.nextPageCursor; + this.prevPageCursor = searchResult.prevPageCursor; this.propertySearch = await searchResult.relatedPropertySearch; this.searchResults = searchResult.searchResultPage.toArray(); this.totalResultCount = searchResult.totalResultCount; if (this.args.onSearch) { - this.args.onSearch({cardSearchText, sort, resourceType}); + this.args.onSearch({cardSearchText, sort, resourceType, page}); } } catch (e) { this.toast.error(e); } } + @action + switchPage(pageCursor: string) { + this.page = pageCursor; + taskFor(this.search).perform(); + } + @task({ restartable: true }) @waitFor async doDebounceSearch() { @@ -234,18 +246,21 @@ export default class SearchPage extends Component { } else { this.activeFilters.pushObject(filter); } + this.page = ''; taskFor(this.search).perform(); } @action updateSort(sortOption: SortOption) { this.sort = sortOption.value; + this.page = ''; taskFor(this.search).perform(); } @action updateResourceType(resourceTypeOption: ResourceTypeOption) { this.resourceType = resourceTypeOption.value; + this.page = ''; taskFor(this.search).perform(); } } diff --git a/lib/osf-components/addon/components/search-page/styles.scss b/lib/osf-components/addon/components/search-page/styles.scss index 6400a7ecfe..f0eb2e99d0 100644 --- a/lib/osf-components/addon/components/search-page/styles.scss +++ b/lib/osf-components/addon/components/search-page/styles.scss @@ -212,3 +212,7 @@ display: flex; justify-content: space-between; } + +.pagination-buttons { + display: flex; +} diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs index 695ec26015..2c4d484a74 100644 --- a/lib/osf-components/addon/components/search-page/template.hbs +++ b/lib/osf-components/addon/components/search-page/template.hbs @@ -237,6 +237,29 @@ as |layout|>

{{t 'search.no-results'}}

{{/each}} {{/if}} +
+ {{#if this.firstPageCursor}} + + {{/if}} + {{#if this.prevPageCursor}} + + {{/if}} + {{#if this.nextPageCursor}} + + {{/if}} +
{{#if this.showTooltip1}} diff --git a/translations/en-us.yml b/translations/en-us.yml index 0aaf464b0f..1bdc504774 100644 --- a/translations/en-us.yml +++ b/translations/en-us.yml @@ -243,6 +243,9 @@ search: preprints: 'Preprints' files: 'Files' users: 'Users' + first: First + prev: Prev + next: Next sort: sort-by: 'Sort by' relevance: 'Relevance'