From 5fa4b778fd34684d14f862b54a77227a98cc1a39 Mon Sep 17 00:00:00 2001
From: Evgeny Arshinov <earshinov@gmail.com>
Date: Sat, 23 Mar 2019 18:12:23 +0300
Subject: [PATCH] A demo for custom navigation mode

http://localhost:4200/#/custom-navigation-mode/

Requires 'refactor-nav-modes' branch of angular-archwizard from https://github.com/madoar/angular-archwizard/pull/166
---
 package-lock.json                             |  2 +-
 src/app/app-routing.module.ts                 |  2 +
 src/app/app.module.ts                         |  4 +-
 ...custom-navigation-mode-factory.provider.ts | 13 +++
 .../custom-navigation-mode.component.css      |  4 +
 .../custom-navigation-mode.component.html     | 82 +++++++++++++++++++
 .../custom-navigation-mode.component.spec.ts  | 25 ++++++
 .../custom-navigation-mode.component.ts       | 21 +++++
 .../custom-navigation-mode.module.ts          | 19 +++++
 .../custom-navigation-mode.ts                 | 36 ++++++++
 src/app/demo/demo.component.html              |  4 +
 11 files changed, 210 insertions(+), 2 deletions(-)
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode-factory.provider.ts
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode.component.css
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode.component.html
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode.component.spec.ts
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode.component.ts
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode.module.ts
 create mode 100644 src/app/custom-navigation-mode/custom-navigation-mode.ts

