[CODE] Add "Age Range" Filter

[billimarie]

Background: please see #58 for a roadmap of the Additional Filters request.

We currently have a basic filtering system for filtering through prosecutors by role.

This feature request is for implementing an additional filter, which filters based upon a prosecutor's age range.

What would be the best form element to render this as? Checkboxes? If you have any ideas, feel free to comment.

[CodeSmitty]

What about a input or drop box where you can search "Up to a certain age". Or even do a slider to select the age number.
Might be easier than doing a 21- 35.

[billimarie]

@CodeSmitty The idea of a slider to select the age range is brilliant. I'm not sure how to go about coding it; if you (or anyone else) would like to give it a shot, that would be wonderful.

[CodeSmitty]

I would definitely like to give it a shot. I'm a newbie developer so I hope to get it done :)

[billimarie]

That's great. Absolutely no pressure--just have fun figuring it out, & feel free to ping me if you have any questions.

[CodeSmitty]

Will I need to install meteor and choco?

[billimarie]

@CodeSmitty Are you using Windows? If so, yes--you can read instructions on how to install Meteor here: https://www.meteor.com/install#!

[CodeSmitty]

I'm not sure if I can make it work. I can't seem to understand how meteor works.

[billimarie]

@CodeSmitty That's okay! I didn't understand it when I first started, either. You can use this ticket to ask any questions.

How far along in the process are you? Are you able to see a local version of the website? Let me know where in the instructions you got stuck & I can guide you from there.

[CodeSmitty]

I was able to render the website on my localhost. I was able to console.log the value of the slider changing. But I don't know how to implement it. To render it on screen or to save it to compare to your attorneys.

Template.currentProsecutors.events({
  "change .slider"(event) {
    event.preventDefault()
    let value = event.target.value;
    console.log(value, "id");
    
  },
})

[billimarie]

That's great. Can you push your local work to your forked repository? That way I can pull it down & take a look.

[CodeSmitty]

will do

[CodeSmitty]

pushed.

[billimarie]

Lovely; I will make time to take a look at it by the end of today.

[billimarie]

@CodeSmitty I am unable to see your changes; can you try again? You can also create a new branch for this issue & push it up to the main repo for me to checkout.

[CodeSmitty]

It's in the hacktoberfest2020 branch. https://github.com/CodeSmitty/prosecutor-database/blob/hacktober2020/imports/startup/client/index.js

My apologies it took so long. I just got done with work.

[billimarie]

No worries! I am pinging both @Zoe7 & @shariq1989, who worked on the code for the roles & race filters. Can either of you help?

[shariq1989]

@billimarie @CodeSmitty I might be able to take some time out this evening or tomorrow to look at this. Until then, I'd recommend that you check out my PR (specifically the changes to currentProsecutors.js, that is where UI is being wired to the db aka backend logic is)

#140

[Zoe7]

@CodeSmitty
I also struggled quite a bit understanding how to bind the data from the events to some sort of state in meteor. As far as I understood from the meteor docs and my whole great afternoon of experience with the framework (so take my advice with a grain of salt, I have no clue what I am doing either 😅), you can use ReactiveDict to do that. It's not exactly a super clean way to do it (compared to other frameworks that I have experience with, like React), but it kind of works and it's also the way that the docs recommend to do it.

You can refer to @shariq1989's PR like he mentionned, or mine here: #129. Mine is the "original" one so it might be easier to go through to understand what it going on, but you'll obviously have to rebase/merge on @shariq1989's one (I left a comment on that PR that should make combinining multiple filters much easier).

[KeshriAyushi22]

Hi, @billimarie I can give it a shot, i don't know how meteor works but still I will play around once and try to figure out. Can u plz assign this to me?

[billimarie]

Hi everyone, thank you for the brilliant collaboration & conversation. I did some quick updates (please excuse my direct commit to master) to get the ageRange filter as checkboxes working. @CodeSmitty if you feel like giving the slider another shot, feel free! If not, @KeshriAyushi22 can give it a try. No rush.

[CodeSmitty]

@billimarie I'll keep messing with it, but if @KeshriAyushi22 wants it. He can definitely take it. It was still a learning experience for me. :)

[billimarie]

The more the merrier!

The ageRange checkboxes aren't working in tandem with the other filters; that might be a good first place to start before tackling the slider.

[CodeSmitty]

Yea, I just noticed the checkboxes when I tried to PR what I had see if if I was in the right direction.
https://github.com/CodeSmitty/prosecutor-database/commit/09bb8214227906d78b619a507217f585f33c6ba0
That is what I have to far. I'll re pull what is currently on there though and see what we can get.

[0xClint]

Hey, @billimarie I would like to contribute, can you assign me this issue?