Merge pull request #2292 from ever-co/develop

2277 feature modifications in kanban 2 (#2290)

apps/web/app/[locale]/kanban/page.tsx

@@ -21,7 +21,7 @@ import { InviteFormModal } from 'lib/features/team/invite/invite-form-modal';
 import { userTimezone } from '@app/helpers';
 
 const Kanban = () => {
-	const { data } = useKanban();
+	const { data, } = useKanban();
 
 	const { activeTeam } = useOrganizationTeams();
 	const t = useTranslations();

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

@@ -10,7 +10,7 @@ export function useKanban() {
 	const [loading, setLoading] = useState<boolean>(true);
 	const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 	const taskStatusHook = useTaskStatus();
-	const { tasks, tasksFetching, updateTask } = useTeamTasks();
+	const { tasks, tasksFetching, updateTask, } = useTeamTasks();
 	/**
 	 * format data for kanban board
 	 */

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

@@ -57,7 +57,7 @@ export function useTeamTasks() {
 	const { firstLoad, firstLoadData: firstLoadTasksData } = useFirstLoad();
 
 	// Queries hooks
-	const { queryCall, loading, loadingRef } = useQuery(getTeamTasksAPI);
+	const { queryCall, loading, loadingRef, } = useQuery(getTeamTasksAPI);
 	const { queryCall: getTasksByIdQueryCall, loading: getTasksByIdLoading } = useQuery(getTasksByIdAPI);
 	const { queryCall: getTasksByEmployeeIdQueryCall, loading: getTasksByEmployeeIdLoading } =
 		useQuery(getTasksByEmployeeIdAPI);

apps/web/components/pages/kanban/create-task-modal.tsx

@@ -0,0 +1,23 @@
+import { TaskInputKanban } from 'lib/features/task/task-input-kanban';
+import React from 'react';
+
+const CreateTaskModal = (props: { task: any; initEditMode: boolean; tasks: any; title: string }) => {
+	return (
+		<div className="w-[700px] pt-12 pr-2 h-96 bg-transparent ">
+			<TaskInputKanban
+				kanbanTitle={props.title}
+				task={props.task}
+				initEditMode={false}
+				keepOpen={true}
+				showCombobox={false}
+				autoFocus={true}
+				autoInputSelectText={false}
+				onTaskClick={(e) => {
+					console.log(e);
+				}}
+			/>
+		</div>
+	);
+};
+
+export default CreateTaskModal;

apps/web/lib/components/Kanban.tsx

@@ -19,6 +19,9 @@ import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover'
 import { Button } from '@components/ui/button';
 import { useTranslations } from 'next-intl';
 import { AddIcon } from 'assets/svg';
+import { useModal } from '@app/hooks';
+import { Modal } from './modal';
+import CreateTaskModal from '@components/pages/kanban/create-task-modal';
 
 const grid = 8;
 
@@ -135,9 +138,6 @@ export const KanbanDroppable = ({
 				{(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot) => (
 					<div
 						style={getBackgroundColor(dropSnapshot)}
-						data-isdragging={dropSnapshot.isDraggingOver}
-						data-isdropdisabled={false}
-						data-isdraggingfrom={Boolean(dropSnapshot.draggingFromThisWith)}
 						{...dropProvided.droppableProps}
 					>
 						<InnerList
@@ -204,7 +204,6 @@ export const EmptyKanbanDroppable = ({
 											'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, backgroundColor)}
-										data-isDragging={snapshot.isDragging}
 									>
 										<div className="flex flex-col items-center gap-2">
 											<button className="rotate-180" onClick={() => toggleColumn(title, false)}>
@@ -224,7 +223,6 @@ export const EmptyKanbanDroppable = ({
 												<div>
 													<h2
 														className="flex flex-row font-semibold text-sm not-italic h-full text-black capitalize font-poppins"
-														data-isDragging={snapshot.isDragging}
 														{...provided.dragHandleProps}
 														aria-label={`${title}`}
 													>
@@ -264,12 +262,10 @@ const KanbanDraggableHeader = ({
 				<header
 					className={'flex flex-row justify-between items-center rounded-lg px-[15px] py-[7px] z-[500]'}
 					style={headerStyleChanger(snapshot, backgroundColor)}
-					data-isDragging={snapshot.isDragging}
 				>
 					<div className="flex flex-row gap-2.5 items-center">
 						<h2
 							className="text-sm font-semibold not-italic text-black font-poppins capitalize"
-							data-isDragging={snapshot.isDragging}
 							{...provided.dragHandleProps}
 							aria-label={`${title} quote list`}
 						>
@@ -329,6 +325,8 @@ const KanbanDraggable = ({
 	addNewTask: (value: ITeamTask, status: string) => void;
 }) => {
 	const t = useTranslations();
+	const { isOpen, closeModal, openModal } = useModal();
+	//
 
 	return (
 		<>
@@ -360,7 +358,10 @@ const KanbanDraggable = ({
 											type={'TASK'}
 											content={items}
 										/>
-										<button className="flex flex-row items-center text-sm not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4">
+										<button
+											onClick={() => openModal()}
+											className="flex flex-row items-center text-sm not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4"
+										>
 											<AddIcon className=" h-5 w-5" />
 											<p>{t('common.CREATE_TASK')}</p>
 										</button>
@@ -371,6 +372,9 @@ const KanbanDraggable = ({
 					)}
 				</Draggable>
 			)}
+			<Modal isOpen={isOpen} closeModal={closeModal}>
+				<CreateTaskModal title={title} initEditMode={false} task={null} tasks={[]} />
+			</Modal>
 		</>
 	);
 };

apps/web/lib/components/image-overlapper.tsx

@@ -42,7 +42,11 @@ export default function ImageOverlapper({
 						className="absolute hover:!z-20 transition-all hover:scale-110"
 						style={{ zIndex: index + 1, left: index * 30, top: isMoreThanDisplay ? -8 : -16 }}
 					>
-						<Tooltip label={image.alt} placement="top">
+						<Tooltip
+							label={image.alt ?? 'untitled'}
+							labelClassName={image.alt ? '' : 'text-gray-500'}
+							placement="top"
+						>
 							<Image
 								src={image.url}
 								alt={`${image.alt} avatar`}

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

@@ -125,7 +125,7 @@ type ItemProps = {
  * @returns
  */
 export default function Item(props: ItemProps) {
-	const { item, isDragging, provided, style, index } = props;	
+	const { item, isDragging, provided, style } = props;
 	const { activeTeam } = useOrganizationTeams();
 	const { user } = useAuthenticateUser();
 	const { getEstimation } = useTaskStatistics(0);
@@ -177,9 +177,6 @@ export default function Item(props: ItemProps) {
 			{...provided.dragHandleProps}
 			style={getStyle(provided, style)}
 			className="flex flex-col my-2.5 rounded-2xl bg-white dark:bg-dark--theme-light p-4 relative"
-			data-is-dragging={isDragging}
-			data-testid={item.id}
-			data-index={index}
 			aria-label={item.label}
 		>
 			<div className="w-full justify-between h-fit">
@@ -266,7 +263,7 @@ export default function Item(props: ItemProps) {
 					</div>
 					<ImageComponent radius={30} images={taskAssignee} />
 					{item.issueType && (
-						<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="flex flex-row items-center justify-center rounded-full w-5 h-5 z-[1] bg-[#e5e7eb] dark:bg-[#181920] absolute top-0 right-0">
 							<div
 								className="w-3.5 h-3.5 rounded-full"
 								style={setCommentIconColor(item.issueType as any)}