diff --git a/src/pages/taskmanager/components/HeaderWorkspace.tsx b/src/pages/taskmanager/components/HeaderWorkspace.tsx index c090a31..55f1492 100644 --- a/src/pages/taskmanager/components/HeaderWorkspace.tsx +++ b/src/pages/taskmanager/components/HeaderWorkspace.tsx @@ -1,4 +1,4 @@ -import { ArrowRight, InfoCircle, Setting2 } from "iconsax-react"; +import { ArrowRight, Setting2 } from "iconsax-react"; import type { FC } from "react"; import { useNavigate } from "react-router-dom"; @@ -10,13 +10,13 @@ const HeaderWorkspace: FC = ({ projectName }) => { const navigate = useNavigate(); return ( -
+
{projectName}
- + /> */}
diff --git a/src/pages/taskmanager/project/components/ProjectCard.tsx b/src/pages/taskmanager/project/components/ProjectCard.tsx index e9be6b5..e65c133 100644 --- a/src/pages/taskmanager/project/components/ProjectCard.tsx +++ b/src/pages/taskmanager/project/components/ProjectCard.tsx @@ -1,7 +1,8 @@ -import { CSSProperties, FC } from "react"; +import { FC } from "react"; import { Link, useNavigate } from "react-router-dom"; import { Pages } from "../../../../config/Pages"; import type { ProjectItem } from "../types/ProjectTypes"; +import { getProjectBackgroundStyle } from "../utils/getProjectBackgroundStyle"; import ProjectCardMenu from "./ProjectCardMenu"; type Props = { @@ -9,30 +10,6 @@ type Props = { onDelete: (id: string) => void; }; -const hexToRgba = (hex: string, alpha: number) => { - const normalized = hex.replace("#", ""); - const r = parseInt(normalized.slice(0, 2), 16); - const g = parseInt(normalized.slice(2, 4), 16); - const b = parseInt(normalized.slice(4, 6), 16); - return `rgba(${r}, ${g}, ${b}, ${alpha})`; -}; - -const getCardBackgroundStyle = (project: ProjectItem): CSSProperties => { - if (project.backgroundPicture) { - return { - backgroundImage: `url(${project.backgroundPicture})`, - backgroundSize: "cover", - backgroundPosition: "center", - }; - } - - const color = project.backgroundColor ?? "#A8E6CF"; - - return { - background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`, - }; -}; - const ProjectCard: FC = ({ project, onDelete }) => { const navigate = useNavigate(); @@ -43,7 +20,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 6688837..4031270 100644 --- a/src/pages/taskmanager/project/components/ProjectListHeader.tsx +++ b/src/pages/taskmanager/project/components/ProjectListHeader.tsx @@ -1,7 +1,7 @@ -import { Add, Setting2 } from "iconsax-react"; +import { Add, ArrowRight } from "iconsax-react"; import { FC } from "react"; import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; +import { Link, useNavigate } from "react-router-dom"; import Button from "../../../../components/Button"; import { Pages } from "../../../../config/Pages"; @@ -13,23 +13,33 @@ type Props = { const ProjectListHeader: FC = ({ title, workspaceId, onSettingsClick }) => { const { t } = useTranslation("global"); - const createProjectLink = workspaceId - ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}` - : Pages.taskmanager.createProject; - + const createProjectLink = workspaceId ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}` : Pages.taskmanager.createProject; + const navigate = useNavigate(); return (

{title}

- - diff --git a/src/pages/taskmanager/project/utils/getProjectBackgroundStyle.ts b/src/pages/taskmanager/project/utils/getProjectBackgroundStyle.ts new file mode 100644 index 0000000..4af46f8 --- /dev/null +++ b/src/pages/taskmanager/project/utils/getProjectBackgroundStyle.ts @@ -0,0 +1,30 @@ +import type { CSSProperties } from "react"; + +type ProjectBackground = { + backgroundColor?: string; + backgroundPicture?: string; +}; + +const hexToRgba = (hex: string, alpha: number) => { + const normalized = hex.replace("#", ""); + const r = parseInt(normalized.slice(0, 2), 16); + const g = parseInt(normalized.slice(2, 4), 16); + const b = parseInt(normalized.slice(4, 6), 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; +}; + +export const getProjectBackgroundStyle = (project: ProjectBackground): CSSProperties => { + if (project.backgroundPicture) { + return { + backgroundImage: `url(${project.backgroundPicture})`, + backgroundSize: "cover", + backgroundPosition: "center", + }; + } + + const color = project.backgroundColor ?? "#A8E6CF"; + + return { + background: `linear-gradient(135deg, ${color}, ${hexToRgba(color, 0.5)})`, + }; +}; diff --git a/src/pages/taskmanager/workspace.tsx b/src/pages/taskmanager/workspace.tsx index 443ec8b..6e53218 100644 --- a/src/pages/taskmanager/workspace.tsx +++ b/src/pages/taskmanager/workspace.tsx @@ -9,7 +9,9 @@ import AddNewColumn from "./components/AddNewColumn"; import Column from "./components/Column"; import HeaderWorkspace from "./components/HeaderWorkspace"; import TaskDetailModal from "./components/task-detail/TaskDetailModal"; -import { useGetProject } from "./project/hooks/useProjectData"; +import { useGetProject, useGetProjectDetail } from "./project/hooks/useProjectData"; +import type { ProjectDetailType } from "./project/types/ProjectTypes"; +import { getProjectBackgroundStyle } from "./project/utils/getProjectBackgroundStyle"; import { useUpdateTaskPhase } from "./task-phase/hooks/useTaskPhaseData"; import type { TaskPhaseItemType } from "./task-phase/types/TaskPhaseTypes"; import { useChangeTaskPhase, useChangeTaskPriority } from "./task/hooks/useTaskData"; @@ -25,6 +27,9 @@ const Workspace: FC = () => { const queryClient = useQueryClient(); const { slug: projectId = "" } = useParams<{ slug: string }>(); const { data: project, isPending } = useGetProject(projectId); + const { data: projectDetailData } = useGetProjectDetail(projectId); + const projectDetail: ProjectDetailType | undefined = + projectDetailData?.data?.project ?? projectDetailData?.data; const { mutate: changeTaskPhase } = useChangeTaskPhase(); const { mutate: changeTaskPriority } = useChangeTaskPriority(); const { mutate: updateTaskPhase } = useUpdateTaskPhase(); @@ -236,7 +241,13 @@ const Workspace: FC = () => { } return ( -
+
diff --git a/src/pages/taskmanager/workspace/List.tsx b/src/pages/taskmanager/workspace/List.tsx index f431874..4f1ee08 100644 --- a/src/pages/taskmanager/workspace/List.tsx +++ b/src/pages/taskmanager/workspace/List.tsx @@ -73,12 +73,7 @@ const WorkspaceList: FC = () => { className="size-4 rounded-full shrink-0" style={{ backgroundColor: item.color }} /> - - {item.name} - + {item.name}