Merge pull request #2306 from ever-co/2303-feature-modification-in-ka…

…nban-section-4

[Fix]: epic and labels filter added

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

@@ -18,10 +18,10 @@ import { AddIcon, PeoplesIcon } from 'assets/svg';
 import { InviteFormModal } from 'lib/features/team/invite/invite-form-modal';
 import { userTimezone } from '@app/helpers';
 import KanbanSearch from '@components/pages/kanban/search-bar';
-import { TaskPropertiesDropdown, TaskSizesDropdown } from 'lib/features';
+import { EpicPropertiesDropdown, TaskLabelsDropdown, TaskPropertiesDropdown, TaskSizesDropdown } from 'lib/features';
 
 const Kanban = () => {
-	const { data, setSearchTasks, searchTasks, isLoading, setPriority, setSizes } = useKanban();
+	const { data, setSearchTasks, searchTasks, isLoading, setPriority, setSizes, setLabels, setEpics } = useKanban();
 
 	const { activeTeam } = useOrganizationTeams();
 	const t = useTranslations();
@@ -114,6 +114,21 @@ const Kanban = () => {
 							))}
 						</div>
 						<div className="flex space-x-2 mt-5 lg:mt-0">
+							<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
+								<EpicPropertiesDropdown
+									onValueChange={(_, values) => setEpics(values || [])}
+									className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
+									multiple={true}
+								/>
+							</div>
+
+							<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
+								<TaskLabelsDropdown
+									onValueChange={(_, values) => setLabels(values || [])}
+									className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0"
+									multiple={true}
+								/>
+							</div>
 							<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
 								<TaskPropertiesDropdown
 									onValueChange={(_, values) => setPriority(values || [])}

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

@@ -8,6 +8,8 @@ import { IKanban } from '@app/interfaces/IKanban';
 export function useKanban() {
 	const [loading, setLoading] = useState<boolean>(true);
 	const [searchTasks, setSearchTasks] = useState('');
+	const [labels, setLabels] = useState<string[]>([]);
+	const [epics, setEpics] = useState<string[]>([]);
 	const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState);
 	const taskStatusHook = useTaskStatus();
 	const { tasks: newTask, tasksFetching, updateTask } = useTeamTasks();
@@ -26,7 +28,14 @@ export function useKanban() {
 				})
 				.filter((task: ITeamTask) => {
 					return sizes.length ? sizes.includes(task.size) : true;
+				})
+				.filter((task: ITeamTask) => {
+					return labels.length ? labels.some((label) => task.tags.some((tag) => tag.name === label)) : true;
+				})
+				.filter((task: ITeamTask) => {
+					return epics.length ? epics.includes(task.id) : true;
 				});
+
 			const getTasksByStatus = (status: string | undefined) => {
 				return tasks.filter((task: ITeamTask) => {
 					return task.status === status;
@@ -43,7 +52,7 @@ export function useKanban() {
 			setLoading(false);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes]);
+	}, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics]);
 
 	/**
 	 * collapse or show kanban column
@@ -79,7 +88,6 @@ export function useKanban() {
 				});
 			});
 	};
-
 	const addNewTask = (task: ITeamTask, status: string) => {
 		const updatedBoard = {
 			...kanbanBoard,
@@ -93,7 +101,9 @@ export function useKanban() {
 		columns: taskStatusHook.taskStatus,
 		searchTasks,
 		setPriority,
+		setLabels,
 		setSizes,
+		setEpics,
 		updateKanbanBoard: setKanbanBoard,
 		updateTaskStatus: updateTask,
 		toggleColumn,

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

@@ -433,7 +433,7 @@ export function EpicPropertiesDropdown({
 					value: task.id,
 					icon: (
 						<div className="bg-[#8154BA] p-1 rounded-sm mr-1">
-							<Square4OutlineIcon className="w-full max-w-[10px] text-white" />,
+							<Square4OutlineIcon className="w-full max-w-[10px] text-white" />
 						</div>
 					)
 				};