Resolve "Improvement: Add search filter Option for "Assign Handing Editor" Feature"

Issue #262 (closed)

Description

• Alternative search component that allows users to filter the questions by 'status', 'assigned to he' and 'author'
• users can apply multiple filters simultaneously

Adding a filter

1 - Go to dashboard page as managing editor

2 - Switch to editor tab.

• Now the search component must have a Filter icon on the left side

3 - Click on (or focus) the search input:

• A popup, below the input with the following structure will appear:
  • label on the top with the following text content:'Filter By:'
  • list with the filter options with the following labels [Status, Assigned to he, Author].

4 - Navigate through the options either with keyboard or mouse. click or hit Enter to select an option

• Once you've made a selection, such as 'Status', a badge labeled 'Status' with a close button on its right, should appear at the begining of (within) the input,
• Now the values for 'status' should be the list of options on the popup: in this case : ['submitted', under review', 'in Production', 'published', 'rejected'].
• Also the text from the label at the top now should be 'Filter by: Status'.

5 - Now select a value, for example: 'in production'

• A second badge labeled 'In Production' will appear sticky to the right side of the first badge, and the close button now should appear only at the end of this second badge.
• The popup must hide.
• NOTES:
  • The popup will dynamically update to display the values related to the selected filter(if any) or this initial options
  • Options with values that must be added through a text input(such as author's name) will show the text typed on the search input as the option

5 - Press enter or click on the search icon to submit the search, (You can also type on the search input for more specific queries)

6 - Now only the questions with status in production should appear on the dashboard

NOTES:

• The selected Filters(and related badges) can be removed by pressing backspace (if search input is empty), or clicking on the close button from the badge.
• if the badges contains a filter and a value (for example: 'Assigned to he', 'is not') and the value is removed, the option list from the popup will be updated to show the values to replace it. in this case: ['is', 'is not']
• if there's a filter that has no selected value, the query will not be submited
• All filters with no value must be setted(or removed)
• For that reason, the options from the popup will always be updated to show the values for the last filter with no value setted
• When selecting Author Filter, its value must be setted from the input, and it can be selected by hitting enter or clicking on the option (that shows the text that user typed),
• after this, the badge for the value will become the value of the input and the input wil be cleared
• The popup will be closed after selecting the value (eg.: 'Status' 'Published')
• The popup can be closed manually by bluring the input, pressing escape or typing on the input
• If the input is clear and there are no selected filters(and badges displayed), the popup can be opened pressing backspace
• An aria live region will log the filters added/removed and instructions for screen readers

Adding more than one filter

1 - Press ArrowDown key or click on the search input to display the popup:

• The initial ([Status, Assigned to he, Author]) values should be displayed on the list
• NOTE: if an option that is alredy setted is selected, its value will be removed along with its related badge, to be resetted

2 - Repeat the steps to select a filter and a value

• Now the new badges must appear on the right of the previous ones with a slight separation.

3 - Submit the search and now the questions should match the query with the applied filters.