Adding loading state and error message when saving measurements

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

@@ -1,5 +1,6 @@
 import { Template } from 'meteor/templating';
 import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
 
 Template.dialogForm.onCreated(() => {
     const instance = Template.instance();
@@ -14,7 +15,7 @@ Template.dialogForm.onCreated(() => {
             }
 
             // Hide the modal, removing the backdrop
-            instance.$('.modal').on('hidden.bs.modal', event => {
+            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)) {
@@ -27,7 +28,7 @@ Template.dialogForm.onCreated(() => {
 
         cancel() {
             // Hide the modal, removing the backdrop
-            instance.$('.modal').on('hidden.bs.modal', event => {
+            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);
@@ -61,21 +62,21 @@ Template.dialogForm.onRendered(() => {
 });
 
 Template.dialogForm.events({
-    'keydown'(event) {
+    keydown(event) {
         const instance = Template.instance(),
               keyCode = event.keyCode || event.which;
 
         let handled = false;
 
-        if(keyCode === 27) {
+        if (keyCode === 27) {
             instance.$('.btn.btn-cancel').click();
             handled = true;
-        } else if(keyCode === 13) {
+        } else if (keyCode === 13) {
             instance.$('.btn.btn-confirm').click();
             handled = true;
         }
 
-        if(handled) {
+        if (handled) {
             event.stopPropagation();
         }
     }

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

@@ -0,0 +1,13 @@
+<template name="dialogInfo">
+  {{#dialogSimple (extend this
+    title=(choose this.title 'Error')
+  )}}
+    <div class="messages">
+      {{#each message in this.messages}}
+        <div class="message">{{{message}}}</div>
+      {{else}}
+        <div class="message">An error has ocurred.</div>
+      {{/each}}
+    </div>
+  {{/dialogSimple}}
+</template>

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

@@ -0,0 +1,9 @@
+import { Template } from 'meteor/templating';
+
+Template.dialogInfo.onRendered(() => {
+    const instance = Template.instance();
+
+    const $modal = instance.$('.modal');
+
+    $modal.one('hidden.bs.modal', () => instance.data.promiseResolve());
+});

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

@@ -0,0 +1,7 @@
+<template name="dialogLoading">
+    <div id="{{this.id}}" class="modal fade" tabindex="-1" role="dialog">
+        <div class="loading-text noselect">
+            {{choose this.text 'Loading...'}} <i class="fa fa-spin fa-circle-o-notch fa-fw"></i>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,14 @@
+import { Template } from 'meteor/templating';
+
+Template.dialogLoading.onRendered(() => {
+    const instance = Template.instance();
+
+    const $modal = instance.$('.modal');
+
+    // Create the bootstrap modal
+    $modal.modal({
+        backdrop: 'static',
+        keyboard: false,
+        modal: true
+    });
+});

Packages/ohif-core/client/components/bootstrap/dialog/loading.styl

@@ -0,0 +1,9 @@
+@import "{ohif:design}/app"
+
+.modal .loading-text
+  theme('color', '$textSecondaryColor')
+  font-size: 30px
+  height: 100vh
+  line-height: 100vh
+  text-align: center
+  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 1px 0 0 #000, 0 1px 0 #000

Packages/ohif-core/client/components/bootstrap/index.js

@@ -1,10 +1,14 @@
 import './dialog/confirm.html';
-import './dialog/progress.html';
-import './dialog/progress.js';
 import './dialog/form.html';
 import './dialog/form.js';
+import './dialog/info.html';
+import './dialog/info.js';
+import './dialog/loading.html';
+import './dialog/loading.js';
 import './dialog/login.html';
 import './dialog/login.js';
+import './dialog/progress.html';
+import './dialog/progress.js';
 import './dialog/simple.html';
 import './dialog/simple.js';
 import './dialog/unsavedChangesDialog.html';