PVW-2: Creating form modals mechanism

Packages/ohif-core/client/components/base/template.js

@@ -1,5 +1,7 @@
-import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+import { Blaze } from 'meteor/blaze';
 import { _ } from 'meteor/underscore';
+import { OHIF } from 'meteor/ohif:core';
 
 // Create a new custom template for the base component
 Template.baseComponent = new Template('baseComponent', () => {});
@@ -30,9 +32,6 @@ Template.baseComponent.constructView = function(contentFunc, elseFunc) {
     // Extract the render function from the base template
     template.renderFunction = baseTemplate.renderFunction;
 
-    // Check for the mixins. If it's not informed set the lowest level mixin
-    const mixins = data.mixins || 'component';
-
     // Init the data manipulation mixins
     OHIF.Mixin.initData(data);
 

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

@@ -11,7 +11,7 @@
         target="{{this.target}}"
         {{this.tagAttributes}}
     >
-        {{#if validationErrors}}
+        {{#if (and validationErrors (not this.hideValidationBox))}}
             <div class="validation-error-container alert alert-danger" role="alert">
                 {{#each error in validationErrors}}
                     <p><a href="#" class="text-danger" data-target="{{error.key}}">{{error.message}}</a></p>

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

@@ -0,0 +1,19 @@
+<template name="dialogForm">
+    <div id="{{this.id}}" class="modal fade" tabindex="-1" role="dialog">
+        <div class="modal-dialog {{this.dialogClass}}" role="document">
+            {{#form class='modal-content' schema=this.schema hideValidationBox=true api=instance.api}}
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <h4 class="modal-title">{{this.title}}</h4>
+                </div>
+                <div class="modal-body">
+                    {{>UI.contentBlock}}
+                </div>
+                <div class="modal-footer">
+                    {{#button class='btn-default' action='cancel'}}Cancel{{/button}}
+                    {{#button class='btn-primary' action='confirm'}}Confirm{{/button}}
+                </div>
+            {{/form}}
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,45 @@
+import { Template } from 'meteor/templating';
+import { _ } from 'meteor/underscore';
+
+Template.dialogForm.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.api = {
+        confirm() {
+            // Check if the form has valid data
+            const form = instance.$('form').data('component');
+            if (!form.validate()) {
+                return;
+            }
+
+            // 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);
+            } else {
+                instance.data.promiseResolve(formData);
+            }
+        },
+        cancel() {
+            // Call the cancel callback or resolve the promise
+            if (_.isFunction(instance.data.cancelCallback)) {
+                instance.data.cancelCallback(instance.data.promiseReject);
+            } else {
+                instance.data.promiseReject();
+            }
+        }
+    };
+});
+
+Template.dialogForm.onRendered(() => {
+    const instance = Template.instance();
+
+    // Create the bootstrap modal
+    const $modal = instance.$('.modal');
+    $modal.modal();
+
+    // Remove the created modal backdrop from DOM after promise is done
+    const $backdrop = $modal.next('.modal-backdrop');
+    const dismissDialogBackdrop = () => $backdrop.remove();
+    instance.data.promise.then(dismissDialogBackdrop).catch(dismissDialogBackdrop);
+});

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

@@ -0,0 +1,6 @@
+<template name="dialogLogin">
+    {{#dialogForm (extend this dialogClass='modal-sm' schema=(choose this.schema instance.schema))}}
+        {{>inputText labelClass='form-group' key='username'}}
+        {{>inputPassword labelClass='form-group' key='password'}}
+    {{/dialogForm}}
+</template>

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

@@ -0,0 +1,17 @@
+import { Template } from 'meteor/templating';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+
+Template.dialogLogin.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.schema = new SimpleSchema({
+        username: {
+            type: String,
+            label: 'Username'
+        },
+        password: {
+            type: String,
+            label: 'Password'
+        }
+    });
+});

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

@@ -1,3 +1,8 @@
+import './dialog/form.html';
+import './dialog/form.js';
+import './dialog/login.html';
+import './dialog/login.js';
+
 import './form/button.html';
 import './form/form.html';
 import './form/group.html';
@@ -5,6 +10,7 @@ import './form/group.html';
 import './input/checkbox.html';
 import './input/hidden.html';
 import './input/groupRadio.html';
+import './input/password.html';
 import './input/radio.html';
 import './input/range.html';
 import './input/select.html';

Packages/ohif-core/client/components/bootstrap/input/password.html

@@ -0,0 +1,7 @@
+<template name="inputPassword">
+    {{#inputText (extend this
+        type='password'
+    )}}
+        {{>UI.contentBlock}}
+    {{/inputText}}
+</template>