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 <[email protected]>
ever-co · Mar 29, 2024 · f6162ae · f6162ae
1 parent 618f2e5
commit f6162ae
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 21 deletions.
diff --git 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 (
 		<>
 			<MainLayout showTimer={isTrackingEnabled}>
@@ -125,7 +152,49 @@ const Kanban = () => {
 										multiple={true}
 									/>
 								</div>
+								{/* <div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light"> */}
+								<div className="relative">
+									<div className="bg-[#F2F2F2] dark:bg-dark--theme-light absolute flex items-center p-2 justify-between w-40 h-11 border input-border rounded-xl">
+										<span className="flex">
+											<div
+												className="h-6 w-6 p-1.5 rounded-md mr-1"
+												style={{
+													backgroundColor: issues.bgColor ?? 'transparent'
+												}}
+											>
+												{issues.icon ?? <CircleIcon className="h-3 w-3" />}
+											</div>
+											<p>{issues.name}</p>
+										</span>
+										{issues.value && (
+											<div
+												onClick={() =>
+													setIssues({
+														name: 'Issues',
+														icon: null,
+														bgColor: '',
+														value: ''
+													})
+												}
+												className="w-5 h-5 z-50 p-0.5 cursor-pointer"
+											>
+												<XMarkIcon className="h-4 w-4  dark:text-white" />
+											</div>
+										)}
+									</div>
 
+									<StatusDropdown
+										taskStatusClassName={'w-40 bg-red-500 h-10 opacity-0'}
+										showIssueLabels={true}
+										items={items}
+										value={issues}
+										onChange={(e) => {
+											setIssues(items.find((v) => v.name == e) as TStatusItem);
+										}}
+										issueType="issue"
+									/>
+								</div>
+								{/* </div> */}
 								<div className="input-border rounded-xl h-11 bg-[#F2F2F2] dark:bg-dark--theme-light">
 									<TaskLabelsDropdown
 										onValueChange={(_, values) => setLabels(values || [])}
@@ -150,7 +219,6 @@ const Kanban = () => {
 								<div className="mt-1">
 									<Separator />
 								</div>
-
 								<KanbanSearch setSearchTasks={setSearchTasks} searchTasks={searchTasks} />
 							</div>
 						</div>

diff --git 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<boolean>(true);
 	const [searchTasks, setSearchTasks] = useState('');
 	const [labels, setLabels] = useState<string[]>([]);
 	const [epics, setEpics] = useState<string[]>([]);
+	const [issues, setIssues] = useState<TStatusItem>({
+		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
@@ -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
@@ -191,15 +191,18 @@ export default function Item(props: ItemProps) {
 							<>
 								<Link href={`/task/${item.id}`}>
 									<div className="w-64 relative overflow-hidden">
-										<span className="h-5 w-6 inline-block ">
-											<span className="absolute top-1">
-												<TaskIssueStatus
-													showIssueLabels={false}
-													task={item}
-													className="rounded-sm mr-1 h-6 w-6"
-												/>
+										{item.issueType && (
+											<span className="h-5 w-6 inline-block ">
+												<span className="absolute top-1">
+													<TaskIssueStatus
+														showIssueLabels={false}
+														type="HORIZONTAL"
+														task={item}
+														className="rounded-sm mr-1 h-6 w-6 !p-0 flex justify-center items-center"
+													/>
+												</span>
 											</span>
-										</span>
+										)}
 										<span className="text-grey text-normal mx-1">#{item.number}</span>
 										{item.title}
 										<span className="inline-block ml-1">

diff --git 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<ITaskIssue> = {
 	Bug: {
-		icon: <BugIcon className="w-full max-w-[10px] text-white" />,
+		icon: <BugIcon className="w-full max-w-[12px] text-white" />,
 		name: 'Bug',
 		bgColor: '#923535'
 	},
 	Task: {
-		icon: <Square4StackIcon className="w-full max-w-[10px] text-white" />,
+		icon: <Square4StackIcon className="w-full max-w-[12px] text-white" />,
 		name: 'Task',
 		bgColor: '#5483BA'
 	},
 	Story: {
-		icon: <NoteIcon className="w-full max-w-[10px] text-white" />,
+		icon: <NoteIcon className="w-full max-w-[12px] text-white" />,
 		name: 'Story',
 		bgColor: '#66BB97'
 	},
 	Epic: {
-		icon: <Square4OutlineIcon className="w-full max-w-[10px] text-white" />,
+		icon: <Square4OutlineIcon className="w-full max-w-[12px] text-white" />,
 		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
@@ -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);
 			});