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: (
- ,
+
)
};