Merge pull request #2011 from ever-co/fix/make-column-draggable

Fix/make column draggable
ever-co · Dec 18, 2023 · a0fb203 · a0fb203
2 parents 027cb3d + 92f9cf5
commit a0fb203
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -7,13 +7,14 @@ import Item from './kanban-card';
 import { ITeamTask } from '@app/interfaces';
 import { TaskStatus } from '@app/constants';
 import { useKanban } from '@app/hooks/features/useKanban';
+import { AddIcon } from './svgs';
 
 const grid = 8;
 
 const getItemStyle = (isDragging: any, draggableStyle: any) => ({
   userSelect: "none",
   margin: `0 0 ${grid}px 0`,
-  background: isDragging ? "lightgreen" : null,
+  background: isDragging ? "" : null,
   ...draggableStyle
 });
 
@@ -334,11 +335,9 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
     items: ITeamTask[];
 }) => {
 
-
-
     return (
         <>
-            { items &&
+            { title &&
                 <Draggable
                     key={title}
                     index={index}
@@ -357,7 +356,7 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
                             className="flex flex-col w-[325px]"
 
                         >
-                            { items ?
+                            { title ?
                                 <>
                                     <KanbanDraggableHeader 
                                         title={title} 
@@ -366,12 +365,18 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
                                         provided={provided}
                                         backgroundColor={backgroundColor}
                                     />
+                                    <div className="flex flex-col gap-3">
                                     <KanbanDroppable 
                                         title={title} 
                                         droppableId={title} 
                                         type={'TASK'} 
                                         content={items}                     
                                     />
+                                    <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}/>
+                                        <p>Create Issues</p>
+                                    </div>
+                                    </div>
                                 </>
                                     : 
                                 null

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -3,7 +3,6 @@ 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, DraggableLocation, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd";
@@ -17,13 +16,20 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
 
     const [columns, setColumn] = useState<string[]>(Object.keys(kanbanBoardTasks));
 
-    const reorderTask = (list: ITeamTask[], startIndex:number , endIndex:number ) => {
+    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;
     };
+
+    const reorderColumn = (list: IKanban , startIndex:number , endIndex:number ) => {
+      const columns = Object.keys(list)
+      const [removedColumn] = columns.splice(startIndex, 1);
+      columns.splice(endIndex, 0, removedColumn);
+      return columns;
+    };
 
     const reorderKanbanTasks = ({ kanbanTasks, source, destination }: {
       kanbanTasks: IKanban,
@@ -129,15 +135,13 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
         return;
       }
 
-      // TODO: fix issues with reordering column
-      // if (result.type === 'COLUMN') {
-      //   const reorderedItem = reorder(items, source.index, destination.index);
-
-      //   setItems(reorderedItem);
-      //   // updateKanbanBoard(reorderedItem);
-      //   // console.log('data '+ kanbandata)
-      //   return;
-      // }
+
+      if (result.type === 'COLUMN') {
+        const reorderedItem = reorderColumn(items, source.index, destination.index);
+        setColumn(reorderedItem);
+
+        return;
+      }
 
       const data = reorderKanbanTasks({
         kanbanTasks: items,
@@ -194,17 +198,15 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
                         </div>
                         :
                         <>
-                          <div className="flex flex-col" key={index}>
+                          <div className="flex flex-col">
                             <KanbanDraggable 
+                              key={index}
                               index={index}
                               title={column}
                               items={items[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}/>
-                                <p>Create Issues</p>
-                            </div>
+
                           </div>
                         </>
                       }

diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -7,7 +7,7 @@ console.log(`NEXT_PUBLIC_GAUZY_API_SERVER_URL: ${process.env.NEXT_PUBLIC_GAUZY_A
 /** @type {import('next').NextConfig} */
 const nextConfig = {
 	output: process.env.NEXT_BUILD_OUTPUT_TYPE === 'standalone' ? 'standalone' : undefined,
-	reactStrictMode: true,
+	reactStrictMode: false,
 	swcMinify: true,
 	webpack: (config, { isServer }) => {
 		config.resolve.alias['@app'] = path.join(__dirname, 'app');