Issue 68 - filtering/quick searching stories #102

Open
wants to merge 18 commits into
from

Conversation

Projects
None yet
7 participants

padi commented Mar 14, 2012

Quick filter of stories as discussed here: malclocke#68

  • Fast enough (can even be made faster if needed by using addClass instead of show()/hide()).
  • Drawback is that it doesn't search thru the notes of the stories.

Marc Rendl I... and others added some commits Mar 7, 2012

@padi Marc Rendl Ignacio Added input bar for filtering stories 458268d
@padi Marc Rendl Ignacio Added jasmine tests for filtering stories 35f4bb9
@padi Marc Rendl Ignacio Added dirty story filter plugin 57d5343
@padi Marc Rendl Ignacio Added case insensitivity for filtering stories
Changed plugin name to filterStories since the name is already taken by jquery
5a90095
@padi Marc Rendl Ignacio Refactored test and filterStories plugin 93dc226
@padi Marc Rendl Ignacio Added a case for filtering stories when filter bar is empty
  - works instantly. Yay!

Also fixed keycode to keyCode for correct syntax
061cca5
@padi Marc Rendl Ignacio Attached filterStories to filter bar d87b25c
@padi @padi padi Excluded html from being matched in by filterStories 702f38f
@padi @padi padi Updated view, plugin, and tests to accomodate the cancel button.
  - wrote initial test descriptions for cancel button
b4a64c7
@padi @padi padi Initial test for cancel filters and slimed it to make it pass.
Also changed a variable name to follow naming convention
1d4de5c
@padi @padi padi Added showing and hiding of cancel depending on the filter bar content
  - bound keyup because backspace isn't detected by keypress and using keydown doesn't produce intended behavior
38f803c
@padi @padi padi Added action for cancel to clear the contents of filter bar when clicked
  - to be refactored later
80e7de5
@padi @padi padi Made layout for span tag for 'Cancel' consistent with other icons
- added class icon and icon-cancel for consistent css style
- reflected the changes to javascript plugin and its corresponding jasmine test
e4193b2
@padi @padi padi Added CSS styles for filter
- styled elements in filter bar
- added cancel.png as the cancel button
be681a5
@padi @padi padi Showing all hidden stories when cancel is clicked to remove keywords 1d6384e
@padi @padi padi Showing hidden stories when backspace is pressed 2db785f
@padi @padi padi Refactored and optimized a number of lines in both the filterStories …
…plugin and the specs
583ac51

@bradleypriest bradleypriest and 1 other commented on an outdated diff Mar 14, 2012

app/assets/stylesheets/icons.css.scss
@@ -20,4 +20,8 @@ $icons-collapse-spacing:6px;
a.expand, a.collapse {
cursor: pointer;
+}
+
+.icons-cancel{
+ background:image-url('icons/cancel.png') no-repeat;
}
@bradleypriest

bradleypriest Mar 14, 2012

Contributor

You shouldn't need to define this CSS. It should be generated by compass

@padi

padi Mar 14, 2012

tries removing it Oh great. This is something I manually did before even when I was using compass in a lower Rails version. Is this part of the new default features in Rails 3.1?

Will update this.

@bradleypriest

bradleypriest Mar 15, 2012

Contributor

The 'magic' classes are provided by compass's sprites. Using their classes also makes sure we use the sprite rather than loading the particular icon onto the page.

Contributor

malclocke commented Mar 18, 2012

Hi Marc,

Sorry for the delayed response.

Thanks for all your work on this, but I'm not sure this is the best way to implement search.

I'd like to propose a slightly different approach. First off, I think the UI should show a type ahead dropdown of matching stories as you type a search term. Then, when you select an item from the drop down the matching story is scrolled to and highlighted or opened.

The first step would be to factor out the search to a method on StoryCollection, which could just use underscore's select() method to return an array of matching stories. We'll then need to decide on how to implement the type ahead dropdown, there's quite a lot of jQuery plugins out there that do this. Then we need to implement a scrollToAndHighlightStory(story) method.

How would you feel about tackling this?

padi commented Mar 18, 2012

Sure, I would like to improve on this. In fact, I just started this pull request so that I can get feedback. I wasn't sure what kind of search everyone would like to implement I just decided to get this out first and learn from the feedback. This is my first open source participation ever so I kind of expected this to happen. :)

I totally agree on having some type ahead dropdown here. The initial plugin that comes into my mind would be jQuery UI's autocomplete. Lemme know if you have something else in mind.

My question is: how exactly do you intend to highlight all the matching stories? If it's just one matching story, I can imagine one of the columns scrolling down to the matching story and highlighting it with CSS. But what if they're multiple stories scattered across all columns, in different iterations?

If you check PT's current implementation, it creates another column for search results, which is good but I think does not save screen estate for smaller screens.

Any ideas are welcome. :)

I'm pretty much new to open source projects and backbone.js and I'll probably be spending time on this one during free hours so it may take more time than what you might expect, but definitely, I am for up for the challenge. ;)

Contributor

malclocke commented Mar 19, 2012

I've never been a huge fan of PT's search column, but it's probably the most sensible implementation. It does highlight the need for one thing that I've been putting off implementing for a while though, which is a 'column' backbone view. At the moment the columns are handled internally by the ProjectView, which they really shouldn't be.

I'd recommend you work on another pull request, and implement a search(string) method on StoryCollection which just returns an array of stories which match the search string. Backbone has a select() method mixed in on collections which will help you out.

If you can just implement that and create a pull request then we can move on to the next step.

ceymard commented May 17, 2012

+1 on the PT search columns ; it's actually the one that makes most sense, since you can then browse the results of two search queries side by side.

ceymard commented May 17, 2012

Actually, I have a pretty simple idea : why not add a quick filter text input that filters on labels ?

Whenever some text is input, only the matching labels are left in the column. No need even for some JSON, just a JS .hide() and .show() mechanic would suffice.

Contributor

parndt commented Nov 29, 2012

@padi @ceymard Is this likely to be updated to support the requested changes?

DVG commented Feb 6, 2013

I implemented this in my fork in a quick-and-dirty but very useful way with this bit of coffeescript

showHideTags = (tag) ->
  $("div.story:contains(#{tag})").show()
  $("div.story:not(:contains(#{tag}))").hide()

showAllTags = ->
  $("div.story").show()

$ ->
  $('#search').keyup () ->
    search_term = $('#search').val()
    if search_term == ''
      showAllTags()
    else
      showHideTags(search_term)

adisos commented Jul 29, 2015

Filtering by labels is highly needed feature.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment