fixbug: system should filter kanban page with tasks assigned to a mem…

…ber (#2768) * fixbug: system should filter kanban page with tasks assigned to a member * fix: fix the breadcrumbpath
ever-co · Jul 19, 2024 · a8637b9 · a8637b9
1 parent ff54887
commit a8637b9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 19 deletions.
diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx
@@ -8,9 +8,9 @@ import { withAuthentication } from 'lib/app/authenticator';
 import { Breadcrumb, Container, Divider } from 'lib/components';
 import { KanbanView } from 'lib/features/team-members-kanban-view';
 import { Footer, MainLayout } from 'lib/layout';
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
-import { useParams } from 'next/navigation';
+import { useParams, useSearchParams } from 'next/navigation';
 import ImageComponent, { ImageOverlapperProps } from 'lib/components/image-overlapper';
 import Separator from '@components/ui/separator';
 import HeaderTabs from '@components/pages/main/header-tabs';
@@ -55,11 +55,15 @@ const Kanban = () => {
 	const fullWidth = useRecoilValue(fullWidthState);
 	const currentLocale = params ? params.locale : null;
 	const [activeTab, setActiveTab] = useState(KanbanTabs.TODAY);
-	const breadcrumbPath = [
-		{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
-		{ title: activeTeam?.name || '', href: '/' },
-		{ title: t('common.KANBAN'), href: `/${currentLocale}/kanban` }
-	];
+	const employee = useSearchParams().get('employee');
+	const breadcrumbPath = useMemo(
+		() => [
+			{ title: JSON.parse(t('pages.home.BREADCRUMB')), href: '/' },
+			{ title: activeTeam?.name || '', href: '/' },
+			{ title: t('common.KANBAN'), href: `/${currentLocale}/kanban` }
+		],
+		[activeTeam?.name, currentLocale]
+	);
 
 	const activeTeamMembers = activeTeam?.members ? activeTeam.members : [];
 
@@ -85,6 +89,22 @@ const Kanban = () => {
 		value: issues as any,
 		onValueChange: setIssues as any
 	});
+
+	useEffect(() => {
+		const lastPath = breadcrumbPath.slice(-1)[0];
+		if (employee) {
+			if (lastPath.title == 'Kanban') {
+				breadcrumbPath.push({ title: employee, href: `/${currentLocale}/kanban?employee=${employee}` });
+			} else {
+				breadcrumbPath.pop();
+				breadcrumbPath.push({ title: employee, href: `/${currentLocale}/kanban?employee=${employee}` });
+			}
+		} else {
+			if (lastPath.title !== 'Kanban') {
+				breadcrumbPath.pop();
+			}
+		}
+	}, [breadcrumbPath, currentLocale, employee]);
 	return (
 		<>
 			<Head>
@@ -99,7 +119,11 @@ const Kanban = () => {
 				className="h-[calc(100vh-_22px)]"
 			>
 				<div className="h-[263.4px] z-10 bg-white  dark:bg-dark-high fixed w-full"></div>
-				<div className={'fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C]  z-10 mx-[0px] w-full bg-white dark:bg-dark-high'}>
+				<div
+					className={
+						'fixed top-20 flex flex-col border-b-[1px] dark:border-[#26272C]  z-10 mx-[0px] w-full bg-white dark:bg-dark-high'
+					}
+				>
 					<Container fullWidth={fullWidth}>
 						<div className="flex bg-white dark:bg-dark-high flex-row items-start justify-between mt-12">
 							<div className="flex justify-center items-center gap-8 h-10">
@@ -122,7 +146,7 @@ const Kanban = () => {
 								<div className="mt-1">
 									<Separator />
 								</div>
-								<ImageComponent images={teamMembers} />
+								<ImageComponent onAvatarClickRedirectTo="kanbanTasks" images={teamMembers} />
 								<div className="mt-1">
 									<Separator />
 								</div>
@@ -250,11 +274,12 @@ const Kanban = () => {
 					)}
 				</div>
 			</MainLayout>
-			<div className='bg-white dark:bg-[#1e2025]  w-screen z-[5000] fixed bottom-0'>
-
-					<Divider />
-					<Footer className={clsxm(' justify-between w-full px-0  mx-auto', fullWidth ? 'px-8' : 'x-container')} />
-				</div>
+			<div className="bg-white dark:bg-[#1e2025]  w-screen z-[5000] fixed bottom-0">
+				<Divider />
+				<Footer
+					className={clsxm(' justify-between w-full px-0  mx-auto', fullWidth ? 'px-8' : 'x-container')}
+				/>
+			</div>
 			<InviteFormModal open={isOpen && !!user?.isEmailVerified} closeModal={closeModal} />
 		</>
 	);

diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts
@@ -6,6 +6,7 @@ import { ITaskStatusItemList, ITeamTask } from '@app/interfaces';
 import { useTeamTasks } from './useTeamTasks';
 import { IKanban } from '@app/interfaces/IKanban';
 import { TStatusItem } from 'lib/features';
+import { useSearchParams } from 'next/navigation';
 export function useKanban() {
 	const [loading, setLoading] = useState<boolean>(true);
 	const [searchTasks, setSearchTasks] = useState('');
@@ -22,6 +23,7 @@ export function useKanban() {
 	const { tasks: newTask, tasksFetching, updateTask } = useTeamTasks();
 	const [priority, setPriority] = useState<string[]>([]);
 	const [sizes, setSizes] = useState<string[]>([]);
+	const employee = useSearchParams().get('employee');
 	useEffect(() => {
 		if (!taskStatusHook.loading && !tasksFetching) {
 			let kanban = {};
@@ -44,6 +46,13 @@ export function useKanban() {
 				})
 				.filter((task: ITeamTask) => {
 					return epics.length ? epics.includes(task.id) : true;
+				})
+				.filter((task: ITeamTask) => {
+					if (employee) {
+						return task.members.map((el) => el.fullName).includes(employee as string);
+					} else {
+						return task;
+					}
 				});
 
 			const getTasksByStatus = (status: string | undefined) => {
@@ -62,7 +71,7 @@ export function useKanban() {
 			setLoading(false);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics, issues]);
+	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics, issues, employee]);
 
 	/**
 	 * collapse or show kanban column

diff --git a/apps/web/lib/components/image-overlapper.tsx b/apps/web/lib/components/image-overlapper.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/popover';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -17,6 +17,7 @@ import { TaskAvatars } from 'lib/features';
 import { FaCheck } from 'react-icons/fa6';
 import TeamMember from 'lib/components/team-member';
 import { IEmployee } from '@app/interfaces';
+import { Url } from 'next/dist/shared/lib/router/router';
 
 export interface ImageOverlapperProps {
 	id: string;
@@ -42,7 +43,8 @@ export default function ImageOverlapper({
 	arrowData = null,
 	hasActiveMembers = false,
 	assignTaskButtonCall = false,
-	hasInfo = ''
+	hasInfo = '',
+	onAvatarClickRedirectTo = 'profile'
 }: {
 	images: ImageOverlapperProps[];
 	radius?: number;
@@ -54,6 +56,7 @@ export default function ImageOverlapper({
 	hasActiveMembers?: boolean;
 	assignTaskButtonCall?: boolean;
 	hasInfo?: string;
+	onAvatarClickRedirectTo?: 'kanbanTasks' | 'profile';
 }) {
 	// Split the array into two arrays based on the display number
 	const firstArray = images?.slice(0, displayImageCount);
@@ -84,6 +87,26 @@ export default function ImageOverlapper({
 		}
 	};
 
+	const onRedirect = useCallback(
+		(image: ImageOverlapperProps): Url => {
+			switch (onAvatarClickRedirectTo) {
+				case 'kanbanTasks':
+					return {
+						pathname: '/kanban',
+						query: {
+							employee: activeTeam?.members.find((el) => el.employee.userId === image.id)?.employee
+								.fullName
+						}
+					};
+				case 'profile':
+					return { pathname: `/profile/${image.id}`, query: { name: image.alt } };
+				default:
+					return {};
+			}
+		},
+		[activeTeam?.members, onAvatarClickRedirectTo]
+	);
+
 	const onCLickValidate = () => {
 		setValidate(!validate);
 		closeModal();
@@ -212,7 +235,7 @@ export default function ImageOverlapper({
 			className="relative "
 		>
 			{firstArray.map((image, index) => (
-				<Link key={index} href={`/profile/${image.id}?name=${image.alt}`}>
+				<Link key={index} href={onRedirect(image)}>
 					<div
 						className="absolute hover:!z-20 transition-all hover:scale-110"
 						style={{ zIndex: index + 1, left: index * 30, top: isMoreThanDisplay ? -8 : -16 }}
@@ -253,7 +276,7 @@ export default function ImageOverlapper({
 								{secondArray.map((image: ImageOverlapperProps, index: number) => {
 									return (
 										<Link
-											href={`/profile/${image.id}?name=${image.alt}`}
+											href={onRedirect(image)}
 											className="relative hover:bg-gray-300 hover:dark:bg-[#24262c] p-1 rounded-md"
 											key={index}
 										>