@@ -10898,9 +10898,10 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1089810898 * <ul style='list-style-type: none'>
1089910899 * <li>.label - the text to display on the button
1090010900 * <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.
1090210903 * <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
1090410905 * </ul>
1090510906 * @param {string=} titleId Id of the title. "modalTitle" by default
1090610907 * @param {boolean=} hideCloseIcon Flag indicating that the modal should hide the 'x' close icon.
@@ -10912,7 +10913,11 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1091210913 * @param {object=} modalBodyScope Object containing the scope for the modalBodyTemplate
1091310914 *
1091410915 * @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>
1091610921
1091710922 <file name="index.html">
1091810923 <div ng-controller="DemoModalOverlayCtrl" class="example-container">
@@ -10949,7 +10954,7 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1094910954 </file>
1095010955
1095110956 <file name="script.js">
10952- angular.module('patternfly.modals').controller('DemoModalOverlayCtrl', function( $scope ) {
10957+ angular.module('patternfly.modals.demo ').controller('DemoModalOverlayCtrl', function( $scope, $timeout ) {
1095310958
1095410959 $scope.actionsText = "";
1095510960
@@ -10983,7 +10988,15 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1098310988 third: ""
1098410989 },
1098510990 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+ }
1098711000 };
1098811001 $scope.actionButtons = [
1098911002 {
@@ -10994,11 +11007,22 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1099411007 label: "Save",
1099511008 class: "btn-primary custom-class",
1099611009 actionFn: function() {
10997- $scope.actionsText = "inputs {" +
11010+ $scope.actionsText = "inputs {" +
1099811011 "\n first: " + $scope.formScope.inputs.first +
1099911012 "\n second: " + $scope.formScope.inputs.second +
1100011013 "\n third: " + $scope.formScope.inputs.third +
1100111014 "\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;
1100211026 }
1100311027 }];
1100411028
@@ -11030,16 +11054,36 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1103011054
1103111055 <file name="demo-form.html">
1103211056 <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>
1103311062 <div class="form-group">
1103411063 <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>
1103711073 </div>
1103811074 </div>
1103911075 <div class="form-group">
1104011076 <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>
1104311087 </div>
1104411088 </div>
1104511089 <div class="form-group">
@@ -11060,6 +11104,9 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1106011104 </div>
1106111105 </div>
1106211106 </div>
11107+ <div ng-if="$ctrl.modalBodyScope.validating">
11108+ <div class="spinner spinner-lg blank-slate-pf-icon"></div>
11109+ </div>
1106311110 </ng-form>
1106411111 </file>
1106511112
@@ -11091,9 +11138,10 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1109111138 'use strict';
1109211139
1109311140 var ctrl = this;
11141+ var modalInstance;
1109411142
1109511143 ctrl.open = function () {
11096- $uibModal.open({
11144+ modalInstance = $uibModal.open({
1109711145 component: 'pfModalOverlayContent',
1109811146 backdrop: ctrl.backgroundClose ? true : 'static',
1109911147 resolve: {
@@ -11125,8 +11173,9 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1112511173 return ctrl.actionButtons;
1112611174 }
1112711175 }
11128- })
11129- .result.then(
11176+ });
11177+
11178+ modalInstance.result.then(
1113011179 function (dismissCause) {
1113111180 ctrl.close({'dismissCause': dismissCause}); // closed
1113211181 },
@@ -11143,8 +11192,12 @@ angular.module('patternfly.filters').component('pfFilterResults', {
1114311192 };
1114411193
1114511194 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+ }
1114811201 }
1114911202 };
1115011203 }]
@@ -11175,9 +11228,12 @@ angular.module('patternfly.modals').component('pfModalOverlayContent', {
1117511228
1117611229 ctrl.ok = function (label, actionFn) {
1117711230 if (typeof actionFn === "function") {
11178- actionFn();
11231+ if (actionFn() !== false) {
11232+ ctrl.close({$value: label});
11233+ }
11234+ } else {
11235+ ctrl.close({$value: label});
1117911236 }
11180- ctrl.close({$value: label});
1118111237 };
1118211238
1118311239 ctrl.cancel = function (actionFn) {
0 commit comments