Merge pull request #2013 from ever-co/fix/kanban-header-bugs

Fix/kanban header bugs
ever-co · Dec 19, 2023 · c239b4e · c239b4e
2 parents a0fb203 + e4e52d5
commit c239b4e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 11 deletions.
diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
@@ -62,13 +62,24 @@ export function useKanban() {
         return columnData[0].isCollapsed
     }
 
+    const reorderStatus = (itemStatus: string, index: number) => {
+        taskStatusHook.taskStatus.filter((status: ITaskStatusItemList)=> {
+            return status.name === itemStatus
+        }).map((status: ITaskStatusItemList)=> {
+            taskStatusHook.editTaskStatus(status.id, {
+                order: index
+            });
+        })
+    }
+
     return {
         data: kanbanBoard,
         isLoading: loading,
         columns: taskStatusHook.taskStatus,
         updateKanbanBoard: setKanbanBoard,
         updateTaskStatus: updateTask,
         toggleColumn,
-        isColumnCollapse
+        isColumnCollapse,
+        reorderStatus
     }
 }
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -62,7 +62,7 @@ function InnerItemList({items, title, dropSnapshot}: {
                 minHeight: ((items.length < 0) && dropSnapshot.isDraggingOver) ? '120px' : '20px',
                 marginTop: (items.length > 0) ? '20px' : '0px'
             }}
-            className="flex flex-col gap-2.5 max-h-[520px] overflow-y-scroll overflow-x-hidden">
+            className="flex flex-col gap-2.5 max-h-[520px] overflow-y-auto overflow-x-hidden">
         {items.map((item: ITeamTask, index: number) => (
             <Draggable key={item.id} draggableId={item.id} index={index}>
                 {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
@@ -174,9 +174,10 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: {
  * @param param0 
  * @returns 
  */
-export const EmptyKanbanDroppable = ({index,title, items}: {
+export const EmptyKanbanDroppable = ({index,title, items, backgroundColor}: {
     index: number;
     title: string;
+    backgroundColor: any;
     items: ITeamTask[];
 })=> {
     const [enabled, setEnabled] = useState(false);
@@ -219,7 +220,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
                                 <>
                                    <header
                                         className={"relative flex flex-col gap-8 items-between text-center rounded-lg w-fit h-full px-2 py-4 bg-indianRed"}
-                                        style={headerStyleChanger(snapshot, '#D95F5F')}
+                                        style={headerStyleChanger(snapshot, backgroundColor)}
                                         data-isDragging={snapshot.isDragging}
                                     >
                                         <div

diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
@@ -73,14 +73,14 @@ function TagList({tags}: {
 }){
     return (
         <>
-            <div className="flex flex-row flex-wrap gap-1 items-center">
+            <div className="flex flex-wrap gap-1 items-center">
                 {tags.map((tag: Tag, index: number)=> {
                     return (
                         <TagCard 
                             key={index}
                             title={tag.name} 
                             backgroundColor={tag.color} 
-                            color={tag.color}
+                            color={"#FFFFFF"}
                         />
                     )
                 })}
@@ -195,7 +195,7 @@ export default function Item(props: any) {
                     <Priority level={1}/>
                 </div>
             </div>
-            <div className="flex flex-col w-[48px] gap-4 items-end">
+            <div className="flex flex-col w-[48px] justify-between items-end">
                 <VerticalThreeDot/>
 
                 <CircularProgress percentage={10}/>

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -10,7 +10,7 @@ import { DragDropContext, DraggableLocation, DropResult, Droppable, DroppablePro
 
 export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) => {
 
-    const { columns:kanbanColumns, updateKanbanBoard,  updateTaskStatus, isColumnCollapse } = useKanban();
+    const { columns:kanbanColumns, updateKanbanBoard,  updateTaskStatus, isColumnCollapse, reorderStatus } = useKanban();
 
     const [items, setItems] = useState<IKanban>(kanbanBoardTasks);
 
@@ -20,12 +20,11 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
       const tasks = Array.from(list);
       const [removedTask] = tasks.splice(startIndex, 1);
       tasks.splice(endIndex, 0, removedTask);
-
       return tasks;
     };
 
     const reorderColumn = (list: IKanban , startIndex:number , endIndex:number ) => {
-      const columns = Object.keys(list)
+      const columns = Object.keys(list);
       const [removedColumn] = columns.splice(startIndex, 1);
       columns.splice(endIndex, 0, removedColumn);
       return columns;
@@ -138,6 +137,12 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
 
       if (result.type === 'COLUMN') {
         const reorderedItem = reorderColumn(items, source.index, destination.index);
+
+        //update column order in server side
+        reorderedItem.map((item: string, index: number) => {
+          return reorderStatus(item, index);
+        });
+
         setColumn(reorderedItem);
 
         return;
@@ -194,6 +199,7 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
                               index={index} 
                               title={column}
                               items={items[column]}
+                              backgroundColor={getHeaderBackground(kanbanColumns, column)} 
                           />
                         </div>
                         :
@@ -206,7 +212,6 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
                               items={items[column]} 
                               backgroundColor={getHeaderBackground(kanbanColumns, column)}                            
                             />
-
                           </div>
                         </>
                       }