Merge pull request #1986 from ever-co/fix/update-task-status-ondrag

Fix/update task status ondrag

.cspell.json

@@ -53,6 +53,7 @@
 		"ipsum",
 		"JITSU",
 		"kanban",
+		"kanbandata",
 		"Lorem",
 		"libappindicator",
 		"lucide",
@@ -74,6 +75,7 @@
 		"testid",
 		"Timesheet",
 		"tanstack",
+		"taskstatus",
 		"tempor",
 		"vcpu",
 		"Vercel",

apps/web/app/constants.ts

@@ -125,3 +125,7 @@ export enum IssuesView {
 	TABLE = 'TABLE',
 	BLOCKS = 'BLOCKS'
 }
+
+export const TaskStatus = {
+	INPROGRESS: 'in-progress'
+}

apps/web/app/hooks/features/useKanban.ts

@@ -12,9 +12,9 @@ export function useKanban() {
     const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 
     const taskStatusHook = useTaskStatus();
-    const { tasks, tasksFetching } = useTeamTasks();
 
-
+    const { tasks, tasksFetching, updateTask } = useTeamTasks();
+
     /**
      * format data for kanban board
      */
@@ -42,6 +42,8 @@ export function useKanban() {
     return {
         data: kanbanBoard,
         isLoading: loading,
-        columns: taskStatusHook.taskStatus
+        columns: taskStatusHook.taskStatus,
+        updateKanbanBoard: setKanbanBoard,
+        updateTaskStatus: updateTask
     }
 }

apps/web/lib/components/Kanban.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
 import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd';
 import Item from './kanban-card';
 import { ITeamTask } from '@app/interfaces';
+import { TaskStatus } from '@app/constants';
 
 const grid = 8;
 
@@ -63,7 +64,7 @@ function InnerItemList({items, title}: {
                     isDragging={dragSnapshot.isDragging}
                     isGroupedOver={Boolean(dragSnapshot.combineTargetFor)}
                     provided={dragProvided}
-                    style={title === 'review' && {
+                    style={title === TaskStatus.INPROGRESS && {
                         borderWidth: '1px',
                         borderColor: '#6FCF97',
                         borderStyle: 'solid'
@@ -168,7 +169,7 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: {
 export const EmptyKanbanDroppable = ({index,title, items}: {
     index: number;
     title: string;
-    items: any;
+    items: ITeamTask[];
 })=> {
     const [enabled, setEnabled] = useState(false);
 

apps/web/lib/components/kanban-card.tsx

@@ -4,6 +4,7 @@ import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot";
 import { DraggableProvided } from "react-beautiful-dnd";
 import CircularProgress from "@components/ui/svgs/circular-progress";
 import PriorityIcon from "@components/ui/svgs/priority-icon";
+import { Tag } from "@app/interfaces";
 
 function getStyle(provided: DraggableProvided, style: any) {
     if (!style) {
@@ -37,7 +38,7 @@ function setCommentIconColor(commentType: "tagged" | "untagged") {
     return style
 }
 
-function Tag({title, backgroundColor, color}: {
+function TagCard({title, backgroundColor, color}: {
     title: string,
     backgroundColor: string,
     color: string
@@ -64,17 +65,17 @@ function Tag({title, backgroundColor, color}: {
 }
 
 function TagList({tags}: {
-    tags: any[]
+    tags: Tag[]
 }){
     return (
         <>
             <div className="flex flex-row flex-wrap gap-1 items-center">
-                {tags.map((tag: any, index: number)=> {
+                {tags.map((tag: Tag, index: number)=> {
                     return (
-                        <Tag 
+                        <TagCard 
                             key={index}
-                            title={tag.title} 
-                            backgroundColor={tag.backgroundColor} 
+                            title={tag.name} 
+                            backgroundColor={tag.color} 
                             color={tag.color}
                         />
                     )
@@ -194,7 +195,7 @@ export default function Item(props: any) {
                </div>
             </div>
         </div>
-        {item.hasComment !== "none" &&
+        {item.hasComment &&
             (<div className="flex flex-row items-center justify-center rounded-full w-5 h-5 z-10 bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
                 <div 
                     className="w-3.5 h-3.5 rounded-full"

apps/web/lib/features/team-members-kanban-view.tsx

@@ -1,74 +1,87 @@
 import { useKanban } from "@app/hooks/features/useKanban";
+import { ITaskStatus, ITaskStatusItemList, ITeamTask } from "@app/interfaces";
+import { IKanban } from "@app/interfaces/IKanban";
 import { clsxm } from "@app/utils";
 import KanbanDraggable, { EmptyKanbanDroppable } from "lib/components/Kanban"
 import { AddIcon } from "lib/components/svgs";
 import React from "react";
 import {  useEffect, useState } from "react";
-import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd";
+import { DragDropContext, DraggableLocation, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd";
 
-const reorder = (list: any[], startIndex:number , endIndex:number ) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-  result.splice(endIndex, 0, removed);
 
-  return result;
-};
+export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) => {
 
-const reorderItemMap = ({ itemMap, source, destination }: {
-  itemMap: any,
-  source: any,
-  destination: any
-}) => {
-  const current = [...itemMap[source.droppableId]];
-  const next = [...itemMap[destination.droppableId]];
-  const target = current[source.index];
-
-  // moving to same list
-  if (source.droppableId === destination.droppableId) {
-    const reordered = reorder(current, source.index, destination.index);
-    const result = {
-      ...itemMap,
-      [source.droppableId]: reordered,
+    const { columns:kanbanColumns, updateKanbanBoard,  updateTaskStatus } = useKanban();
+
+    const [items, setItems] = useState<IKanban>(kanbanBoardTasks);
+
+    const [columns, setColumn] = useState<string[]>(Object.keys(kanbanBoardTasks));
+
+    const reorderTask = (list: ITeamTask[], startIndex:number , endIndex:number ) => {
+      const tasks = Array.from(list);
+      const [removedTask] = tasks.splice(startIndex, 1);
+      tasks.splice(endIndex, 0, removedTask);
+
+      return tasks;
     };
-    return {
-      quoteItem: result,
+
+    const reorderKanbanTasks = ({ kanbanTasks, source, destination }: {
+      kanbanTasks: IKanban,
+      source: DraggableLocation,
+      destination: DraggableLocation
+    }) => {
+      const sourceDroppableID = source.droppableId;
+      const destinationDroppableID = destination.droppableId;
+      const sourceIndex = source.index;
+      const destinationIndex = destination.index;
+      const currentTaskStatus = [...kanbanTasks[sourceDroppableID]];
+      const nextTaskStatus = [...kanbanTasks[destinationDroppableID]];
+      const targetStatus = currentTaskStatus[source.index];
+
+      // moving to same list
+      if (sourceDroppableID === destinationDroppableID) {
+        const reorderedKanbanTasks = reorderTask(currentTaskStatus, sourceIndex, destinationIndex);
+        const result = {
+          ...kanbanTasks,
+          [sourceDroppableID]: reorderedKanbanTasks,
+        };
+        return {
+          kanbanBoard: result,
+        };
+      }
+
+      // remove from original
+      currentTaskStatus.splice(sourceIndex, 1);
+
+      const taskstatus = destinationDroppableID as ITaskStatus;
+
+      const updateTaskStatusData = {...targetStatus, status: taskstatus};
+
+      // update task status on server
+      updateTaskStatus(updateTaskStatusData);
+
+      // insert into next
+      nextTaskStatus.splice(destinationIndex, 0, updateTaskStatusData);
+
+      const result = {
+        ...kanbanTasks,
+        [sourceDroppableID]: currentTaskStatus,
+        [destinationDroppableID]: nextTaskStatus,
+      };
+
+      return {
+        kanbanBoard: result,
+      };
     };
-  }
-
-  // moving to different list
-
-  // remove from original
-  current.splice(source.index, 1);
-  // insert into next
-  next.splice(destination.index, 0, target);
-
-  const result = {
-    ...itemMap,
-    [source.droppableId]: current,
-    [destination.droppableId]: next,
-  };
-
-  return {
-    quoteItem: result,
-  };
-};
-
-const getHeaderBackground = (columns: any, column: any) => {
-
-  const selectState = columns.filter((item: any)=> {
-    return item.name === column
-  });
-
-  return selectState[0].color
-}
-
-export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
-
-    const { columns:kanbanColumns } = useKanban();
-
-    const [items, setItems] = useState<any>(itemsArray);
-
-    const [columns, setColumn] = useState<any>(Object.keys(itemsArray));
+
+    const getHeaderBackground = (columns: ITaskStatusItemList[], column: string) => {
+
+      const selectState = columns.filter((item: ITaskStatusItemList)=> {
+        return item.name === column
+      });
+
+      return selectState[0].color
+    }
 
     /**
      * This function handles all drag and drop logic
@@ -96,6 +109,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
           [result.source.droppableId]: withItemRemoved,
         };
         setItems(orderedItems);
+
         return;
       }
 
@@ -115,23 +129,24 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
         return;
       }
 
-      // reordering column
-      if (result.type === 'COLUMN') {
-        const reorderedItem = reorder(items, source.index, destination.index);
-
-        setItems(reorderedItem);
+      // TODO: fix issues with reordering column
+      // if (result.type === 'COLUMN') {
+      //   const reorderedItem = reorder(items, source.index, destination.index);
 
-        return;
-      }
+      //   setItems(reorderedItem);
+      //   // updateKanbanBoard(reorderedItem);
+      //   // console.log('data '+ kanbandata)
+      //   return;
+      // }
 
-      const data = reorderItemMap({
-        itemMap: items,
+      const data = reorderKanbanTasks({
+        kanbanTasks: items,
         source,
         destination,
       });
 
-      setItems(data.quoteItem);
-       
+      setItems(data.kanbanBoard);
+      updateKanbanBoard(() => data.kanbanBoard)
     }
 
     const [enabled, setEnabled] = useState(false);

apps/web/pages/kanban/index.tsx

@@ -11,7 +11,7 @@ const Kanban= () => {
         <>
         <MainLayout>
            {Object.keys(data).length > 0 ? 
-            <KanbanView itemsArray={data}/>
+            <KanbanView kanbanBoardTasks={data}/>
             :
             null
            }