From b3a50e37767aa7e134c60acd523bec967ba58af3 Mon Sep 17 00:00:00 2001 From: Vaibhav Singh Date: Sat, 28 Dec 2024 00:26:51 +0530 Subject: [PATCH] Todo Task listing UI (#8) * feat: Task listing UI with mock data * feat: components for tasks listing * removed prev test folder --- app/tasks/page.tsx | 36 +++++++++++++++ app/test/home.test.tsx | 8 ---- app/types/task.ts | 8 ++++ components/TaskCard.tsx | 66 ++++++++++++++++++++++++++++ components/TaskHeader.tsx | 38 ++++++++++++++++ components/TaskList.tsx | 30 +++++++++++++ data/taskData.json | 34 ++++++++++++++ public/assets/InProgressEllipse.svg | 4 ++ public/assets/ToDoEllipse.svg | 3 ++ public/assets/plus.svg | 3 ++ public/assets/user.png | Bin 0 -> 358 bytes 11 files changed, 222 insertions(+), 8 deletions(-) create mode 100644 app/tasks/page.tsx delete mode 100644 app/test/home.test.tsx create mode 100644 app/types/task.ts create mode 100644 components/TaskCard.tsx create mode 100644 components/TaskHeader.tsx create mode 100644 components/TaskList.tsx create mode 100644 data/taskData.json create mode 100644 public/assets/InProgressEllipse.svg create mode 100644 public/assets/ToDoEllipse.svg create mode 100644 public/assets/plus.svg create mode 100644 public/assets/user.png diff --git a/app/tasks/page.tsx b/app/tasks/page.tsx new file mode 100644 index 0000000..1493861 --- /dev/null +++ b/app/tasks/page.tsx @@ -0,0 +1,36 @@ +"use client"; +import { useEffect, useState } from "react"; +import { TaskHeader } from "@/components/TaskHeader"; +import { TaskList } from "@/components/TaskList"; +import tasksData from "@/data/taskData.json"; +import { Task } from "@/app/types/tasks"; + +const Tasks = () => { + const [tasks, setTasks] = useState([]); + + useEffect(() => { + setTasks(tasksData); + }, []); + + const todoTasks = tasks.filter((task) => task.status === "todo"); + const inProgressTasks = tasks.filter((task) => task.status === "in-progress"); + + return ( +
+
+ + +
+ +
+ + +
+
+ ); +}; + +export default Tasks; diff --git a/app/test/home.test.tsx b/app/test/home.test.tsx deleted file mode 100644 index 5d1b65c..0000000 --- a/app/test/home.test.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { render } from "@testing-library/react"; -import { expect, test } from "vitest"; -import Home from "../page"; - -test("renders the homepage correctly", () => { - const { getByText } = render(); - expect(getByText("Hello World!")).toBeDefined(); -}); diff --git a/app/types/task.ts b/app/types/task.ts new file mode 100644 index 0000000..ae67cd7 --- /dev/null +++ b/app/types/task.ts @@ -0,0 +1,8 @@ +export type Task = { + id: number; + title: string; + assignee: string; + dueDate: string; + status: string; + profile?: string; +}; \ No newline at end of file diff --git a/components/TaskCard.tsx b/components/TaskCard.tsx new file mode 100644 index 0000000..7d83dcd --- /dev/null +++ b/components/TaskCard.tsx @@ -0,0 +1,66 @@ +import { Task } from "@/app/types/tasks"; +import { DateFormats, DateUtil } from "@/utils/dateUtil"; +import Image from "next/image"; + +interface TaskCardProps { + task: Task; + className?: string; +} + +const getStatusImagePath = (status: string): string => { + switch (status.toLowerCase()) { + case "in-progress": + return "/assets/InProgressEllipse.svg"; + case "todo": + default: + return "/assets/ToDoEllipse.svg"; + } +}; + +export const TaskCard = ({ task, className }: TaskCardProps) => { + const statusImagePath = getStatusImagePath(task.status); + + const formattedDueDate = new DateUtil(task.dueDate).format( + DateFormats.D_MMM_YYYY + ); + + return ( +
+
+

+ #{task.id} +

+ task-status-icon +

{task.title}

+
+ +
+
+
+ {task.assignee} +
+
+ {formattedDueDate} +
+
+ +
+ assignee-profile +
+
+
+ ); +}; diff --git a/components/TaskHeader.tsx b/components/TaskHeader.tsx new file mode 100644 index 0000000..ac746e7 --- /dev/null +++ b/components/TaskHeader.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; + +interface TaskSectionProps { + className?: string; + icon?: string; + title: string; + onCreateTask?: () => void; +} + +export const TaskHeader = ({ + className, + icon, + title, + onCreateTask, +}: TaskSectionProps) => { + return ( +
+
+ header-icon +

+ {title} +

+
+ + +
+ ); +}; diff --git a/components/TaskList.tsx b/components/TaskList.tsx new file mode 100644 index 0000000..93959b1 --- /dev/null +++ b/components/TaskList.tsx @@ -0,0 +1,30 @@ +import { Task } from "@/app/types/tasks"; +import { TaskCard } from "./TaskCard"; + +interface TaskListProps { + tasks: Task[]; +} + +export const TaskList = ({ tasks }: TaskListProps) => { + if (tasks.length === 0) { + return ( +
+ No tasks available in this section +
+ ); + } + return ( +
+ {tasks.map((task) => ( + + ))} +
+ ); +}; diff --git a/data/taskData.json b/data/taskData.json new file mode 100644 index 0000000..87a5d3c --- /dev/null +++ b/data/taskData.json @@ -0,0 +1,34 @@ +[ + { + "id": 1, + "title": "Todo Listing", + "assignee": "Vaibhav Singh", + "dueDate": "2023-12-15", + "status": "todo", + "profile": "/assets/user.png" + }, + { + "id": 2, + "title": "Prepare Design Doc", + "assignee": "Random 1", + "dueDate": "2023-12-10", + "status": "todo", + "profile": "/assets/user.png" + }, + { + "id": 3, + "title": "Code Todo Frontend", + "assignee": "Random 2", + "dueDate": "2023-12-10", + "status": "in-progress", + "profile": "/assets/user.png" + }, + { + "id": 4, + "title": "Code Todo Backend", + "assignee": "Random 3", + "dueDate": "2023-12-10", + "status": "in-progress", + "profile": "/assets/user.png" + } +] diff --git a/public/assets/InProgressEllipse.svg b/public/assets/InProgressEllipse.svg new file mode 100644 index 0000000..bc96035 --- /dev/null +++ b/public/assets/InProgressEllipse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/ToDoEllipse.svg b/public/assets/ToDoEllipse.svg new file mode 100644 index 0000000..880fbb0 --- /dev/null +++ b/public/assets/ToDoEllipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/plus.svg b/public/assets/plus.svg new file mode 100644 index 0000000..66f3b0c --- /dev/null +++ b/public/assets/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/user.png b/public/assets/user.png new file mode 100644 index 0000000000000000000000000000000000000000..44919bad8dd0bbf07221385a70e22c85d1a54336 GIT binary patch literal 358 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`oCO|{#S9GG!XV7ZFl&wkP>``W z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eB{%=ng$B+ufxswdJ4mk+8x^p|aZ1}+7nXD}5 z*ilw??;x|po(`^CH;zocaU(**kYn3Njx5Cv*EttsXZn;a{_#*Z@tJ>FSsCM|PZK1C zlsl99Svt5aS1A^Ur6hNS_#RzoaB1B>C9$0WS8KKiv_(j~_^n}+JU2)3))z(X`wu>M z?daioru}D`oi6*~`PV%fCABBaZMIugdTWY|5_3xWM;oqJkK