feat: bhSubmit checks for promises (#442)

This commit implements the suggestions proposed in #431. The `bhSubmit` directive responsible for toggle the form's $loading state now supports inputs other than Promises. If the input is not a promise, the form immediately cancels the $loading state. Otherwise, the $loading state is toggled off on resolution of the Promise. Closes #431.
Third-Culture-Software · May 27, 2016 · d4c3e69 · d4c3e69
1 parent edfc591
commit d4c3e69
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 46 deletions.
diff --git a/client/src/js/directives/bhSubmit.js b/client/src/js/directives/bhSubmit.js
@@ -22,18 +22,31 @@ function bhSubmitDirective() {
         FormController.$loading = !FormController.$loading;
       };
 
+      // check to see if an object is a promise
+      function isPromise(object) {
+        return object && angular.isFunction(object.finally);
+      }
+
       // bind to the 'submit' event
       $element.bind('submit', function (e) {
 
-        // return the form if the input is invalid.
-        if (FormController.$invalid) { return; }
-
+        // start the loading state
         FormController.$toggleLoading();
 
-        $scope.submit()
-        .finally(function () {
+        // fire the submit method
+        var response = $scope.submit();
+
+        // the response is a promise, toggle the loading state on
+        // fulfillment/rejection
+        if (isPromise(response)) {
+          response.finally(function () {
+            FormController.$toggleLoading();
+          });
+
+        // otherwise, toggle the loading state off right away.
+        } else {
           FormController.$toggleLoading();
-        });
+        }
       });
     }
   };

diff --git a/client/src/partials/vouchers/complex.html b/client/src/partials/vouchers/complex.html
@@ -11,48 +11,50 @@
       <div class="row">
         <div class="col-md-6">
           <div class="panel panel-default">
-            <bh-date-editor
-              date-value="ComplexVoucherCtrl.voucher.date"
-              max-date="ComplexVoucherCtrl.timestamp"
-            >
-            </bh-date-editor>
-
-            <div
-              class="form-group"
-              ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.description.$invalid }">
-              <label class="control-label">{{ "FORM.LABELS.DESCRIPTION" | translate }}</label>
-              <textarea
-                class="form-control"
-                name="description"
-                ng-model="ComplexVoucherCtrl.voucher.description"
-                placeholder="{{ 'FORM.PLACE_HOLDERS.ENTER_DESCRIPTION' | translate }}"
-                required>
-              </textarea>
-              <div class="help-block" ng-messages="ComplexVoucherForm.description.$error" ng-show="ComplexVoucherForm.$submitted">
-                <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
-              </div>
-            </div>
-
-            <!-- @TODO - use a currency selection component -->
-            <div
-              class="radio"
-              ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.currency.$invalid }">
-              <p><strong class="control-label">{{ "FORM.LABELS.CURRENCY" | translate }}</strong></p>
-              <label
-                ng-repeat="currency in ComplexVoucherCtrl.currencies track by currency.id"
-                class="radio-inline">
-                <input
-                  name="currency"
-                  type="radio"
-                  ng-model="ComplexVoucherCtrl.voucher.currency_id"
-                  ng-value="currency.id"
-                  data-currency-option="{{ currency.id }}"
+            <div class="panel-body">
+              <bh-date-editor
+                date-value="ComplexVoucherCtrl.voucher.date"
+                max-date="ComplexVoucherCtrl.timestamp"
+              >
+              </bh-date-editor>
+
+              <div
+                class="form-group"
+                ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.description.$invalid }">
+                <label class="control-label">{{ "FORM.LABELS.DESCRIPTION" | translate }}</label>
+                <textarea
+                  class="form-control"
+                  name="description"
+                  ng-model="ComplexVoucherCtrl.voucher.description"
+                  placeholder="{{ 'FORM.PLACE_HOLDERS.ENTER_DESCRIPTION' | translate }}"
                   required>
-                {{ currency.label }}
-              </label>
+                </textarea>
+                <div class="help-block" ng-messages="ComplexVoucherForm.description.$error" ng-show="ComplexVoucherForm.$submitted">
+                  <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+                </div>
+              </div>
 
-              <div class="help-block" ng-messages="ComplexVoucherForm.currency.$error" ng-show="ComplexVoucherForm.$submitted">
-                <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+              <!-- @TODO - use a currency selection component -->
+              <div
+                class="radio"
+                ng-class="{ 'has-error' : ComplexVoucherForm.$submitted && ComplexVoucherForm.currency.$invalid }">
+                <p><strong class="control-label">{{ "FORM.LABELS.CURRENCY" | translate }}</strong></p>
+                <label
+                  ng-repeat="currency in ComplexVoucherCtrl.currencies track by currency.id"
+                  class="radio-inline">
+                  <input
+                    name="currency"
+                    type="radio"
+                    ng-model="ComplexVoucherCtrl.voucher.currency_id"
+                    ng-value="currency.id"
+                    data-currency-option="{{ currency.id }}"
+                    required>
+                  {{ currency.label }}
+                </label>
+
+                <div class="help-block" ng-messages="ComplexVoucherForm.currency.$error" ng-show="ComplexVoucherForm.$submitted">
+                  <div ng-messages-include="partials/templates/messages.tmpl.html"></div>
+                </div>
               </div>
             </div>
           </div>