LT-67: Migrating the main form and its inputs to components

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

@@ -1,33 +1,19 @@
 <template name="serverInformationForm">
-    <form class="server-information-form">
-        <input type="hidden" name="_id">
+    {{#form class='server-information-form' schema=instance.currentSchema}}
+        {{>inputHidden key='_id'}}
         <div class="row">
             <div class="col-lg-6">
-                <div class="form-group">
-                    <label class="wrapper">
-                        <strong>Server Name</strong>
-                        <input type="text" name="name" class="form-control">
-                    </label>
-                </div>
+                {{>inputText labelClass='form-group' key='name'}}
             </div>
             <div class="col-lg-6">
-                <div class="form-group">
-                    <label class="wrapper">
-                        <strong>Server Type</strong>
-                        <select name="type" class="form-control js-server-type">
-                            <option>Select</option>
-                            <option value="dicomWeb">DICOM Web</option>
-                            <option value="dimse">DIMSE</option>
-                        </select>
-                    </label>
-                </div>
+                {{>inputSelect labelClass='form-group' key='type' hideSearch=true}}
             </div>
         </div>
         <hr>
-        {{#if eq this.serverType.get "dicomWeb"}}
+        {{#if eq this.serverType.get 'dicomWeb'}}
           {{>serverInformationDicomWeb this}}
         {{/if}}
-        {{#if eq this.serverType.get "dimse"}}
+        {{#if eq this.serverType.get 'dimse'}}
           {{>serverInformationDimse this}}
         {{/if}}
         {{#if this.serverType.get}}
@@ -35,5 +21,5 @@
                 <input type="submit" class="btn btn-primary" value="Save">
             </div>
         {{/if}}
-    </form>
+    {{/form}}
 </template>

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

@@ -1,9 +1,27 @@
-Template.serverInformationForm.onRendered(function() {
-    var instance = Template.instance();
+import { Template } from 'meteor/templating';
+import { ReactiveVar } from 'meteor/reactive-var';
+import { DICOMWebServer as dicomSchema } from 'meteor/worklist/both/schema';
+import { DIMSEServer as dimseSchema } from 'meteor/worklist/both/schema';
+
+Template.serverInformationForm.onCreated(() => {
+    const instance = Template.instance();
+
+    instance.currentSchema = new ReactiveVar(dicomSchema);
+});
+
+Template.serverInformationForm.onRendered(() => {
+    const instance = Template.instance();
 
     instance.data.$form = instance.$('form');
-    instance.autorun(function() {
-        var mode = instance.data.mode.get();
+
+    instance.autorun(() => {
+        const typeComponent = instance.$('[data-key=type]').data('component');
+        typeComponent.changeObserver.depend();
+        instance.data.serverType.set(typeComponent.value());
+    });
+
+    instance.autorun(() => {
+        const mode = instance.data.mode.get();
         if (mode === 'edit') {
             var data = instance.data.currentItem.get();
             FormUtils.setFormData(instance.data.$form, data);
@@ -12,11 +30,7 @@ Template.serverInformationForm.onRendered(function() {
 });
 
 Template.serverInformationForm.events({
-    'change .js-server-type': function(event, instance) {
-        var value = $(event.currentTarget).val();
-        instance.data.serverType.set(value);
-    },
-    submit: function(event, instance) {
+    submit(event, instance) {
         event.preventDefault();
         var formData = FormUtils.getFormData(instance.data.$form);
         Meteor.call('serverSave', formData, function(error) {