[CORE-7865] 2.4.y/pulse check pagination

projects/v3/src/app/components/fast-feedback/fast-feedback.component.html

@@ -1,7 +1,10 @@
-<ion-header class=" ion-no-border" aria-label="Pulse check">
+<ion-header class=" ion-no-border"
+  aria-label="Pulse check">
   <ion-toolbar>
-    <ion-title class="ion-text-center" i18n="user feedback form">Pulse Check</ion-title>
-    <ion-buttons slot="end" *ngIf="closable === true">
+    <ion-title class="ion-text-center"
+      i18n="user feedback form">Pulse Check</ion-title>
+    <ion-buttons slot="end"
+      *ngIf="closable === true">
       <ion-button (click)="dismiss({ from: 'ui' })">
         <ion-icon name="close"></ion-icon>
       </ion-button>
@@ -12,18 +15,22 @@
 <ion-content class="ion-padding">
   <div class="ion-text-center ion-margin-bottom">
     <ng-container *ngIf="isSkillsPulseCheck; else defaultPulseCheck">
-      <p class="body-1" i18n>Select the skill level that best describes you right now.</p>
+      <p class="body-1"
+        i18n>Select the skill level that best describes you right now.</p>
     </ng-container>
     <ng-template #defaultPulseCheck>
-      <p class="body-1" i18n>
+      <p class="body-1"
+        i18n>
         Please help us to improve your experience.<br>
         We want to know how are you doing.
       </p>
     </ng-template>
   </div>
 
-  <form (ngSubmit)="submit()" [formGroup]="fastFeedbackForm">
-    <div *ngIf="showPagination" class="progress-indicator ion-text-center ion-margin-bottom">
+  <form (ngSubmit)="submit()"
+    [formGroup]="fastFeedbackForm">
+    <div *ngIf="showPagination"
+      class="progress-indicator ion-text-center ion-margin-bottom">
       <span>Questions {{ currentPageRange.start }}-{{ currentPageRange.end }} of {{ currentPageRange.total }}</span>
       <ion-progress-bar [value]="(currentPage + 1) / totalPages"></ion-progress-bar>
     </div>
@@ -37,67 +44,70 @@
             <h2 [innerHTML]="question.name"></h2>
             <p><i [innerHTML]="question.description"></i></p>
           </ion-label>
-          <ion-text class="required-mark" [ngClass]="{'contrast': isRedColor}" *ngIf="question.isRequired">*</ion-text>
+          <ion-text class="required-mark"
+            [ngClass]="{'contrast': isRedColor}"
+            *ngIf="question.isRequired">*</ion-text>
         </ion-list-header>
 
-        <ion-radio-group [formControlName]="question.id" class="ion-padding-start ion-padding-end ion-padding-bottom">
+        <ion-radio-group [formControlName]="question.id"
+          class="ion-padding-start ion-padding-end ion-padding-bottom">
           <ion-item class="item-bottom-border choice-item"
             *ngFor="let choice of question.choices"
             lines="none"
             [ngClass]="{'mobile-choice': isMobile}"
             (mouseenter)="onChoiceHover(question.id, choice.id)"
             (mouseleave)="onChoiceLeave()"
             (focus)="onChoiceHover(question.id, choice.id)"
-            (blur)="onChoiceLeave()"
-          >
+            (blur)="onChoiceLeave()">
             <ion-radio [value]="choice.id"
               [attr.aria-label]="choice.name"
               labelPlacement="end"
-              slot="start" mode="md">
+              slot="start"
+              mode="md">
               <div class="choice-title-container">
                 <span [innerHTML]="choice.name"></span>
               </div>
               <p *ngIf="choice.description && isChoiceDescriptionVisible(question.id, choice.id)"
-                 class="choice-description body-3 ion-margin-top animate-fade-in"
-                 [innerHTML]="choice.description"></p>
+                class="choice-description body-3 ion-margin-top animate-fade-in"
+                [innerHTML]="choice.description"></p>
             </ion-radio>
           </ion-item>
         </ion-radio-group>
       </ion-card>
 
-      <div *ngIf="showPagination" class="navigation-buttons ion-margin-top">
+      <div *ngIf="showPagination"
+        class="navigation-buttons ion-margin-top">
         <ion-row>
-          <ion-col size="6" class="ion-text-left">
-            <ion-button
-              fill="outline"
+          <ion-col size="6"
+            class="ion-text-left">
+            <ion-button fill="outline"
               [disabled]="currentPage === 0"
               (click)="previousPage()"
-              mode="ios"
-            >
-              <ion-icon name="arrow-back-outline" slot="start"></ion-icon>
+              mode="ios">
+              <ion-icon name="arrow-back-outline"
+                slot="start"></ion-icon>
               Previous
             </ion-button>
           </ion-col>
-          <ion-col size="6" class="ion-text-right">
-            <ion-button
-              fill="outline"
+          <ion-col size="6"
+            class="ion-text-right">
+            <ion-button fill="outline"
               *ngIf="currentPage < totalPages - 1"
               [disabled]="!isCurrentPageValid()"
               (click)="nextPage()"
-              mode="ios"
-            >
+              mode="ios">
               Next
