LT-275 Implementing search for measure labels

This commit is contained in:
Bruno Alves de Faria 2016-08-08 10:47:57 -03:00
parent f5a64574cc
commit 9d8c039ffc
6 changed files with 100 additions and 18 deletions

View File

@ -4,6 +4,8 @@
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.
npm-bcrypt@0.8.7
meteor-base@1.0.4 # Packages every Meteor app needs to have
mobile-experience@1.0.4 # Packages for a great mobile UX
mongo@1.1.10 # The database Meteor supports right now

View File

@ -158,7 +158,6 @@ $gray6 = #303030
.select-tree-common
height: 100%
overflow: hidden
padding-left: 6px
position: absolute
right: -100%
@ -191,22 +190,34 @@ $gray6 = #303030
transform-origin(100% 50%)
transition(all 0.3s ease)
.select-tree-common .content
margin-left: calc(-100% - 6px)
transition(all 0.3s ease 0.3s)
.select-tree-common
overflow: hidden
z-index: -1
.content
margin-left: calc(-100% - 6px)
transition(all 0.3s ease 0.3s)
&.started
&>.tree-content
transform(scale(1))
.select-tree-common .content
margin-left: 0
.select-tree-common
animation-name: selectTreeCommonOverflow
animation-delay: 0.3s
animation-duration: 0.3s
animation-iteration-count: 1
animation-direction: alternate
animation-fill-mode: forwards
.content
margin-left: 0
&.interacted
.select-tree-common
overflow: visible
z-index: 1
.content
animation-name: selectTreeCommonCloseLeft
@ -216,6 +227,15 @@ $gray6 = #303030
animation-timing-function: ease-out
animation-fill-mode: forwards
@keyframes selectTreeCommonOverflow {
from {
overflow: hidden
}
to {
overflow: visible
}
}
@keyframes selectTreeCommonCloseLeft {
from {
height: 37px

View File

@ -22,7 +22,7 @@
{{>selectTreeBreadcrumb component=this.component}}
{{/if}}
<div class="tree-inputs">
{{#each item in (reactive this.items)}}
{{#each item in treeItems}}
{{>inputRadio
id=(concat this.storageKey '_' (encodeId item.value))
class=this.radioClass

View File

@ -1,12 +1,20 @@
import { OHIF } from 'meteor/ohif:core';
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { ReactiveVar } from 'meteor/reactive-var';
import { _ } from 'meteor/underscore';
import { $ } from 'meteor/jquery';
// TODO: use npm dependency
import transition from 'meteor/ohif:core/client/lib/third-party/transition-to-from-auto';
Template.selectTree.onCreated(() => {
const instance = Template.instance();
// Create a reactive variable to control the search
instance.searchTerm = new ReactiveVar('');
});
Template.selectTree.onRendered(() => {
const instance = Template.instance();
const component = instance.$('.select-tree:first').data('component');
@ -20,8 +28,19 @@ Template.selectTree.onRendered(() => {
$treeRoot.addClass('started');
// Update the component's viewport height
instance.updateHeight = () => {
const height = rootInstance.$('.tree-options:last').data('height');
instance.updateHeight = searchTerm => {
let height;
// Check if there's a search term
if (searchTerm) {
// Set the viewport height as same as listed options height
height = rootInstance.$('.tree-inputs').height();
} else {
// Set the viewport height as same as selected node's options height
height = rootInstance.$('.tree-options:last').data('height');
}
// Update the viewport's height
rootInstance.$('.tree-options:first').height(height);
};
@ -49,9 +68,17 @@ Template.selectTree.onRendered(() => {
// Run this computation everytime the current node is changed
instance.data.currentNode.dep.depend();
// Run this computation everytime the search term is changed
const searchTerm = instance.searchTerm.get();
// Clean the current node selection if the user started the search
if (searchTerm) {
rootInstance.data.currentNode.set(null);
}
// Update the viewport height
Tracker.afterFlush(() => {
instance.updateHeight();
instance.updateHeight(searchTerm);
instance.updateOpen();
});
});
@ -73,6 +100,11 @@ Template.selectTree.events({
$(event.currentTarget).parent().addClass('interacted');
},
'input .tree-search input'(event, instance) {
// Change the search term to update the tree items
instance.searchTerm.set($(event.currentTarget).val());
},
'change .select-tree:first>.tree-content>.tree-options>.tree-inputs>label>input'(event, instance) {
const component = instance.component;
const $target = $(event.target);
@ -96,10 +128,13 @@ Template.selectTree.events({
// Change the active item
$label.addClass('active');
// Ckeck if there's a storageKey defined
const storageKey = instance.data.storageKey;
if (storageKey) {
// Get the current stored data
const storedData = _.extend({}, OHIF.user.getData(storageKey));
// Increment or create a counter for the clicked leaf
const itemKey = OHIF.string.encodeId($target.val());
if (storedData[itemKey]) {
storedData[itemKey]++;
@ -107,8 +142,7 @@ Template.selectTree.events({
storedData[itemKey] = 1;
}
console.warn('>>>>', storageKey, storedData, itemKey);
// Updata the stored data with the new count
OHIF.user.setData(storageKey, storedData);
}
@ -160,3 +194,27 @@ Template.selectTree.events({
}
}
});
Template.selectTree.helpers({
treeItems() {
const instance = Template.instance();
// Run this computation everytime the search term is changed
const searchTerm = instance.searchTerm.get();
// Get all the items
let items = instance.data.items;
// Check if the search term was informed
if (searchTerm) {
// Search the items by the give search term
items = OHIF.string.search(items, searchTerm, 'label');
// Filter only the tree leaves
items = _.filter(items, item => !item.items);
}
// Return the tree items
return items;
}
});

View File

@ -22,9 +22,11 @@ OHIF.string.search = (object, query, property=null, result=[]) => {
if (_.isString(value) && pattern.test(value)) {
// Add the current item to the result
result.push(item);
} else if (_.isObject(value)) {
}
if (_.isObject(item)) {
// Search recursively the item if the current item is an object
OHIF.string.search(value, query, property, result);
OHIF.string.search(item, query, property, result);
}
});

View File

@ -37,7 +37,7 @@ function filterToQIDOURL(server, filter) {
AccessionNumber: filter.accessionNumber,
StudyDescription: filter.studyDescription,
limit: filter.limit || 20,
includefield: server.qidoSupportsIncludeField ? commaSeparatedFields : 'all'
includefield: server.qidoSupportsIncludeField ? 'all' : commaSeparatedFields
};
// build the StudyDate range parameter
@ -45,7 +45,7 @@ function filterToQIDOURL(server, filter) {
var date = "".concat(dateToString(new Date(filter.studyDateFrom)), "-", dateToString(new Date(filter.studyDateTo)));
parameters.StudyDate = date;
}
return server.qidoRoot + '/studies?' + encodeQueryData(parameters);
}
@ -84,7 +84,7 @@ function resultDataToStudies(resultData) {
modalities: DICOMWeb.getString(DICOMWeb.getModalities(study['00080060'], study['00080061']))
});
});
return studies;
}