Merge pull request #2010 from ever-co/develop

Release

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

@@ -39,11 +39,36 @@ export function useKanban() {
         }
     },[taskStatusHook.loading, tasksFetching])
 
+    /**
+     * collapse or show kanban column
+     */
+    const toggleColumn = (column: string, status: boolean) => {
+        const columnData = taskStatusHook.taskStatus.filter((taskStatus: ITaskStatusItemList,)=> {
+            return taskStatus.name === column
+         });
+
+         const columnId = columnData[0].id;
+
+		taskStatusHook.editTaskStatus(columnId, {
+			isCollapsed: status
+		});
+	}
+
+    const isColumnCollapse = (column: string) => {
+        const columnData = taskStatusHook.taskStatus.filter((taskStatus: ITaskStatusItemList,)=> {
+           return taskStatus.name === column
+        });
+
+        return columnData[0].isCollapsed
+    }
+
     return {
         data: kanbanBoard,
         isLoading: loading,
         columns: taskStatusHook.taskStatus,
         updateKanbanBoard: setKanbanBoard,
-        updateTaskStatus: updateTask
+        updateTaskStatus: updateTask,
+        toggleColumn,
+        isColumnCollapse
     }
 }

apps/web/app/interfaces/ITaskStatus.ts

@@ -13,15 +13,19 @@ export interface ITaskStatusItemList {
 	is_system?: boolean;
 	isSystem?: boolean;
 	projectId?: string;
+	isCollapsed?: boolean;
+	order?: number;
 }
 
 export interface ITaskStatusCreate {
-	name: string;
+	name?: string;
 	description?: string;
 	icon?: string;
 	color?: string;
 	projectId?: string;
 	organizationId?: string;
 	tenantId?: string | undefined | null;
 	organizationTeamId?: string | undefined | null;
+	isCollapsed?: boolean;
+	order?: number;
 }

apps/web/lib/components/Kanban.tsx

@@ -6,6 +6,7 @@ import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, Droppa
 import Item from './kanban-card';
 import { ITeamTask } from '@app/interfaces';
 import { TaskStatus } from '@app/constants';
+import { useKanban } from '@app/hooks/features/useKanban';
 
 const grid = 8;
 
