admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

sort task groups reverse alphabetically by their status (#6886)

Browse Source 
This PR Solves #6830 

## Issue Summary
The tasks are grouped by their respective statuses and displayed on the
ui. The grouping is performed by `lodash.groupBy` which doesn't maintain
explicit ordering of the keys.

## Fix
Sort the tasks groups array by their status on the basis of
reverse-alphabetical order before generating task component for each
task data.

#### Why reverse alphabetical?
It implicitly sorts the statuses as per the order `TODO` ->
`IN_PROGRESS` -> `DONE`
Caveats:
1. Changing the name of one or more status might result in a different
unwanted order.
2. `null` is unhandled, although the original code doesn't allow for
nulls as status while displaying

### Alternative Fix
Maintain an explicit ordering of the statuses and sort the tasks
accordingly.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Avinash Bhardwaj
2024-09-09 19:26:52 +05:30
committed by GitHub
parent b01745dba7
commit 1ff31a90f4
2 changed files with 23 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
View File

@ -91,22 +91,24 @@ export const TaskGroups = ({
);
}
const sortedTasksByStatus = Object.entries(
groupBy(tasks, ({ status }) => status),
).toSorted(([statusA], [statusB]) => statusB.localeCompare(statusA));
return (
<StyledContainer>
{Object.entries(groupBy(tasks, ({ status }) => status)).map(
([status, tasksByStatus]: [string, Task[]]) => (
<TaskList
key={status}
title={status}
tasks={tasksByStatus}
button={
showAddButton && (
<AddTaskButton activityTargetableObjects={targetableObjects} />
)
}
/>
),
)}
{sortedTasksByStatus.map(([status, tasksByStatus]: [string, Task[]]) => (
<TaskList
key={status}
title={status}
tasks={tasksByStatus}
button={
showAddButton && (
<AddTaskButton activityTargetableObjects={targetableObjects} />
)
}
/>
))}
</StyledContainer>
);
};