From fddf486064a5b50cca24bb613ada88ab5bd4626a Mon Sep 17 00:00:00 2001 From: Bruno Alves de Faria Date: Fri, 14 Jul 2017 07:37:14 -0300 Subject: [PATCH] Improving formItem mixin and form dialog component behavior --- .../client/components/base/mixins/formItem.js | 13 +++++- .../components/base/templates/button.html | 1 + .../components/bootstrap/dialog/form.html | 2 + .../components/bootstrap/dialog/form.js | 44 ++++++++++++------- .../associationModal/associationModal.js | 4 +- 5 files changed, 46 insertions(+), 18 deletions(-) diff --git a/Packages/ohif-core/client/components/base/mixins/formItem.js b/Packages/ohif-core/client/components/base/mixins/formItem.js index f40dc4ad8..1b54b3079 100644 --- a/Packages/ohif-core/client/components/base/mixins/formItem.js +++ b/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() { diff --git a/Packages/ohif-core/client/components/base/templates/button.html b/Packages/ohif-core/client/components/base/templates/button.html index 4b4ce2639..592881fb6 100644 --- a/Packages/ohif-core/client/components/base/templates/button.html +++ b/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}} diff --git a/Packages/ohif-core/client/components/bootstrap/dialog/form.html b/Packages/ohif-core/client/components/bootstrap/dialog/form.html index 1158526be..8f2251c81 100644 --- a/Packages/ohif-core/client/components/bootstrap/dialog/form.html +++ b/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}} diff --git a/Packages/ohif-core/client/components/bootstrap/dialog/form.js b/Packages/ohif-core/client/components/bootstrap/dialog/form.js index 99216760a..7ee2014fc 100644 --- a/Packages/ohif-core/client/components/bootstrap/dialog/form.js +++ b/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 - instance.$('.modal').one('hidden.bs.modal', event => { - // Get the form value and call the confirm callback or resolve the promise - const formData = form.value(); - if (_.isFunction(instance.data.confirmCallback)) { - instance.data.confirmCallback(formData, instance.data.promiseResolve); + const formData = form.value(); + const dismiss = param => dismissModal(instance.data.promiseResolve, param); + + if (_.isFunction(instance.data.confirmCallback)) { + const result = instance.data.confirmCallback(formData); + 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 - instance.$('.modal').one('hidden.bs.modal', event => { - // Call the cancel callback or resolve the promise - if (_.isFunction(instance.data.cancelCallback)) { - instance.data.cancelCallback(instance.data.promiseReject); + const dismiss = param => dismissModal(instance.data.promiseReject, param); + + if (_.isFunction(instance.data.cancelCallback)) { + const result = instance.data.cancelCallback(); + if (result instanceof Promise) { + return result.then(dismiss); } else { - instance.data.promiseReject(); + return dismiss(result); } - }).modal('hide'); + } + + dismiss(); } }; diff --git a/Packages/ohif-measurements/client/components/association/associationModal/associationModal.js b/Packages/ohif-measurements/client/components/association/associationModal/associationModal.js index 427f41d42..7148cef0f 100644 --- a/Packages/ohif-measurements/client/components/association/associationModal/associationModal.js +++ b/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; }; });