@@ -20,12 +21,12 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => {
 
     if (dropSnapshot.isDraggingOver) {
       return {
-        backgroundColor: '#FFEBE6',
+        backgroundColor: '',
     }
     }
     if (dropSnapshot.draggingFromThisWith) {
       return {
-        backgroundColor:  '#E6FCFF',
+        backgroundColor:  '',
     }
     }
     return {
@@ -48,13 +49,19 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot, bgColor: any){
  * @param param0 
  * @returns 
  */
-function InnerItemList({items, title}: {
+function InnerItemList({items, title, dropSnapshot}: {
     title: string,
-    items: ITeamTask[]
+    items: ITeamTask[],
+    dropSnapshot: DroppableStateSnapshot
 }) {
     return (
         <>
-        <section className="flex flex-col gap-2.5 max-h-[520px] overflow-y-scroll overflow-x-hidden">
+        <section 
+            style={{
+                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">
         {items.map((item: ITeamTask, index: number) => (
             <Draggable key={item.id} draggableId={item.id} index={index}>
                 {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => (
@@ -97,7 +104,7 @@ function InnerList(props: {
         <div 
         style={getBackgroundColor(dropSnapshot)}
         ref={dropProvided.innerRef}>
-          <InnerItemList items={items} title={title} />
+          <InnerItemList items={items} title={title} dropSnapshot={dropSnapshot} />
             <>
             {dropProvided.placeholder}
             </>
@@ -116,7 +123,7 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: {
     title: string,
     droppableId: string,
     type: string,
-    content: ITeamTask[]
+    content: ITeamTask[],
 } ) => {
     const [enabled, setEnabled] = useState(false);
 
@@ -172,6 +179,8 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
     items: ITeamTask[];
 })=> {
     const [enabled, setEnabled] = useState(false);
+
+    const { toggleColumn } = useKanban();
 
     useEffect(() => {
       const animation = requestAnimationFrame(() => setEnabled(true));
@@ -215,9 +224,9 @@ export const EmptyKanbanDroppable = ({index,title, items}: {
                                         <div
                                             className="flex flex-col items-center  gap-2"
                                         >
-                                            <span className="rotate-180">
-                                            <LeftArrowTailessIcon/>
-                                            </span>
+                                            <button className="rotate-180" onClick={() => toggleColumn(title, false)}>
+                                                <LeftArrowTailessIcon/>
+                                            </button>
                                             <ThreeDotIcon/>
 
                                         </div>
@@ -269,9 +278,12 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided, backgroundColo
     backgroundColor: string,
     provided: DraggableProvided
 }) => {
+
+    const { toggleColumn } = useKanban();
 
     return (
         <>
+            {title && (
             <header
                 className={"flex flex-row justify-between items-center rounded-lg px-[15px] py-[7px]"}
                 style={headerStyleChanger(snapshot, backgroundColor)}
@@ -300,9 +312,12 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided, backgroundColo
                     className="flex flex-row items-center gap-2"
                 >
                     <ThreeDotIcon/>
-                    <LeftArrowTailessIcon/>
+                    <button onClick={() => toggleColumn(title, true)}>
+                        <LeftArrowTailessIcon/>
+                    </button>  
                 </div>
             </header>
+            )}
         </>
     )
 }
@@ -323,7 +338,7 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
 
     return (
         <>
-            { items.length > 0 &&
+            { items &&
                 <Draggable
                     key={title}
                     index={index}
@@ -339,10 +354,10 @@ const KanbanDraggable = ({index,title, items, backgroundColor}: {
                                 snapshot.isDragging,
                                 provided.draggableProps.style
                             )}
-                            className="flex flex-col gap-5 w-[325px]"
+                            className="flex flex-col w-[325px]"
 
                         >
-                            { items.length > 0 ?
+                            { items ?
                                 <>
                                     <KanbanDraggableHeader 
                                         title={title} 

apps/web/lib/features/task/task-item.tsx

@@ -32,17 +32,17 @@ export function TaskItem({ task, selected, onClick, className }: Props) {
 
 	return (
 		<div
-			className={clsxm('flex justify-between items-center', className)}
+			className={clsxm('flex justify-between items-center overflow-y-auto', className)}
 			onClick={() => onClick && task && task.status !== 'closed' && onClick(task)}
 		>
 			<div
 				className={clsxm(
-					'font-normal text-sm',
+					'font-normal min-w-[19rem] text-sm',
 					'overflow-hidden text-ellipsis flex-1',
 					selected && ['font-medium text-primary dark:text-primary-light']
 				)}
 			>
-				<div className="inline-flex items-center mr-2">
+				<div className="inline-flex  items-center mr-2">
 					<div className="mr-2">
 						<TaskIssueStatus
 							showIssueLabels={false}

apps/web/lib/features/team-member-cell.tsx

@@ -20,7 +20,7 @@ export function TaskCell({ row }: { row: any }) {
 		<TaskInfo
 			edition={taskEdition}
 			memberInfo={memberInfo}
-			className="2xl:w-80 3xl:w-[32rem] w-full lg:w-1/5 lg:px-4 px-2"
+			className="2xl:w-80 3xl:w-[32rem] !w-full lg:w-1/5 lg:px-4 px-2"
 			publicTeam={publicTeam}
 		/>
 	);
@@ -45,7 +45,7 @@ export function WorkedOnTaskCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			task={memberInfo?.memberTask}
 			isAuthUser={memberInfo?.isAuthUser}
-			className="2xl:w-32 3xl:w-[8rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
+			className="2xl:w-32 3xl:w-[8rem] min-w-[15rem] w-52 lg:w-1/5  flex flex-col gap-y-[1.125rem] justify-center"
 		/>
 	);
 }
@@ -60,7 +60,7 @@ export function TaskEstimateInfoCell({ row }: { row: any }) {
 			memberInfo={memberInfo}
 			edition={taskEdition}
 			activeAuthTask={true}
-			className="lg:px-3 2xl:w-52 3xl:w-64 w-52 lg:w-1/5"
+			className="lg:px-3 2xl:w-52 3xl:w-64  min-w-[15rem] w-52 lg:w-1/5"
 		/>
 	);
 }

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

@@ -11,7 +11,7 @@ import { DragDropContext, DraggableLocation, DropResult, Droppable, DroppablePro
 
 export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) => {
 
-    const { columns:kanbanColumns, updateKanbanBoard,  updateTaskStatus } = useKanban();
+    const { columns:kanbanColumns, updateKanbanBoard,  updateTaskStatus, isColumnCollapse } = useKanban();
 
     const [items, setItems] = useState<IKanban>(kanbanBoardTasks);
 
@@ -175,16 +175,24 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
               >
               {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
                 <div
-                  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")}
+                  className={clsxm("flex flex-row justify-start overflow-x-auto gap-[20px] w-full min-h-[600px] p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
                   ref={provided.innerRef}
                   {...provided.droppableProps}
                 >
                   {columns.length > 0 ?
                   <>
-                    {columns.map((column: any, index: number) => {
+                    {columns.map((column: string, index: number) => {
                       return (
                         <React.Fragment key={index}>
-                        { items[column].length > 0 ?
+                        { isColumnCollapse(column) ?
+                        <div className={'order-last'} key={index}>
+                          <EmptyKanbanDroppable 
+                              index={index} 
+                              title={column}
+                              items={items[column]}
+                          />
+                        </div>
+                        :
                         <>
                           <div className="flex flex-col" key={index}>
                             <KanbanDraggable 
@@ -199,14 +207,6 @@ export const KanbanView = ({ kanbanBoardTasks }: { kanbanBoardTasks: IKanban}) =
                             </div>
                           </div>
                         </>
-                        :
-                        <div className={'order-last'} key={index}>
-                          <EmptyKanbanDroppable 
-                              index={index} 
-                              title={column}
-                              items={items[column]}
-                          />
-                        </div>
                       }
                       </React.Fragment>
                       )

apps/web/lib/features/team/user-team-card/index.tsx

@@ -123,7 +123,7 @@ export function UserTeamCard({ className, active, member, publicTeam = false }:
 				<TaskInfo
 					edition={taskEdition}
 					memberInfo={memberInfo}
-					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2"
+					className="2xl:w-80 3xl:w-[32rem] w-1/5 lg:px-4 px-2 overflow-y-auto"
 					publicTeam={publicTeam}
 				/>
 				<VerticalSeparator className="ml-2" />

apps/web/lib/features/team/user-team-table/user-team-table-header.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 function UserTeamTableHeader() {
 	return (
-		<div className="flex px-4 text-center items-center pt-4">
-			<p className="w-1/3 ">Name</p>
-			<p className="w-2/5 ">Task</p>
-			<p className="w-1/12 ">Worked on Task</p>
-			<p className="w-1/4 ">Estimate</p>
-			<p className="w-28 ">Action</p>
+		<div className="flex overflow-y-auto px-4 text-center items-center pt-4">
+			<p className="min-w-[8rem]  w-1/3 ">Name</p>
+			<p className="min-w-[8rem] w-2/5 ">Task</p>
+			<p className="min-w-[8rem] w-1/12 ">Worked on Task</p>
+			<p className="min-w-[8rem] w-1/4 ">Estimate</p>
+			<p className="min-w-[8rem] w-28 ">Action</p>
 		</div>
 	);
 }

apps/web/lib/settings/invitation-table.tsx

@@ -23,33 +23,51 @@ export const InvitationTable = ({ invitations }: { invitations: (IInvitation | I
 				<table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
 					<thead className="text-xs text-gray-700 uppercase border-b">
 						<tr>
-							<th scope="col" className="pl-5 py-3 text-sm font-normal capitalize text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="pl-5 min-w-[20rem] py-3 text-sm font-normal capitalize text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.NAME_AND_EMAIL')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.POSITION')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.DATE_AND_TIME_REQUEST')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('pages.invite.invitationTable.CV_OR_ATTACHMENT')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('common.LINK')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]">
+							<th
+								scope="col"
+								className="text-sm min-w-[15rem] font-normal capitalize py-3 text-[#B1AEBC]"
+							>
 								{t('common.STATUS')}
 							</th>
-							<th scope="col" className="text-sm font-normal capitalize py-3 text-[#B1AEBC]"></th>
+							<th scope="col" className="text-sm  font-normal capitalize py-3 text-[#B1AEBC]"></th>
 						</tr>
 					</thead>
 					<tbody className="dark:bg-dark--theme-light">
 						{currentItems.map((invitation, index) => (
 							<tr className="bg-white dark:bg-dark--theme-light dark:border-gray-700" key={index}>
 								<th
 									scope="row"
-									className="flex items-center py-4 pl-0 text-gray-900 whitespace-nowrap dark:text-white"
+									className="flex items-center  py-4 pl-0 text-gray-900 whitespace-nowrap dark:text-white"
 								>
 									<div
 										className={clsxm(