Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Issue 68 - filtering/quick searching stories #102

Closed
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 Ignacio and others added some commits Mar 7, 2012

Added case insensitivity for filtering stories
Changed plugin name to filterStories since the name is already taken by jquery
Added a case for filtering stories when filter bar is empty
  - works instantly. Yay!

Also fixed keycode to keyCode for correct syntax
Updated view, plugin, and tests to accomodate the cancel button.
  - wrote initial test descriptions for cancel button
Initial test for cancel filters and slimed it to make it pass.
Also changed a variable name to follow naming convention
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
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
Added CSS styles for filter
- styled elements in filter bar
- added cancel.png as the cancel button

@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.

@padi padi closed this Sep 21, 2017

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