-              <ion-icon name="arrow-forward-outline" slot="end"></ion-icon>
+              <ion-icon name="arrow-forward-outline"
+                slot="end"></ion-icon>
             </ion-button>
-            <ion-button
-              mode="ios"
+            <ion-button mode="ios"
               type="submit"
               shape="round"
               class="submit-button"
               *ngIf="currentPage === totalPages - 1"
-              [disabled]="fastFeedbackForm.invalid || loading"
-            >
-              <ng-container *ngIf="!loading" i18n>Submit</ng-container>
+              [disabled]="fastFeedbackForm.invalid || loading">
+              <ng-container *ngIf="!loading"
+                i18n>Submit</ng-container>
               <ng-container *ngIf="loading && !submissionCompleted">
                 <ion-spinner name="dots"></ion-spinner>
               </ng-container>
@@ -109,15 +119,15 @@ <h2 [innerHTML]="question.name"></h2>
         </ion-row>
       </div>
 
-      <div *ngIf="!showPagination" class="ion-text-center ion-margin-top">
-        <ion-button
-          mode="ios"
+      <div *ngIf="!showPagination"
+        class="ion-text-center ion-margin-top">
+        <ion-button mode="ios"
           type="submit"
           shape="round"
           class="submit-button"
-          [disabled]="fastFeedbackForm.invalid || loading"
-        >
-          <ng-container *ngIf="!loading" i18n>Submit</ng-container>
+          [disabled]="fastFeedbackForm.invalid || loading">
+          <ng-container *ngIf="!loading"
+            i18n>Submit</ng-container>
           <ng-container *ngIf="loading && !submissionCompleted">
             <ion-spinner name="dots"></ion-spinner>
           </ng-container>
@@ -127,15 +137,14 @@ <h2 [innerHTML]="question.name"></h2>
         </ion-button>
       </div>
 
-      <div *ngIf="showPagination" class="dot-indicators ion-text-center ion-margin-top">
-        <ion-button
-          *ngFor="let i of [].constructor(totalPages); let pageIndex = index"
+      <div *ngIf="showPagination"
+        class="dot-indicators ion-text-center ion-margin-top">
+        <ion-button *ngFor="let i of [].constructor(totalPages); let pageIndex = index"
           fill="clear"
           size="small"
           class="dot-button"
           [ngClass]="{'active': currentPage === pageIndex, 'completed': isPageCompleted(pageIndex)}"
-          (click)="goToPage(pageIndex)"
-        >
+          (click)="goToPage(pageIndex)">
           <span class="page-number">
             <ng-container *ngIf="currentPage === pageIndex">{{ pageIndex + 1 }}</ng-container>
             <ng-container *ngIf="currentPage !== pageIndex && isPageCompleted(pageIndex)">
@@ -148,4 +157,4 @@ <h2 [innerHTML]="question.name"></h2>
     </div>
   </form>
 
-</ion-content>
+</ion-content>

projects/v3/src/app/components/fast-feedback/fast-feedback.component.scss

@@ -161,7 +161,84 @@ ion-item {
 
 .question-card {
   border-radius: 8px;
-  padding: 1em;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  padding: 0;
+  margin-bottom: 16px;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+// pagination
+.progress-indicator {
+  margin-bottom: 20px;
+
+  span {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: var(--ion-color-medium);
+  }
+
+  ion-progress-bar {
+    height: 6px;
+    border-radius: 3px;
+    overflow: hidden;
+  }
+}
+
+.navigation-buttons {
+  ion-button {
+    min-width: 110px;
+  }
+}
+
+.dot-indicators {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 15px 0;
+  flex-wrap: wrap;
+
+  .dot-button {
+    width: 40px;
+    height: 40px;
+    --padding-start: 0;
+    --padding-end: 0;
+    margin: 0 5px;
+
+    &.active ion-icon {
+      font-size: 20px;
+      color: var(--ion-color-primary);
+    }
+
+    &.completed ion-icon {
+      color: var(--ion-color-success);
+      font-size: 18px;
+    }
+
+    ion-icon {
+      font-size: 16px;
+      color: var(--ion-color-medium);
+    }
+  }
+}
+
+.submit-button {
+  min-width: 110px;
+}
+
+.questions-container {
+  position: relative;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes descriptionFadeIn {

projects/v3/src/app/components/fast-feedback/fast-feedback.component.ts

@@ -145,6 +145,17 @@ export class FastFeedbackComponent implements OnInit {
   }
 
   async submit(): Promise<any> {
+    if (!this.allQuestionsAnswered) {
+      // If not all questions are answered, navigate to the first incomplete page
+      for (let i = 0; i < this.totalPages; i++) {
+        if (!this.isPageCompleted(i)) {
+          this.goToPage(i);
+          return;
+        }
+      }
+      return;
+    }
+
     this.loading = true;
     const formData = this.fastFeedbackForm.value;
     const answers = [];
@@ -205,7 +216,6 @@ export class FastFeedbackComponent implements OnInit {
   }
 
   dismiss(data) {
-    // change the flag to false
     this.storage.set("fastFeedbackOpening", false);
     this.modalController.dismiss(data);
     this.homeService.getPulseCheckStatuses().subscribe();