feat(wizard): allow pages to be marked as completed (#701)

Finastra · May 4, 2022 · aff4d73 · aff4d73
1 parent 26fd2c8
commit aff4d73
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 34 deletions.
diff --git a/apps/angular-test-app/src/app/components/wizard-demo/wizard-demo.component.html b/apps/angular-test-app/src/app/components/wizard-demo/wizard-demo.component.html
@@ -20,44 +20,40 @@
       <ng-template uxgWizardPageDescription> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ng-template>
       <div>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum tincidunt urna, quis iaculis dui
-          consequat sed. Integer tincidunt volutpat luctus. Nunc sed hendrerit odio. Quisque sagittis tellus neque, a
-          sagittis justo rhoncus eget. Proin at est ac lorem fringilla sollicitudin. Duis non nulla lectus. Suspendisse
-          facilisis augue ut leo lobortis, eu iaculis nunc faucibus. Proin et sollicitudin dolor. Pellentesque
-          condimentum nibh vehicula facilisis vestibulum. Praesent sed lectus in arcu dapibus finibus. Phasellus
-          efficitur nunc vitae lacus cursus feugiat. Vestibulum et vehicula justo. Morbi accumsan ornare blandit.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus condimentum tincidunt urna, quis iaculis dui consequat sed.
+          Integer tincidunt volutpat luctus. Nunc sed hendrerit odio. Quisque sagittis tellus neque, a sagittis justo rhoncus eget. Proin at
+          est ac lorem fringilla sollicitudin. Duis non nulla lectus. Suspendisse facilisis augue ut leo lobortis, eu iaculis nunc faucibus.
+          Proin et sollicitudin dolor. Pellentesque condimentum nibh vehicula facilisis vestibulum. Praesent sed lectus in arcu dapibus
+          finibus. Phasellus efficitur nunc vitae lacus cursus feugiat. Vestibulum et vehicula justo. Morbi accumsan ornare blandit.
         </p>
         <p>
-          In ante quam, sodales efficitur libero quis, dapibus laoreet tortor. Cras non laoreet arcu, sit amet molestie
-          orci. Donec eu convallis nunc. Pellentesque luctus turpis eget sapien consectetur interdum. Duis mi ante,
-          euismod ut faucibus nec, varius suscipit odio. Ut pulvinar condimentum neque, quis consequat justo blandit et.
-          Aliquam facilisis mauris lacus, pharetra pretium arcu ornare eu. Fusce id dapibus lacus, ut consectetur metus.
-          Donec iaculis eu ante ut vehicula. Phasellus dignissim elementum purus et vestibulum. Etiam magna elit,
-          maximus ut metus quis, fringilla posuere metus.
+          In ante quam, sodales efficitur libero quis, dapibus laoreet tortor. Cras non laoreet arcu, sit amet molestie orci. Donec eu
+          convallis nunc. Pellentesque luctus turpis eget sapien consectetur interdum. Duis mi ante, euismod ut faucibus nec, varius
+          suscipit odio. Ut pulvinar condimentum neque, quis consequat justo blandit et. Aliquam facilisis mauris lacus, pharetra pretium
+          arcu ornare eu. Fusce id dapibus lacus, ut consectetur metus. Donec iaculis eu ante ut vehicula. Phasellus dignissim elementum
+          purus et vestibulum. Etiam magna elit, maximus ut metus quis, fringilla posuere metus.
         </p>
         <p>
-          Praesent augue odio, efficitur nec est at, cursus aliquet diam. Vestibulum eget enim id dui aliquam fringilla.
-          Suspendisse accumsan mauris sed diam maximus aliquam. Sed nec ante blandit, scelerisque eros vel, lobortis
-          arcu. Sed risus libero, tempor nec egestas eu, faucibus eu quam. Sed non auctor quam, et sodales diam. Sed in
-          hendrerit magna. Duis eleifend nibh non aliquet condimentum. Ut in posuere turpis. Nullam velit quam, euismod
-          scelerisque metus in, imperdiet sagittis nisi. Etiam eu sem ac nibh imperdiet ultrices eget ac enim.
+          Praesent augue odio, efficitur nec est at, cursus aliquet diam. Vestibulum eget enim id dui aliquam fringilla. Suspendisse
+          accumsan mauris sed diam maximus aliquam. Sed nec ante blandit, scelerisque eros vel, lobortis arcu. Sed risus libero, tempor nec
+          egestas eu, faucibus eu quam. Sed non auctor quam, et sodales diam. Sed in hendrerit magna. Duis eleifend nibh non aliquet
+          condimentum. Ut in posuere turpis. Nullam velit quam, euismod scelerisque metus in, imperdiet sagittis nisi. Etiam eu sem ac nibh
+          imperdiet ultrices eget ac enim.
         </p>
         <p>
-          Donec non lectus sollicitudin, egestas justo vitae, posuere massa. Donec a ex mauris. Donec molestie
-          sollicitudin felis, in elementum mi. Proin ullamcorper hendrerit enim at lobortis. Donec vel maximus risus.
-          Quisque malesuada vestibulum augue, non euismod libero pellentesque iaculis. Ut in diam justo. Vivamus vitae
-          velit nec sem iaculis rhoncus. Ut viverra libero nisl, sed iaculis nisi volutpat non. Nunc tempor maximus
-          ligula, non fermentum ex. Cras sit amet arcu viverra, bibendum metus porttitor, eleifend diam. Phasellus
-          tincidunt nisi eget sapien tincidunt, eget volutpat massa ultricies. Lorem ipsum dolor sit amet, consectetur
-          adipiscing elit. Fusce quis massa elit. Donec gravida pellentesque quam, in lobortis libero consectetur quis.
-          Mauris et pellentesque dui.
+          Donec non lectus sollicitudin, egestas justo vitae, posuere massa. Donec a ex mauris. Donec molestie sollicitudin felis, in
+          elementum mi. Proin ullamcorper hendrerit enim at lobortis. Donec vel maximus risus. Quisque malesuada vestibulum augue, non
+          euismod libero pellentesque iaculis. Ut in diam justo. Vivamus vitae velit nec sem iaculis rhoncus. Ut viverra libero nisl, sed
+          iaculis nisi volutpat non. Nunc tempor maximus ligula, non fermentum ex. Cras sit amet arcu viverra, bibendum metus porttitor,
+          eleifend diam. Phasellus tincidunt nisi eget sapien tincidunt, eget volutpat massa ultricies. Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit. Fusce quis massa elit. Donec gravida pellentesque quam, in lobortis libero consectetur quis. Mauris
+          et pellentesque dui.
         </p>
         <p>
-          Curabitur accumsan sollicitudin suscipit. Praesent in metus at nulla congue ultrices. Duis placerat pharetra
-          tortor, a viverra sem venenatis et. Mauris mollis dignissim ipsum ut euismod. In ultricies nisl vel sem
-          feugiat rhoncus. Etiam vitae tortor commodo arcu dapibus scelerisque eu nec massa. Nam aliquam nulla quis orci
-          dignissim, vitae consectetur ante mattis. Fusce sodales tincidunt sapien, nec pulvinar lorem lobortis sit
-          amet. Maecenas varius tempor dapibus.
+          Curabitur accumsan sollicitudin suscipit. Praesent in metus at nulla congue ultrices. Duis placerat pharetra tortor, a viverra sem
+          venenatis et. Mauris mollis dignissim ipsum ut euismod. In ultricies nisl vel sem feugiat rhoncus. Etiam vitae tortor commodo arcu
+          dapibus scelerisque eu nec massa. Nam aliquam nulla quis orci dignissim, vitae consectetur ante mattis. Fusce sodales tincidunt
+          sapien, nec pulvinar lorem lobortis sit amet. Maecenas varius tempor dapibus.
         </p>
       </div>
     </uxg-wizard-page>
@@ -74,7 +70,7 @@
       <div>Step 3 content</div>
     </uxg-wizard-page>
 
-    <uxg-wizard-page>
+    <uxg-wizard-page [uxgWizardPageCompleted]="true">
       <ng-template uxgWizardPageTitle>Step 4</ng-template>
       <ng-template uxgWizardPageDescription> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ng-template>
       <div>Step 4 content</div>

diff --git a/libs/angular-components/wizard/src/wizard-page/wizard-page.component.ts b/libs/angular-components/wizard/src/wizard-page/wizard-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, ContentChild, EventEmitter, OnInit, Output, TemplateRef, Input } from '@angular/core';
+import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
 import { ButtonHubService } from '../services/button-hub.service';
 import { PageCollectionService } from '../services/page-collection.service';
 import { WizardNavigationService } from '../services/wizard-navigation.service';
@@ -115,4 +115,15 @@ export class UxgWizardPageComponent {
   public set showTitle(val: boolean) {
     this._showTitle = val;
   }
+
+  private _completed?: boolean;
+
+  public get completed(): boolean {
+    return this._completed ?? this.pageCollection.getPageIndex(this) < this.pageCollection.getPageIndex(this.navService.currentPage);
+  }
+
+  @Input('uxgWizardPageCompleted')
+  public set completed(value: boolean) {
+    this._completed = value;
+  }
 }
diff --git a/libs/angular-components/wizard/src/wizard.component.html b/libs/angular-components/wizard/src/wizard.component.html
@@ -84,13 +84,13 @@ <h4 fxHide.xs class="uxg-wizard-title uxg-h4">
         <div
           class="step"
           [ngClass]="{
-            done: pageCollection.getPageIndex(page) < currentPageId,
+            done: page.completed,
             active: page.current,
             disabled: page.disabled
           }"
           (click)="onStepClick(page)"
         >
-          <ng-container *ngIf="pageCollection.getPageIndex(page) < currentPageId; else showIndex">
+          <ng-container *ngIf="page.completed; else showIndex">
             <mat-icon>checkmark</mat-icon>
           </ng-container>
           <ng-template #showIndex>