twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-27 22:32:49 +03:00
Code Issues 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 14 deletions
Show Stats 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>
);
};

7
packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
View File

@ -36,6 +36,8 @@ const StyledTaskBody = styled.div`
max-width: 100%;
flex: 1;
overflow: hidden;
padding-bottom: ${({ theme }) => theme.spacing(0.25)};
`;
const StyledTaskTitle = styled.div<{
@ -44,10 +46,13 @@ const StyledTaskTitle = styled.div<{
color: ${({ theme }) => theme.font.color.primary};
font-weight: ${({ theme }) => theme.font.weight.medium};
padding: 0 ${({ theme }) => theme.spacing(2)};
padding-bottom: ${({ theme }) => theme.spacing(0.25)};
text-decoration: ${({ completed }) => (completed ? 'line-through' : 'none')};
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
align-items: center;
`;
const StyledDueDate = styled.div<{
@ -71,8 +76,10 @@ const StyledPlaceholder = styled.div`
`;
const StyledLeftSideContainer = styled.div`
align-items: center;
display: flex;
flex: 1;
overflow: hidden;
`;