Implement a configurable location selector UI

[dubdabasoduba]

On the Android app, users will be allowed to select different locations including the ones they are not assigned to. These locations will be selected from the location selector. The location selector should be accessible from the side menu or the map view during initial login (no locations selected).

• This accessibility flow should be added as a configuration so that this UI can be launched from somewhere else e.g the Settings, Profile or Register pages

Business requirements

• The ability for users to select or deselect a location they would like to visit during a field visit.

Functional requirements

• [ ] The user can access the location selector from the side menu by tapping on the set location.
• [ ] User can access the location selector from the map view by tapping on set location on initial login.
• [ ] User can access the location selector from the register view by tapping on the set location (initial login).
• [ ] Once the user lands on the location selector, the location hierarchy is displayed and they can select the location where the service points they want to visit are located.
• [ ] User can select more than 1 location.
• [ ] User can also use the search bar on the page to filter a location. When the user types in a few letters, the locations with those letters are shown. The finer /more detailed the search, the finer the results.
• [ ] Once the locations are selected, sync is triggered by clicking the Sync Data button

Technical Requirements

• [ ] The hierarchy displayed on this view should be configurable i.e
  • [ ] Content authors can define up to what node of the location hierarchy should be shown here.
  • [ ] Add the ability to launch this bottom sheet like any other workflow since it can be launched from multiple pages.
• [ ] All the selected locations should be stored in the secure shared prefs.
  • [ ] If this feature is enabled and no selected locations can be found on the secure shared prefs, sync should be paused until the locations are selected and the Sync Data button is clicked.
  • [ ] If the secure shared prefs has an entry, sync should work as defined here https://github.com/opensrp/fhircore/issues/3067
• [ ] The search on this view should only search through the content of the tree view on this screen.

Acceptance criteria

• [ ] All functions highlighted in the functional requirements are working correctly.

Implementation plan (For Engineers) The plan for implementing the solution e.g. via a description or a check list for the various ordered tasks that will need to be completed. i.e. Describe how you intend to solve the problem

[dubdabasoduba]

Updated location selection screenshot

@ellykits raised an interesting observation on the linked screenshot. Right now based on how the select and drill down icons are placed shows kinda of shows that the user has to select and then drill down.

would it make more sense to have the selection checkbox at the start? like in the screenshot below

cc: @HenryRae @rowo

[rowo]

I'm wary about both solutions on mobile screens because of the small area to tap for the checkboxes and arrows. For our users, I'd prefer the whole line as a tappable button that can either expand or select the line item.

However, I'm not sure about the exact solution though. I wonder if adding a "select all" option to lists with children could work. The problem is any choice with children will not be obviously selected (for example Lavington, if you select Nairobi).

@HenryRae any ideas?

[HenryRae]

The touch areas could be manageable to a minimum of 48px, @ellykits you can let me know if this is possible with our current tech.

The icons can be swapped, what is proposed by Elly is the most common UX.

I've updated the design and also tried to cater for other scenarios like search and selecting of location. See below

[ellykits]

The touch areas could be manageable to a minimum of 48px, @ellykits you can let me know if this is possible with our current tech.

This should be possible @HenryRae