PWV-1: Migrating study association modal to the new structure

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

@@ -8,14 +8,16 @@ import './section/section.html';
 import './section/section.js';
 
 // Mixins
+import './mixins/action.js';
 import './mixins/button.js';
+import './mixins/checkbox.js';
 import './mixins/component.js';
 import './mixins/form.js';
 import './mixins/formItem.js';
 import './mixins/group.js';
 import './mixins/groupRadio.js';
 import './mixins/input.js';
-import './mixins/checkbox.js';
+import './mixins/link.js';
 import './mixins/schemaData.js';
 import './mixins/select.js';
 import './mixins/select2.js';
@@ -27,6 +29,7 @@ import './templates/custom.html';
 import './templates/div.html';
 import './templates/form.html';
 import './templates/input.html';
+import './templates/link.html';
 import './templates/select.html';
 
 // wrappers

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

@@ -0,0 +1,37 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+
+/*
+ * action: controls an element that will trigger some form API's method
+ */
+OHIF.mixins.action = new OHIF.Mixin({
+    dependencies: 'formItem',
+    composition: {
+        onRendered() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            component.$element.addClass('form-action');
+        },
+
+        events: {
+            'click .form-action'(event, instance) {
+                const component = instance.component;
+
+                // Extract the action and the params
+                const { action, params } = instance.data;
+
+                // Get the current component's API
+                const api = component.getApi();
+
+                // Stop here if no API or action was defined
+                if (!api || !action || typeof api[action] !== 'function') {
+                    return;
+                }
+
+                // Call the defined action function
+                api[action].call(this, params);
+            }
+        }
+    }
+});

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

@@ -2,7 +2,7 @@ import { OHIF } from 'meteor/ohif:core';
 import { Template } from 'meteor/templating';
 
 /*
- * input: controls a button
+ * button: controls a button
  */
 OHIF.mixins.button = new OHIF.Mixin({
     dependencies: 'formItem',
@@ -13,26 +13,6 @@ OHIF.mixins.button = new OHIF.Mixin({
 
             // Set the element to be controlled
             component.$element = instance.$('button:first');
-        },
-
-        events: {
-            'click button'(event, instance) {
-                const component = instance.component;
-
-                // Extract the action and the params
-                const { action, params } = instance.data;
-
-                // Get the current component's API
-                const api = component.getApi();
-
-                // Stop here if no API or action was defined
-                if (!api || !action || typeof api[action] !== 'function') {
-                    return;
-                }
-
-                // Call the defined action function
-                api[action].call(this, params);
-            }
         }
     }
 });

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

@@ -55,10 +55,12 @@ OHIF.mixins.form = new OHIF.Mixin({
 
             // Set the component main and style elements
             component.$style = component.$element = instance.$('form:first');
+
+            // Block page redirecting on submit
+            component.$element[0].onsubmit = () => false;
         },
 
         events: {
-            submit: event => event.preventDefault(),
             'click .validation-error-container a'(event, instance) {
                 // Get the target key
                 const targetKey = $(event.currentTarget).attr('data-target');

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

@@ -0,0 +1,26 @@
+import { OHIF } from 'meteor/ohif:core';
+import { Template } from 'meteor/templating';
+
+/*
+ * link: controls a link
+ */
+OHIF.mixins.link = new OHIF.Mixin({
+    dependencies: 'formItem',
+    composition: {
+        onRendered() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Set the element to be controlled
+            component.$element = instance.$('a:first');
+        },
+
+        events: {
+            'click a'(event, instance) {
+                if (instance.data.action) {
+                    event.preventDefault();
+                }
+            }
+        }
+    }
+});

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

@@ -0,0 +1,11 @@
+<template name="baseLink">
+    <a
+        id="{{this.id}}"
+        class="{{this.class}} {{#if this.disabled}}disabled{{/if}}"
+        href="{{choose this.href '#'}}"
+        title="{{this.title}}"
+        {{this.tagAttributes}}
+    >
+        {{>UI.contentBlock}}
+    </a>
+</template>

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

@@ -1,17 +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}}
+            {{#form class='modal-content' api=instance.api schema=this.schema hideValidationBox=true}}
                 <div class="modal-header">
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    {{#button class='close' action='cancel' tagAttributes=(extend this.tagAttributes 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}}
+                    {{#button class='btn btn-default' action='cancel'}}{{choose this.cancelLabel 'Cancel'}}{{/button}}
+                    {{#button class='btn btn-primary' action='confirm'}}{{choose this.confirmLabel 'Confirm'}}{{/button}}
                 </div>
             {{/form}}
         </div>

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

@@ -36,7 +36,10 @@ Template.dialogForm.onRendered(() => {
 
     // Create the bootstrap modal
     const $modal = instance.$('.modal');
-    $modal.modal();
+    $modal.modal({
+        backdrop: 'static',
+        keyboard: false
+    });
 
     // Remove the created modal backdrop from DOM after promise is done
     const $backdrop = $modal.next('.modal-backdrop');

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

@@ -1,8 +1,7 @@
 <template name="button">
     {{#baseComponent (extend this
         base='baseButton'
-        class=(concat 'btn ' this.class)
-        mixins=(concat 'button ' this.mixins)
+        mixins=(concat 'button action ' this.mixins)
     )}}
         {{>UI.contentBlock}}
     {{/baseComponent}}

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

@@ -0,0 +1,8 @@
+<template name="link">
+    {{#baseComponent (extend this
+        base='baseLink'
+        mixins=(concat 'link action ' this.mixins)
+    )}}
+        {{>UI.contentBlock}}
+    {{/baseComponent}}
+</template>

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

@@ -6,6 +6,7 @@ import './dialog/login.js';
 import './form/button.html';
 import './form/form.html';
 import './form/group.html';
+import './form/link.html';
 
 import './input/checkbox.html';
 import './input/hidden.html';