Merge pull request #2635 from intersective/2.4.8/CORE-8167/standalone-pagination-completed-review

[CORE-8167] 2.4.8/standalone-pagination-completed-review

Author: trtshen

projects/v3/src/app/components/assessment/assessment.component.html

@@ -478,6 +478,65 @@
         </ion-button>
       </div>
     </app-bottom-action-bar>
+
+    <!-- standalone pagination for completed reviews (bottom action bar hidden) -->
+    <ion-footer class="standalone-pagination-footer"
+      *ngIf="action === 'review'
+        && submission?.status === 'feedback available'
+        && review?.status === 'done'
+        && isPaginationEnabled
+        && pageCount > 1">
+      <div class="pagination-container"
+        [class.few-pages]="pageCount < manyPages">
+        <ion-button fill="clear"
+          class="nav-button prev-button"
+          (click)="prevPage()"
+          [disabled]="pageIndex === 0">
+          <ion-icon name="chevron-back-outline"></ion-icon>
+          <span>Prev</span>
+        </ion-button>
+
+        <div class="page-indicators"
+          [class.many-pages]="pageCount > manyPages"
+          *ngIf="pageCount > 1"
+          #pageIndicatorsContainer>
+          <ng-container *ngFor="let page of pages; trackBy: trackById; let i = index">
+            <div class="page-indicator"
+              [class.active]="pageIndex === page"
+              [class.incompleted]="!pageRequiredCompletion[page]"
+              [id]="'page-indicator-' + page"
+              (click)="goToPage(page)"
+              tabindex="0"
+              role="button"
+              [attr.aria-label]="'Page ' + (i + 1)"
+              (keydown.enter)="goToPage(page)"
+              (keydown.space)="goToPage(page); $event.preventDefault()">
+
+              <div class="progress-ring">
+                <span class="page-number">{{ i + 1 }}</span>
+              </div>
+
+              <ion-icon *ngIf="pageRequiredCompletion[page]"
+                name="checkmark-circle"
+                class="completion-icon completed">
+              </ion-icon>
+              <ion-icon *ngIf="!pageRequiredCompletion[page]"
+                name="close-circle-outline"
+                class="completion-icon">
+              </ion-icon>
+            </div>
+          </ng-container>
+        </div>
+
+        <ion-button fill="clear"
+          class="nav-button next-button"
+          (click)="nextPage()"
+          [disabled]="pageIndex >= pageCount - 1">
+          <span>Next</span>
+          <ion-icon name="chevron-forward-outline"></ion-icon>
+        </ion-button>
+      </div>
+    </ion-footer>
   </ng-container>
 
   <ng-template #blocked>

projects/v3/src/app/components/assessment/assessment.component.scss

@@ -433,15 +433,26 @@ ion-footer {
   }
 }
 
-// space for submit button (mid to large screens)
+// space for submit button (mid to large screens) — only inside bottom-action-bar
 @media (min-width: 769px) and (max-width: 1344px) {
-  .pagination-container {
+  app-bottom-action-bar .pagination-container {
     max-width: calc(100% - 150px);
   }
 }
 
 @media (min-width: 1345px) {
-  .pagination-container {
+  app-bottom-action-bar .pagination-container {
     max-width: calc(100% - 40px);
   }
 }
+
+// standalone pagination footer for completed reviews
+.standalone-pagination-footer {
+  position: sticky;
+  bottom: 0;
+  width: 100%;
+  display: block;
+  border-top: 1px solid var(--ion-color-light-shade);
+  background: var(--ion-color-light);
+  padding: 4px 0;
+}