From 72bafdd0144a1bde44b32568db024b5e52f3061f Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Mon, 12 Sep 2016 10:05:07 -0300
Subject: [PATCH] LT-67: Replacing servers list form by components and API
 instances

---
 .../serverInformationForm.html                |  4 +-
 .../serverInformationForm.js                  | 45 +++++------
 .../serverInformationList.html                | 80 ++++++++++---------
 .../serverInformationList.js                  | 45 +++++------
 .../client/components/base/mixins/form.js     |  5 +-
 .../viewer/cineDialog/cineDialog.js           |  4 -
 6 files changed, 90 insertions(+), 93 deletions(-)

diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
index 132a6b5da..5b5e072aa 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.html
+++ b/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}}
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
index 49a70d5ea..746239c0a 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationForm/serverInformationForm.js
+++ b/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();
-        });
-    }
-});
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.html b/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.html
index 87bc2c65d..4348dd9f9 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.html
+++ b/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.html
@@ -1,43 +1,45 @@
 <template name="serverInformationList">
-    <table id="tblServer" class="table">
-        <thead>
-            <tr>
-                <th>Name</th>
-                <th>Type</th>
-                <th class="text-right">Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            {{#each servers}}
+    {{#form api=instance.api}}
+        <table id="tblServer" class="table">
+            <thead>
                 <tr>
-                    <td>{{this.name}}</td>
-                    <td>{{this.type}}</td>
-                    <td class="text-right">
-                        <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>
+                    <th>Name</th>
+                    <th>Type</th>
+                    <th class="text-right">Actions</th>
                 </tr>
-            {{else}}
-                <tr>
-                    <td class="text-center" colspan="3">No servers found</td>
-                </tr>
-            {{/each}}
-        </tbody>
-    </table>
-    <button class="btn btn-default js-add-server">
-        <i class="fa fa-plus"></i> Add a new server
-    </button>
+            </thead>
+            <tbody>
+                {{#each server in servers}}
+                    <tr>
+                        <td>{{server.name}}</td>
+                        <td>{{server.type}}</td>
+                        <td class="text-right">
+                            <div class="btn-group" role="group" aria-label="Actions">
+                                {{#button class='btn-sm btn-default' action='use' params=server title='Use this server' disabled=(isActive server)}}
+                                    {{#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>
diff --git a/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.js b/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.js
index b00097dd3..82a8db91f 100644
--- a/Packages/lesiontracker/client/components/serverInformation/serverInformationList/serverInformationList.js
+++ b/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
-        });
-    }
-});
diff --git a/Packages/ohif-core/client/components/base/mixins/form.js b/Packages/ohif-core/client/components/base/mixins/form.js
index 77ac0edfb..a3a4d5609 100644
--- a/Packages/ohif-core/client/components/base/mixins/form.js
+++ b/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');
diff --git a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js b/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
index 789531461..cb7b36e14 100644
--- a/Packages/viewerbase/client/components/viewer/cineDialog/cineDialog.js
+++ b/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();
     }
 });