diff --git a/src/config/Pages.ts b/src/config/Pages.ts index c329c1f..b8473de 100644 --- a/src/config/Pages.ts +++ b/src/config/Pages.ts @@ -173,6 +173,6 @@ export const Pages = { createWorkspace: "/workspace/create", updateWorkspace: "/workspace/update/", createProject: "/project/create", - projectList: "/project/list", + projectList: "/project/list/", }, }; diff --git a/src/pages/taskmanager/project/Create.tsx b/src/pages/taskmanager/project/Create.tsx index c9567d8..b1d38ff 100644 --- a/src/pages/taskmanager/project/Create.tsx +++ b/src/pages/taskmanager/project/Create.tsx @@ -38,7 +38,7 @@ const CreateProject: FC = () => { createProject.mutate(values, { onSuccess: () => { toast.success(t("success")); - navigate(Pages.taskmanager.projectList); + navigate(`${Pages.taskmanager.projectList}${workspaceId}`); }, onError: (error: ErrorType) => { toast.error(error.response?.data?.error.message[0]); diff --git a/src/pages/taskmanager/project/List.tsx b/src/pages/taskmanager/project/List.tsx index 1a8ec74..4a83010 100644 --- a/src/pages/taskmanager/project/List.tsx +++ b/src/pages/taskmanager/project/List.tsx @@ -1,29 +1,47 @@ -import { useState } from "react"; -import projectsData from "./data/projects.json"; +import { FC, useState } from "react"; +import { useParams } from "react-router-dom"; +import PageLoading from "../../../components/PageLoading"; +import { useGetWorkspaceDetail } from "../workspace/hooks/useWorkspaceData"; +import { WorkspaceDetailType } from "../workspace/types/WorkspaceTypes"; import ProjectGrid from "./components/ProjectGrid"; import ProjectListHeader from "./components/ProjectListHeader"; import WorkspaceInfoBanner from "./components/WorkspaceInfoBanner"; -import type { ProjectItem, WorkspaceInfo } from "./types/ProjectTypes"; +import { useGetProjectsByWorkspace } from "./hooks/useProjectData"; +import type { ProjectItem } from "./types/ProjectTypes"; -const List = () => { - const { workspace, projects: initialProjects } = projectsData as { - workspace: WorkspaceInfo; - projects: ProjectItem[]; - }; +const List: FC = () => { + const { workspaceId = "" } = useParams(); + const getProjects = useGetProjectsByWorkspace(workspaceId); + const getWorkspaceDetail = useGetWorkspaceDetail(workspaceId); - const [projects, setProjects] = useState(initialProjects); + const workspace: WorkspaceDetailType | undefined = + getWorkspaceDetail.data?.data?.workspace ?? getWorkspaceDetail.data?.data; + + const apiProjects: ProjectItem[] = + getProjects.data?.data?.projects ?? getProjects.data?.data ?? []; + + const [deletedIds, setDeletedIds] = useState([]); + const projects = apiProjects.filter((project) => !deletedIds.includes(project.id)); const handleDelete = (id: string) => { - setProjects((prev) => prev.filter((project) => project.id !== id)); + setDeletedIds((prev) => [...prev, id]); }; + const isLoading = getProjects.isPending || getWorkspaceDetail.isPending; + return (
- + - + {workspace?.description ? ( + + ) : null} - + {isLoading ? ( + + ) : ( + + )}
); }; diff --git a/src/pages/taskmanager/project/components/ProjectCard.tsx b/src/pages/taskmanager/project/components/ProjectCard.tsx index f05b939..77198f8 100644 --- a/src/pages/taskmanager/project/components/ProjectCard.tsx +++ b/src/pages/taskmanager/project/components/ProjectCard.tsx @@ -1,4 +1,4 @@ -import { FC } from "react"; +import { CSSProperties, FC } from "react"; import { Link } from "react-router-dom"; import { Pages } from "../../../../config/Pages"; import type { ProjectItem } from "../types/ProjectTypes"; @@ -17,10 +17,20 @@ const hexToRgba = (hex: string, alpha: number) => { return `rgba(${r}, ${g}, ${b}, ${alpha})`; }; -const getCardBackground = (background: string) => { - const color = /^#[0-9A-Fa-f]{6}$/i.test(background) ? background : (background.match(/#[0-9A-Fa-f]{6}/i)?.[0] ?? "#A8E6CF"); +const getCardBackgroundStyle = (project: ProjectItem): CSSProperties => { + if (project.backgroundPicture) { + return { + backgroundImage: `url(${project.backgroundPicture})`, + backgroundSize: "cover", + backgroundPosition: "center", + }; + } - return `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`; + const color = project.backgroundColor ?? "#A8E6CF"; + + return { + background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`, + }; }; const ProjectCard: FC = ({ project, onDelete }) => { @@ -31,7 +41,7 @@ const ProjectCard: FC = ({ project, onDelete }) => { return (
-
+
diff --git a/src/pages/taskmanager/project/components/ProjectListHeader.tsx b/src/pages/taskmanager/project/components/ProjectListHeader.tsx index ed79777..6688837 100644 --- a/src/pages/taskmanager/project/components/ProjectListHeader.tsx +++ b/src/pages/taskmanager/project/components/ProjectListHeader.tsx @@ -7,11 +7,15 @@ import { Pages } from "../../../../config/Pages"; type Props = { title: string; + workspaceId?: string; onSettingsClick?: () => void; }; -const ProjectListHeader: FC = ({ title, onSettingsClick }) => { +const ProjectListHeader: FC = ({ title, workspaceId, onSettingsClick }) => { const { t } = useTranslation("global"); + const createProjectLink = workspaceId + ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}` + : Pages.taskmanager.createProject; return (
@@ -23,7 +27,7 @@ const ProjectListHeader: FC = ({ title, onSettingsClick }) => { {t("sidebar.setting")} - + @@ -60,12 +57,16 @@ const WorkspaceList: FC = () => { + {workspaces.map((item) => ( - +
{
- + + + +