diff --git a/package-lock.json b/package-lock.json
index e8d354f..87bb47a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1781,7 +1781,7 @@
       }
     },
     "angular-archwizard": {
-      "version": "file:../ng2-archwizard/dist",
+      "version": "file:../angular-archwizard/dist",
       "requires": {
         "tslib": "1.9.3"
       },
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 54531f9..2031e18 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -32,6 +32,7 @@ import {ReversedNavigationBarComponent} from './reversed-navigation-bar/reversed
 import {WizardStepNgForComponent} from './wizard-step-ngfor/wizard-step-ngfor.component';
 import {CustomGlobalCssComponent} from './custom-global-css/custom-global-css.component';
 import {CustomStepCssComponent} from './custom-step-css/custom-step-css.component';
+import { CustomNavigationModeComponent } from './custom-navigation-mode/custom-navigation-mode.component';
 
 /**
  * Created by marc on 09.07.17.
@@ -62,6 +63,7 @@ const appRoutes: Routes = [
   { path: 'custom-css/global', component: CustomGlobalCssComponent },
   { path: 'custom-css/step', component: CustomStepCssComponent },
   { path: 'custom-step-titles', component: CustomStepTitlesComponent },
+  { path: 'custom-navigation-mode', component: CustomNavigationModeComponent },
   { path: 'optional-steps', component: OptionalStepsComponent },
   { path: 'default-step-index', component: DefaultWizardStepComponent },
   { path: 'arbitrary-step-navigation', component: ArbitraryStepNavigationComponent },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b869be4..62d1503 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -35,6 +35,7 @@ import {ReversedNavigationBarModule} from './reversed-navigation-bar/reversed-na
 import {WizardStepNgForModule} from './wizard-step-ngfor/wizard-step-ngfor.module';
 import {CustomGlobalCssModule} from './custom-global-css/custom-global-css.module';
 import {CustomStepCssModule} from './custom-step-css/custom-step-css.module';
+import {CustomNavigationModeModule} from './custom-navigation-mode/custom-navigation-mode.module';
 
 @NgModule({
   declarations: [
@@ -75,7 +76,8 @@ import {CustomStepCssModule} from './custom-step-css/custom-step-css.module';
     ReversedNavigationBarModule,
     WizardStepNgForModule,
     CustomGlobalCssModule,
-    CustomStepCssModule
+    CustomStepCssModule,
+    CustomNavigationModeModule,
   ],
   providers: [],
   bootstrap: [DemoComponent]
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode-factory.provider.ts b/src/app/custom-navigation-mode/custom-navigation-mode-factory.provider.ts
new file mode 100644
index 0000000..8c1bd62
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode-factory.provider.ts
@@ -0,0 +1,13 @@
+import { BaseNavigationModeFactory, WizardComponent, NavigationMode } from 'angular-archwizard';
+import { CustomNavigationMode } from './custom-navigation-mode';
+
+export class CustomNavigationModeFactory extends BaseNavigationModeFactory {
+
+  createUnknown(wizard: WizardComponent, navigationMode: string): NavigationMode {
+    if (navigationMode === 'custom') {
+      return new CustomNavigationMode(wizard.model);
+    }
+    return super.createUnknown(wizard, navigationMode);
+  }
+
+}
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode.component.css b/src/app/custom-navigation-mode/custom-navigation-mode.component.css
new file mode 100644
index 0000000..5a9edeb
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode.component.css
@@ -0,0 +1,4 @@
+.centered-content {
+  margin: auto;
+  text-align: center;
+}
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode.component.html b/src/app/custom-navigation-mode/custom-navigation-mode.component.html
new file mode 100644
index 0000000..a961947
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode.component.html
@@ -0,0 +1,82 @@
+<p>All of the wizards below use a custom navigation mode that allows the user to return to any steps he/she already visited in any direction.  This page illustrates several options to configure a wizard with a custom navigation mode.</p>
+
+<p>Option 1: Specify a custom <code>navigationModeFactory</code> in <code>ArchwizardModule.forRoot()</code> and use a custom navigation mode name.</p>
+
+<aw-wizard [navigationMode]="'custom'">
+  <aw-wizard-step [stepTitle]="'Steptitle 1'">
+    <div class="centered-content">
+      <div>
+        Content: Step 1
+      </div>
+
+      <div class="btn-group">
+        <button type="button" class="btn btn-secondary" awNextStep>Continue</button>
+      </div>
+    </div>
+  </aw-wizard-step>
+  <aw-wizard-step [stepTitle]="'Steptitle 2'">
+    <div class="centered-content">
+      <div>
+        Content: Step 2
+      </div>
+
+      <div class="btn-group">
+        <button type="button" class="btn btn-secondary" awPreviousStep>Back</button>
+        <button type="button" class="btn btn-secondary" awNextStep>Continue</button>
+      </div>
+    </div>
+  </aw-wizard-step>
+  <aw-wizard-step [stepTitle]="'Steptitle 3'">
+    <div class="centered-content">
+      <div>
+        Content: Step 3
+      </div>
+
+      <div class="btn-group">
+        <button type="button" class="btn btn-secondary" awPreviousStep>Back</button>
+        <button type="button" class="btn btn-secondary" awResetWizard>Reset</button>
+      </div>
+    </div>
+  </aw-wizard-step>
+</aw-wizard>
+
+<p></p>
+<p>Option 2: Pass to <code>[navigationMode]</code> a function returning a <code>NavigationMode</code>.</p>
+
+<aw-wizard [navigationMode]="getCustomNavigationMode">
+  <aw-wizard-step [stepTitle]="'Steptitle 1'">
+    <div class="centered-content">
+      <div>
+        Content: Step 1
+      </div>
+
+      <div class="btn-group">
+        <button type="button" class="btn btn-secondary" awNextStep>Continue</button>
+      </div>
+    </div>
+  </aw-wizard-step>
+  <aw-wizard-step [stepTitle]="'Steptitle 2'">
+    <div class="centered-content">
+      <div>
+        Content: Step 2
+      </div>
+
+      <div class="btn-group">
+        <button type="button" class="btn btn-secondary" awPreviousStep>Back</button>
+        <button type="button" class="btn btn-secondary" awNextStep>Continue</button>
+      </div>
+    </div>
+  </aw-wizard-step>
+  <aw-wizard-step [stepTitle]="'Steptitle 3'">
+    <div class="centered-content">
+      <div>
+        Content: Step 3
+      </div>
+
+      <div class="btn-group">
+        <button type="button" class="btn btn-secondary" awPreviousStep>Back</button>
+        <button type="button" class="btn btn-secondary" awResetWizard>Reset</button>
+      </div>
+    </div>
+  </aw-wizard-step>
+</aw-wizard>
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode.component.spec.ts b/src/app/custom-navigation-mode/custom-navigation-mode.component.spec.ts
new file mode 100644
index 0000000..e22d885
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CustomNavigationModeComponent } from './custom-navigation-mode.component';
+
+describe('CustomNavigationModeComponent', () => {
+  let component: CustomNavigationModeComponent;
+  let fixture: ComponentFixture<CustomNavigationModeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CustomNavigationModeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CustomNavigationModeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode.component.ts b/src/app/custom-navigation-mode/custom-navigation-mode.component.ts
new file mode 100644
index 0000000..33e5798
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode.component.ts
@@ -0,0 +1,21 @@
+import {Component, OnInit} from '@angular/core';
+import {CustomNavigationMode} from './custom-navigation-mode';
+import {WizardComponent, NavigationMode} from 'angular-archwizard';
+
+@Component({
+  selector: 'app-custom-navigation-mode',
+  templateUrl: './custom-navigation-mode.component.html',
+  styleUrls: ['./custom-navigation-mode.component.css']
+})
+export class CustomNavigationModeComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  getCustomNavigationMode(wizard: WizardComponent): NavigationMode {
+    return new CustomNavigationMode(wizard.model);
+  }
+
+}
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode.module.ts b/src/app/custom-navigation-mode/custom-navigation-mode.module.ts
new file mode 100644
index 0000000..a2e94cf
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode.module.ts
@@ -0,0 +1,19 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ArchwizardModule, ArchwizardModuleConfig} from 'angular-archwizard';
+import {CustomNavigationModeComponent} from './custom-navigation-mode.component';
+import {CustomNavigationModeFactory} from './custom-navigation-mode-factory.provider';
+
+const config: ArchwizardModuleConfig = {
+  navigationModeFactory: CustomNavigationModeFactory,
+};
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ArchwizardModule.forRoot(config)
+  ],
+  declarations: [CustomNavigationModeComponent],
+  exports: [CustomNavigationModeComponent]
+})
+export class CustomNavigationModeModule { }
diff --git a/src/app/custom-navigation-mode/custom-navigation-mode.ts b/src/app/custom-navigation-mode/custom-navigation-mode.ts
new file mode 100644
index 0000000..5c86464
--- /dev/null
+++ b/src/app/custom-navigation-mode/custom-navigation-mode.ts
@@ -0,0 +1,36 @@
+import {SemiStrictNavigationMode} from 'angular-archwizard';
+
+/**
+ * A custom NavigationMode
+ *
+ * Allows to navigate backward to any step (like `StrictNavigationMode`)
+ * and forward to steps the user has already visited before.
+ *
+ * Next and Previous buttons work as in `StrictNavigationMode`.
+ */
+export class CustomNavigationMode extends SemiStrictNavigationMode {
+
+  canTransitionToStep(destinationIndex: number) {
+    // Works as in strict mode
+    return this.wizardState.wizardSteps
+        .filter((step, index) => index < destinationIndex && index !== this.wizardState.currentStepIndex)
+        .every(step => step.completed || step.optional);
+  }
+
+  // @override
+  isNavigable(destinationIndex: number): boolean {
+
+    // allow returning to previous steps
+    if (destinationIndex < this.wizardState.currentStepIndex) {
+      return true;
+    }
+
+    // allow returning to any previously visited ("completed" steps)
+    const step = this.wizardState.wizardSteps[destinationIndex];
+    if (step && step.completed) {
+      return true;
+    }
+
+    return false;
+  }
+}
diff --git a/src/app/demo/demo.component.html b/src/app/demo/demo.component.html
index 98d9771..a9978d2 100644
--- a/src/app/demo/demo.component.html
+++ b/src/app/demo/demo.component.html
@@ -126,6 +126,10 @@
               <a>Custom designed step titles</a>
             </li>
 
+            <li routerLink="/custom-navigation-mode" routerLinkActive="active">
+              <a>Custom navigation mode</a>
+            </li>
+
             <li routerLink="/optional-steps" routerLinkActive="active">
               <a>Optional steps</a>
             </li>