Improving formItem mixin and form dialog component behavior

Packages/ohif-core/client/components/base/mixins/formItem.js

@@ -41,7 +41,7 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 // returning `undefined` and breaking the app
                 Meteor.defer(() => {
                     component.$element.val(value).trigger('change');
-                })
+                });
             };
 
             // Disable or enable the component
@@ -221,6 +221,17 @@ OHIF.mixins.formItem = new OHIF.Mixin({
                 return component.changeObserver.depend();
             };
 
+            // Click the first submit (or first button if submit not found) button on closest form
+            component.triggerFormMainButton = () => {
+                const $form = component.$element.closest('form');
+                let $formButton = $form.find('button[type=submit]:first');
+                if (!$formButton.length) {
+                    $formButton = $form.find('button:first');
+                }
+
+                $formButton.click();
+            };
+
         },
 
         onRendered() {

Packages/ohif-core/client/components/base/templates/button.html

@@ -4,6 +4,7 @@
         class="{{this.class}}"
         disabled="{{#if this.disabled}}disabled{{/if}}"
         title="{{this.title}}"
+        type="{{this.type}}"
         {{this.tagAttributes}}
     >
         {{>UI.contentBlock}}

Packages/ohif-core/client/components/bootstrap/dialog/form.html

@@ -13,12 +13,14 @@
                     {{>section 'dialogFooter'}}
                     {{#unless this.hideCancel}}
                         {{#button action='cancel'
+                            disabled=this.cancelDisabled
                             class=(concat 'btn btn-cancel ' (choose this.cancelClass 'btn-default'))
                             tagAttributes=(extend this.tagAttributes data-dismiss='modal')
                         }}{{choose this.cancelLabel 'Cancel'}}{{/button}}
                     {{/unless}}
                     {{#unless this.hideConfirm}}
                         {{#button action='confirm'
+                            disabled=this.confirmDisabled
                             class=(concat 'btn btn-confirm ' (choose this.confirmClass 'btn-primary'))
                         }}{{choose this.confirmLabel 'Confirm'}}{{/button}}
                     {{/unless}}

Packages/ohif-core/client/components/bootstrap/dialog/form.js

@@ -5,6 +5,14 @@ import { OHIF } from 'meteor/ohif:core';
 Template.dialogForm.onCreated(() => {
     const instance = Template.instance();
 
+    const dismissModal = (promiseFunction, param) => {
+        // Hide the modal, removing the backdrop
+        instance.$('.modal').one('hidden.bs.modal', event => {
+            // Resolve or reject the promise with the given parameter
+            promiseFunction(param);
+        }).modal('hide');
+    };
+
     instance.api = {
 
         confirm() {
@@ -14,28 +22,34 @@ Template.dialogForm.onCreated(() => {
                 return;
             }
 
-            // Hide the modal, removing the backdrop
+            const formData = form.value();
-            instance.$('.modal').one('hidden.bs.modal', event => {
+            const dismiss = param => dismissModal(instance.data.promiseResolve, param);
-                // Get the form value and call the confirm callback or resolve the promise
+
-                const formData = form.value();
+            if (_.isFunction(instance.data.confirmCallback)) {
-                if (_.isFunction(instance.data.confirmCallback)) {
+                const result = instance.data.confirmCallback(formData);
-                    instance.data.confirmCallback(formData, instance.data.promiseResolve);
+                if (result instanceof Promise) {
+                    return result.then(dismiss);
                 } else {
-                    instance.data.promiseResolve(formData);
+                    return dismiss(result);
                 }
-            }).modal('hide');
+            }
+
+            dismiss(formData);
         },
 
         cancel() {
-            // Hide the modal, removing the backdrop
+            const dismiss = param => dismissModal(instance.data.promiseReject, param);
-            instance.$('.modal').one('hidden.bs.modal', event => {
+
-                // Call the cancel callback or resolve the promise
+            if (_.isFunction(instance.data.cancelCallback)) {
-                if (_.isFunction(instance.data.cancelCallback)) {
+                const result = instance.data.cancelCallback();
-                    instance.data.cancelCallback(instance.data.promiseReject);
+                if (result instanceof Promise) {
+                    return result.then(dismiss);
                 } else {
-                    instance.data.promiseReject();
+                    return dismiss(result);
                 }
-            }).modal('hide');
+            }
+
+            dismiss();
         }
 
     };

Packages/ohif-measurements/client/components/association/associationModal/associationModal.js

@@ -9,7 +9,7 @@ import { _ } from 'meteor/underscore';
 Template.dialogStudyAssociation.onCreated(() => {
     const instance = Template.instance();
 
-    instance.data.confirmCallback = (formData, resolve) => {
+    instance.data.confirmCallback = formData => {
         OHIF.log.info('Saving associations');
         const Timepoints = OHIF.studylist.timepointApi.timepoints;
 
@@ -140,6 +140,6 @@ Template.dialogStudyAssociation.onCreated(() => {
 
         OHIF.studylist.timepointApi.storeTimepoints();
 
-        resolve();
+        return formData;
     };
 });