Enhance the category search and filter mechanism and UI to allow user act faster on the information provided there

[baraeb92]

Description

The current new UI for the province database creates several problems from the user's POV:

(1) By hiding the filter within the filter button, makes the functionality less obvious, and the current design is also less intuitive for users because there's no submit category button, only dismiss.

(2) Clicking enter on the search bar also send the user to the filter function instead submit the search query (which is not what the user's intended action)

(3) There's no quick way for the user to act on the action

See the current page design here: https://www.wargabantuwarga.com/provinces/bali-23

Implementation Model

As we change the outlook and strategy for WBW website to only use hotline as last resort for more scalable operations and better triage of problem, we need to put user's needs above the internal operational needs, thus might need to change the way we see how some features implemented on this page. (ie Salin features)

Tasks

• Remove the reset and sorting filter from the page Revert filter & sort ui #417
• Show the location and category filter on the page rather than hiding it within the filter button, also make sure that the location filter is showing the value of the province when the user already selecting provinces. (ie if the user is looking at Bali database, then by default the location filter should show Bali instead of "Semua") Revert filter & sort ui #417
• Change filter button to search button instead, when user clicking enter on search field submit the user keyword query instead of going to filter page. Revert filter & sort ui #417
• Refactor Mobile Search Form #444
• Change the Salin button to Chat WhatsApp and Buka Peta button
• Add copy text or salin functionality as an icon after the address and phone number text. (if possible add text "Click untuk mengcopy" when the user is hovering at the copy button, see tooltip)

A related issue here: #420

[baraeb92]

Related issue: #420

[resir014]

@baraeb92 I'm re-posting the rationale behind the UI change for the filter @zainfathoni and I did from the Slack over here.

The reason we decided to tweak the search and filter UI is because we had to make room for implementing a virtualised list for our /provinces list (#125). This is an important change performance-wise, since the bigger the number of lists that gets rendered on the page, the heavier it is on the user's load. However, this comes with a downside - for this to work, we had to implement static scrolling (that is, only the virtualised list gets scrolled), otherwise we would have double-scrolling, making the UI very janky indeed.

However, the current filter UI takes up 2/3 of the screen, meaning this will happen. #134 (comment)

TsFutXXxyx.mp4

I'm okay with reverting the UI back to the previous one, as long as we could find a way to make the filter option take less space. In case we need to make further performance improvements in the future, we need to make this feature ready.

[baraeb92]

Noted, thanks for the context @resir014 yes, the previous design can be improved as well.

I already attached the wireframe to be used as consideration for the next enhancement.

I believe the new design can help, because it actually take the same vertical space as your implementation, maybe just a bit more.

But definitely not as big as our previous implementation.

This I think a good compromise between usability and screen real estate.

[zainfathoni]

Change the Salin button to Chat WhatsApp and Buka Peta button

I have a few concerns about this:

1. Not all numbers are WhatsApp-able, e.g. fixed line, are we sure to make them always to be linked to WhatsApp?
2. Some phone number fields contain multiple phone numbers, os it's much more complex to provide that functionality rather than a simple Salin button

Example: https://www.wargabantuwarga.com/provinces/dki-jakarta/arnez-de-lourdez-122

[baraeb92]

I'm open for alternative solution.

Alternatively we can keep the salin for phone number as it is but making sure that when user click on the phone number it will prompt call to phone number instead.

And for data that has multiple phone number we can use comma to seperate each of them maybe with dedicated line instead? @zainfathoni