LT-67: Migrating DICOMWeb form inputs to components

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

@@ -1,28 +1,28 @@
 <template name="serverInformationDicomWeb">
     <div class="row">
-        {{>serverInformationFormField name="wadoUriRoot" label="WADO URI root"}}
-        {{>serverInformationFormField name="wadoUriRootNOTE" label="WADO URI root note"}}
-        {{>serverInformationFormField name="wadoRoot" label="WADO root"}}
         <div class="col-lg-6">
-            <div class="form-group">
+            {{>inputText labelClass='form-group' key='wadoUriRoot'}}
-                <label class="wrapper">
+        </div>
-                    <strong>Image rendering</strong>
+        <div class="col-lg-6">
-                    <select name="imageRendering" class="form-control">
+            {{>inputText labelClass='form-group' key='wadoUriRootNOTE'}}
-                        <option>Select</option>
+        </div>
-                        <option value="wadouri">WADO URI</option>
+        <div class="col-lg-6">
-                        <option value="orthanc">ORTHANC</option>
+            {{>inputText labelClass='form-group' key='wadoRoot'}}
-                    </select>
+        </div>
-                </label>
+        <div class="col-lg-6">
-            </div>
+            {{>inputSelect labelClass='form-group' key='imageRendering' hideSearch=true
+                options=(clone placeholder='Select an option...')}}
+        </div>
+        <div class="col-lg-6">
+            {{>inputText labelClass='form-group' key='qidoRoot'}}
         </div>
-        {{>serverInformationFormField name="qidoRoot" label="QIDO root"}}
         <div class="col-lg-6">
             <strong>QIDO options</strong>
             <div class="form-group">
                 <div class="form-control">
                     <div class="checkbox">
                         <label>
-                            <input type="checkbox" name="qidoSupportsIncludeField">
+                            <input type="checkbox" name="">
                             <span>QIDO supports including fields</span>
                         </label>
                     </div>

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

@@ -6,7 +6,8 @@
                 {{>inputText labelClass='form-group' key='name'}}
             </div>
             <div class="col-lg-6">
-                {{>inputSelect labelClass='form-group' key='type' hideSearch=true}}
+                {{>inputSelect labelClass='form-group' key='type' hideSearch=true
+                    options=(clone placeholder='Choose a server type...')}}
             </div>
         </div>
         <hr>

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

@@ -13,18 +13,38 @@ Template.serverInformationForm.onRendered(() => {
     const instance = Template.instance();
 
     instance.data.$form = instance.$('form');
+    instance.data.form = instance.data.$form.data('component');
 
+    // Handle the server type
     instance.autorun(() => {
+        // Get the server type component
         const typeComponent = instance.$('[data-key=type]').data('component');
+
+        // Run this computation every time the user change the server type
         typeComponent.changeObserver.depend();
-        instance.data.serverType.set(typeComponent.value());
+
+        // Get the current server type value
+        const type = typeComponent.value();
+
+        // Set the serverType reactive value
+        instance.data.serverType.set(type);
+
+        // Change the schema based on the selected server type
+        if (type === 'dimse') {
+            instance.currentSchema.set(dimseSchema);
+        } else {
+            instance.currentSchema.set(dicomSchema);
+        }
     });
 
+    // Handle the form mode (edit or add)
     instance.autorun(() => {
         const mode = instance.data.mode.get();
+
+        // Check if it is on edit mode and load the saved data
         if (mode === 'edit') {
             var data = instance.data.currentItem.get();
-            FormUtils.setFormData(instance.data.$form, data);
+            instance.data.form.value(data);
         }
     });
 });

Packages/ohif-core/both/schema.js

@@ -1,6 +1,5 @@
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
 SimpleSchema.extendOptions({
-    valuesLabels: Match.Optional([String]),
+    valuesLabels: Match.Optional([String])
-    emptyOption: Match.Optional(Boolean)
 });

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

