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>