WEBDEV-6469 Expose property to suppress display of results scroller (#…

…344)

* Expose property to suppress display of results scroller

* Method for adjusting data source paging

* Fix broken unit test

* Add additional unit tests

* Allow setting total result count

src/collection-browser.ts

@@ -128,6 +128,8 @@ export class CollectionBrowser
 
   @property({ type: Boolean }) suppressResultCount = false;
 
+  @property({ type: Boolean }) suppressResultTiles = false;
+
   @property({ type: Boolean }) suppressURLQuery = false;
 
   @property({ type: Boolean }) suppressFacets = false;
@@ -278,7 +280,7 @@ export class CollectionBrowser
   private tileModelOffset = 0;
 
   @query('infinite-scroller')
-  private infiniteScroller!: InfiniteScroller;
+  private infiniteScroller?: InfiniteScroller;
 
   private sessionIdGenPromise?: Promise<string>;
 
@@ -462,7 +464,6 @@ export class CollectionBrowser
         .detailMessage=${this.dataSource.queryErrorMessage ?? ''}
         .baseNavigationUrl=${this.baseNavigationUrl}
       ></empty-placeholder>
-      ${this.infiniteScrollerTemplate}
     `;
   }
 
@@ -575,7 +576,7 @@ export class CollectionBrowser
         ${this.displayMode === `list-compact`
           ? this.listHeaderTemplate
           : nothing}
-        ${this.infiniteScrollerTemplate}
+        ${this.suppressResultTiles ? nothing : this.infiniteScrollerTemplate}
       </div>
     `;
   }

src/data-source/collection-browser-data-source-interface.ts

@@ -152,11 +152,22 @@ export interface CollectionBrowserDataSourceInterface
   /**
    * Adds the given page of tile models to the data source.
    * If the given page number already exists, that page will be overwritten.
+   * This method expects that the provided tiles already fit the configured page size; it
+   * will not split them into multiple pages.
    * @param pageNum Which page number to add (indexed starting from 1)
    * @param pageTiles The array of tile models for the new page
    */
   addPage(pageNum: number, pageTiles: TileModel[]): void;
 
+  /**
+   * Adds all of the given pages of tile models to the data source, splitting them into
+   * multiple pages according to the configured page size if necessary. Any pages that
+   * have tiles added by this method will have any existing content overwritten.
+   * @param firstPageNum Which page number to start adding pages from (pages are indexed starting from 1)
+   * @param tiles The full array of tile models to add across one or more pages
+   */
+  addMultiplePages(firstPageNum: number, tiles: TileModel[]): void;
+
   /**
    * Returns the given page of tile models from the data source.
    * @param pageNum Which page number to get (indexed starting from 1)
@@ -232,6 +243,12 @@ export interface CollectionBrowserDataSourceInterface
    */
   setPageSize(pageSize: number): void;
 
+  /**
+   * Sets the total result count for this data source to the given value.
+   * @param count The number of total results to set
+   */
+  setTotalResultCount(count: number): void;
+
   /**
    * Sets whether this data source should suppress further data fetches, i.e. ignore any
    * future query changes on its host that would trigger a page/facet fetch.

src/data-source/collection-browser-data-source.ts

@@ -230,14 +230,13 @@ export class CollectionBrowserDataSource
 
     this.offset = 0;
     this.numTileModels = 0;
-    this.totalResults = 0;
     this.endOfDataReached = false;
     this.queryInitialized = false;
 
     // Invalidate any fetches in progress
     this.fetchesInProgress.clear();
 
-    if (this.activeOnHost) this.host.setTotalResultCount(0);
+    this.setTotalResultCount(0);
     this.requestHostUpdate();
   }
 
@@ -250,6 +249,28 @@ export class CollectionBrowserDataSource
     this.requestHostUpdate();
   }
 
+  /**
+   * @inheritdoc
+   */
+  addMultiplePages(firstPageNum: number, tiles: TileModel[]): void {
+    const numPages = Math.ceil(tiles.length / this.pageSize);
+    for (let i = 0; i < numPages; i += 1) {
+      const pageStartIndex = this.pageSize * i;
+      this.addPage(
+        firstPageNum + i,
+        tiles.slice(pageStartIndex, pageStartIndex + this.pageSize)
+      );
+    }
+
+    const visiblePages = this.host.currentVisiblePageNumbers;
+    const needsReload = visiblePages.some(
+      page => page >= firstPageNum && page <= firstPageNum + numPages
+    );
+    if (needsReload) {
+      this.refreshVisibleResults();
+    }
+  }
+
   /**
    * @inheritdoc
    */
