From 795d1bfeba0946bac1777e3ea965f8707497e32a Mon Sep 17 00:00:00 2001
From: Bruno Alves de Faria <brunoalvesdefaria@gmail.com>
Date: Tue, 9 Aug 2016 08:08:36 -0300
Subject: [PATCH] LT-275: Creating final measure flow using selectTree
 component

---
 .../design/styles/components/selectTree.styl  |  4 ++
 .../components/measureFlow/measureFlow.html   | 12 +++++
 .../components/measureFlow/measureFlow.js     | 50 +++++++++++++++++++
 .../components/measureFlow/measureFlow.styl   | 12 +++++
 Packages/lesiontracker/package.js             |  6 ++-
 .../components/playground/playground.html     |  3 ++
 6 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 Packages/lesiontracker/client/components/measureFlow/measureFlow.html
 create mode 100644 Packages/lesiontracker/client/components/measureFlow/measureFlow.js
 create mode 100644 Packages/lesiontracker/client/components/measureFlow/measureFlow.styl

diff --git a/Packages/design/styles/components/selectTree.styl b/Packages/design/styles/components/selectTree.styl
index 39cbb7eb3..057529da4 100644
--- a/Packages/design/styles/components/selectTree.styl
+++ b/Packages/design/styles/components/selectTree.styl
@@ -58,6 +58,7 @@ $gray6 = #303030
 .select-tree-root
   display: inline-block
   position: relative
+  z-index: 0
 
   &>.tree-content
     border: 1px solid $gray3
@@ -183,6 +184,9 @@ $gray6 = #303030
         line-height: 20px
         margin: 0
 
+      label
+        display: block
+
 .select-tree-root
 
   &>.tree-content
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.html b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
new file mode 100644
index 000000000..d69fe9a8b
--- /dev/null
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.html
@@ -0,0 +1,12 @@
+<template name="measureFlow">
+    <div class="measure-flow">
+        <button>Add label</button>
+        {{>selectTree
+            key='label'
+            items=instance.items
+            label='Assign label'
+            searchPlaceholder='Search labels'
+            storageKey='measureLabelCommon'
+        }}
+    </div>
+</template>
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.js b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
new file mode 100644
index 000000000..137d1b9c8
--- /dev/null
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.js
@@ -0,0 +1,50 @@
+Template.measureFlow.onCreated(() => {
+    const instance = Template.instance();
+
+    const items = [
+        'Adrenal',
+        'Bladder',
+        'Bone',
+        'Brain',
+        'Breast',
+        'Colon',
+        'Esophagus',
+        'Extremities',
+        'Gallbladder',
+        'Kidney',
+        'Liver',
+        'Lung',
+        'Lymph Node',
+        'Muscle',
+        'Neck',
+        'Other: Soft Tissue',
+        'Ovary',
+        'Pancreas',
+        'Pelvis',
+        'Peritoneum/Omentum',
+        'Prostate',
+        'Retroperitoneum',
+        'Small Bowel',
+        'Spleen',
+        'Stomach',
+        'Subcutaneous'
+    ];
+
+    instance.items = [];
+    _.each(items, item => {
+        instance.items.push({
+            label: item,
+            value: item
+        });
+    });
+});
+
+Template.measureFlow.events({
+    'click .tree-leaf input'(event, instance) {
+        console.warn('>>>>event', event);
+        const $label = $(event.currentTarget).closest('label');
+        const $container = $label.closest('.select-tree-root').find('.tree-options:first');
+        const top = $label.position().top;
+        $container.scrollTop(top);
+    }
+});
diff --git a/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
new file mode 100644
index 000000000..62bffeb0f
--- /dev/null
+++ b/Packages/lesiontracker/client/components/measureFlow/measureFlow.styl
@@ -0,0 +1,12 @@
+.measure-flow
+
+  .select-tree-root>.tree-content>.tree-options
+    margin-right: -20px
+    max-height: 250px
+    overflow-x: hidden
+    overflow-y: scroll
+    position: relative
+    z-index: 2
+
+    .tree-inputs
+      position: relative
diff --git a/Packages/lesiontracker/package.js b/Packages/lesiontracker/package.js
index 13733e91a..d2fdcec67 100644
--- a/Packages/lesiontracker/package.js
+++ b/Packages/lesiontracker/package.js
@@ -55,7 +55,7 @@ Package.onUse(function(api) {
     ], 'client', {
         bare: true
     });
-    
+
     api.addFiles('client/tools.js', 'client');
 
     // Utility classes
@@ -175,6 +175,10 @@ Package.onUse(function(api) {
     api.addFiles('client/components/lesionTrackerWorklistStudy/lesionTrackerWorklistStudy.styl', 'client');
     api.addFiles('client/components/lesionTrackerWorklistStudy/lesionTrackerWorklistStudy.js', 'client');
 
+    api.addFiles('client/components/measureFlow/measureFlow.html', 'client');
+    api.addFiles('client/components/measureFlow/measureFlow.styl', 'client');
+    api.addFiles('client/components/measureFlow/measureFlow.js', 'client');
+
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.html', 'client');
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.styl', 'client');
     api.addFiles('client/components/timeoutCountdownDialog/timeoutCountdownDialog.js', 'client');
diff --git a/Packages/ohif-core/client/components/playground/playground.html b/Packages/ohif-core/client/components/playground/playground.html
index 2e7426714..c4e6b07e6 100644
--- a/Packages/ohif-core/client/components/playground/playground.html
+++ b/Packages/ohif-core/client/components/playground/playground.html
@@ -1,4 +1,5 @@
 <template name="componentPlayground">
+<!--
     <div class="p-a-3">
         {{>selectTree
             key='label'
@@ -8,4 +9,6 @@
             storageKey='measureLabelCommon'
         }}
     </div>
+-->
+{{>measureFlow}}
 </template>