@@ -7,43 +7,6 @@ import { Template } from 'meteor/templating';
 OHIF.mixins.select = new OHIF.Mixin({
     dependencies: 'formItem',
     composition: {
-
-        onCreated() {
-            const instance = Template.instance();
-
-            // Check if this select will include an empty option
-            if (instance.data.emptyOption) {
-                // Get the option items
-                let items = instance.data.items;
-
-                // Check if the items are reactive and get them if true
-                const isReactive = items instanceof ReactiveVar;
-                if (isReactive) {
-                    items = items.get();
-                }
-
-                // Check if there is already an empty option on items list
-                const query = {
-                    value: ''
-                };
-                if (!_.findWhere(items, query)) {
-                    // Clone the current items
-                    const newItems = _.clone(items);
-                    newItems.unshift({
-                        label: 'Select',
-                        value: ''
-                    });
-
-                    // Set the new items list including the empty option
-                    if (isReactive) {
-                        instance.data.items.set(newItems);
-                    } else {
-                        instance.data.items = newItems;
-                    }
-                }
-            }
-        },
-
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;
@@ -51,6 +14,5 @@ OHIF.mixins.select = new OHIF.Mixin({
             // Set the element to be controlled
             component.$element = instance.$('select:first');
         }
-
     }
 });

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

@@ -8,6 +8,43 @@ import { $ } from 'meteor/jquery';
 OHIF.mixins.select2 = new OHIF.Mixin({
     dependencies: 'select',
     composition: {
+        onCreated() {
+            const instance = Template.instance();
+
+            // Check if this select will include a placeholder
+            const placeholder = instance.data.options && instance.data.options.placeholder;
+            if (placeholder) {
+                // Get the option items
+                let items = instance.data.items;
+
+                // Check if the items are reactive and get them if true
+                const isReactive = items instanceof ReactiveVar;
+                if (isReactive) {
+                    items = items.get();
+                }
+
+                // Check if there is already an empty option on items list
+                const query = {
+                    value: ''
+                };
+                if (!_.findWhere(items, query)) {
+                    // Clone the current items
+                    const newItems = _.clone(items) || [];
+                    newItems.unshift({
+                        label: placeholder,
+                        value: ''
+                    });
+
+                    // Set the new items list including the empty option
+                    if (isReactive) {
+                        instance.data.items.set(newItems);
+                    } else {
+                        instance.data.items = newItems;
+                    }
+                }
+            }
+        },
+
         onRendered() {
             const instance = Template.instance();
             const component = instance.component;

Packages/worklist/both/schema.js

@@ -1,5 +1,19 @@
 import { SimpleSchema } from 'meteor/aldeed:simple-schema';
 
+const serverNameDefinitions = {
+    type: String,
+    label: 'Server Name',
+    max: 100
+};
+
+const serverTypeDefinitions = {
+    type: String,
+    label: 'Server Type',
+    allowedValues: ['dicomWeb', 'dimse'],
+    valuesLabels: ['DICOM Web', 'DIMSE'],
+    optional: true
+};
+
 export const DICOMWebRequestOptions = new SimpleSchema({
     auth: {
         type: String,
@@ -24,19 +38,8 @@ export const DICOMWebRequestOptions = new SimpleSchema({
 });
 
 export const DICOMWebServer = new SimpleSchema({
-    name: {
+    name: serverNameDefinitions,
-        type: String,
+    type: serverTypeDefinitions,
-        label: 'Server Name',
-        max: 100
-    },
-    type: {
-        type: String,
-        label: 'Server Type',
-        allowedValues: ['dicomWeb', 'dimse'],
-        valuesLabels: ['DICOM Web', 'DIMSE'],
-        optional: true,
-        emptyOption: true
-    },
     wadoUriRoot: {
         type: String,
         label: 'WADO URI root',
@@ -56,7 +59,8 @@ export const DICOMWebServer = new SimpleSchema({
     imageRendering: {
         type: String,
         label: 'Image rendering',
-        defaultValue: 'wadouri'
+        allowedValues: ['wadouri', 'orthanc'],
+        valuesLabels: ['WADO URI', 'ORTHANC']
     },
     qidoRoot: {
         type: String,
@@ -112,11 +116,8 @@ export const DIMSEPeer = new SimpleSchema({
 });
 
 export const DIMSEServer = new SimpleSchema({
-    name: {
+    name: serverNameDefinitions,
-        type: String,
+    type: serverTypeDefinitions,
-        label: 'Server Name',
-        max: 100
-    },
     peers: {
         type: [ DIMSEPeer ],
         label: 'DIMSE Peers',