feat : angular wizard added (#30)

* angular wizard added

package-lock.json

@@ -1167,6 +1167,14 @@
         }
       }
     },
+    "angular-archwizard": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/angular-archwizard/-/angular-archwizard-3.0.0.tgz",
+      "integrity": "sha512-tHnd5lvi/Kwu3GVlIBROgsXbKtL2tG0s3QBZcQJuTrgceXt6OXjpvuxFOWmyHdYwp+LxuTmkXBD/KMRVMRstew==",
+      "requires": {
+        "tslib": "1.9.1"
+      }
+    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",

package.json

@@ -32,6 +32,7 @@
     "@fortawesome/fontawesome-free-webfonts": "^1.0.9",
     "@ng-bootstrap/ng-bootstrap": "^2.0.0",
     "@ngx-translate/core": "^10.0.1",
+    "angular-archwizard": "^3.0.0",
     "bootstrap": "^4.1.1",
     "core-js": "^2.5.6",
     "hammerjs": "^2.0.8",

src/app/clients/clients.module.ts

@@ -1,5 +1,6 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ArchwizardModule } from 'angular-archwizard';
 
 import { ClientsComponent } from './clients.component';
 import { CreateClientComponent} from './create-client/create-client.component';
@@ -12,6 +13,7 @@ import { ViewClientComponent } from './view-client/view-client.component';
     CoreModule,
     CommonModule,
     ClientsRoutingModule,
+    ArchwizardModule
 
   ],
   declarations: [

src/app/clients/create-client/create-client.component.html

@@ -1,8 +1,76 @@
 <app-header> </app-header>
-<div class="fluid-container">
 <div class="container">
-   <div class="row">
+ <aw-wizard class="mt-5" #wizard [navBarLayout]="'large-empty-symbols'">
-     <div class="col-sm-6">
+  <aw-wizard-step stepTitle="Title of step 1" [navigationSymbol]="{ symbol: '1' }">
+  
+          <div class="col-sm-6 mx-auto">
+              <div class="card mt-5">
+    <div class="card-body">
+      <div class="form-group">
+          <fieldset disabled="">
+            <label class="control-label" for="disabledInput">Disabled input</label>
+            <input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
+          </fieldset>
+        </div>
+        
+        <div class="form-group">
+          <fieldset>
+            <label class="control-label" for="readOnlyInput">Readonly input</label>
+            <input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text">
+          </fieldset>
+        </div>
+        
+        <div class="form-group has-success">
+          <label class="form-control-label" for="inputSuccess1">Valid input</label>
+          <input value="correct value" class="form-control is-valid" id="inputValid" type="text">
+          <div class="valid-feedback">Success! You've done it.</div>
+        </div>
+        
+        <div class="form-group has-danger">
+          <label class="form-control-label" for="inputDanger1">Invalid input</label>
+          <input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text">
+          <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
+        </div>
+        
+        <div class="form-group">
+          <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
+          <input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text">
+        </div>
+        
+        <div class="form-group">
+          <label class="col-form-label" for="inputDefault">Default input</label>
+          <input class="form-control" placeholder="Default input" id="inputDefault" type="text">
+        </div>
+        
+        <div class="form-group">
+          <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
+          <input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
+        </div>
+        
+        <div class="form-group">
+          <label class="control-label">Input addons</label>
+          <div class="form-group">
+            <div class="input-group mb-3">
+              <div class="input-group-prepend">
+                <span class="input-group-text">$</span>
+              </div>
+              <input class="form-control" aria-label="Amount (to the nearest dollar)" type="text">
+              <div class="input-group-append">
+                <span class="input-group-text">.00</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <button type="button" class="btn btn-primary float-right" awNextStep>Next Step</button>
+<!--         <button type="button" class="btn btn-primary float-right" [awGoToStep]="{stepIndex: 2}">Go directly to third Step</button>
+ -->        </div>
+      </div>
+    </div>
+
+    
+  </aw-wizard-step>
+  <aw-wizard-step stepTitle="Title of step 2" [navigationSymbol]="{ symbol: '2' }" awOptionalStep>
+      <div class="col-sm-6 mx-auto">
           <div class="card mt-5">
         <!--     <div class="card-header"><legend> Loan</legend></div>
          -->    <div class="card-body">
@@ -89,74 +157,21 @@
                       </label>
                     </div>
                   </fieldset>
-          <button type="submit" class="btn btn-primary">Submit</button>
+                  <!-- <button type="submit" class="btn btn-primary">Submit</button> -->
                 </fieldset>
               </form>
+
+              <button type="button" class="btn btn-primary float-left" awPreviousStep>Go to previous step</button>
+              <button type="button" class="btn btn-primary float-right" awNextStep>Go to next step</button>
               </div>
             </div>
           </div>
-  <div class="col-sm-6">
-      <div class="card mt-5">
-          <!-- <div class="card-header"></div> -->
-          <div class="card-body">
-      <div class="form-group">
-          <fieldset disabled="">
-            <label class="control-label" for="disabledInput">Disabled input</label>
-            <input class="form-control" id="disabledInput" placeholder="Disabled input here..." disabled="" type="text">
-          </fieldset>
-        </div>
 
-        <div class="form-group">
+  </aw-wizard-step>
-          <fieldset>
+  <aw-wizard-step stepTitle="Title of step 3" [navigationSymbol]="{ symbol: '3' }">
-            <label class="control-label" for="readOnlyInput">Readonly input</label>
+    Content of Step 3
-            <input class="form-control" id="readOnlyInput" placeholder="Readonly input here…" readonly="" type="text">
+    <button type="button" class="btn btn-primary"  awPreviousStep>Previous Step</button>
-          </fieldset>
+    <button type="button" class="btn btn-primary" >Finish</button>
-        </div>
+  </aw-wizard-step>
-        
+</aw-wizard>
-        <div class="form-group has-success">
-          <label class="form-control-label" for="inputSuccess1">Valid input</label>
-          <input value="correct value" class="form-control is-valid" id="inputValid" type="text">
-          <div class="valid-feedback">Success! You've done it.</div>
-        </div>
-        
-        <div class="form-group has-danger">
-          <label class="form-control-label" for="inputDanger1">Invalid input</label>
-          <input value="wrong value" class="form-control is-invalid" id="inputInvalid" type="text">
-          <div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
-        </div>
-        
-        <div class="form-group">
-          <label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
-          <input class="form-control form-control-lg" placeholder=".form-control-lg" id="inputLarge" type="text">
-        </div>
-        
-        <div class="form-group">
-          <label class="col-form-label" for="inputDefault">Default input</label>
-          <input class="form-control" placeholder="Default input" id="inputDefault" type="text">
-        </div>
-        
-        <div class="form-group">
-          <label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
-          <input class="form-control form-control-sm" placeholder=".form-control-sm" id="inputSmall" type="text">
-        </div>
-        
-        <div class="form-group">
-          <label class="control-label">Input addons</label>
-          <div class="form-group">
-            <div class="input-group mb-3">
-              <div class="input-group-prepend">
-                <span class="input-group-text">$</span>
-              </div>
-              <input class="form-control" aria-label="Amount (to the nearest dollar)" type="text">
-              <div class="input-group-append">
-                <span class="input-group-text">.00</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        </div>
-        </div>
-  </div>
-</div>
- </div>
 </div>