AndrewTrieu/tasker
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update task and project ID formats, add populateSeedData function, and enhance user ID handling

Browse Source
This commit is contained in:
Andrew Trieu
2024-11-23 17:19:09 +02:00
parent 5f9ee29c8d
commit 14284e1d35
21 changed files with 1299 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
tasker-client/src/app/components/ModalNewTask/index.tsx
View File

@@ -23,7 +23,14 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
const [projectId, setProjectId] = useState("");
const handleSubmit = async () => {
if (!title || !authorUserId || !(id !== null || projectId)) return;
console.log(title, authorUserId, id, projectId);
console.log("Creating task 1..");
if (
!(title && authorUserId && assignedUserId && (id !== null || projectId))
)
return;
console.log("Creating task 2...");
const formattedStartDate = formatISO(new Date(startDate), {
representation: "complete",
@@ -40,14 +47,17 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
tags,
startDate: formattedStartDate,
dueDate: formattedDueDate,
authorUserId: parseInt(authorUserId),
assignedUserId: parseInt(assignedUserId),
projectId: id !== null ? Number(id) : Number(projectId),
authorUserId: authorUserId,
assignedUserId: assignedUserId,
projectId: id !== null ? id : projectId,
});
};
const isFormValid = () => {
return title && authorUserId && !(id !== null || projectId);
console.log(title, authorUserId, id, projectId);
return (
title && authorUserId && assignedUserId && (id !== null || projectId)
);
};
const selectStyles =
@@ -87,7 +97,7 @@ const ModalNewTask = ({ isOpen, onClose, id = null }: Props) => {
}
>
<option value="">Select Status</option>
<option value={Status.ToDo}>Backlog</option>
<option value={Status.ToDo}>To Do</option>
<option value={Status.InProgress}>In Progress</option>
<option value={Status.TestReview}>Test/Review</option>
<option value={Status.Done}>Done</option>

5
tasker-client/src/app/components/Sidebar/index.tsx
View File

