Contribution dashboard admin change: Add overall item count to contributor dashboard admin stats table

core/templates/pages/contributor-dashboard-admin-page/contributor-dashboard-tables/contributor-admin-stats-table.component.html

@@ -17,7 +17,7 @@ <h2>{{ noDataMessage }}</h2>
   </div>
   <div class="dashboard-list-header" *ngIf="!loadingMessage && !noDataMessage && isMobileView()">
     <div class="dashboard-list-header-count">
-      <span>Displaying {{ statsPageNumber * itemsPerPage + 1 }} - {{ getUpperLimitValueForPagination() }} of many</span>
+      <span>Displaying {{ getDisplayedIndexOfFirstItemOnPage() }} - {{ getIndexOfLastItemOnPage() }} of {{getOverallItemCount()}}</span>
     </div>
     <div class="results-per-page-div">
       <span>Results per page: </span>
@@ -27,7 +27,7 @@ <h2>{{ noDataMessage }}</h2>
     </div>
   </div>
   <table mat-table
-         [dataSource]="dataSource"
+         [dataSource]="displayStatsForCurrentPage()"
          multiTemplateDataRows
          [class.isMobile]="true"
          class="mat-elevation-z8 e2e-test-stats-table"
@@ -171,20 +171,20 @@ <h2>{{ noDataMessage }}</h2>
   </table>
   <div class="dashboard-list-footer" *ngIf="!loadingMessage && !noDataMessage && !isMobileView()">
     <div class="dashboard-list-footer-count">
-      <span>Displaying {{ statsPageNumber * itemsPerPage + 1 }} - {{ getUpperLimitValueForPagination() }} of many</span>
+      <span>Displaying {{ getDisplayedIndexOfFirstItemOnPage() }} - {{ getIndexOfLastItemOnPage() }} of {{getOverallItemCount()}}</span>
     </div>
     <div class="dashboard-list-pagination">
       <div>
         <i class="fa fa-angle-left stats-pagination-arrow" (click)="navigatePage(MOVE_TO_PREV_PAGE)" *ngIf="statsPageNumber > 0"></i>
         <span class="dashboard-list-pagination-value">
           <span class="dashboard-list-pagination-active">{{ statsPageNumber + 1 }}</span>
         </span>
-        <i class="fa fa-angle-right stats-pagination-arrow" (click)="navigatePage(MOVE_TO_NEXT_PAGE)" *ngIf="more"></i>
+        <i class="fa fa-angle-right stats-pagination-arrow" (click)="navigatePage(MOVE_TO_NEXT_PAGE)" *ngIf="tableCanShowMoreItems"></i>
       </div>
       <div>
         <span>Results per page: </span>
-        <select [(ngModel)]="itemsPerPage" aria-label="Results Per Page" (change)="refreshPagination()">
-          <option *ngFor="let choice of itemsPerPageChoice" [value]="choice" >{{ choice }}</option>
+        <select [value]="itemsPerPage" aria-label="Results Per Page" (change)="onItemsPerPageChange($event.target.value); refreshPagination()">
+          <option *ngFor="let choice of itemsPerPageChoice" [value]="choice">{{ choice }}</option>
         </select>
       </div>
     </div>
@@ -195,7 +195,7 @@ <h2>{{ noDataMessage }}</h2>
       <span class="dashboard-list-pagination-value">
         <span class="dashboard-list-pagination-active">{{ statsPageNumber + 1 }}</span>
       </span>
-      <i class="fa fa-angle-right stats-pagination-arrow" (click)="navigatePage(MOVE_TO_NEXT_PAGE)" *ngIf="more"></i>
+      <i class="fa fa-angle-right stats-pagination-arrow" (click)="navigatePage(MOVE_TO_NEXT_PAGE)" *ngIf="tableCanShowMoreItems"></i>
     </div>
   </div>
 </div>

core/templates/pages/contributor-dashboard-admin-page/contributor-dashboard-tables/contributor-admin-stats-table.component.spec.ts

