Merge pull request #2181 from ever-co/2180-fix-kanban-scrolling-view-…

…and-footer fix(Kanban): fix the kanban scrolling issue
ever-co · Feb 8, 2024 · 45647bd · 45647bd
2 parents c6246ea + ce887ba
commit 45647bd
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 45 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -69,7 +69,7 @@ const Kanban = () => {
 	};
 	return (
 		<>
-			<MainLayout showTimer={true}>
+			<MainLayout showTimer={true} footerClassName="hidden">
 				<div className={' flex flex-col bg-white dark:bg-dark--theme h-auto z-10 px-[32px] mx-[0px] w-full'}>
 					<div className="flex flex-row items-center justify-between mt-[34px]">
 						<Breadcrumb paths={breadcrumbPath} className="text-sm" />

diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx
@@ -62,9 +62,7 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any) {
 function InnerItemList({ items, title }: { title: string; items: ITeamTask[]; dropSnapshot: DroppableStateSnapshot }) {
 	return (
 		<>
-			<section
-				className="flex flex-col pb-2"
-			>
+			<section className="flex flex-col pb-2">
 				{items.map((item: ITeamTask, index: number) => (
 					<Draggable key={item.id} draggableId={item.id} index={index}>
 						{(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
@@ -340,7 +338,7 @@ const KanbanDraggable = ({
 							{...provided.draggableProps}
 							{...provided.dragHandleProps}
 							// style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
-							className="relative flex flex-col px-2 h-[1000px] w-[355px]"
+							className="relative flex flex-col px-2 h-fit w-[355px]"
 						>
 							{title ? (
 								<>

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -1,8 +1,11 @@
 import { useKanban } from '@app/hooks/features/useKanban';
 import { ITaskStatus, ITaskStatusItemList, ITeamTask } from '@app/interfaces';
 import { IKanban } from '@app/interfaces/IKanban';
+import { fullWidthState } from '@app/stores/fullWidth';
 import { clsxm } from '@app/utils';
+import { Container, Divider } from 'lib/components';
 import KanbanDraggable, { EmptyKanbanDroppable } from 'lib/components/Kanban';
+import { Footer } from 'lib/layout';
 import React from 'react';
 import { useEffect, useState } from 'react';
 import {
@@ -13,6 +16,7 @@ import {
 	DroppableProvided,
 	DroppableStateSnapshot
 } from 'react-beautiful-dnd';
+import { useRecoilValue } from 'recoil';
 
 export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban }) => {
 	const {
@@ -24,6 +28,7 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 		reorderStatus,
 		addNewTask
 	} = useKanban();
+	const fullWidth = useRecoilValue(fullWidthState);
 	const [columns, setColumn] = useState<string[]>(Object.keys(kanbanBoardTasks));
 	const reorderTask = (list: ITeamTask[], startIndex: number, endIndex: number) => {
 		const tasks = Array.from(list);
@@ -177,61 +182,73 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban })
 	if (!enabled) return null;
 	return (
 		<>
+			{/* <div className="flex flex-col justify-between"> */}
 			<DragDropContext onDragEnd={onDragEnd}>
 				{columns.length > 0 && (
 					<Droppable droppableId="droppable" type="COLUMN" direction="horizontal">
 						{(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
-							<div
-								className={clsxm(
-									'flex flex-row justify-start overflow-x-auto w-full  min-h-[calc(100vh-_422px)] max-h-[calc(100vh-_422px)]  p-[32px] bg-transparent dark:bg-[#181920]',
-									snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
-								)}
-								ref={provided.innerRef}
-								{...provided.droppableProps}
-							>
-								{columns.length > 0 ? (
-									<>
-										{columns.map((column: string, index: number) => {
-											return (
-												<React.Fragment key={index}>
-													<div className="flex flex-col a" key={index}>
-														{isColumnCollapse(column) ? (
-															<EmptyKanbanDroppable
-																index={index}
-																title={column}
-																items={items[column]}
-																backgroundColor={getHeaderBackground(
-																	kanbanColumns,
-																	column
-																)}
-															/>
-														) : (
-															<>
-																<KanbanDraggable
-																	key={index}
+							<div className="flex flex-col justify-between min-h-[calc(100vh-_328px)] max-h-[calc(100vh-_328px)] overflow-x-auto w-full">
+								<div
+									className={clsxm(
+										'flex flex-row h-fit p-[32px] bg-transparent dark:bg-[#181920]',
+										snapshot.isDraggingOver ? 'lightblue' : '#F7F7F8'
+									)}
+									ref={provided.innerRef}
+									{...provided.droppableProps}
+								>
+									{columns.length > 0 ? (
+										<>
+											{columns.map((column: string, index: number) => {
+												return (
+													<React.Fragment key={index}>
+														<div className="flex flex-col a" key={index}>
+															{isColumnCollapse(column) ? (
+																<EmptyKanbanDroppable
 																	index={index}
-																	addNewTask={addNewTask}
 																	title={column}
 																	items={items[column]}
 																	backgroundColor={getHeaderBackground(
 																		kanbanColumns,
 																		column
 																	)}
 																/>
-															</>
-														)}
-													</div>
-												</React.Fragment>
-											);
-										})}
-									</>
-								) : null}
-								<>{provided.placeholder}</>
+															) : (
+																<>
+																	<KanbanDraggable
+																		key={index}
+																		index={index}
+																		addNewTask={addNewTask}
+																		title={column}
+																		items={items[column]}
+																		backgroundColor={getHeaderBackground(
+																			kanbanColumns,
+																			column
+																		)}
+																	/>
+																</>
+															)}
+														</div>
+													</React.Fragment>
+												);
+											})}
+										</>
+									) : null}
+									<>{provided.placeholder}</>
+								</div>
+								<Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8')}>
+									<Divider />
+									<Footer className="justify-between px-0 w-full" />
+								</Container>
 							</div>
 						)}
 					</Droppable>
 				)}
 			</DragDropContext>
+			{/* <Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8')}>
+					<Divider />
+					<Footer className="justify-between px-0 w-full" />
+				</Container>
+			</div> */}
 		</>
 	);
 };
diff --git a/apps/web/lib/layout/main-layout.tsx b/apps/web/lib/layout/main-layout.tsx
@@ -15,9 +15,19 @@ type Props = PropsWithChildren<{
 	notFound?: boolean;
 	className?: string;
 	childrenClassName?: string;
+	footerClassName?: string;
 }>;
 
-export function MainLayout({ children, title, showTimer, publicTeam, notFound, className, childrenClassName }: Props) {
+export function MainLayout({
+	children,
+	title,
+	showTimer,
+	publicTeam,
+	notFound,
+	className,
+	childrenClassName,
+	footerClassName = ''
+}: Props) {
 	const fullWidth = useRecoilValue(fullWidthState);
 	return (
 		<div>
@@ -45,7 +55,7 @@ export function MainLayout({ children, title, showTimer, publicTeam, notFound, c
 			>
 				<div className={clsxm('lg:flex-1 lg:w-full', childrenClassName)}>{children}</div>
 
-				<Container fullWidth={fullWidth} className="w-full !mx-0 px-8">
+				<Container fullWidth={fullWidth} className={clsxm('w-full !mx-0 px-8', footerClassName)}>
 					<Divider />
 					<Footer className="justify-between px-0 w-full" />
 				</Container>