Merge pull request #377 from dgutride/convert-wizard-component

Convert wizard directive

Author: jeff-phillips-18

src/wizard/wizard-directive.js

@@ -0,0 +1,58 @@
+/**
+ * @ngdoc directive
+ * @name patternfly.wizard.component:pfWizardReviewPage
+ * @restrict E
+ *
+ * @description
+ * Component for rendering a Wizard Review Page - should only be used within a wizard.
+ *
+ * @param {boolean} shown Value watched internally by the wizard review page to know when it is visible.
+ * @param {object} wizardData  Sets the internal content of the review page to apply wizard data to the review templates.
+ *
+ */
+angular.module('patternfly.wizard').component('pfWizardReviewPage', {
+  bindings: {
+    shown: '<',
+    wizardData: "<"
+  },
+  require: {
+    wizard: '^pfWizard'
+  },
+  templateUrl: 'wizard/wizard-review-page.html',
+  controller: function () {
+    'use strict';
+    var ctrl = this;
+
+    ctrl.$onInit = function () {
+      ctrl.reviewSteps = [];
+    };
+
+    ctrl.$onChanges = function (changesObj) {
+      if (changesObj.shown) {
+        if (changesObj.shown.currentValue) {
+          ctrl.updateReviewSteps();
+        }
+      }
+    };
+
+    ctrl.toggleShowReviewDetails = function (step) {
+      if (step.showReviewDetails === true) {
+        step.showReviewDetails = false;
+      } else {
+        step.showReviewDetails = true;
+      }
+    };
+
+    ctrl.getSubStepNumber = function (step, substep) {
+      return step.getStepDisplayNumber(substep);
+    };
+
+    ctrl.getReviewSubSteps = function (reviewStep) {
+      return reviewStep.getReviewSteps();
+    };
+
+    ctrl.updateReviewSteps = function () {
+      ctrl.reviewSteps = ctrl.wizard.getReviewSteps();
+    };
+  }
+});

src/wizard/wizard-review-page-directive.js

@@ -1,15 +1,15 @@
 <div class="wizard-pf-review-page">
   <div class="wizard-pf-review-steps">
     <ul class="list-group">
-      <li class="list-group-item" ng-repeat="reviewStep in reviewSteps track by $index">
-        <a class="apf-form-collapse" ng-class="{'collapsed': !reviewStep.showReviewDetails}" ng-click="toggleShowReviewDetails(reviewStep)">
+      <li class="list-group-item" ng-repeat="reviewStep in $ctrl.reviewSteps track by $index">
+        <a class="apf-form-collapse" ng-class="{'collapsed': !reviewStep.showReviewDetails}" ng-click="$ctrl.toggleShowReviewDetails(reviewStep)">
           {{reviewStep.stepTitle}}
         </a>
         <div class="wizard-pf-review-substeps" ng-class="{'collapse': !reviewStep.showReviewDetails}">
           <ul class="list-group" ng-if="reviewStep.substeps" >
             <li class="list-group-item" ng-repeat="substep in reviewStep.getReviewSteps()">
-              <a class="apf-form-collapse" ng-class="{'collapsed': !substep.showReviewDetails}" ng-click="toggleShowReviewDetails(substep)">
-                <span class="wizard-pf-substep-number">{{getSubStepNumber(reviewStep, substep)}}</span>
+              <a class="apf-form-collapse" ng-class="{'collapsed': !substep.showReviewDetails}" ng-click="$ctrl.toggleShowReviewDetails(substep)">
+                <span class="wizard-pf-substep-number">{{$ctrl.getSubStepNumber(reviewStep, substep)}}</span>
                 <span class="wizard-pf-substep-title">{{substep.stepTitle}}</span>
               </a>
               <div class="wizard-pf-review-content" ng-class="{'collapse': !substep.showReviewDetails}">