Add pagination (#1929)

* setting up pagination

* finish adding pagination

* fix

* another fix

* reset page on updateSort and toggleFilter

* fix tests

* fix typo

* simplify the way we get page cursor

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> & 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' {

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;
     }
 }

app/search/template.hbs

@@ -2,10 +2,11 @@
 
 <SearchPage
     @route='search'
-    @query={{this.q}}
+    @cardSearchText={{this.cardSearchText}}
     @queryParams={{this.queryParams}}
     @onSearch={{action this.onSearch}}
     @showResourceTypeFilter={{true}}
     @sort={{this.sort}}
     @resourceType={{this.resourceType}}
+    @page={{this.page}}
 />

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<string, string>;
     provider?: ProviderModel;
     showResourceTypeFilter: boolean;
+    page: string;
 }
 
 const searchDebounceTime = 100;
@@ -69,15 +69,18 @@ export default class SearchPage extends Component<SearchArgs> {
     @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<SearchArgs> {
     @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<SearchArgs> {
             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<SearchArgs> {
         } 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();
     }
 }

lib/osf-components/addon/components/search-page/styles.scss

@@ -212,3 +212,7 @@
     display: flex;
     justify-content: space-between;
 }
+
+.pagination-buttons {
+    display: flex;
+}

lib/osf-components/addon/components/search-page/template.hbs

@@ -237,6 +237,29 @@ as |layout|>
                 <p local-class='no-results'>{{t 'search.no-results'}}</p>
             {{/each}}
         {{/if}}
+        <div local-class='pagination-buttons'>
+            {{#if this.firstPageCursor}}
+                <Button
+                    {{on 'click' (fn this.switchPage this.firstPageCursor)}}
+                >
+                    {{t 'search.first'}}
+                </Button>
+            {{/if}}
+            {{#if this.prevPageCursor}}
+                <Button
+                    {{on 'click' (fn this.switchPage this.prevPageCursor)}}
+                >
+                    {{t 'search.prev'}}
+                </Button>
+            {{/if}}
+            {{#if this.nextPageCursor}}
+                <Button
+                    {{on 'click' (fn this.switchPage this.nextPageCursor)}}
+                >
+                    {{t 'search.next'}}
+                </Button>
+            {{/if}}
+        </div>
     </layout.main>
 </OsfLayout>
 {{#if this.showTooltip1}}

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'