From dee9e105b6abf46180a42f348392f1178c58d696 Mon Sep 17 00:00:00 2001
From: smartapant <smartapant@gmail.com>
Date: Wed, 30 Dec 2015 19:27:39 +0300
Subject: [PATCH] Wizard to controllerAs

---
 src/app/pages/form/form.module.js         |   3 +-
 src/app/pages/form/wizard/wizard.html     |   8 +-
 src/app/pages/form/wizard/wizardPage.html |  60 +++++------
 src/app/pages/form/wizard/wizrdCtrl.js    | 118 ++++++++--------------
 4 files changed, 80 insertions(+), 109 deletions(-)

diff --git a/src/app/pages/form/form.module.js b/src/app/pages/form/form.module.js
index 8f3fca8..fa16785 100644
--- a/src/app/pages/form/form.module.js
+++ b/src/app/pages/form/form.module.js
@@ -23,7 +23,8 @@
         {
           url: '/form-wizard',
           templateUrl: 'app/pages/form/wizard/wizardPage.html',
-          controller: 'WizardCtrl'
+          controller: 'WizardCtrl',
+          controllerAs: 'vm'
         })
   }
 
diff --git a/src/app/pages/form/wizard/wizard.html b/src/app/pages/form/wizard/wizard.html
index 5489266..4d260e0 100644
--- a/src/app/pages/form/wizard/wizard.html
+++ b/src/app/pages/form/wizard/wizard.html
@@ -1,7 +1,7 @@
 <div class="wizard">
     <div class="row">
         <div class="wizard-navigation-container">
-            <div ng-repeat="t in tabs" class="wizard-navigation {{tabNum == $index ? 'active' : ''}}" ng-click="selectTab($index)">
+            <div ng-repeat="t in $baWizardController.tabs" class="wizard-navigation {{$baWizardController.tabNum == $index ? 'active' : ''}}" ng-click="$baWizardController.selectTab($index)">
                 {{t.title}}
             </div>
         </div>
@@ -10,7 +10,7 @@
 
     <div class="progress progress-wizard">
         <div class="progress-bar progress-bar-info active" role="progressbar"
-             aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
+             aria-valuenow="{{$baWizardController.progress}}" aria-valuemin="0" aria-valuemax="100" style="{{'width: ' + progress + '%;'}}">
         </div>
     </div>
 
@@ -18,8 +18,8 @@
 
     <nav>
         <ul class="pager wizard-pager">
-            <li class="previous"><button  ng-disabled="isFirstTab()" ng-click="previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
-            <li class="next"> <button ng-disabled="isLastTab()" ng-click="nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
+            <li class="previous"><button  ng-disabled="$baWizardController.isFirstTab()" ng-click="$baWizardController.previousTab()" type="button" class=" btn btn-primary"><span aria-hidden="true">&larr;</span> previous</button></li>
+            <li class="next"> <button ng-disabled="$baWizardController.isLastTab()" ng-click="$baWizardController.nextTab()" type="button" class="btn btn-primary">next <span aria-hidden="true">&rarr;</span></button></li>
         </ul>
     </nav>
 </div>
diff --git a/src/app/pages/form/wizard/wizardPage.html b/src/app/pages/form/wizard/wizardPage.html
index dc29e04..4811404 100644
--- a/src/app/pages/form/wizard/wizardPage.html
+++ b/src/app/pages/form/wizard/wizardPage.html
@@ -5,14 +5,14 @@
             <blur-panel title="Form Wizard" class-container="with-scroll">
               <ba-wizard>
                   <ba-wizard-tab title="Personal info">
-                      <form>
+                      <form name="vm.personalInfoForm" novalidate>
                           <div class="form-group">
                               <label for="exampleInputEmail1">Email address</label>
-                              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
+                              <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" required max="5">
                           </div>
                           <div class="form-group">
                               <label for="exampleInputPassword1">Password</label>
-                              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
+                              <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" required>
                           </div>
                           <div class="checkbox">
                               <label class="custom-checkbox">
@@ -24,38 +24,40 @@
                       </form>
                   </ba-wizard-tab>
                   <ba-wizard-tab title="Product Info">
-                      <div class="row">
-                          <div class="col-sm-6">
-                              <div class="form-group">
-                                  <label for="inputFirstName">First Name</label>
-                                  <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
+                      <form name="productInfoForm" novalidate>
+                          <div class="row">
+                              <div class="col-sm-6">
+                                  <div class="form-group">
+                                      <label for="inputFirstName">First Name</label>
+                                      <input type="text" class="form-control" id="inputFirstName" placeholder="First Name">
+                                  </div>
+                              </div>
+                              <div class="col-sm-6">
+                                  <div class="form-group">
+                                      <label for="inputLastName">Last Name</label>
+                                      <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
+                                  </div>
                               </div>
                           </div>
-                          <div class="col-sm-6">
-                              <div class="form-group">
-                                  <label for="inputLastName">Last Name</label>
-                                  <input type="text" class="form-control" id="inputLastName" placeholder="Last Name">
+                          <div class="row">
+                              <div class="col-sm-6">
+                                  <div class="form-group">
+                                      <label for="inputFirstName">Email</label>
+                                      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
+                                  </div>
+                              </div>
+                              <div class="col-sm-6">
+                                  <div class="form-group">
+                                      <label for="inputWebsite">Website</label>
+                                      <input type="text" class="form-control" id="inputWebsite" placeholder="Website">
+                                  </div>
                               </div>
                           </div>
