Add ability to filter project list by columns in a grid view

[maxceem]

From Connect - UI/UX Enhancements ducument.

1. Remove “Filters” bar at the top (it is not helpful).

   

2. Instead, each column should be filterable/sortable, per the callouts below. Idea is similar to how filtering in Excel works in each column.

   • ID Column: Should be filterable. User can type in a full ID or a portion (Ex. “55..) and all results matching that ID should be filtered.
   • Project: Project name should be filterable. User can type in a full name or a portion (Ex. Eaton…) and all results matching that name should be filtered.
   • *NEW: Reference Code/Tag: Should be filterable. User can type in a full code/tag or a portion (Ex. Zur…) and all results matching that name should be filtered. This column should be added as described in this issue Add reference code as a column to the project list in a grid view #2803.
   • Last Updated: No changes - keep as is.
   • Customer: Customer name should be filterable. User can type in a full name or a portion (Ex. Jim…) and all results matching that name should be filtered.
   • Managers: Managers should be filterable. User can type in a name/handle and all results matching that should be filtered.

Implementation notes

• For design of the filter for columns we can use the same drodown like for Last Updated sorting:

  

  But instead of the list of options to sort we can show one input field where we can type some portion of the text to filter by.

• Filtering should be live. During typeing we automatically make request to the server for filtered data. But these requests should be debounced. We already include lodash lib which has _.debounce() method.

• Currently, when we load project list or filter project by status the whole project list got hidden, see screencast: https://monosnap.com/file/gKUaHdp7FurvOHXuCcLnKW1isU82Ui

  • We have to change this behaviour and show table header all the time with loader animation during loading project list, filtering by status or filtering in columns.

Project Service support

For now project service doesn't support such way of filtering by parts of the text. We should implement it there before we can complete this issue.

fyi @vikasrohit

[vikasrohit]

@maxceem we can keep it out of cf-pipeline and get it fixed as task (which includes both backend end and front end changes)

[vigneshTheDev]

What would be the workflow after filtering?

• How do we clear it? - Shall we have a clear button along with the input box?
• Is filtering by multiple fields at the same time required? - If yes, should we provide a clear all button for clearing the filter?

[vigneshTheDev]

And how does it work in card view?

[maxceem]

How do we clear it? - Shall we have a clear button along with the input box?

For now, lets just clear the text in the input - empty text - no filtering.

Is filtering by multiple fields at the same time required? - If yes, should we provide a clear all button for clearing the filter?

Yes, we should be able to filter by multiple fields. For now no need to add a button to clear all. So we will need to clear filters individually as described above.

And how does it work in card view?

For the card view, this filtering shouldn't be applied. But the current filtering by statys should stay:

[RishiRajSahu]

Done and pushed to prod.