diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx index b4b255dc7..f8bd790e6 100644 --- a/apps/web/app/[locale]/kanban/page.tsx +++ b/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 = () => { ))}
+
+ setEpics(values || [])} + className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" + multiple={true} + /> +
+ +
+ setLabels(values || [])} + className="lg:min-w-[140px] pt-[3px] mt-4 mb-2 lg:mt-0" + multiple={true} + /> +
setPriority(values || [])} diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts index 44203b35d..dfa0b797f 100644 --- a/apps/web/app/hooks/features/useKanban.ts +++ b/apps/web/app/hooks/features/useKanban.ts @@ -8,6 +8,8 @@ import { IKanban } from '@app/interfaces/IKanban'; export function useKanban() { const [loading, setLoading] = useState(true); const [searchTasks, setSearchTasks] = useState(''); + const [labels, setLabels] = useState([]); + const [epics, setEpics] = useState([]); 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, diff --git a/apps/web/lib/features/task/task-status.tsx b/apps/web/lib/features/task/task-status.tsx index 1277ea673..58b0eae4e 100644 --- a/apps/web/lib/features/task/task-status.tsx +++ b/apps/web/lib/features/task/task-status.tsx @@ -433,7 +433,7 @@ export function EpicPropertiesDropdown({ value: task.id, icon: (
- , +
) };