-                      </div>
-                      <div class="row">
-                          <div class="col-sm-6">
-                              <div class="form-group">
-                                  <label for="inputFirstName">Email</label>
-                                  <input type="email" class="form-control" id="inputEmail" placeholder="Email">
-                              </div>
-                          </div>
-                          <div class="col-sm-6">
-                              <div class="form-group">
-                                  <label for="inputWebsite">Website</label>
-                                  <input type="text" class="form-control" id="inputWebsite" placeholder="Website">
-                              </div>
-                          </div>
-                      </div>
+                      </form>
                       <button type="submit" class="btn btn-primary">Submit</button>
                   </ba-wizard-tab>
                   <ba-wizard-tab title="Payment">
-                      <form class="row form-inline">
+                      <form class="row form-inline" name="paymentForm" novalidate>
                           <div class="form-group col-sm-3 col-xs-6">
                               <input type="text" class="form-control" id="exampleInputName2" placeholder="Name">
                           </div>
@@ -72,7 +74,7 @@
                       </form>
                   </ba-wizard-tab>
                   <ba-wizard-tab title="Finish">
-                      <form class="form-horizontal">
+                      <form class="form-horizontal" name="finishForm" novalidate>
                           <div class="form-group">
                               <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                               <div class="col-sm-10">
diff --git a/src/app/pages/form/wizard/wizrdCtrl.js b/src/app/pages/form/wizard/wizrdCtrl.js
index c3cbfc1..c5278e3 100644
--- a/src/app/pages/form/wizard/wizrdCtrl.js
+++ b/src/app/pages/form/wizard/wizrdCtrl.js
@@ -8,96 +8,59 @@
 
   /** @ngInject */
   function WizardCtrl($scope, $location, $sce) {
-    $scope.tabs = [
-      {
-        name: 'Step 1'
-      },
-      {
-        name: 'Step 2'
-      },
-      {
-        name: 'Step 3'
-      }];
-
-    $scope.$watch('tab', countProgress);
-
-    $scope.selectTab = function (tab) {
-      $scope.tab = tab;
-    };
-
-    $scope.isSelectedTab = function (tab) {
-      return $scope.tab === tab;
-    };
-
-    $scope.isFirstTab = function () {
-      return $scope.tab == 0;
-    };
-
-    $scope.isLastTab = function () {
-      return $scope.tab == $scope.tabs.length - 1 ;
-    };
-
-    $scope.nextTab = function () {
-      $scope.tab++;
-    };
-
-    $scope.previousTab = function () {
-      $scope.tab--;
-    };
-
-    function countProgress() {
-      $scope.progress = (($scope.tab + 1) / $scope.tabs.length) * 100;
-    }
-
-    $scope.tab = 0;
-    $scope.progress = 0;
+   var vm = this;
+    setTimeout(function (evt, isValid) {
+      console.log(vm.personalInfoForm);
+      $scope.formValid = isValid;
+    }, 1000);
+    $scope.bla= 'Ctrl'
   }
 
   function baWizard() {
     return {
       restrict: 'E',
       transclude: true,
-      scope: {},
       templateUrl: 'app/pages/form/wizard/wizard.html',
+      controllerAs: '$baWizardController',
       controller: ['$scope', function ($scope) {
         var vm = this;
-        $scope.tabs = [];
+        vm.tabs = [];
 
-        $scope.tabNum = 0;
-        $scope.progress = 0;
+        vm.tabNum = 0;
+        vm.progress = 0;
 
         vm.addTab = function(tab) {
-          $scope.tabs.push(tab);
-          $scope.selectTab(0);
+          vm.tabs.push(tab);
+          vm.selectTab(0);
         };
 
-        $scope.$watch('tabNum', countProgress);
+        $scope.$watch(angular.bind(vm, function () {return vm.tabNum;}), countProgress);
 
-        $scope.selectTab = function (tabNum) {
-          $scope.tabNum = tabNum;
-          $scope.tabs.forEach(function (t, tIndex) {
-            tIndex == $scope.tabNum ? t.select(true) : t.select(false);
+        vm.selectTab = function (tabNum) {
+          vm.tabNum = tabNum;
+          vm.tabs.forEach(function (t, tIndex) {
+            tIndex == vm.tabNum ? t.select(true) : t.select(false);
           });
         };
 
-        $scope.isFirstTab = function () {
-          return $scope.tabNum == 0;
+        vm.isFirstTab = function () {
+          return vm.tabNum == 0;
         };
 
-        $scope.isLastTab = function () {
-          return $scope.tabNum == $scope.tabs.length - 1 ;
+        vm.isLastTab = function () {
+          return vm.tabNum == vm.tabs.length - 1 ;
         };
 
-        $scope.nextTab = function () {
-          $scope.tabNum++;
+        vm.nextTab = function () {
+          vm.tabNum++;
         };
 
-        $scope.previousTab = function () {
-          $scope.tabNum--;
+        vm.previousTab = function () {
+          vm.tabNum--;
         };
 
         function countProgress() {
-          $scope.progress = (($scope.tabNum + 1) / $scope.tabs.length) * 100;
+          vm.progress = ((vm.tabNum + 1) / vm.tabs.length) * 100;
         }
       }]
     }
@@ -107,21 +70,26 @@
     return {
       restrict: 'E',
       transclude: true,
-      scope: {
-        title: '@'
-      },
       require: '^baWizard',
+      scope: {
+        availability: '='
+      },
       templateUrl:  'app/pages/form/wizard/tab.html',
       link: function($scope, $element, $attrs, wizard) {
-        $scope.selected = false;
-        $scope.select = function(isSelected) {
-           if (isSelected) {
-             $scope.selected = true;
-           } else {
-             $scope.selected = false;
-           }
-        } ;
-        wizard.addTab($scope);
+        $scope.selected = true;
+
+        function select(isSelected) {
+          if (isSelected) {
+            $scope.selected = true;
+          } else {
+            $scope.selected = false;
+          }
+        }
+
+        wizard.addTab({
+          title: $attrs.title,
+          select: select
+        });
       }
     };
   }