LT-67: Replacing servers list form by components and API instances

Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html

@@ -1,5 +1,5 @@
 <template name="serverInformationForm">
-    {{#form class='server-information-form' schema=instance.currentSchema}}
+    {{#form class='server-information-form' schema=instance.currentSchema api=instance.api}}
         {{>inputHidden key='_id'}}
         <div class="row">
             <div class="col-lg-6">
@@ -20,7 +20,7 @@
         {{/if}}
         {{#if this.serverType.get}}
             <div>
-                <input type="submit" class="btn btn-primary" value="Save">
+                {{#button class='btn-primary' action='save'}}Save{{/button}}
             </div>
         {{/if}}
     {{/form}}

Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js

@@ -7,6 +7,27 @@ import { DIMSEServer as dimseSchema } from 'meteor/worklist/both/schema';
 Template.serverInformationForm.onCreated(() => {
     const instance = Template.instance();
 
+    instance.api = {
+        save() {
+            // Stop here if the form validation fails
+            if (!instance.data.form.validate()) {
+                return;
+            }
+
+            // Get the current form data
+            const formData = instance.data.form.value();
+
+            // Call the save method
+            Meteor.call('serverSave', formData, function(error) {
+                if (error) {
+                    // TODO: check for errors: not-authorized, data-write
+                }
+
+                instance.data.resetState();
+            });
+        }
+    };
+
     instance.currentSchema = new ReactiveVar(dicomSchema);
 });
 
@@ -49,27 +70,3 @@ Template.serverInformationForm.onRendered(() => {
         }
     });
 });
-
-Template.serverInformationForm.events({
-    submit(event, instance) {
-        event.preventDefault();
-
-        // Stop here if the form validation fails
-        if (!instance.data.form.validate()) {
-            return;
-        }
-
-        // Get the current form data
-        const formData = instance.data.form.value();
-
-        // Call the save method
-        Meteor.call('serverSave', formData, function(error) {
-            if (error) {
-                // TODO: check for errors: not-authorized, data-write
-                console.log('>>>>ERROR', error);
-            }
-
-            instance.data.resetState();
-        });
-    }
-});

Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.html

@@ -1,43 +1,45 @@
 <template name="serverInformationList">
-    <table id="tblServer" class="table">
+    {{#form api=instance.api}}
-        <thead>
+        <table id="tblServer" class="table">
-            <tr>
+            <thead>
-                <th>Name</th>
-                <th>Type</th>
-                <th class="text-right">Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {{#each servers}}
                 <tr>
-                    <td>{{this.name}}</td>
+                    <th>Name</th>
-                    <td>{{this.type}}</td>
+                    <th>Type</th>
-                    <td class="text-right">
+                    <th class="text-right">Actions</th>
-                        <div class="btn-group" role="group" aria-label="Actions">
-                            <button class="btn btn-sm btn-default js-use-server" title="Use this server" disabled="{{#if isActive this}}disabled{{/if}}">
-                                {{#if isActive this}}
-                                    <i class="fa fa-check-square-o"></i>
-                                {{else}}
-                                    <i class="fa fa-square-o"></i>
-                                {{/if}}
-                            </button>
-                            <button class="btn btn-sm btn-default js-edit-server" title="Edit">
-                                <i class="fa fa-pencil"></i>
-                            </button>
-                            <button class="btn btn-sm btn-danger js-remove-server" title="Remove">
-                                <i class="fa fa-trash"></i>
-                            </button>
-                        </div>
-                    </td>
                 </tr>
-            {{else}}
+            </thead>
-                <tr>
+            <tbody>
-                    <td class="text-center" colspan="3">No servers found</td>
+                {{#each server in servers}}
-                </tr>
+                    <tr>
-            {{/each}}
+                        <td>{{server.name}}</td>
-        </tbody>
+                        <td>{{server.type}}</td>
-    </table>
+                        <td class="text-right">
-    <button class="btn btn-default js-add-server">
+                            <div class="btn-group" role="group" aria-label="Actions">
-        <i class="fa fa-plus"></i> Add a new server
+                                {{#button class='btn-sm btn-default' action='use' params=server title='Use this server' disabled=(isActive server)}}
-    </button>
+                                    {{#if isActive server}}
+                                        <i class="fa fa-check-square-o"></i>
+                                    {{else}}
+                                        <i class="fa fa-square-o"></i>
+                                    {{/if}}
+                                {{/button}}
+                                {{#button class='btn-sm btn-default' action='edit' params=server title='Edit'}}
+                                    <i class="fa fa-pencil"></i>
+                                {{/button}}
+                                {{#button class='btn-sm btn-danger' action='delete' params=server title='Remove' disabled=(eq server.origin 'json')}}
+                                    <i class="fa fa-trash"></i>
+                                {{/button}}
+                            </div>
+                        </td>
+                    </tr>
+                {{else}}
+                    <tr>
+                        <td class="text-center" colspan="3">No servers found</td>
+                    </tr>
+                {{/each}}
+            </tbody>
+        </table>
+        {{#button class='btn-sm btn-default' action='add'}}
+            <i class="fa fa-plus"></i> Add a new server
+        {{/button}}
+    {{/form}}
 </template>

Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.js

@@ -1,3 +1,25 @@
+Template.serverInformationList.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.api = {
+        add: () => instance.data.mode.set('create'),
+        edit(server) {
+            instance.data.currentItem.set(server);
+            instance.data.mode.set('edit');
+        },
+        delete(server) {
+            Meteor.call('serverRemove', server._id, error => {
+                // TODO: check for errors: not-authorized, data-write
+            });
+        },
+        use(server) {
+            Meteor.call('serverSetActive', server._id, error => {
+                // TODO: [custom-servers] check for errors: not-authorized, data-write
+            });
+        }
+    };
+});
+
 Template.serverInformationList.helpers({
     isActive: function(server) {
         return server._id === Meteor.user().profile.activeServer;
@@ -6,26 +28,3 @@ Template.serverInformationList.helpers({
         return Servers.find().fetch();
     }
 });
-
-Template.serverInformationList.events({
-    'click .js-add-server': function(event, instance) {
-        instance.data.mode.set('create');
-    },
-    'click .js-edit-server': function(event, instance) {
-        instance.data.currentItem.set(this);
-        instance.data.mode.set('edit');
-    },
-    'click .js-remove-server': function(event, instance) {
-        var id = this._id;
-        Meteor.call('serverRemove', this._id, function(error) {
-            // TODO: [custom-servers] check for errors: not-authorized, data-write
-        });
-    },
-    'click .js-use-server': function(event, instance) {
-        console.debug('>>>>clicked');
-        var id = this._id;
-        Meteor.call('serverSetActive', this._id, function(error) {
-            // TODO: [custom-servers] check for errors: not-authorized, data-write
-        });
-    }
-});

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

@@ -35,7 +35,7 @@ OHIF.mixins.form = new OHIF.Mixin({
             const validateSelf = component.validate;
             component.validate = () => {
                 // Call the original validation function
-                validateSelf();
+                const validationResult = validateSelf();
 
                 // Change the form validated flag to true
                 component.isValidatedAlready = true;
@@ -44,6 +44,8 @@ OHIF.mixins.form = new OHIF.Mixin({
                 if (component.schema && component.schema._invalidKeys.length) {
                     instance.$('.state-error :input:first').focus();
                 }
+
+                return validationResult;
             };
         },
 
@@ -56,6 +58,7 @@ OHIF.mixins.form = new OHIF.Mixin({
         },
 
         events: {
+            submit: event => event.preventDefault(),
             'click .validation-error-container a'(event, instance) {
                 // Get the target key
                 const targetKey = $(event.currentTarget).attr('data-target');

Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js

@@ -119,10 +119,6 @@ Template.cineDialog.events({
         // Update the FPS text onscreen
         const rate = parseFloat($(event.currentTarget).val());
         instance.updateFramerate(rate);
-    },
-
-    submit(event, instance) {
-        event.preventDefault();
     }
 });