LT-275: Creating selected state with 'rename' and 'add description' options

Packages/lesiontracker/client/components/measureFlow/measureFlow.html

@@ -1,5 +1,14 @@
 <template name="measureFlow">
     <div class="measure-flow {{instance.state.get}}" style="position:fixed; top:200px; left:400px">
         <button class="btn-add">Add label</button>
+        {{#if eq instance.state.get 'selected'}}
+            <div class="tree-leaf">
+                <span>{{instance.value.label}}</span>
+                <div class="actions clearfix">
+                    <button class="pull-left">Rename</button>
+                    <button class="pull-right">Add description</button>
+                </div>
+            </div>
+        {{/if}}
     </div>
 </template>

Packages/lesiontracker/client/components/measureFlow/measureFlow.js

@@ -10,6 +10,48 @@ Template.measureFlow.onCreated(() => {
 
     instance.state = new ReactiveVar('closed');
 
+    instance.items = [{
+        label: 'Category 1',
+        value: 'Category 1',
+        items: [{
+            label: 'Subcategory 1.1',
+            value: 'Subcategory 1.1'
+        }, {
+            label: 'Subcategory 1.2',
+            value: 'Subcategory 1.2',
+            items: [{
+                label: 'Subcategory 1.2.1',
+                value: 'Subcategory 1.2.1'
+            }, {
+                label: 'Subcategory 1.2.2',
+                value: 'Subcategory 1.2.2',
+                items: [{
+                    label: 'Subcategory 1.2.2.1',
+                    value: 'Subcategory 1.2.2.1'
+                }, {
+                    label: 'Subcategory 1.2.2.2',
+                    value: 'Subcategory 1.2.2.2'
+                }]
+            }]
+        }]
+    }, {
+        label: 'Category 2',
+        value: 'Category 2',
+        items: [{
+            label: 'Subcategory 2.1',
+            value: 'Subcategory 2.1'
+        }, {
+            label: 'Subcategory 2.2',
+            value: 'Subcategory 2.2'
+        }, {
+            label: 'Subcategory 2.3',
+            value: 'Subcategory 2.3'
+        }]
+    }, {
+        label: 'Category 3',
+        value: 'Category 3'
+    }];
+
     const items = [
         'Adrenal',
         'Bladder',
@@ -75,20 +117,42 @@ Template.measureFlow.events({
             const parentElement = instance.$('.measure-flow')[0];
 
             // Render the selectTree element
-            Blaze.renderWithData(Template.selectTree, data, parentElement);
+            instance.selectTreeView = Blaze.renderWithData(Template.selectTree, data, parentElement);
         });
     },
     'click .select-tree-common label'(event, instance) {
         instance.commonClicked = true;
     },
+    'change .select-tree-root'(event, instance) {
+        // Stop here if it's an inner input event
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+
+        const $treeRoot = $(event.currentTarget);
+        instance.value = $treeRoot.data('component').value();
+    },
     'click .tree-leaf input'(event, instance) {
-        const $label = $(event.currentTarget).closest('label');
+        const $target = $(event.currentTarget);
-        const $container = $label.closest('.select-tree-root').find('.tree-options:first');
+        const $label = $target.closest('label');
+        const $treeRoot = $label.closest('.select-tree-root');
+        const $container = $treeRoot.find('.tree-options:first');
         if (instance.commonClicked) {
             const labelTop = $label.position().top;
             const containerCenter = Math.round($container.height() / 2);
             const labelCenter = Math.round($label.height() / 2);
             $container.scrollTop(labelTop - containerCenter + labelCenter);
         }
+
+        instance.state.set('selected');
+        Tracker.afterFlush(() => {
+            const $measureFlow = instance.$('.measure-flow');
+            const labelOffset = $label.offset();
+            labelOffset.top -= 10;
+            $measureFlow.css(labelOffset);
+            $measureFlow.children('.tree-leaf').width($label.outerWidth());
+        });
+
+        $container.one('transitionend', event => Blaze.remove(instance.selectTreeView));
     }
 });

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

@@ -15,6 +15,9 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
             const rootComponent = instance.data.root || component;
             const rootInstance = rootComponent.templateInstance;
 
+            // Store the component's current value
+            instance.currentValue = null;
+
             // Create the component's value storage property
             instance.data.currentNode = new ReactiveVar(null);
 
@@ -25,7 +28,23 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
             component.value = value => {
                 const isGet = _.isUndefined(value);
 
-                // Return the current node value
+                // Return the current value
+                if (isGet) {
+                    return rootInstance.currentValue;
+                }
+
+                // Change the current value
+                rootInstance.currentValue = value;
+
+                // Trigger the change event
+                component.$element.trigger('change');
+            };
+
+            // Method to manipulate nodes
+            component.node = node => {
+                const isGet = _.isUndefined(node);
+
+                // Return the current node
                 if (isGet) {
                     const currentNode = instance.data.currentNode.get();
                     return currentNode ? currentNode.value : null;
@@ -35,12 +54,12 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
                 const items = component.templateInstance.data.items;
 
                 // Get the node for the selected value
-                const node = _.findWhere(items, {
+                const currentNode = _.findWhere(items, {
-                    value: value
+                    value: node
                 });
 
                 // Change the current node
-                instance.data.currentNode.set(node);
+                instance.data.currentNode.set(currentNode);
             };
 
             // Return plain data for all the leaves inside current node
@@ -59,6 +78,14 @@ OHIF.mixins.selectTree = new OHIF.Mixin({
                 return recursiveSeek(instance.data.items);
             };
 
+        },
+
+        onRendered() {
+            const instance = Template.instance();
+            const component = instance.component;
+
+            // Define the main element
+            component.$element = instance.$('.select-tree:first').first();
         }
     }
 });

Packages/ohif-core/client/components/bootstrap/input/selectTree.html

@@ -27,6 +27,7 @@
                                 id=(concat this.storageKey '_' (encodeId item.value))
                                 class=this.radioClass
                                 name=this.key
+                                itemData=item
                                 value=item.value
                                 label=item.label
                                 labelClass=(valueIf (isArray item.items) 'tree-node' 'tree-leaf')

Packages/ohif-core/client/components/bootstrap/input/selectTree.js

@@ -140,8 +140,8 @@ Template.selectTree.events({
         const rootComponent = instance.data.root || component;
         const rootInstance = rootComponent.templateInstance;
 
-        // Change the component's value
+        // Change the component's node
-        component.value(eventComponent.value());
+        component.node(eventComponent.value());
 
         // Unset the active leaf
         rootInstance.$('label').removeClass('active').css('width', '');
@@ -169,6 +169,10 @@ Template.selectTree.events({
                     storedData[itemKey] = 1;
                 }
 
+                // Set the selected leaf value in the root component
+                const itemData = $target.data('component').templateInstance.data.itemData;
+                rootComponent.value(itemData);
+
                 // Updata the stored data with the new count
                 OHIF.user.setData(storageKey, storedData);
             }

Packages/ohif-core/client/components/playground/playground.js

@@ -42,3 +42,8 @@ Template.componentPlayground.onCreated(() => {
         value: 'Category 3'
     }];
 });
+
+Template.componentPlayground.onRendered(() => {
+    const instance = Template.instance();
+    instance.$('.measure-flow').draggable();
+});