Sort lists of sources, connections, ...

fatchat commented 2 months ago

Description

Our List component needs a sort function. This issue will add a sort action to our lists

Goals

[ ] Ability to add a clickable sorting element to the header row of all Lists
[ ] The developer should be able to specify isSortable=true/false for each column
[ ] It is acceptable for no / some / all columns to be sortable
[ ] All sorting is lexicographic
[ ] Clicking repeatedly toggles sort / reverse-sort
[ ] Apply this to the Sources and Connections, sorting on the first column only

Expected Outcome

The first column in the list's header row should have up/down arrows next to the text. Clicking this will sort / reverse-sort / sort the list elements

Acceptance Criteria

[ ] The changes to List should be generic enough to allow sorting on any and possibly multiple columns
[ ] For this PR, only make the first columns of Sources and Connections sortable

Implementation Details

Use the Material UI "SwapVert" icon for the clickable sort element

Mockups / Wireframes

Product Name

Dalgo

Project Name

Dalgo

Organization Name:

Project Tech4Dev

Domain

30 Others

Tech Skills Needed:

JavaScript, React

Mentor(s)

@fatchat

Complexity

Medium

Sub Category

Frontend, Beginner friendly

its-VinayKumar commented 2 months ago

Hi @fatchat, I am interested on this issue and make the PR ASAP :) I am contributing for C4GT.

Akshat-Jaiswal-8 commented 2 months ago

hey @fatchat , can i work on this issue or you are assigning it to @its-VinayKumar ?

fatchat commented 2 months ago

i'm not assigning it to anyone @Akshat-Jaiswal-8 , whoever finishes first. you guys can coordinate if you don't want to do double-work

hariharan1309 commented 2 months ago

Hi @fatchat I would like to work on this issue , I'm good at React , JavaScript, and Typescript as well. Looking forward to work with the issue.

Akshat-Jaiswal-8 commented 2 months ago

Hey @fatchat , just wanted to ask that for the above task only a single swap_vert icon will be placed on the header. for example in the connections page, the icon will be placed adjacent to the "adjacent details" header and after clicking it the sorting will be done lexicographic on the basis of connection details column only. Am i right or there is anything i am missing ?

fatchat commented 2 months ago

Hey @fatchat , just wanted to ask that for the above task only a single swap_vert icon will be placed on the header. for example in the connections page, the icon will be placed adjacent to the "adjacent details" header and after clicking it the sorting will be done lexicographic on the basis of connection details column only. Am i right or there is anything i am missing ?

@Akshat-Jaiswal-8 yes for this PR the swap-vert should only be put next to "connection details"

but the list component should be able to support putting a swap-vert on any column the developer wants to

Abhi-0001 commented 2 months ago

Hello @fatchat is this issue still available to work?

DalgoT4D / webapp