Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve city filter #92

Closed
vlado opened this issue Jan 2, 2021 · 10 comments
Closed

Improve city filter #92

vlado opened this issue Jan 2, 2021 · 10 comments

Comments

@vlado
Copy link
Owner

vlado commented Jan 2, 2021

Apart from @vfonic work on #41 we should also extend city select with some autocomplete/search dropdown plugin.

I couldn't find anything specific. Recommendation/Implementation welcome :)

@vfonic
Copy link
Collaborator

vfonic commented Jan 3, 2021

I looked a bit into this and found these couple of existing solutions (some are incomplete):
https://codepen.io/mitsuki/pen/PvqyKJ - mostly only UI for search box (w/ bulma) within the dropdown
https://buefy.org/documentation/autocomplete/ - bulma + vue.js solution
https://github.com/mattmezza/bulmahead - this seems like the most complete solution. We'd still need some backend search and I think it would be great to see some suggestions as soon as the search field is focused on

@dejanbj
Copy link
Collaborator

dejanbj commented Jan 3, 2021

We could try to use select2 plugin for this purpose maybe? I can check how easy it is to integrate in current setup.
For cities and also states (županije) found this https://github.com/loureirorg/city-state

@mmorava
Copy link
Contributor

mmorava commented Jan 3, 2021

I can take care of this as part of #31

@vlado
Copy link
Owner Author

vlado commented Jan 3, 2021

I can take care of this as part of #31

@mmorava I would like to have this on production ASAP and I think this should be simpler then #31, we can easily merge the effort then.

We could try to use select2 plugin for this purpose maybe? I can check how easy it is to integrate in current setup.
For cities and also states (županije) found this https://github.com/loureirorg/city-state

https://github.com/loureirorg/city-state looks great, @mmorava can we use that, did you already found other solution?
I used select2 before and know it was easy to integrate but not sure does it match bulimia styling. Also we need to check how it works on mobile.

https://codepen.io/mitsuki/pen/PvqyKJ - mostly only UI for search box (w/ bulma) within the dropdown

I think we need complete solution to save time

https://buefy.org/documentation/autocomplete/ - bulma + vue.js solution

I think adding vue.js just for this does not make sense.

https://github.com/mattmezza/bulmahead - this seems like the most complete solution. We'd still need some backend search and I think it would be great to see some suggestions as soon as the search field is focused on

This looks very good and simple to implement. We just need to make sure it works ok on mobile. I think we do not need to do search on backend. We just return the the array with the cities as on the example.

@vlado
Copy link
Owner Author

vlado commented Jan 3, 2021

I just checked https://github.com/loureirorg/city-state locally and it works ok but it has few drawbacks. You can get list of states:

CS.get(:hr)
=> {:"01"=>"Zagreb County",
 :"02"=>"Krapinsko-Zagorska Zupanija",
 :"03"=>"Sisacko-Moslavacka Zupanija",
 :"04"=>"Karlovacka Zupanija",
 :"05"=>"Varazdinska Zupanija",
 :"06"=>"Koprivnicko-Krizevacka Zupanija",
 :"07"=>"Bjelovarsko-Bilogorska Zupanija",
 :"08"=>"Primorsko-Goranska Zupanija",
 :"09"=>"Licko-Senjska Zupanija",
 :"10"=>"Viroviticko-Podravska Zupanija",
 :"11"=>"Pozesko-Slavonska Zupanija",
 :"12"=>"Slavonski Brod-Posavina",
 :"13"=>"Zadarska Zupanija",
 :"14"=>"Osjecko-Baranjska Zupanija",
 :"15"=>"Sibensko-Kninska Zupanija",
 :"16"=>"Vukovar-Sirmium",
 :"17"=>"Split-Dalmatia",
 :"18"=>"Istria",
 :"19"=>"Dubrovacko-Neretvanska Zupanija",
 :"20"=>"Megimurska Zupanija",
 :"21"=>"City of Zagreb"}

And then you can get city list for each county

CS.cities("10", :hr)
=> ["Cabuna", "Cacinci", "Dinjevac", "Gradina", "Mikleus", "Orahovica", "Pitomaca", "Slatina", "Spisic-Bukovica", "Suhopolje", "Virovitica", "Zdenci"]

This is the county where I am and it is missing a lot of villages. Another drawbacks are missing postal codes and Croatian letters are not used.

Alternative could be to use data from here https://www.posta.hr/preuzimanje-podataka-o-postanskim-uredima-6543/6543

@mmorava
Copy link
Contributor

mmorava commented Jan 3, 2021

@vlado have look at #102 that can be used to power filters like this. We can use gem as a temp solution

@vfonic
Copy link
Collaborator

vfonic commented Jan 3, 2021

Keep in mind if we use select2, looks like we'll need jQuery as select2 is a jQuery plugin: https://select2.org/

Then this issue will become an issue: Remove jQuery #95 :)

@vlado
Copy link
Owner Author

vlado commented Jan 4, 2021

Keep in mind if we use select2, looks like we'll need jQuery as select2 is a jQuery plugin: https://select2.org/

Then this issue will become an issue: Remove jQuery #95 :)

You are right. Added comment to that issue.

@vfonic
Copy link
Collaborator

vfonic commented Jan 7, 2021

@vlado is this fully implemented? Should we close this?

@vlado
Copy link
Owner Author

vlado commented Jan 7, 2021

@vlado is this fully implemented? Should we close this?

Yes, we can close it.

@vlado vlado closed this as completed Jan 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants