Merge pull request #1959 from ever-co/update/add-task-status-api

Update/add task status api

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

@@ -0,0 +1,37 @@
+import { kanbanBoardState } from "@app/stores/kanban";
+import { useTaskStatus } from "./useTaskStatus";
+import { useRecoilState } from "recoil";
+import { useEffect, useState } from "react";
+import { ITaskStatusItemList } from "@app/interfaces";
+
+export function useKanban() {
+
+    const [loading, setLoading] = useState<boolean>(true);
+
+    const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
+
+    const taskStatusHook = useTaskStatus();
+
+    /**
+     * format data for kanban board
+     */
+    useEffect(()=> {
+        if(taskStatusHook.loading) {
+            let kanban = {};
+            taskStatusHook.taskStatus.map((taskStatus: ITaskStatusItemList,)=> {
+                kanban = {
+                    ...kanban,
+                    [taskStatus.name ? taskStatus.name : ''] : []
+                }
+            });
+            setKanbanBoard(kanban)
+            setLoading(false)
+        }
+    },[taskStatusHook.loading])
+
+    return {
+        data: kanbanBoard,
+        isLoading: loading,
+        columns: taskStatusHook.taskStatus
+    }
+}

apps/web/app/interfaces/IKanban.ts

@@ -0,0 +1,5 @@
+import { ITeamTask } from "./ITask";
+
+export interface IKanban {
+    [key: string]: ITeamTask[]
+}

apps/web/app/stores/kanban.ts

@@ -0,0 +1,7 @@
+import { IKanban } from "@app/interfaces/IKanban";
+import { atom } from "recoil";
+
+export const kanbanBoardState = atom<IKanban>({
+    key: 'kanbanBoardState',
+    default: {}
+})

apps/web/lib/components/Kanban.tsx