@@ -302,6 +323,16 @@ export class CollectionBrowserDataSource
     this.pageSize = pageSize;
   }
 
+  /**
+   * @inheritdoc
+   */
+  setTotalResultCount(count: number): void {
+    this.totalResults = count;
+    if (this.activeOnHost) {
+      this.host.setTotalResultCount(count);
+    }
+  }
+
   /**
    * @inheritdoc
    */
@@ -984,14 +1015,10 @@ export class CollectionBrowserDataSource
       return;
     }
 
-    this.totalResults = success.response.totalResults - this.offset;
-    if (this.activeOnHost) {
-      this.host.setTotalResultCount(this.totalResults);
-
+    this.setTotalResultCount(success.response.totalResults - this.offset);
+    if (this.activeOnHost && this.totalResults === 0) {
       // display event to offshoot when result count is zero.
-      if (this.totalResults === 0) {
-        this.host.emitEmptyResults();
-      }
+      this.host.emitEmptyResults();
     }
 
     if (this.host.withinCollection) {
@@ -1035,7 +1062,7 @@ export class CollectionBrowserDataSource
       }
       for (let i = 0; i < numPages; i += 1) {
         const pageStartIndex = this.pageSize * i;
-        this.addTilesToDataSource(
+        this.addFetchedResultsToDataSource(
           pageNumber + i,
           results.slice(pageStartIndex, pageStartIndex + this.pageSize)
         );
@@ -1061,7 +1088,7 @@ export class CollectionBrowserDataSource
    * @param pageNumber
    * @param results
    */
-  private addTilesToDataSource(
+  private addFetchedResultsToDataSource(
     pageNumber: number,
     results: SearchResult[]
   ): void {

test/collection-browser.test.ts

@@ -1816,14 +1816,62 @@ describe('Collection Browser', () => {
     expect(el.isManageView).to.be.false;
   });
 
-  it('loans-tab sort-filter-bar', async () => {
+  it('applies loans tab properties to sort bar', async () => {
+    const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser .baseNavigationUrl=${''} .isLoansTab=${true}>
+      html`<collection-browser
+        .baseNavigationUrl=${''}
+        .searchService=${searchService}
+        .isLoansTab=${true}
+      >
       </collection-browser>`
     );
-    const loansTabSlot = el?.shadowRoot?.querySelector('slot');
 
-    expect(el.isLoansTab).to.equal(true);
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
+    const sortBar = el.shadowRoot?.querySelector(
+      'sort-filter-bar'
+    ) as SortFilterBar;
+    expect(sortBar?.showLoansTopBar, 'show loans in sort bar').to.be.true;
+    expect(el.isLoansTab, 'collection browser is loans tab').to.be.true;
+
+    const loansTabSlot = sortBar.querySelector(
+      'slot[name="loans-tab-filter-bar-options-slot"]'
+    );
     expect(loansTabSlot).to.exist;
   });
+
+  it('can suppress presence of result count', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        suppressResultCount
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const resultCount = el.shadowRoot?.querySelector('#results-total');
+    expect(resultCount).not.to.exist;
+  });
+
+  it('can suppress presence of result tiles', async () => {
+    const searchService = new MockSearchService();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser
+        .searchService=${searchService}
+        suppressResultTiles
+      ></collection-browser>`
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
+    const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
+    expect(infiniteScroller).not.to.exist;
+  });
 });

test/data-source/collection-browser-data-source.test.ts

@@ -44,6 +44,20 @@ describe('Collection Browser Data Source', () => {
     expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
   });
 
+  it('can add data split across multiple pages', () => {
+    const dataSource = new CollectionBrowserDataSource(host, 3);
+    const doubledDataPage = [...dataPage, ...dataPage];
+    dataSource.addMultiplePages(1, doubledDataPage);
+
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(2);
+    expect(dataSource.getPage(1).length).to.equal(3);
+    expect(dataSource.getPage(2).length).to.equal(1);
+    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
+    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
+    expect(dataSource.getPage(1)[2].identifier).to.equal('foo');
+    expect(dataSource.getPage(2)[0].identifier).to.equal('bar');
+  });
+
   it('resets data when changing page size', () => {
     const dataSource = new CollectionBrowserDataSource(host);
     dataSource.addPage(1, dataPage);