LT-366: StudyList :: Progress Dialog

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

@@ -17,11 +17,11 @@
                 </div>
                 <div class="modal-footer">
                     {{#button action='cancel'
-                        class=(concat 'btn ' (choose this.cancelClass 'btn-default'))
+                        class=(concat 'btn btn-cancel ' (choose this.cancelClass 'btn-default'))
                         tagAttributes=(extend this.tagAttributes data-dismiss='modal')
                     }}{{choose this.cancelLabel 'Cancel'}}{{/button}}
                     {{#button action='confirm'
-                        class=(concat 'btn ' (choose this.confirmClass 'btn-primary'))
+                        class=(concat 'btn btn-confirm ' (choose this.confirmClass 'btn-primary'))
                     }}{{choose this.confirmLabel 'Confirm'}}{{/button}}
                 </div>
             {{/form}}

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

@@ -0,0 +1,13 @@
+<template name="dialogProgress">
+    {{#dialogForm (extend this
+        dialogClass='modal-sm modal-progress'
+        title=(choose this.title 'Processing...')
+    )}}
+      <div class="status">
+          <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: {{progress}}%">{{formatNumberPrecision progress 0}}%</div>
+      </div>
+      <div class="message">
+          {{{message}}}
+      </div>
+    {{/dialogForm}}
+</template>

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

@@ -0,0 +1,78 @@
+import { Template } from 'meteor/templating';
+import { Session } from 'meteor/session';
+import { _ } from 'meteor/underscore';
+
+Template.dialogProgress.onCreated(() => {
+  console.log('dialogProgress :: onCreated');
+});
+
+Template.dialogProgress.onCreated(() => {
+  Session.set('progressDialogState', {
+    progress: 0,
+    message: 'Test Message'
+  });
+})
+
+Template.dialogProgress.onDestroyed(() => {
+  Session.set('progressDialogState', undefined);
+})
+
+Template.dialogProgress.onRendered(() => {
+  const instance = Template.instance();
+  const task = instance.data.task;
+  const state = Session.get('progressDialogState');
+
+  const progressDialog = {
+    promise: instance.data.promise,
+
+    done: () => {
+      // Hide the modal, removing the backdrop
+      instance.$('.modal').on('hidden.bs.modal', event => {
+        instance.data.promiseResolve();
+      }).modal('hide');
+    },
+
+    cancel: () => {
+      // Hide the modal, removing the backdrop
+      instance.$('.modal').on('hidden.bs.modal', event => {
+        instance.data.promiseReject();
+      }).modal('hide');
+    },
+
+    setProgress: _.throttle(progress => {
+      const state = Session.get('progressDialogState');
+      state.progress = Math.min(1, progress);
+
+      Session.set('progressDialogState', state);
+    }, 100),
+
+    setMessage: _.throttle(message => {
+      const state = Session.get('progressDialogState');
+      state.message = message;
+
+      Session.set('progressDialogState', state);
+    }, 100)
+  }
+
+  task.start(progressDialog);
+});
+
+Template.dialogProgress.helpers({
+  progress() {
+    const state = Session.get('progressDialogState');
+    if (!state) {
+      return;
+    }
+
+    return state.progress * 100;
+  },
+
+  message() {
+    const state = Session.get('progressDialogState');
+    if (!state) {
+      return;
+    }
+
+    return state.message;
+  }
+})

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

@@ -0,0 +1,7 @@
+.modal-progress
+  .status
+    .progress-bar
+      float: none;
+  .btn-confirm
+    display: none
+  

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

@@ -1,4 +1,6 @@
 import './dialog/confirm.html';
+import './dialog/progress.html';
+import './dialog/progress.js';
 import './dialog/form.html';
 import './dialog/form.js';
 import './dialog/login.html';

Packages/ohif-core/package.js

@@ -26,6 +26,7 @@ Package.onUse(function(api) {
     api.addFiles([
         'client/ui/dimensional/dimensional.styl',
         'client/ui/resizable/resizable.styl',
+        'client/components/bootstrap/dialog/progress.styl',
         'client/components/bootstrap/dialog/unsavedChangesDialog.styl',
         'client/components/bootstrap/dropdown/dropdown.styl'
     ], 'client');