@@ -206,7 +206,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
                             { title.length > 0 ?
                                 <>
                                    <header
-                                        className={"flex flex-col gap-8 items-between text-center rounded-lg w-fit h-full px-2 py-4 bg-indianRed"}
+                                        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')}
                                         data-isDragging={snapshot.isDragging}
                                     >
@@ -220,24 +220,28 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
 
                                         </div>
                                         <div
-                                            className="flex flex-col w-7 items-center gap-2.5 "
+                                            className="relative  w-7 flex flex-col items-center justify-end gap-2.5 mt-20"
                                         >
-                                            <div
-                                                className="
-                                                flex flex-col items-center justify-center px-[10px] text-xs py-1 text-white 
-                                                bg-transparentWhite rounded-[20px]"
-                                            >
-                                                {items.length}
-                                            </div>
-                                            <div className="origin-top-right -translate-x-3/4 -rotate-90">
-                                            <h2 
-                                                className="text-base font-bold not-italic h-full text-white font-PlusJakartaSansBold capitalize"
-                                                data-isDragging={snapshot.isDragging}
-                                                {...provided.dragHandleProps}
-                                                aria-label={`${title} quote list`}
-                                            >
-                                                {title}
-                                            </h2>
+                                            <div className="relative flex flex-row-reverse gap-2.5 w-[200px] -rotate-90 justify-start">
+                                                <div
+                                                    className="
+                                                    flex flex-col items-center justify-center px-[10px] text-xs py-1 text-white 
+                                                    bg-transparentWhite rounded-[20px]"
+                                                >
+                                                    {items.length}
+                                                </div>
+                                                <div>
+                                                    <h2 
+                                                        className=" flex flex-row text-base font-bold not-italic h-full text-white font-PlusJakartaSansBold capitalize"
+                                                        data-isDragging={snapshot.isDragging}
+                                                        {...provided.dragHandleProps}
+                                                        aria-label={`${title}`}
+                                                    >
+                                                        <span className="">
+                                                        {title}
+                                                        </span>
+                                                    </h2>
+                                                </div>
                                             </div>
                                         </div>
 

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

@@ -1,7 +1,7 @@
+import { useKanban } from "@app/hooks/features/useKanban";
 import { clsxm } from "@app/utils";
 import KanbanDraggable, { EmptyKanbanDroppable } from "lib/components/Kanban"
 import { AddIcon } from "lib/components/svgs";
-import { state } from "pages/kanban";
 import React from "react";
 import {  useEffect, useState } from "react";
 import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd";
@@ -53,19 +53,22 @@ const reorderItemMap = ({ itemMap, source, destination }: {
   };
 };
 
-const getHeaderBackground = (column: any) => {
-  const selectState = state.filter((item: any)=> {
+const getHeaderBackground = (columns: any, column: any) => {
+  const selectState = columns.filter((item: any)=> {
     return item.name === column.toUpperCase()
   });
 
-  return selectState[0].backgroundColor
+  return selectState[0].color
 }
 
 export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
 
-    const [items, setItems] = useState<any>(itemsArray);
+    const { columns:kanbanColumns } = useKanban();
 
+    const [items, setItems] = useState<any>(itemsArray);
+
     const [columns, setColumn] = useState<any>(Object.keys(itemsArray));
+
     /**
      * This function handles all drag and drop logic
      * on the kanban board.
@@ -156,7 +159,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
               >
               {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
                 <div
-                  className={clsxm("flex flex-row justify-center gap-[20px] w-full h-full p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
+                  className={clsxm("flex flex-row justify-center gap-[20px] w-full min-h-[600px] p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
                   ref={provided.innerRef}
                   {...provided.droppableProps}
                 >
@@ -172,7 +175,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
                               index={index}
                               title={column}
                               items={items[column]} 
-                              backgroundColor={getHeaderBackground(column)}                            
+                              backgroundColor={getHeaderBackground(kanbanColumns, column)}                            
                             />
                             <div className="flex flex-row items-center text-base not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4">
                                 <AddIcon height={20} width={20}/>

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

@@ -18,8 +18,8 @@ type TeamMembersProps = {
 export function TeamMembers({ publicTeam = false, kanbanView: view = IssuesView.CARDS }: TeamMembersProps) {
 	const { user } = useAuthenticateUser();
 	const activeFilter = useRecoilValue(taskBlockFilterState);
-	const { activeTeam } = useOrganizationTeams();
-	const { teamsFetching } = useOrganizationTeams();
+	const { activeTeam,  teamsFetching } = useOrganizationTeams();
+
 	const members =
 		activeFilter == 'all'
 			? activeTeam?.members || []

apps/web/pages/kanban/index.tsx

@@ -1,173 +1,17 @@
+import { useKanban } from "@app/hooks/features/useKanban";
 import { withAuthentication } from "lib/app/authenticator";
 import { KanbanView } from "lib/features/team-members-kanban-view"
 import { MainLayout } from "lib/layout";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-const todo = {
-    id: 'status-1',
-    name: 'TODO',
-    backgroundColor: '#8154BA',
-}
-
-const ongoing = {
-    id: 'status-2',
-    name: 'ONGOING',
-    backgroundColor: '#D7EBDF',
-}
-
-const review = {
-    id: 'status-3',
-    name: 'REVIEW',
-    backgroundColor: '#EAD2D5',
-}
-
-export const state = [ todo, ongoing, review]
-
-const demoData = {
-    todo: [
-        {
-            id: '1',
-            content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-            hasComment: "tagged",
-            tags: [
-                {
-                    id: 'tag-1',
-                    title: 'User Profile',
-                    backgroundColor: '#8154BA',
-                    color: '#fff'
-                },
-                {
-                    id: 'tag-2',
-                    title: 'BackEnd',
-                    backgroundColor: '#EAD2D5',
-                    color: '#DD2F44'
-                },
-            ],
-            status: todo
-        },
-        {
-            id: '4',
-            content: 'demo content2',
-            hasComment: "none",
-            tags: [
-                {
-                    id: 'tag-1',
-                    title: 'User Profile',
-                    backgroundColor: '#D7EBDF',
-                    color: '#3D9360'
-                },
-                {
-                    id: 'tag-2',
-                    title: 'BackEnd',
-                    backgroundColor: '#EAD9EE',
-                    color: '#9641AB'
-                },
-            ],
-            status: todo
-        }
-    ],
-    ongoing: [
-        {
-            id: '2',
-            content: 'another content',
-            hasComment: "untagged",
-            tags: [
-                {
-                    id: 'tag-1',
-                    title: 'User Profile',
-                    backgroundColor: '#EAD9EE',
-                    color: '#9641AB'
-                },
-                {
-                    id: 'tag-2',
-                    title: 'BackEnd',
-                    backgroundColor: '#EAD2D5',
-                    color: '#DD2F44'
-                },
-            ],
-            status: ongoing
-        },
-        {
-            id: '5',
-            content: 'another content2',
-            hasComment: "none",
-            tags: [
-                {
-                    id: 'tag-1',
-                    title: 'User Profile',
-                    backgroundColor: '#8154BA',
-                    color: '#fff'
-                },
-                {
-                    id: 'tag-2',
-                    title: 'BackEnd',
-                    backgroundColor: '#D7EBDF',
-                    color: '#3D9360'
-                },
-            ],
-            status: ongoing
-        }
-    ],
-    review: [
-        {
-            id: '3',
-            content: 'a simple tes',
-            hasComment: "none",
-            tags: [
-                {
-                    id: 'tag-1',
-                    title: 'User Profile',
-                    backgroundColor: '#D7EBDF',
-                    color: '#3D9360'
-                },
-                {
-                    id: 'tag-2',
-                    title: 'BackEnd',
-                    backgroundColor: '#D7EBDF',
-                    color: '#3D9360'
-                },
-            ],
-            status: review
-        },
-        {
-            id: '6',
-            content: 'a simple tes',
-            hasComment: "none",
-            tags: [
-                {
-                    id: 'tag-1',
-                    title: 'User Profile',
-                    backgroundColor: '#D7EBDF',
-                    color: '#3D9360'
-                },
-                {
-                    id: 'tag-2',
-                    title: 'BackEnd',
-                    backgroundColor: '#D7EBDF',
-                    color: '#3D9360'
-                },
-            ],
-            status: review
-        }
-    ]}
 
 const Kanban= () => {
-    const router = useRouter()
-    const [winReady, setwinReady] = useState(false);
-
-    useEffect(() => {
-
-            setwinReady(true);
-
-
-    }, [router.isReady]);
-
+
+    const { data } = useKanban();
+
     return (
         <>
         <MainLayout>
-           {winReady ? 
-            <KanbanView itemsArray={demoData}/>
+           {Object.keys(data).length > 0 ? 
+            <KanbanView itemsArray={data}/>
             :
             null
            }