From 644e9fe6a15e9eac781e9e58a497fcbbf461df37 Mon Sep 17 00:00:00 2001
From: moheladwy <mohamed.h.eladwy@gmail.com>
Date: Sat, 18 Jan 2025 21:42:25 +0200
Subject: [PATCH] Solved the bug in the sorting filter by adding a 'Custom
 order' tag and make the tasks draggable only in this mode

---
 client/src/components/draggable-tasks.tsx     | 45 ++++++++++++++-----
 .../pages/Tasks/componenets/TaskFilters.tsx   |  4 +-
 .../src/pages/Tasks/componenets/TaskList.tsx  |  7 ++-
 client/src/pages/Tasks/index.tsx              |  1 +
 4 files changed, 44 insertions(+), 13 deletions(-)

diff --git a/client/src/components/draggable-tasks.tsx b/client/src/components/draggable-tasks.tsx
index 7560ef8e..50feeec8 100644
--- a/client/src/components/draggable-tasks.tsx
+++ b/client/src/components/draggable-tasks.tsx
@@ -19,6 +19,7 @@ import { useAppStore } from '@/store/useStore';
 import { Task, TaskOrder } from '@/lib/api/interfaces';
 import { TaskItem } from '@/pages/Tasks/componenets/TaskItem';
 import { useMemo } from 'react';
+import { SortOption } from '@/pages/Tasks/componenets/TaskFilters';
 
 interface DraggableTaskItemProps {
   task: Task;
@@ -57,9 +58,10 @@ function DraggableTaskItem({ task }: DraggableTaskItemProps) {
 
 interface DraggableTasksProps {
   tasks: Task[];
+  sortOption?: SortOption;
 }
 
-export function DraggableTasks({ tasks }: DraggableTasksProps) {
+export function DraggableTasks({ tasks, sortOption = SortOption.CustomOrder }: DraggableTasksProps) {
   const { selectedListId, taskOrders, reorderTasks } = useAppStore();
   
   const sensors = useSensors(
@@ -76,16 +78,39 @@ export function DraggableTasks({ tasks }: DraggableTasksProps) {
   const sortedTasks = useMemo(() => {
     if (!selectedListId) return tasks;
 
+    let orderedTasks = [...tasks];
     const currentOrders = taskOrders[selectedListId] || [];
-    const tasksWithOrder = tasks.map((task, index) => {
-      const orderItem = currentOrders.find(order => order.taskId === task.id);
-      return {
-        ...task,
-        order: orderItem?.order ?? index
-      };
-    });
-    return tasksWithOrder.sort((a, b) => a.order - b.order);
-  }, [tasks, selectedListId, taskOrders]);
+
+    // First apply custom order from drag-and-drop if no sort option is active
+    if (sortOption === SortOption.CustomOrder) {
+      const tasksWithOrder = orderedTasks.map((task, index) => {
+        const orderItem = currentOrders.find(order => order.taskId === task.id);
+        return {
+          ...task,
+          order: orderItem?.order ?? index
+        };
+      });
+      orderedTasks = tasksWithOrder.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    } else {
+      // Apply sorting based on the selected option
+      switch (sortOption) {
+        case SortOption.NameAsc:
+          orderedTasks.sort((a, b) => a.name.localeCompare(b.name));
+          break;
+        case SortOption.NameDesc:
+          orderedTasks.sort((a, b) => b.name.localeCompare(a.name));
+          break;
+        case SortOption.PriorityHighToLow:
+          orderedTasks.sort((a, b) => a.priority - b.priority);
+          break;
+        case SortOption.PriorityLowToHigh:
+          orderedTasks.sort((a, b) => b.priority - a.priority);
+          break;
+      }
+    }
+
+    return orderedTasks;
+  }, [tasks, selectedListId, taskOrders, sortOption]);
 
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
diff --git a/client/src/pages/Tasks/componenets/TaskFilters.tsx b/client/src/pages/Tasks/componenets/TaskFilters.tsx
index c4c0ae95..4eb7d5f6 100644
--- a/client/src/pages/Tasks/componenets/TaskFilters.tsx
+++ b/client/src/pages/Tasks/componenets/TaskFilters.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/select"
 
 export enum SortOption {
+  CustomOrder = "custom_order",
   NameAsc = "name_asc",
   NameDesc = "name_desc",
   PriorityLowToHigh = "priority_low_to_high",
@@ -68,13 +69,14 @@ export function TaskFilters({
       </Select>
       
       <Select 
-        defaultValue={SortOption.NameAsc}
+        defaultValue={SortOption.CustomOrder}
         onValueChange={(value) => onSortChange(value as SortOption)}
       >
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Sort by" />
         </SelectTrigger>
         <SelectContent>
+          <SelectItem value={SortOption.CustomOrder}>Custom Order</SelectItem>
           <SelectItem value={SortOption.NameAsc}>Name (A-Z)</SelectItem>
           <SelectItem value={SortOption.NameDesc}>Name (Z-A)</SelectItem>
           <SelectItem value={SortOption.PriorityLowToHigh}>
diff --git a/client/src/pages/Tasks/componenets/TaskList.tsx b/client/src/pages/Tasks/componenets/TaskList.tsx
index bf3566c3..6ad79534 100644
--- a/client/src/pages/Tasks/componenets/TaskList.tsx
+++ b/client/src/pages/Tasks/componenets/TaskList.tsx
@@ -6,14 +6,17 @@ import TaskCompletedViewList from "./TaskCompletedViewList"
 import AllPendingTasksList from "./AllPendingTasksList"
 import NoPendingTasks from "@/components/no-pending-tasks"
 import { DraggableTasks } from "@/components/draggable-tasks"
+import { SortOption } from "./TaskFilters"
 
 interface TaskListProps {
   tasks: Task[]
   isCompletedView?: boolean
   isAllPendingView?: boolean
+  sortOption?: SortOption
 }
 
-export function TaskList({ tasks, isCompletedView, isAllPendingView }: TaskListProps) {
+export function TaskList({ tasks, isCompletedView, 
+  isAllPendingView, sortOption }: TaskListProps) {
   const pendingTasks = tasks.filter(task => !task.isCompleted)
   const completedTasks = tasks.filter(task => task.isCompleted)
   
@@ -28,7 +31,7 @@ export function TaskList({ tasks, isCompletedView, isAllPendingView }: TaskListP
   return (
     <div className="container space-y-4">
         <div className="container space-y-2">
-          <DraggableTasks tasks={pendingTasks} />
+          <DraggableTasks tasks={pendingTasks} sortOption={sortOption} />
         </div>
       <Accordion type="multiple" className="space-y-1 border-0">
         {completedTasks.length > 0 && (
diff --git a/client/src/pages/Tasks/index.tsx b/client/src/pages/Tasks/index.tsx
index 0e8cfd26..51c3ec61 100644
--- a/client/src/pages/Tasks/index.tsx
+++ b/client/src/pages/Tasks/index.tsx
@@ -230,6 +230,7 @@ export function Tasks() {
             tasks={filteredAndSortedTasks}
             isCompletedView={listId === 'completed'}
             isAllPendingView={listId === 'all'}
+            sortOption={sort}
           />
         </div>