Convert wizard review page to component

Author: dgutride

src/wizard/wizard-directive.js

@@ -129,7 +129,7 @@
   <file name="summary.html">
   <div ng-controller="SummaryController">
     <pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
-      <div pf-wizard-review-page shown="pageShown" wizard-data="data"></div>
+      <pf-wizard-review-page shown="pageShown" wizard-data="data"></pf-wizard-review-page>
     </pf-wizard-substep>
   </div>
   </file>
@@ -261,7 +261,7 @@
         if (angular.isUndefined(next)) {
           $scope.data = {};
         } else {
-          $scope.data = next.wizardData;
+          $scope.data = next.$ctrl.wizardData;
         }
       }
     }

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

@@ -0,0 +1,52 @@
+/**
+ * @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.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.reviewSteps = [];
+    ctrl.updateReviewSteps = function () {
+      ctrl.reviewSteps = ctrl.wizard.getReviewSteps();
+    };
+
+    ctrl.$onChanges = function (changesObj) {
+      if (changesObj.shown) {
+        if (changesObj.shown.currentValue) {
+          ctrl.updateReviewSteps();
+        }
+      }
+    };
+  }
+});

src/wizard/wizard-review-page.component.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}">

src/wizard/wizard-review-page.html

@@ -2,11 +2,11 @@
   <form class="form">
     <div class="wizard-pf-review-item">
       <span class="wizard-pf-review-item-label">Lorem:</span>
-      <span class="wizard-pf-review-item-value">{{data.lorem}}</span>
+      <span class="wizard-pf-review-item-value">{{$ctrl.data.lorem}}</span>
     </div>
     <div class="wizard-pf-review-item">
       <span class="wizard-pf-review-item-label">Ipsum:</span>
-      <span class="wizard-pf-review-item-value">{{data.ipsum}}</span>
+      <span class="wizard-pf-review-item-value">{{$ctrl.data.ipsum}}</span>
     </div>
   </form>
 </div>

test/wizard/review-second-template.html

@@ -2,11 +2,11 @@
   <form class="form">
     <div class="wizard-pf-review-item">
       <span class="wizard-pf-review-item-label">Name:</span>
-      <span class="wizard-pf-review-item-value">{{data.name}}</span>
+      <span class="wizard-pf-review-item-value">{{$ctrl.data.name}}</span>
     </div>
     <div class="wizard-pf-review-item">
       <span class="wizard-pf-review-item-label">Description:</span>
-      <span class="wizard-pf-review-item-value">{{data.description}}</span>
+      <span class="wizard-pf-review-item-value">{{$ctrl.data.description}}</span>
     </div>
   </form>
 </div>

test/wizard/review-template.html

@@ -25,7 +25,7 @@ angular.module('patternfly.wizard').controller('DetailsReviewController', ['$roo
       if (angular.isUndefined(next)) {
         $scope.data = {};
       } else {
-        $scope.data = next.wizardData;
+        $scope.data = next.$ctrl.wizardData;
       }
     }
   }

test/wizard/script.js

@@ -1,5 +1,5 @@
 <div ng-controller="SummaryController">
   <pf-wizard-substep step-title="Summary" step-id="review-summary" step-priority="0" next-enabled="true" prev-enabled="true" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
-    <div pf-wizard-review-page shown="pageShown" wizard-data="data"></div>
+    <pf-wizard-review-page shown="pageShown" wizard-data="data"></pf-wizard-review-page>
   </pf-wizard-substep>
 </div>