@@ -10898,9 +10898,10 @@ angular.module('patternfly.filters').component('pfFilterResults', {
10898
10898
* <ul style='list-style-type: none'>
10899
10899
* <li>.label - the text to display on the button
10900
10900
* <li>.class - (optional) classes to add to the button
10901
- * <li>.actionFn - (optional) user defined function to call when the button is clicked
10901
+ * <li>.actionFn - (optional) user defined function to call when the button is clicked. May optionally return false
10902
+ * to prevent closing the modal. For example to perfrom asynchronous validations.
10902
10903
* <li>.isDisabled - (optional) boolean true if the button should be disabled by default
10903
- * <li>.isCancel - (optional) boolean true is the button should cancel and dismiss the modal
10904
+ * <li>.isCancel - (optional) boolean true if the button should cancel and dismiss the modal
10904
10905
* </ul>
10905
10906
* @param {string=} titleId Id of the title. "modalTitle" by default
10906
10907
* @param {boolean=} hideCloseIcon Flag indicating that the modal should hide the 'x' close icon.
@@ -10912,7 +10913,11 @@ angular.module('patternfly.filters').component('pfFilterResults', {
10912
10913
* @param {object=} modalBodyScope Object containing the scope for the modalBodyTemplate
10913
10914
*
10914
10915
* @example
10915
- <example module="patternfly.modals">
10916
+ <example module="patternfly.modals.demo">
10917
+
10918
+ <file name="modules.js">
10919
+ angular.module('patternfly.modals.demo', ['patternfly.modals', 'patternfly.notification']);
10920
+ </file>
10916
10921
10917
10922
<file name="index.html">
10918
10923
<div ng-controller="DemoModalOverlayCtrl" class="example-container">
@@ -10949,7 +10954,7 @@ angular.module('patternfly.filters').component('pfFilterResults', {
10949
10954
</file>
10950
10955
10951
10956
<file name="script.js">
10952
- angular.module('patternfly.modals').controller('DemoModalOverlayCtrl', function( $scope ) {
10957
+ angular.module('patternfly.modals.demo ').controller('DemoModalOverlayCtrl', function( $scope, $timeout ) {
10953
10958
10954
10959
$scope.actionsText = "";
10955
10960
@@ -10983,7 +10988,15 @@ angular.module('patternfly.filters').component('pfFilterResults', {
10983
10988
third: ""
10984
10989
},
10985
10990
allowBackgroundDismissal: false,
10986
- showNotAllowedMsg: false
10991
+ showNotAllowedMsg: false,
10992
+ maxLength: 6,
10993
+ firstInputInvalid: false,
10994
+ validating: false,
10995
+ formErrorNotification: {
10996
+ type: "danger",
10997
+ header: "Input is not valid.",
10998
+ message: "Fix the errors below to continue saving."
10999
+ }
10987
11000
};
10988
11001
$scope.actionButtons = [
10989
11002
{
@@ -10994,11 +11007,22 @@ angular.module('patternfly.filters').component('pfFilterResults', {
10994
11007
label: "Save",
10995
11008
class: "btn-primary custom-class",
10996
11009
actionFn: function() {
10997
- $scope.actionsText = "inputs {" +
11010
+ $scope.actionsText = "inputs {" +
10998
11011
"\n first: " + $scope.formScope.inputs.first +
10999
11012
"\n second: " + $scope.formScope.inputs.second +
11000
11013
"\n third: " + $scope.formScope.inputs.third +
11001
11014
"\n}" + $scope.actionsText;
11015
+ $scope.formScope.firstInputInvalid = false;
11016
+ $scope.formScope.validating = true;
11017
+ $timeout(function () {
11018
+ $scope.formScope.validating = false;
11019
+ if ($scope.formScope.inputs.first === 'apples') {
11020
+ $scope.showModal = false;
11021
+ } else {
11022
+ $scope.formScope.firstInputInvalid = true;
11023
+ }
11024
+ }, 3000);
11025
+ return false;
11002
11026
}
11003
11027
}];
11004
11028
@@ -11030,16 +11054,36 @@ angular.module('patternfly.filters').component('pfFilterResults', {
11030
11054
11031
11055
<file name="demo-form.html">
11032
11056
<ng-form name="demoForm" class="form-horizontal">
11057
+ <pf-inline-notification ng-if="$ctrl.modalBodyScope.firstInputInvalid"
11058
+ pf-notification-type="$ctrl.modalBodyScope.formErrorNotification.type"
11059
+ pf-notification-header="$ctrl.modalBodyScope.formErrorNotification.header"
11060
+ pf-notification-message="$ctrl.modalBodyScope.formErrorNotification.message">
11061
+ </pf-inline-notification>
11033
11062
<div class="form-group">
11034
11063
<label class="col-sm-3 control-label required-pf" for="textInput">Field One</label>
11035
- <div class="col-sm-9">
11036
- <input type="text" id="textInput" class="form-control" ng-model="$ctrl.modalBodyScope.inputs.first" ng-required="true"/>
11064
+ <div class="col-sm-9"
11065
+ ng-class="{ 'has-error': demoForm.fieldOne.$dirty && demoForm.fieldOne.$touched && $ctrl.modalBodyScope.firstInputInvalid}">
11066
+ <input type="text" id="textInput" name="fieldOne" class="form-control"
11067
+ ng-model="$ctrl.modalBodyScope.inputs.first" ng-required="true"/>
11068
+ <div class="has-error" ng-show="$ctrl.modalBodyScope.firstInputInvalid">
11069
+ <span class="help-block">
11070
+ Invalid value for Field One. Only acceptable value is 'apples'
11071
+ </span>
11072
+ </div>
11037
11073
</div>
11038
11074
</div>
11039
11075
<div class="form-group">
11040
11076
<label class="col-sm-3 control-label" for="textInput2">Field Two</label>
11041
- <div class="col-sm-9">
11042
- <input type="text" id="textInput2" class="form-control" ng-model="$ctrl.modalBodyScope.inputs.second"/>
11077
+ <div class="col-sm-9"
11078
+ ng-class="{ 'has-error': demoForm.fieldTwo.$dirty && demoForm.fieldTwo.$touched && demoForm.fieldTwo.$error.maxlength}" >
11079
+ <input type="text" name="fieldTwo" id="textInput2" class="form-control"
11080
+ ng-model="$ctrl.modalBodyScope.inputs.second"
11081
+ ng-maxlength="$ctrl.modalBodyScope.maxLength" />
11082
+ <div class="has-error" ng-show="demoForm.fieldTwo.$error.maxlength">
11083
+ <span class="help-block">
11084
+ Field Two exceeds max length of {{$ctrl.modalBodyScope.maxLength}}!
11085
+ </span>
11086
+ </div>
11043
11087
</div>
11044
11088
</div>
11045
11089
<div class="form-group">
@@ -11060,6 +11104,9 @@ angular.module('patternfly.filters').component('pfFilterResults', {
11060
11104
</div>
11061
11105
</div>
11062
11106
</div>
11107
+ <div ng-if="$ctrl.modalBodyScope.validating">
11108
+ <div class="spinner spinner-lg blank-slate-pf-icon"></div>
11109
+ </div>
11063
11110
</ng-form>
11064
11111
</file>
11065
11112
@@ -11091,9 +11138,10 @@ angular.module('patternfly.filters').component('pfFilterResults', {
11091
11138
'use strict';
11092
11139
11093
11140
var ctrl = this;
11141
+ var modalInstance;
11094
11142
11095
11143
ctrl.open = function () {
11096
- $uibModal.open({
11144
+ modalInstance = $uibModal.open({
11097
11145
component: 'pfModalOverlayContent',
11098
11146
backdrop: ctrl.backgroundClose ? true : 'static',
11099
11147
resolve: {
@@ -11125,8 +11173,9 @@ angular.module('patternfly.filters').component('pfFilterResults', {
11125
11173
return ctrl.actionButtons;
11126
11174
}
11127
11175
}
11128
- })
11129
- .result.then(
11176
+ });
11177
+
11178
+ modalInstance.result.then(
11130
11179
function (dismissCause) {
11131
11180
ctrl.close({'dismissCause': dismissCause}); // closed
11132
11181
},
@@ -11143,8 +11192,12 @@ angular.module('patternfly.filters').component('pfFilterResults', {
11143
11192
};
11144
11193
11145
11194
ctrl.$onChanges = function (changesObj) {
11146
- if (changesObj.showModal && changesObj.showModal.currentValue === true) {
11147
- ctrl.open();
11195
+ if (changesObj.showModal) {
11196
+ if (changesObj.showModal.currentValue === true) {
11197
+ ctrl.open();
11198
+ } else if (changesObj.showModal.currentValue === false && modalInstance) {
11199
+ modalInstance.dismiss('showModal set to false');
11200
+ }
11148
11201
}
11149
11202
};
11150
11203
}]
@@ -11175,9 +11228,12 @@ angular.module('patternfly.modals').component('pfModalOverlayContent', {
11175
11228
11176
11229
ctrl.ok = function (label, actionFn) {
11177
11230
if (typeof actionFn === "function") {
11178
- actionFn();
11231
+ if (actionFn() !== false) {
11232
+ ctrl.close({$value: label});
11233
+ }
11234
+ } else {
11235
+ ctrl.close({$value: label});
11179
11236
}
11180
- ctrl.close({$value: label});
11181
11237
};
11182
11238
11183
11239
ctrl.cancel = function (actionFn) {
0 commit comments