@@ -49,6 +49,15 @@ import {
 } from '../contributor-dashboard-admin-summary.model';
 
 describe('Contributor stats component', () => {
+  const createQuestionReviewerStats = function createQuestionReviewerStats(
+    numStats: number
+  ): QuestionReviewerStats[] {
+    let stats: QuestionReviewerStats[] = [];
+    for (let i = 0; i < numStats; i++) {
+      stats.push(questionReviewerStats);
+    }
+    return stats;
+  };
   let component: ContributorAdminStatsTable;
   let fixture: ComponentFixture<ContributorAdminStatsTable>;
   let $window: WindowRef;
@@ -192,7 +201,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_TRANSLATION_SUBMITTER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'chevron',
@@ -226,7 +235,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_TRANSLATION_REVIEWER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'chevron',
@@ -258,7 +267,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_QUESTION_SUBMITTER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'chevron',
@@ -269,6 +278,7 @@ describe('Contributor stats component', () => {
         'lastContributedInDays',
         'role',
       ]);
+      expect(component.getOverallItemCount()).toEqual('1');
     }));
 
     it('should show question reviewer stats', fakeAsync(() => {
@@ -279,7 +289,7 @@ describe('Contributor stats component', () => {
         Promise.resolve({
           stats: [questionReviewerStats],
           nextOffset: 1,
-          more: false,
+          more: true,
         } as QuestionReviewerStatsData)
       );
       const changes: SimpleChanges = {
@@ -292,7 +302,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_QUESTION_REVIEWER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'chevron',
@@ -301,16 +311,64 @@ describe('Contributor stats component', () => {
         'lastContributedInDays',
         'role',
       ]);
+      expect(component.getOverallItemCount()).toEqual('1+');
     }));
 
-    it('should check for upperlimit for pagination', fakeAsync(() => {
-      component.dataSource = [];
-      component.statsPageNumber = 1;
+    it(
+      'should index last item on page as "overall item count" when ' +
+        '"current page\'s cumulative item count"' +
+        ' exceeds "overall item count".',
+      fakeAsync(() => {
+        component.statsPageNumber = 1;
+        component.itemsPerPage = 4;
+        fixture.detectChanges();
+        component.allStats = createQuestionReviewerStats(3);
+        expect(component.getIndexOfLastItemOnPage()).toEqual(3);
+      })
+    );
+
+    it(
+      'should index last item on page as "current page\'s ' +
+        'cumulative item count" when "overall item count"' +
+        ' exceeds "current page\'s cumulative item count".',
+      fakeAsync(() => {
+        component.statsPageNumber = 1;
+        component.itemsPerPage = 1;
+        fixture.detectChanges();
+        component.allStats = createQuestionReviewerStats(3);
+        expect(component.getIndexOfLastItemOnPage()).toEqual(2);
+      })
+    );
+
+    it('should retrieve the index of the first item on the page', fakeAsync(() => {
+      component.statsPageNumber = 2;
       component.itemsPerPage = 3;
+      expect(component.getDisplayedIndexOfFirstItemOnPage()).toEqual(7);
+    }));
+
+    it('should show the overall item count from the number of items', fakeAsync(() => {
+      component.statsPageNumber = 1;
+      component.itemsPerPage = 1;
       fixture.detectChanges();
-      expect(component.getUpperLimitValueForPagination()).toEqual(3);
+      component.allStats = createQuestionReviewerStats(3);
+      expect(component.getOverallItemCount()).toEqual(
+        component.allStats.length.toString()
+      );
     }));
 
+    it(
+      'should show a "+" at the end of the overall item count when ' +
+        'the number of items exceeds max expected',
+      fakeAsync(() => {
+        component.statsPageNumber = 1;
+        component.itemsPerPage = 1;
+        component.tableHasMoreThanMaximumExpectedItems = true;
+        fixture.detectChanges();
+        component.allStats = createQuestionReviewerStats(1000);
+        expect(component.getOverallItemCount()).toEqual('1000+');
+      })
+    );
+
     it('should navigate to next page', fakeAsync(() => {
       const goToSpy = spyOn(component, 'goToPageNumber');
       component.statsPageNumber = 1;
@@ -357,7 +415,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_TRANSLATION_SUBMITTER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'contributorName',
@@ -391,7 +449,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_TRANSLATION_REVIEWER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'contributorName',
@@ -423,7 +481,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_QUESTION_SUBMITTER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'contributorName',
@@ -457,7 +515,7 @@ describe('Contributor stats component', () => {
       };
       component.inputs.activeTab = component.TAB_NAME_QUESTION_REVIEWER;
       component.ngOnChanges(changes);
-      component.updateColumnsToDisplay();
+      component.displayContributorAdminStats();
       tick();
       expect(component.columnsToDisplay).toEqual([
         'contributorName',
@@ -844,5 +902,47 @@ describe('Contributor stats component', () => {
       activeTab = component.TAB_NAME_QUESTION_REVIEWER;
       expect(component.getContributionCount(activeTab, 1, 2, 3, 4)).toEqual(4);
     }));
+
+    it('should convert the items per page dropdown back into numbers', fakeAsync(() => {
+      component.onItemsPerPageChange('05');
+      expect(component.itemsPerPage).toEqual(5);
+    }));
+  });
+
+  describe('when more than one page of stats are returned', () => {
+    it('should show data on multiple pages', fakeAsync(() => {
+      let allQuestionReviewerStats: QuestionReviewerStats[] =
+        createQuestionReviewerStats(30);
+
+      spyOn(
+        contributorDashboardAdminStatsBackendApiService,
+        'fetchContributorAdminStats'
+      ).and.returnValue(
+        Promise.resolve({
+          stats: allQuestionReviewerStats,
+          nextOffset: 1,
+          more: false,
+        } as QuestionReviewerStatsData)
+      );
+      const changes: SimpleChanges = {
+        activeTab: {
+          currentValue: component.TAB_NAME_QUESTION_REVIEWER,
+          previousValue: component.TAB_NAME_QUESTION_SUBMITTER,
+          firstChange: false,
+          isFirstChange: () => false,
+        },
+      };
+      component.inputs.activeTab = component.TAB_NAME_QUESTION_REVIEWER;
+      component.ngOnChanges(changes);
+
+      tick();
+      expect(component.getOverallItemCount()).toEqual('30');
+      expect(component.displayStatsForCurrentPage().length).toEqual(20);
+      expect(component.tableCanShowMoreItems).toEqual(true);
+
+      component.goToPageNumber(1);
+      expect(component.displayStatsForCurrentPage().length).toEqual(10);
+      expect(component.tableCanShowMoreItems).toEqual(false);
+    }));
   });
 });