Modify the UI of events log switch tab

[nihal467]

Describe the bug

Currently the switch tab of events & daily road and filters button in the consultation page are utilizing two separate rows, unnecessarily

To Reproduce
Steps to reproduce the behavior:

1. Go to the patient tab
2. click on a active consultation
3. See error

Expected behavior

• keep the daily round & events and filter button to a single row
• Remove the sort-by button in the events green border to make it similar to the filter button in daily rounds
• When the sort by is active in events, make it the primary color to show sort by is active

Screenshots

[JOSHIK27]

Screen.Recording.2024-08-22.at.12.mp4

I have brought them to single row by creating filter ui elements in the parent component (removed the logic related to them in child components where they were present initially) and passed the corresponding query values of both filter ui as props to components which render the result obtained from filtering. Adjusted the grid to 3 columns. Please let me know if this is what you wanted ? and happy to modify if anything @rithviknishad

[rithviknishad]

The "sort by" and "filter" is NOT a tab right? Can we keep it outside the tab switch?

[JOSHIK27]

The "sort by" and "filter" is NOT a tab right? Can we keep it outside the tab switch?

Screen.Recording.2024-08-22.at.13.mp4

There is some inconsistency in the appearance of filter buttons. How do we make it better ? any inputs @rithviknishad

[rithviknishad]

We could use a Popover with 3-dot menu or filters icon for both. And keep the sort by as an option (select menu) in the popover instead.

[JOSHIK27]

We could use a Popover with 3-dot menu or filters icon for both. And keep the sort by as an option (select menu) in the popover instead.

is this how you wanted @rithviknishad ? Let me know if any changes required.

Screen.Recording.2024-09-20.at.09.31.52.mov

[rithviknishad]

This seems to be nested popovers which was not what I intended.

Let's inline the filter contents to the first popover itself.

Also could you make the 3-dot menu to use to <ButtonV2>? The current button doesn't seem to be clickable.

[JOSHIK27]

This seems to be nested popovers which was not what I intended.

Let's inline the filter contents to the first popover itself.

Also could you make the 3-dot menu to use to <ButtonV2>? The current button doesn't seem to be clickable.

Sure ill change.

Update: @rithviknishad As both filter ui components are different (popover, dropdown), it was straight forward to achieve the requirement for popover botton since we are creating a popover (3 dot). Inorder to have same appearence for both i had to change core menu component (not custom dropdownmenu component) . It will affect in other places as it is imported. So, i have pass label of menu as "None" and conditionally rendered 3 dot button to maintain same appearence.

Let me know what you think.

Screen.Recording.2024-09-20.at.14.mp4

[rithviknishad]

Checkout SelectMenuFormField. Lets use Popover for both sort by and filter. The sort by popover can contain SelectMenuFormField as it's child.

[rithviknishad]

Also let the 3-dot button's variant be "secondary", also ensure it's square. Would be difficult to click if so slim.