From 1d40661823f194e478928dd1adde7a19fa469d49 Mon Sep 17 00:00:00 2001 From: Yuhuai Liu Date: Fri, 11 Aug 2023 10:19:18 -0400 Subject: [PATCH 1/8] setting up pagination --- app/adapters/index-card-search.ts | 8 ++++++++ app/models/index-card-search.ts | 12 ++++++++++++ app/search/controller.ts | 4 +++- app/search/template.hbs | 3 ++- .../addon/components/search-page/component.ts | 15 ++++++++++----- .../addon/components/search-page/styles.scss | 4 ++++ .../addon/components/search-page/template.hbs | 15 +++++++++++++++ translations/en-us.yml | 3 +++ 8 files changed, 57 insertions(+), 7 deletions(-) diff --git a/app/adapters/index-card-search.ts b/app/adapters/index-card-search.ts index c30f0c6912..fec5b12bf5 100644 --- a/app/adapters/index-card-search.ts +++ b/app/adapters/index-card-search.ts @@ -3,6 +3,14 @@ export default class IndexCardSearchAdapter extends ShareAdapter { pathForType() { return 'index-card-search'; } + + urlForQueryRecord(queryParams: any, modelName: any) { + if (!queryParams.page) { + return super.urlForQueryRecord(queryParams, modelName); + } else { + return queryParams.page; + } + } } declare module 'ember-data/types/registries/adapter' { diff --git a/app/models/index-card-search.ts b/app/models/index-card-search.ts index 65bfa3b9e6..bc2475c8ce 100644 --- a/app/models/index-card-search.ts +++ b/app/models/index-card-search.ts @@ -19,6 +19,18 @@ export default class IndexCardSearchModel extends Model { @belongsTo('index-property-search', { inverse: null }) relatedPropertySearch!: AsyncBelongsTo & IndexPropertySearchModel; + + get firstPage() { + return this.searchResultPage.links.first.href; + } + + get prevPage() { + return this.searchResultPage.links.prev.href; + } + + get nextPage() { + return this.searchResultPage.links.next.href; + } } 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..9ccc4c7a26 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,15 @@ 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; 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 +188,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; @@ -217,6 +217,11 @@ export default class SearchPage extends Component { } } + async switchPage(page: string) { + this.page = page; + taskFor(this.search).perform(); + } + @task({ restartable: true }) @waitFor async doDebounceSearch() { 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 d0d2819916..10f7c2a583 100644 --- a/lib/osf-components/addon/components/search-page/template.hbs +++ b/lib/osf-components/addon/components/search-page/template.hbs @@ -234,6 +234,21 @@ as |layout|>

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

{{/each}} {{/if}} + {{#each this.searchResults as |item|}} + + {{/each}} +
+ + + +
{{#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' From af47866cbd6032bd0914e124e3d197571f226ad7 Mon Sep 17 00:00:00 2001 From: Yuhuai Liu Date: Mon, 14 Aug 2023 15:27:33 -0400 Subject: [PATCH 2/8] finish adding pagination --- app/adapters/index-card-search.ts | 8 ----- app/models/index-card-search.ts | 27 ++++++++++++---- .../addon/components/search-page/component.ts | 15 ++++++--- .../addon/components/search-page/template.hbs | 31 +++++++++++++------ 4 files changed, 53 insertions(+), 28 deletions(-) diff --git a/app/adapters/index-card-search.ts b/app/adapters/index-card-search.ts index fec5b12bf5..c30f0c6912 100644 --- a/app/adapters/index-card-search.ts +++ b/app/adapters/index-card-search.ts @@ -3,14 +3,6 @@ export default class IndexCardSearchAdapter extends ShareAdapter { pathForType() { return 'index-card-search'; } - - urlForQueryRecord(queryParams: any, modelName: any) { - if (!queryParams.page) { - return super.urlForQueryRecord(queryParams, modelName); - } else { - return queryParams.page; - } - } } declare module 'ember-data/types/registries/adapter' { diff --git a/app/models/index-card-search.ts b/app/models/index-card-search.ts index bc2475c8ce..67cb74dada 100644 --- a/app/models/index-card-search.ts +++ b/app/models/index-card-search.ts @@ -20,16 +20,31 @@ export default class IndexCardSearchModel extends Model { @belongsTo('index-property-search', { inverse: null }) relatedPropertySearch!: AsyncBelongsTo & IndexPropertySearchModel; - get firstPage() { - return this.searchResultPage.links.first.href; + get firstPageCursor() { + if (this.searchResultPage.links.first) { + const firstPageLinkUrl = new URL(this.searchResultPage.links.first?.href); + const firstPageLinkQueryParams = new URLSearchParams(firstPageLinkUrl.search); + return firstPageLinkQueryParams.get('page[cursor]'); + } + return null; } - get prevPage() { - return this.searchResultPage.links.prev.href; + get prevPageCursor() { + if (this.searchResultPage.links.prev) { + const prevPageLinkUrl = new URL(this.searchResultPage.links.prev?.href); + const prevPageLinkQueryParams = new URLSearchParams(prevPageLinkUrl.search); + return prevPageLinkQueryParams.get('page[cursor]'); + } + return null; } - get nextPage() { - return this.searchResultPage.links.next.href; + get nextPageCursor() { + if (this.searchResultPage.links.next) { + const nextPageLinkUrl = new URL(this.searchResultPage.links.next?.href); + const nextPageLinkQueryParams = new URLSearchParams(nextPageLinkUrl.search); + return nextPageLinkQueryParams.get('page[cursor]'); + } + return null; } } diff --git a/lib/osf-components/addon/components/search-page/component.ts b/lib/osf-components/addon/components/search-page/component.ts index 9ccc4c7a26..9d36103c59 100644 --- a/lib/osf-components/addon/components/search-page/component.ts +++ b/lib/osf-components/addon/components/search-page/component.ts @@ -74,6 +74,9 @@ export default class SearchPage extends Component { @tracked propertySearch?: IndexPropertySearchModel; @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); @@ -202,23 +205,27 @@ 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); } } - async switchPage(page: string) { - this.page = page; + @action + switchPage(pageCursor: string) { + this.page = pageCursor; taskFor(this.search).perform(); } diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs index 10f7c2a583..b414f6785f 100644 --- a/lib/osf-components/addon/components/search-page/template.hbs +++ b/lib/osf-components/addon/components/search-page/template.hbs @@ -238,16 +238,27 @@ as |layout|> {{/each}}
- - - + {{#if this.firstPageCursor}} + + {{/if}} + {{#if this.prevPageCursor}} + + {{/if}} + {{#if this.nextPageCursor}} + + {{/if}}
From f8ca81283ef5a7c0ab6c53b415551516024c6d57 Mon Sep 17 00:00:00 2001 From: Yuhuai Liu Date: Mon, 14 Aug 2023 15:34:09 -0400 Subject: [PATCH 3/8] fix --- lib/osf-components/addon/components/search-page/template.hbs | 3 --- 1 file changed, 3 deletions(-) diff --git a/lib/osf-components/addon/components/search-page/template.hbs b/lib/osf-components/addon/components/search-page/template.hbs index b414f6785f..e90c4616c4 100644 --- a/lib/osf-components/addon/components/search-page/template.hbs +++ b/lib/osf-components/addon/components/search-page/template.hbs @@ -234,9 +234,6 @@ as |layout|>

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

{{/each}} {{/if}} - {{#each this.searchResults as |item|}} - - {{/each}}
{{#if this.firstPageCursor}}