From 3f0da4519e5dc7cc8334ca76f43904b640f9baf8 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Fri, 23 Jan 2015 21:22:37 -0800
Subject: [PATCH] CRM-15856 - crmUiWizard - Disable "Next" button until the
 step is complete. Update wizards.

---
 js/angular-crm-ui.js                 | 13 ++++++++++---
 partials/crmMailing/edit-wizard.html |  8 ++++----
 partials/crmMailing/edit.html        |  4 ++--
 partials/crmMailingAB/edit.html      | 12 ++++++------
 partials/crmUi/wizard.html           |  4 ++--
 5 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/js/angular-crm-ui.js b/js/angular-crm-ui.js
index 4ead37a3e8..1d18f714c2 100644
--- a/js/angular-crm-ui.js
+++ b/js/angular-crm-ui.js
@@ -511,6 +511,9 @@
           /// @return bool whether the current step is last
           this.$last = function() { return this.$index() === steps.length -1; };
           this.$maxVisit = function() { return maxVisited; };
+          this.$validStep = function() {
+            return steps[selectedIndex].isStepValid();
+          };
           this.iconFor = function(index) {
             if (index < this.$index()) return '√';
             if (index === this.$index()) return '»';
@@ -584,13 +587,13 @@
       };
     })
 
-    // example: <div crm-ui-wizard-step crm-title="ts('My Title')">...content...</div>
+    // example: <div crm-ui-wizard-step crm-title="ts('My Title')" ng-form="mySubForm">...content...</div>
     // If there are any conditional steps, then be sure to set a weight explicitly on *all* steps to maintain ordering.
     // example: <div crm-ui-wizard-step="100" crm-title="..." ng-if="...">...content...</div>
     .directive('crmUiWizardStep', function() {
       var nextWeight = 1;
       return {
-        require: '^crmUiWizard',
+        require: ['^crmUiWizard', 'form'],
         restrict: 'EA',
         scope: {
           crmTitle: '@', // expression, evaluates to a printable string
@@ -598,12 +601,16 @@
         },
         template: '<div class="crm-wizard-step" ng-show="selected" ng-transclude/></div>',
         transclude: true,
-        link: function (scope, element, attrs, crmUiWizardCtrl) {
+        link: function (scope, element, attrs, ctrls) {
+          var crmUiWizardCtrl = ctrls[0], form = ctrls[1];
           if (scope.crmUiWizardStep) {
             scope.crmUiWizardStep = parseInt(scope.crmUiWizardStep);
           } else {
             scope.crmUiWizardStep = nextWeight++;
           }
+          scope.isStepValid = function() {
+            return form.$valid;
+          };
           crmUiWizardCtrl.add(scope);
           element.on('$destroy', function(){
             crmUiWizardCtrl.remove(scope);
diff --git a/partials/crmMailing/edit-wizard.html b/partials/crmMailing/edit-wizard.html
index b9ee637196..84baec755f 100644
--- a/partials/crmMailing/edit-wizard.html
+++ b/partials/crmMailing/edit-wizard.html
@@ -11,11 +11,11 @@
 
     <div crm-ui-wizard>
 
-      <div crm-ui-wizard-step crm-title="ts('Setup')">
+      <div crm-ui-wizard-step crm-title="ts('Setup')" ng-form="setupForm">
         <div crm-mailing-block-summary crm-mailing="mailing"/>
       </div>
 
-      <div crm-ui-wizard-step crm-title="ts('Content')">
+      <div crm-ui-wizard-step crm-title="ts('Content')" ng-form="contentForm">
         <div crm-mailing-block-mailing crm-mailing="mailing"/>
         <div crm-ui-accordion crm-title="ts('HTML')">
           <div crm-mailing-body-html crm-mailing="mailing"/>
@@ -34,7 +34,7 @@
         </div>
       </div>
 
-      <div crm-ui-wizard-step crm-title="ts('Options')">
+      <div crm-ui-wizard-step crm-title="ts('Options')" ng-form="optionsForm">
         <div crm-ui-accordion crm-title="ts('Schedule')">
           <div crm-mailing-block-schedule crm-mailing="mailing"/>
         </div>
@@ -50,7 +50,7 @@
         </div>
       </div>
 
-      <div crm-ui-wizard-step crm-title="ts('Review')">
+      <div crm-ui-wizard-step crm-title="ts('Review')" ng-form="reviewForm">
         <div crm-ui-accordion crm-title="ts('Review')">
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
diff --git a/partials/crmMailing/edit.html b/partials/crmMailing/edit.html
index 3cdda25c78..eb65d0117b 100644
--- a/partials/crmMailing/edit.html
+++ b/partials/crmMailing/edit.html
@@ -10,7 +10,7 @@
 
   <div class="crm-block crm-form-block crmMailing">
     <div crm-ui-wizard>
-      <div crm-ui-wizard-step crm-title="ts('Define Mailing')">
+      <div crm-ui-wizard-step crm-title="ts('Define Mailing')" ng-form="defineForm">
         <div crm-ui-accordion crm-title="ts('Summary')">
           <div crm-mailing-block-summary crm-mailing="mailing"/>
         </div>
@@ -44,7 +44,7 @@
           <div crm-mailing-block-preview crm-mailing="mailing" on-preview="previewMailing(mailing, preview.mode)" on-send="sendTest(mailing, attachments, preview.recipient)" />
         </div>
       </div>
-      <div crm-ui-wizard-step crm-title="ts('Review and Schedule')">
+      <div crm-ui-wizard-step crm-title="ts('Review and Schedule')" ng-form="reviewForm">
         <div crm-ui-accordion crm-title="ts('Review')">
           <div crm-mailing-block-review crm-mailing="mailing"/>
         </div>
diff --git a/partials/crmMailingAB/edit.html b/partials/crmMailingAB/edit.html
index f68d87a6c6..177bbdf63d 100644
--- a/partials/crmMailingAB/edit.html
+++ b/partials/crmMailingAB/edit.html
@@ -16,7 +16,7 @@
 <form name="crmMailingAB" novalidate ng-hide="isSubmitted()">
   <div class="crm-block crm-form-block crmMailing">
     <div crm-ui-wizard>
-      <div crm-ui-wizard-step="10" crm-title="ts('Setup')">
+      <div crm-ui-wizard-step="10" crm-title="ts('Setup')" ng-form="setupForm">
         <div
           crm-mailing-ab-block-setup="{
             help: 1,
@@ -26,7 +26,7 @@
           }"
           crm-abtest="abtest"></div>
       </div>
-      <div crm-ui-wizard-step="11" crm-title="ts('Target')">
+      <div crm-ui-wizard-step="11" crm-title="ts('Target')" ng-form="targetForm">
         <div
           crm-mailing-ab-block-setup="{
             recipients: 1,
@@ -34,7 +34,7 @@
           }"
           crm-abtest="abtest"></div>
       </div>
-      <div crm-ui-wizard-step="20" crm-title="ts('Compose')" ng-if="criteriaName != 'Two different emails'">
+      <div crm-ui-wizard-step="20" crm-title="ts('Compose')" ng-if="criteriaName != 'Two different emails'" ng-form="composeForm">
         <div crm-ui-tab-set>
           <div crm-ui-tab id="tab-mailing" crm-title="ts('Mailing')">
             <div
@@ -89,7 +89,7 @@
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.b" on-preview="previewMailing('b', preview.mode)" on-send="sendTest('b', preview.recipient)" />
         </div>
       </div>
-      <div crm-ui-wizard-step="21" crm-title="ts('Compose (A)')" ng-if="criteriaName == 'Two different emails'">
+      <div crm-ui-wizard-step="21" crm-title="ts('Compose (A)')" ng-if="criteriaName == 'Two different emails'" ng-form="composeAForm">
         <div crm-ui-tab-set>
           <div crm-ui-tab id="tab-mailingA" crm-title="ts('Mailing')">
             <div
@@ -124,7 +124,7 @@
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.a" on-preview="previewMailing('a', preview.mode)" on-send="sendTest('a', preview.recipient)" />
         </div>
       </div>
-      <div crm-ui-wizard-step="22" crm-title="ts('Compose (B)')" ng-if="criteriaName == 'Two different emails'">
+      <div crm-ui-wizard-step="22" crm-title="ts('Compose (B)')" ng-if="criteriaName == 'Two different emails'" ng-form="composeBForm">
         <div crm-ui-tab-set>
           <div crm-ui-tab id="tab-mailingB" crm-title="ts('Mailing')">
             <div
@@ -159,7 +159,7 @@
           <div crm-mailing-block-preview crm-mailing="abtest.mailings.b" on-preview="previewMailing('b', preview.mode)" on-send="sendTest('b', preview.recipient)" />
         </div>
       </div>
-      <div crm-ui-wizard-step="30" crm-title="ts('Schedule')">
+      <div crm-ui-wizard-step="30" crm-title="ts('Schedule')" ng-form="schedForm">
         <div
           crm-mailing-ab-block-setup="{
             scheduled_date: 1,
diff --git a/partials/crmUi/wizard.html b/partials/crmUi/wizard.html
index 524e3a8bb0..b2afd77797 100644
--- a/partials/crmUi/wizard.html
+++ b/partials/crmUi/wizard.html
@@ -10,6 +10,6 @@
   <div class="crm-wizard-body" ng-transclude/>
   <div class="crm-wizard-buttons">
     <button ng-click="crmUiWizardCtrl.previous()" ng-show="!crmUiWizardCtrl.$first()">Previous</button>
-    <button ng-click="crmUiWizardCtrl.next()" ng-show="!crmUiWizardCtrl.$last()">Next</button>
+    <button ng-click="crmUiWizardCtrl.next()" ng-show="!crmUiWizardCtrl.$last()" ng-disabled="!crmUiWizardCtrl.$validStep()">Next</button>
   </div>
-</div>
\ No newline at end of file
+</div>
-- 
2.25.1