@@ -93,7 +93,6 @@ const Sidebar = () => {
<button
onClick={() =>
setShowProjects((prev) => {
console.log(prev);
return !prev;
})
}
@@ -109,10 +108,10 @@ const Sidebar = () => {
{showProjects &&
projects?.map((project) => (
<SidebarLink
key={project.id}
key={project.projectId}
icon={Briefcase}
label={project.name}
href={`/projects/${project.id}`}
href={`/projects/${project.projectId}`}
/>
))}

2
tasker-client/src/app/components/TaskCard/index.tsx
View File

@@ -27,7 +27,7 @@ const TaskCard = ({ task }: Props) => {
</div>
)}
<p>
<strong>ID:</strong> {task.id}
<strong>ID:</strong> {task.taskId}
</p>
<p>
<strong>Title:</strong> {task.title}

7
tasker-client/src/app/home/page.tsx
View File

@@ -5,6 +5,7 @@ import {
Priority,
Project,
Task,
useGetAuthUserQuery,
useGetProjectsQuery,
useGetTasksByUserQuery,
} from "@/state/api";
@@ -77,12 +78,13 @@ const taskColumns: GridColDef[] = [
const statusColors = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
const HomePage = () => {
const userId = 1;
const { data: currentUser } = useGetAuthUserQuery({});
const userId = currentUser?.userDetails?.userId ?? null;
const {
data: tasks,
isLoading: tasksLoading,
isError: tasksError,
} = useGetTasksByUserQuery(userId || 0, {
} = useGetTasksByUserQuery(userId || "", {
skip: userId === null,
});
const { data: projects, isLoading: isProjectsLoading } =
@@ -191,6 +193,7 @@ const HomePage = () => {
columns={taskColumns}
checkboxSelection
loading={tasksLoading}
getRowId={(row) => row.taskId}
getRowClassName={() => "data-grid-row"}
getCellClassName={() => "data-grid-cell"}
className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"

6
tasker-client/src/app/priority/reusablePriorityPage/index.tsx
View File

@@ -83,7 +83,7 @@ const ReusablePriorityPage = ({ priority }: Props) => {
data: tasks,
isLoading,
isError: isTasksError,
} = useGetTasksByUserQuery(userId || 0, {
} = useGetTasksByUserQuery(userId || "", {
skip: userId === null,
});
@@ -135,7 +135,7 @@ const ReusablePriorityPage = ({ priority }: Props) => {
) : view === "list" ? (
<div className="grid grid-cols-1 gap-4">
{filteredTasks?.map((task: Task) => (
<TaskCard key={task.id} task={task} />
<TaskCard key={task.taskId} task={task} />
))}
</div>
) : (
@@ -146,7 +146,7 @@ const ReusablePriorityPage = ({ priority }: Props) => {
rows={filteredTasks}
columns={columns}
checkboxSelection
getRowId={(row) => row.id}
getRowId={(row) => row.taskId}
className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
sx={dataGridSxStyles(isDarkMode)}
/>

46
tasker-client/src/app/projects/BoardView/index.tsx
View File

@@ -1,6 +1,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import { useGetTasksQuery, useUpdateTaskStatusMutation } from "@/state/api";
import React from "react";
import {
Status,
useGetTasksQuery,
useUpdateTaskStatusMutation,
} from "@/state/api";
import React, { useEffect, useState } from "react";
import { DndProvider, useDrag, useDrop } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";
import { Task as TaskType } from "@/state/api";
@@ -9,22 +13,40 @@ import { format } from "date-fns";
import Image from "next/image";
type BoardProps = {
id: string;
projectId: string;
setIsModalNewTaskOpen: (isOpen: boolean) => void;
};
const taskStatus = ["To Do", "In Progress", "Test/Review", "Done"];
const BoardView = ({ id, setIsModalNewTaskOpen }: BoardProps) => {
const BoardView = ({ projectId, setIsModalNewTaskOpen }: BoardProps) => {
const {
data: tasks,
data: fetchedTasks,
isLoading,
error,
} = useGetTasksQuery({ projectId: Number(id) });
} = useGetTasksQuery({ projectId });
const [updateTaskStatus] = useUpdateTaskStatusMutation();
const [tasks, setTasks] = useState<TaskType[]>([]);
const moveTask = (taskId: number, toStatus: string) => {
updateTaskStatus({ taskId, status: toStatus });
useEffect(() => {
if (fetchedTasks) {
setTasks(fetchedTasks);
}
}, [fetchedTasks]);
const moveTask = async (taskId: string, toStatus: string) => {
setTasks((prevTasks) =>
prevTasks.map((task) =>
task.taskId === taskId ? { ...task, status: toStatus as Status } : task,
),
);
try {
await updateTaskStatus({ taskId, status: toStatus });
} catch (error) {
console.error("Failed to update task status:", error);
setTasks(fetchedTasks || []);
}
};
if (isLoading) return <div>Loading...</div>;
@@ -50,7 +72,7 @@ const BoardView = ({ id, setIsModalNewTaskOpen }: BoardProps) => {
type TaskColumnProps = {
status: string;
tasks: TaskType[];
moveTask: (taskId: number, toStatus: string) => void;
moveTask: (taskId: string, toStatus: string) => void;
setIsModalNewTaskOpen: (isOpen: boolean) => void;
};
@@ -62,7 +84,7 @@ const TaskColumn = ({
}: TaskColumnProps) => {
const [{ isOver }, drop] = useDrop(() => ({
accept: "task",
drop: (item: { id: number }) => moveTask(item.id, status),
drop: (item: { id: string }) => moveTask(item.id, status),
collect: (monitor: any) => ({
isOver: !!monitor.isOver(),
}),
@@ -116,7 +138,7 @@ const TaskColumn = ({
{tasks
.filter((task) => task.status === status)
.map((task) => (
<Task key={task.id} task={task} />
<Task key={task.taskId} task={task} />
))}
</div>
);
@@ -129,7 +151,7 @@ type TaskProps = {
const Task = ({ task }: TaskProps) => {
const [{ isDragging }, drag] = useDrag(() => ({
type: "task",
item: { id: task.id },
item: { id: task.taskId },
collect: (monitor: any) => ({
isDragging: !!monitor.isDragging(),
}),

12
tasker-client/src/app/projects/ListView/index.tsx
View File

@@ -4,16 +4,12 @@ import { Task, useGetTasksQuery } from "@/state/api";
import React from "react";
type Props = {
id: string;
projectId: string;
setIsModalNewTaskOpen: (isOpen: boolean) => void;
};
const ListView = ({ id, setIsModalNewTaskOpen }: Props) => {
const {
data: tasks,
error,
isLoading,
} = useGetTasksQuery({ projectId: Number(id) });
const ListView = ({ projectId, setIsModalNewTaskOpen }: Props) => {
const { data: tasks, error, isLoading } = useGetTasksQuery({ projectId });
if (isLoading) return <div>Loading...</div>;
if (error) return <div>An error occurred while fetching tasks</div>;
@@ -35,7 +31,7 @@ const ListView = ({ id, setIsModalNewTaskOpen }: Props) => {
/>
</div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 lg:gap-6">
{tasks?.map((task: Task) => <TaskCard key={task.id} task={task} />)}
{tasks?.map((task: Task) => <TaskCard key={task.taskId} task={task} />)}
</div>
</div>
);

13
tasker-client/src/app/projects/TableView/index.tsx
View File

@@ -7,7 +7,7 @@ import { DataGrid, GridColDef } from "@mui/x-data-grid";
import React from "react";
type Props = {
id: string;
projectId: string;
setIsModalNewTaskOpen: (isOpen: boolean) => void;
};
@@ -29,7 +29,7 @@ const columns: GridColDef[] = [
renderCell: (params) => (
<span
className={`inline-flex rounded-full px-2 text-xs font-semibold leading-5 ${
params.value === "In Progress"
params.value === "Work In Progress"
? "bg-green-200 text-green-600"
: params.value === "Test/Review"
? "bg-green-200 text-green-600"
@@ -93,13 +93,9 @@ const columns: GridColDef[] = [
},
];
const TableView = ({ id, setIsModalNewTaskOpen }: Props) => {
const TableView = ({ projectId, setIsModalNewTaskOpen }: Props) => {
const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
const {
data: tasks,
error,
isLoading,
} = useGetTasksQuery({ projectId: Number(id) });
const { data: tasks, error, isLoading } = useGetTasksQuery({ projectId });
if (isLoading) return <div>Loading...</div>;
if (error || !tasks) return <div>An error occurred while fetching tasks</div>;
@@ -123,6 +119,7 @@ const TableView = ({ id, setIsModalNewTaskOpen }: Props) => {
<DataGrid
rows={tasks || []}
columns={columns}
getRowId={(row) => row.taskId}
className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
sx={dataGridSxStyles(isDarkMode)}
/>

12
tasker-client/src/app/projects/TimelineView/index.tsx
View File

@@ -5,19 +5,15 @@ import "gantt-task-react/dist/index.css";
import React, { useMemo, useState } from "react";
type Props = {
id: string;
projectId: string;
setIsModalNewTaskOpen: (isOpen: boolean) => void;
};
type TaskTypeItems = "task" | "milestone" | "project";
const Timeline = ({ id, setIsModalNewTaskOpen }: Props) => {
const Timeline = ({ projectId, setIsModalNewTaskOpen }: Props) => {
const isDarkMode = useAppSelector((state) => state.global.isDarkMode);
const {
data: tasks,
error,
isLoading,
} = useGetTasksQuery({ projectId: Number(id) });
const { data: tasks, error, isLoading } = useGetTasksQuery({ projectId });
const [displayOptions, setDisplayOptions] = useState<DisplayOption>({
viewMode: ViewMode.Month,
@@ -30,7 +26,7 @@ const Timeline = ({ id, setIsModalNewTaskOpen }: Props) => {
start: new Date(task.startDate as string),
end: new Date(task.dueDate as string),
name: task.title,
id: `Task-${task.id}`,
id: `Task-${task.taskId}`,
type: "task" as TaskTypeItems,
progress: task.points ? (task.points / 10) * 100 : 0,
isDisabled: false,

11
tasker-client/src/app/projects/[id]/page.tsx
View File

@@ -26,16 +26,19 @@ const Project = ({ params }: Props) => {
/>
<ProjectHeader activeTab={activeTab} setActiveTab={setActiveTab} />
{activeTab === "Board" && (
<Board id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
<Board projectId={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
)}
{activeTab === "List" && (
<List id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
<List projectId={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
)}
{activeTab === "Timeline" && (
<Timeline id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
<Timeline
projectId={id}
setIsModalNewTaskOpen={setIsModalNewTaskOpen}
/>
)}
{activeTab === "Table" && (
<Table id={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
<Table projectId={id} setIsModalNewTaskOpen={setIsModalNewTaskOpen} />
)}
</div>
);

4
tasker-client/src/app/search/page.tsx
View File

@@ -49,14 +49,14 @@ const Search = () => {
<h2>Tasks</h2>
)}
{searchResults.tasks?.map((task) => (
<TaskCard key={task.id} task={task} />
<TaskCard key={task.taskId} task={task} />
))}
{searchResults.projects && searchResults.projects?.length > 0 && (
<h2>Projects</h2>
)}
{searchResults.projects?.map((project) => (
<ProjectCard key={project.id} project={project} />
<ProjectCard key={project.projectId} project={project} />
))}
{searchResults.users && searchResults.users?.length > 0 && (

3
tasker-client/src/app/teams/page.tsx
View File

@@ -20,7 +20,7 @@ const CustomToolbar = () => (
);
const columns: GridColDef[] = [
{ field: "id", headerName: "Team ID", width: 100 },
{ field: "teamId", headerName: "Team ID", width: 100 },
{ field: "teamName", headerName: "Team Name", width: 200 },
{ field: "productOwnerUsername", headerName: "Product Owner", width: 200 },
{
@@ -48,6 +48,7 @@ const Teams = () => {
slots={{
toolbar: CustomToolbar,
}}
getRowId={(row) => row.teamId}
className="border border-gray-200 bg-white shadow dark:border-stroke-dark dark:bg-dark-secondary dark:text-gray-200"
sx={dataGridSxStyles(isDarkMode)}
/>

2
tasker-client/src/app/timeline/page.tsx
View File

@@ -24,7 +24,7 @@ const Timeline = () => {
start: new Date(project.startDate as string),
end: new Date(project.endDate as string),
name: project.name,
id: `Project-${project.id}`,
id: `Project-${project.projectId}`,
type: "project" as TaskTypeItems,
progress: 50,
isDisabled: false,