From f6162ae4192cd778c0a5f1055f99d433d2b42751 Mon Sep 17 00:00:00 2001 From: Anish Date: Sat, 30 Mar 2024 00:57:03 +0500 Subject: [PATCH] 2335 feature add a dropdown to filter kanban by task types (#2339) * [Fix]: kanban issues fixes * fix(Clean): working on design * removed consoles * removed consoles --------- Co-authored-by: Ruslan K --- apps/web/app/[locale]/kanban/page.tsx | 74 ++++++++++++++++++- apps/web/app/hooks/features/useKanban.ts | 14 +++- apps/web/app/hooks/features/useTaskInput.ts | 2 +- apps/web/lib/components/kanban-card.tsx | 19 +++-- apps/web/lib/features/task/task-issue.tsx | 8 +- .../lib/features/team-members-kanban-view.tsx | 7 +- 6 files changed, 103 insertions(+), 21 deletions(-) diff --git a/apps/web/app/[locale]/kanban/page.tsx b/apps/web/app/[locale]/kanban/page.tsx index 1b4e76c8c..98bb89d51 100644 --- a/apps/web/app/[locale]/kanban/page.tsx +++ b/apps/web/app/[locale]/kanban/page.tsx @@ -18,12 +18,34 @@ 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 { EpicPropertiesDropdown, TaskLabelsDropdown, TaskPropertiesDropdown, TaskSizesDropdown } from 'lib/features'; +import { + EpicPropertiesDropdown, + StatusDropdown, + TStatusItem, + TaskLabelsDropdown, + TaskPropertiesDropdown, + TaskSizesDropdown, + taskIssues, + useStatusValue +} from 'lib/features'; import { useRecoilValue } from 'recoil'; import { fullWidthState } from '@app/stores/fullWidth'; +import { CircleIcon } from 'lucide-react'; +import { XMarkIcon } from '@heroicons/react/20/solid'; const Kanban = () => { - const { data, setSearchTasks, searchTasks, isLoading, setPriority, setSizes, setLabels, setEpics } = useKanban(); + const { + data, + setSearchTasks, + searchTasks, + isLoading, + setPriority, + setSizes, + setLabels, + setEpics, + setIssues, + issues + } = useKanban(); const { activeTeam, isTrackingEnabled } = useOrganizationTeams(); const t = useTranslations(); @@ -56,6 +78,11 @@ const Kanban = () => { const { user } = useAuthenticateUser(); const { openModal, isOpen, closeModal } = useModal(); const timezone = userTimezone(); + const { items } = useStatusValue<'issueType'>({ + status: taskIssues, + value: issues as any, + onValueChange: setIssues as any + }); return ( <> @@ -125,7 +152,49 @@ const Kanban = () => { multiple={true} /> + {/*
*/} +
+
+ +
+ {issues.icon ?? } +
+

{issues.name}

+ + {issues.value && ( +
+ setIssues({ + name: 'Issues', + icon: null, + bgColor: '', + value: '' + }) + } + className="w-5 h-5 z-50 p-0.5 cursor-pointer" + > + +
+ )} +
+ { + setIssues(items.find((v) => v.name == e) as TStatusItem); + }} + issueType="issue" + /> +
+ {/*
*/}
setLabels(values || [])} @@ -150,7 +219,6 @@ const Kanban = () => {
-
diff --git a/apps/web/app/hooks/features/useKanban.ts b/apps/web/app/hooks/features/useKanban.ts index 78fe91e22..852e1a348 100644 --- a/apps/web/app/hooks/features/useKanban.ts +++ b/apps/web/app/hooks/features/useKanban.ts @@ -5,11 +5,18 @@ import { useEffect, useState } from 'react'; import { ITaskStatusItemList, ITeamTask } from '@app/interfaces'; import { useTeamTasks } from './useTeamTasks'; import { IKanban } from '@app/interfaces/IKanban'; +import { TStatusItem } from 'lib/features'; export function useKanban() { const [loading, setLoading] = useState(true); const [searchTasks, setSearchTasks] = useState(''); const [labels, setLabels] = useState([]); const [epics, setEpics] = useState([]); + const [issues, setIssues] = useState({ + name: 'Issues', + icon: null, + bgColor: '', + value: '' + }); const [kanbanBoard, setKanbanBoard] = useRecoilState(kanbanBoardState); const taskStatusHook = useTaskStatus(); const { tasks: newTask, tasksFetching, updateTask } = useTeamTasks(); @@ -26,6 +33,9 @@ export function useKanban() { .filter((task: ITeamTask) => { return priority.length ? priority.includes(task.priority) : true; }) + .filter((task: ITeamTask) => { + return issues.value ? task.issueType === issues.value : true; + }) .filter((task: ITeamTask) => { return sizes.length ? sizes.includes(task.size) : true; }) @@ -52,7 +62,7 @@ export function useKanban() { setLoading(false); } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics]); + }, [taskStatusHook.loading, tasksFetching, newTask, searchTasks, priority, sizes, labels, epics, issues]); /** * collapse or show kanban column @@ -100,9 +110,11 @@ export function useKanban() { isLoading: loading, columns: taskStatusHook.taskStatus, searchTasks, + issues, setPriority, setLabels, setSizes, + setIssues, setEpics, updateKanbanBoard: setKanbanBoard, updateTaskStatus: updateTask, diff --git a/apps/web/app/hooks/features/useTaskInput.ts b/apps/web/app/hooks/features/useTaskInput.ts index 3d558a4d8..134168405 100644 --- a/apps/web/app/hooks/features/useTaskInput.ts +++ b/apps/web/app/hooks/features/useTaskInput.ts @@ -144,7 +144,7 @@ export function useTaskInput({ return createTask( { taskName: query.trim(), - issueType: taskIssue.current || undefined, + issueType: taskIssue.current || 'Bug', status: taskStatus.current || undefined, priority: taskPriority.current || undefined, size: taskSize.current || undefined, diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index bbbe27edb..cfab76262 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -191,15 +191,18 @@ export default function Item(props: ItemProps) { <>
- - - + {item.issueType && ( + + + + - + )} #{item.number} {item.title} diff --git a/apps/web/lib/features/task/task-issue.tsx b/apps/web/lib/features/task/task-issue.tsx index d3dd46211..2925df597 100644 --- a/apps/web/lib/features/task/task-issue.tsx +++ b/apps/web/lib/features/task/task-issue.tsx @@ -17,22 +17,22 @@ import { useTranslations } from 'next-intl'; export const taskIssues: TStatus = { Bug: { - icon: , + icon: , name: 'Bug', bgColor: '#923535' }, Task: { - icon: , + icon: , name: 'Task', bgColor: '#5483BA' }, Story: { - icon: , + icon: , name: 'Story', bgColor: '#66BB97' }, Epic: { - icon: , + icon: , name: 'Custom', bgColor: '#8154BA' } diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 2dd2d42c1..2dd9baa06 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -80,7 +80,7 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks: taskStatusId: ts.find((v) => v.name?.toLowerCase() == taskstatus.toLowerCase())?.id }; - // update task status on server + // update task status on the server updateTaskStatus(updateTaskStatusData); // insert into next @@ -157,11 +157,10 @@ export const KanbanView = ({ kanbanBoardTasks, isLoading }: { kanbanBoardTasks: return; } - if (result.type === 'COLUMN') { - console.log('re-order-column'); + if (result.type === 'COLUMN') { const reorderedItem = reorderColumn(columns, source.index, destination.index); - // Update column order on the server side + // Update column order on the server side reorderedItem.map((item: string, index: number) => { return reorderStatus(item, index); });