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

2016-09-12 10:05:07 -03:00
1 parent e6cb4e873a
commit 72bafdd014
@@ -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}}
@@ -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();
-        });
-    }
-});
@@ -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>
@@ -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
-        });
-    }
-});