From 1ff31a90f4a6597e973e3e46058c8f107b927430 Mon Sep 17 00:00:00 2001
From: Avinash Bhardwaj <avinashb97@gmail.com>
Date: Mon, 9 Sep 2024 19:26:52 +0530
Subject: [PATCH] sort task groups reverse alphabetically by their status
 (#6886)

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>
---
 .../tasks/components/TaskGroups.tsx           | 30 ++++++++++---------
 .../activities/tasks/components/TaskRow.tsx   |  7 +++++
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
index 4503fd991..a6e499977 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskGroups.tsx
@@ -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>
   );
 };
diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
index 798bb077d..52c1731db 100644
--- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
+++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx
@@ -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;
 `;