[Feature Request]: Ability to collapse regions and subregions in meeting list drop-down for TSML UI

[intuitivecat]

Contact Details

[email protected]

Requested Feature/Enhancement

We (https://buddhistrecovery.org/meetings/) use the 12 step meeting list module to list buddhist recovery meetings from all over the world, we partner with and import from Recovery Dharma. They use the newer TMSL-UI but felt the need to move away from listing meetings by city due to the drop down in the meeting search not supporting collapsing/expanding regions and subregions. With subregions their drop-down list was unmanageably long for users, it ends up being around 300+ regions.

Legacy-UI

TSML-UI

Is there any work-around for them to be able to do this?

Another idea might be to have an option to not show subregions int he drop-down but still have them internally. Users would need a way to see the subregions in the list view for that to work.

Also open to any suggestions on injecting something from another (custom) Wordpress plugin to customize the behavior without modifying the core code? I found a parallel custom plugin approach a helpful way to manage certain needs, e.g. read in the regions/subregions using Wordpress queries and inject the old-style drop-down. I understand the new TSML-UI may be React though, so that seems tricky to inject from vanilla JS into React+VDOM.

For us the answer is simple, stay with the Legacy-UI until this and code4recovery/12-step-meeting-list#1344 can be sorted out.

But I would like to help them and our meeting goers find meetings by subregion (city) instead of only by region (state/province/country)

[kiyote33]

Hi @intuitivecat,
Sorry for the slow response to your question? Our team has been dealing with a lot of stuff this weekend.
Have you considered a reorganization of your regions to aid drilling down on the regions? I see you currently have a state/city type configuration. Would you consider adding a 3rd level (i.e. country/state/city)? That would be fairly easy to create and would work for TSML UI as well as the Legacy UI.

[kiyote33]

Or maybe even a 4th level with something like Continent as the top level.

[joshreisner]

thanks for the request - i agree that list looks like it's getting pretty unwieldy

i'm not sure yet if the best solution is to re-implement the dropdown accordion from legacy - it's still a little clunky especially when handling multiple tiers

we have some other tickets around the dropdowns as well: adding checkboxes, and not letting them get taller than the viewport. it might be that we need a more fundamental redesign of the filters

but we will definitely make long lists like yours collapsible in some way

[intuitivecat]

kiyote33 sorry about the crazy weekend!

interesting suggestion, I played with it but I don't think it solves the issue of managing the large list in TSML-UI without an accordion to collapse/expand and our primary audience is United States. I like the flexibility TMSL provides here, we can mix it and order it as works best.

[steve970]

I'm trying to use the TSML to show a list of international meetings all over the world. Ideally the Region dropdown wouldn't have the counts because that list is very, very long and would be an accordian. Any direction would be great. Thanks!

[steve970]

To expand a little bit further. I currently working with an ISO to implement the TSML plugin and there are 2,000+ meetings to display all over the world. Ideally, I'd be able to organize the data in a way where the Country would be the top level, followed by the city, and if possible, another level to the city. In the current set up, there's just far too many countries and states, to make it a workable option. Any direction, one way or another would be appreciated. The reason we chose to go with the TSML UI over the Legacy UI is because of the open Timezone option that the TSML UI provides. Thanks!

[joshreisner]

hey @steve970 , @gkovats has made some great progress on this, i think the basic coding is pretty much ready, i just have some feedback about UI polish before we release it to all users. if you'd like to preview it go here: https://deploy-preview-430--tsml-ui.netlify.app/tests/timezones.html

if you want to test this canary version in production, you could also just grab the actual app bundle from here: https://deploy-preview-430--tsml-ui.netlify.app/app.js and save it locally

if you're using TSML, you can change the path to TSML UI by adding this to your wp-conflig.php

define("TSML_UI_PATH", "/path/to/your/app.js");

[steve970]

Thank you for getting the according option added so quickly. If I added this canary version into my production, should I be following the configuration instructions in this repo vs. 12-step-meeting-list instructions? I am trying to add custom types and need some guidance. Thanks!