Skip to content

Commit 1fd71c3

Browse files
dgutridedgutride
committed
Convert wizard substep directive to component
1 parent 2bcc83e commit 1fd71c3

File tree

8 files changed

+104
-104
lines changed

8 files changed

+104
-104
lines changed

‎src/wizard/wizard-directive.js‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@
99
* The basic structure should be:
1010
* <pre>
1111
* <div pf-wizard>
12-
* <div pf-wizardstep>
13-
* <div pf-wizardsubstep><!-- content here --></div>
14-
* <div pf-wizardsubstep><!-- content here --></div>
12+
* <div pf-wizard-step>
13+
* <pf-wizard-substep><!-- content here --></pf-wizard-substep>
14+
* <pf-wizard-substep><!-- content here --></pf-wizard-substep>
1515
* </div>
16-
* <div pf-wizardstep><!-- additional configuration can be added here with substeps if desired --></div>
17-
* <div pf-wizardstep><!-- review steps and final command here --></div>
16+
* <div pf-wizard-step><!-- additional configuration can be added here with substeps if desired --></div>
17+
* <div pf-wizard-step><!-- review steps and final command here --></div>
1818
* </div>
1919
* </pre>
2020
*
@@ -56,7 +56,7 @@
5656
<div pf-wizard-step step-title="First Step" substeps="true" step-id="details" step-priority="0" show-review="true" show-review-details="true">
5757
<div ng-include="'detail-page.html'">
5858
</div>
59-
<div pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="review-second-template.html">
59+
<pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="review-second-template.html">
6060
<form class="form-horizontal">
6161
<div pf-form-group pf-label="Lorem" required>
6262
<input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
@@ -65,7 +65,7 @@
6565
<input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
6666
</div>
6767
</form>
68-
</div>
68+
</pf-wizard-substep>
6969
</div>
7070
<div pf-wizard-step step-title="Second Step" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="review-second-template.html" >
7171
<form class="form-horizontal">
@@ -86,7 +86,7 @@
8686
</file>
8787
<file name="detail-page.html">
8888
<div ng-controller="DetailsGeneralController">
89-
<div pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
89+
<pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
9090
<form class="form-horizontal">
9191
<div pf-form-group pf-label="Name" required>
9292
<input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
@@ -95,7 +95,7 @@
9595
<input id="new-description" name="description" ng-model="data.description" type="text" />
9696
</div>
9797
</form>
98-
</div>
98+
</pf-wizard-substep>
9999
</div>
100100
</file>
101101
<file name="review-template.html">
@@ -128,14 +128,14 @@
128128
</file>
129129
<file name="summary.html">
130130
<div ng-controller="SummaryController">
131-
<div 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">
131+
<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">
132132
<div pf-wizard-review-page shown="pageShown" wizard-data="data"></div>
133-
</div>
133+
</pf-wizard-substep>
134134
</div>
135135
</file>
136136
<file name="deployment.html">
137137
<div ng-controller="DeploymentController">
138-
<div pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
138+
<pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
139139
<div class="wizard-pf-contents" ng-controller="DeploymentController">
140140
<div class="wizard-pf-process blank-slate-pf" ng-if="!deploymentComplete">
141141
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
@@ -149,7 +149,7 @@
149149
<button type="button" class="btn btn-lg btn-primary">View Deployment</button>
150150
</div>
151151
</div>
152-
</div>
152+
</pf-wizard-substep>
153153
</div>
154154
</file>
155155
<file name="script.js">

‎src/wizard/wizard-substep-directive.js‎

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎src/wizard/wizard-substep.component.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/** @ngdoc directive
2+
* @name patternfly.wizard.component:pfWizardSubstep
3+
* @restrict E
4+
*
5+
* @description
6+
* Component for rendering a Wizard substep. Each substep must be a child of a pf-wizardstep in a pf-wizard directive.
7+
*
8+
* @param {string} stepTitle The step title displayed in the header and used for the review screen when displayed
9+
* @param {string} stepId Sets the text identifier of the step
10+
* @param {number} stepPriority This sets the priority of this wizard step relative to other wizard steps. They should be numbered sequentially in the order they should be viewed.
11+
* @param {boolean=} nextEnabled Sets whether the next button should be enabled when this step is first displayed
12+
* @param {boolean=} prevEnabled Sets whether the back button should be enabled when this step is first displayed
13+
* @param {boolean=} wzDisabled Disables the wizard when this page is shown
14+
* @param {boolean} okToNavAway Sets whether or not it's ok for the user to leave this page
15+
* @param {boolean=} allowClickNav Sets whether the user can click on the numeric step indicators to navigate directly to this step
16+
* @param {string=} description The step description
17+
* @param {object} wizardData Data passed to the step that is shared by the entire wizard
18+
* @param {function()=} onShow The function called when the wizard shows this step
19+
* @param {boolean=} showReviewDetails Indicators whether the review information should be expanded by default when the review step is reached
20+
* @param {string=} reviewTemplate The template that should be used for the review details screen
21+
*/
22+
angular.module('patternfly.wizard').component('pfWizardSubstep', {
23+
transclude: true,
24+
bindings: {
25+
stepTitle: '@',
26+
stepId: '@',
27+
stepPriority: '@',
28+
nextEnabled: '=?',
29+
prevEnabled: '=?',
30+
okToNavAway: '=?',
31+
allowClickNav: '=?',
32+
disabled: '@?wzDisabled',
33+
description: '@',
34+
wizardData: '=',
35+
onShow: '=?',
36+
showReviewDetails: '@?',
37+
reviewTemplate: '@?'
38+
},
39+
require: {
40+
step: '^pfWizardStep'
41+
},
42+
templateUrl: 'wizard/wizard-substep.html',
43+
controller: function () {
44+
'use strict';
45+
var ctrl = this;
46+
47+
if (angular.isUndefined(ctrl.nextEnabled)) {
48+
ctrl.nextEnabled = true;
49+
}
50+
if (angular.isUndefined(ctrl.prevEnabled)) {
51+
ctrl.prevEnabled = true;
52+
}
53+
if (angular.isUndefined(ctrl.showReviewDetails)) {
54+
ctrl.showReviewDetails = false;
55+
}
56+
if (angular.isUndefined(ctrl.stepPriority)) {
57+
ctrl.stepPriority = 999;
58+
} else {
59+
ctrl.stepPriority = parseInt(ctrl.stepPriority);
60+
}
61+
if (angular.isUndefined(ctrl.okToNavAway)) {
62+
ctrl.okToNavAway = true;
63+
}
64+
if (angular.isUndefined(ctrl.allowClickNav)) {
65+
ctrl.allowClickNav = true;
66+
}
67+
68+
ctrl.isPrevEnabled = function () {
69+
var enabled = angular.isUndefined(ctrl.prevEnabled) || ctrl.prevEnabled;
70+
if (ctrl.substeps) {
71+
angular.forEach(ctrl.getEnabledSteps(), function (step) {
72+
enabled = enabled && step.prevEnabled;
73+
});
74+
}
75+
return enabled;
76+
};
77+
ctrl.$onInit = function () {
78+
ctrl.title = ctrl.stepTitle;
79+
ctrl.step.addStep(ctrl);
80+
};
81+
}
82+
});

‎src/wizard/wizard-substep.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
<subsection ng-show="selected" ng-class="{current: selected, done: completed}" class="wizard-pf-step" ng-transclude>
1+
<subsection ng-show="$ctrl.selected" ng-class="{current: $ctrl.selected, done: $ctrl.completed}" class="wizard-pf-step" ng-transclude>
22
</subsection>

‎test/wizard/deployment.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div ng-controller="DeploymentController">
2-
<div pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
2+
<pf-wizard-substep step-title="Deploy" step-id="review-progress" step-priority="1" next-enabled="true" prev-enabled="false" ok-to-nav-away="true" wz-disabled="false" on-show="onShow">
33
<div class="wizard-pf-contents" ng-controller="DeploymentController">
44
<div class="wizard-pf-process blank-slate-pf" ng-if="!deploymentComplete">
55
<div class="spinner spinner-lg blank-slate-pf-icon"></div>
@@ -13,5 +13,5 @@ <h5 class="blank-slate-pf-main-action" id="example_source_deployment-was-success
1313
<button type="button" class="btn btn-lg btn-primary">View Deployment</button>
1414
</div>
1515
</div>
16-
</div>
16+
</pf-wizard-substep>
1717
</div>

‎test/wizard/detail-page.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div ng-controller="DetailsGeneralController">
2-
<div pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
2+
<pf-wizard-substep step-title="General" next-enabled="detailsGeneralComplete" step-id="details-general" step-priority="0" on-show="onShow" review-template="{{reviewTemplate}}" show-review-details="true">
33
<form class="form-horizontal">
44
<div pf-form-group pf-label="Name" required>
55
<input id="new-name" name="name" ng-model="data.name" type="text" ng-change="updateName()" required/>
@@ -8,5 +8,5 @@
88
<input id="new-description" name="description" ng-model="data.description" type="text" />
99
</div>
1010
</form>
11-
</div>
11+
</pf-wizard-substep>
1212
</div>

‎test/wizard/summary.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div ng-controller="SummaryController">
2-
<div 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">
2+
<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">
33
<div pf-wizard-review-page shown="pageShown" wizard-data="data"></div>
4-
</div>
4+
</pf-wizard-substep>
55
</div>

‎test/wizard/wizard-container.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<div pf-wizard-step step-title="First Step" substeps="true" step-id="details" step-priority="0" show-review="true" show-review-details="true">
1313
<div ng-include="'test/wizard/detail-page.html'">
1414
</div>
15-
<div pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="test/wizard/review-second-template.html">
15+
<pf-wizard-substep step-title="Details - Extra" next-enabled="true" step-id="details-extra" step-priority="1" show-review="true" show-review-details="true" review-template="test/wizard/review-second-template.html">
1616
<form class="form-horizontal">
1717
<div pf-form-group pf-label="Lorem" required>
1818
<input id="new-lorem" name="lorem" ng-model="data.lorem" type="text" required/>
@@ -21,7 +21,7 @@
2121
<input id="new-ipsum" name="ipsum" ng-model="data.ipsum" type="text" />
2222
</div>
2323
</form>
24-
</div>
24+
</pf-wizard-substep>
2525
</div>
2626
<div pf-wizard-step step-title="Second Step" substeps="false" step-id="configuration" step-priority="1" show-review="true" review-template="test/wizard/review-second-template.html" >
2727
<form class="form-horizontal">

0 commit comments

Comments
 (0)