update project

src/config/Pages.ts

@@ -173,6 +173,7 @@ export const Pages = {
     createWorkspace: "/workspace/create",
     updateWorkspace: "/workspace/update/",
     createProject: "/project/create",
+    updateProject: "/project/update/",
     projectList: "/project/list/",
   },
 };

src/pages/taskmanager/project/Update.tsx

@@ -0,0 +1,242 @@
+import { FC, useEffect, useState } from "react";
+import { TickCircle } from "iconsax-react";
+import { useFormik } from "formik";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import { toast } from "react-toastify";
+import * as Yup from "yup";
+import moment from "moment-jalaali";
+import Button from "../../../components/Button";
+import DatePickerComponent from "../../../components/DatePicker";
+import Input from "../../../components/Input";
+import PageLoading from "../../../components/PageLoading";
+import Textarea from "../../../components/Textarea";
+import { Pages } from "../../../config/Pages";
+import { ErrorType } from "../../../helpers/types";
+import { useSingleUpload } from "../../service/hooks/useServiceData";
+import CreateProjectSidebar, {
+  BACKGROUND_PRESETS,
+  SelectedUser,
+} from "./components/CreateProjectSidebar";
+import { useGetProjectDetail, useUpdateProject } from "./hooks/useProjectData";
+import { ProjectDetailType, UpdateProjectType } from "./types/ProjectTypes";
+
+const UpdateProject: FC = () => {
+  const { t } = useTranslation("global");
+  const { id = "" } = useParams();
+  const navigate = useNavigate();
+  const getProjectDetail = useGetProjectDetail(id);
+  const updateProject = useUpdateProject();
+  const singleUpload = useSingleUpload();
+
+  const [isActive, setIsActive] = useState(true);
+  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
+  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
+  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
+  const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
+  const [workspaceId, setWorkspaceId] = useState("");
+  const [existingBackgroundPicture, setExistingBackgroundPicture] = useState("");
+  const [startDateDefault, setStartDateDefault] = useState("");
+
+  const project: ProjectDetailType | undefined =
+    getProjectDetail.data?.data?.project ?? getProjectDetail.data?.data;
+
+  const handleUpdateProject = (values: UpdateProjectType) => {
+    if (!id) return;
+
+    updateProject.mutate(
+      { id, params: values },
+      {
+        onSuccess: () => {
+          toast.success(t("success"));
+          navigate(`${Pages.taskmanager.projectList}${values.workspaceId}`);
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
+  const formik = useFormik<
+    Pick<UpdateProjectType, "name" | "ownerName" | "description" | "startDate">
+  >({
+    initialValues: {
+      name: "",
+      ownerName: "",
+      description: "",
+      startDate: "",
+    },
+    validationSchema: Yup.object({
+      name: Yup.string().required(t("errors.required")),
+      ownerName: Yup.string().required(t("errors.required")),
+      description: Yup.string(),
+      startDate: Yup.string().required(t("errors.required")),
+    }),
+    onSubmit: async (values) => {
+      if (!workspaceId) {
+        toast.error(t("taskmanager.select_workspace"));
+        return;
+      }
+
+      let backgroundPicture = existingBackgroundPicture;
+
+      if (backgroundImage) {
+        const formData = new FormData();
+        formData.append("file", backgroundImage);
+
+        try {
+          const uploadResult = await singleUpload.mutateAsync(formData);
+          backgroundPicture = uploadResult?.data?.url ?? "";
+        } catch (error) {
+          const uploadError = error as ErrorType;
+          toast.error(uploadError.response?.data?.error.message[0]);
+          return;
+        }
+      }
+
+      handleUpdateProject({
+        ...values,
+        startDate: moment(values.startDate, "jYYYY/jMM/jDD").format("YYYY-MM-DD"),
+        backgroundPicture,
+        backgroundColor: selectedColor,
+        isActive,
+        workspaceId,
+        userIds: selectedUsers.map((user) => user.id),
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (!project) return;
+
+    formik.setValues({
+      name: project.name,
+      ownerName: project.ownerName,
+      description: project.description ?? "",
+      startDate: project.startDate
+        ? moment(project.startDate, "YYYY-MM-DD").format("jYYYY/jMM/jDD")
+        : "",
+    });
+    setIsActive(project.isActive);
+    setSelectedColor(project.backgroundColor ?? "#A8E6CF");
+    setWorkspaceId(project.workspaceId);
+    setExistingBackgroundPicture(project.backgroundPicture ?? "");
+    setStartDateDefault(
+      project.startDate
+        ? moment(project.startDate, "YYYY-MM-DD").format("jYYYY/jMM/jDD")
+        : "",
+    );
+
+    if (project.users?.length) {
+      setSelectedUsers(
+        project.users.map((user) => ({
+          id: user.id,
+          name: `${user.firstName} ${user.lastName}`,
+        })),
+      );
+    } else if (project.userIds?.length) {
+      setSelectedUsers(
+        project.userIds.map((userId) => ({
+          id: userId,
+          name: userId,
+        })),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [project]);
+
+  if (getProjectDetail.isPending) {
+    return <PageLoading />;
+  }
+
+  return (
+    <div className="w-full mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("edit")}</div>
+        <div>
+          <Button
+            className="px-5"
+            isLoading={updateProject.isPending || singleUpload.isPending}
+            onClick={() => formik.handleSubmit()}
+          >
+            <div className="flex gap-2">
+              <TickCircle className="size-5" color="#fff" />
+              <div>{t("submit")}</div>
+            </div>
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex gap-6">
+        <div className="flex-1">
+          <div className="flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">
+            <div className="text-sm font-bold">{t("taskmanager.project_info")}</div>
+
+            <div className="mt-8">
+              <Input
+                label={t("taskmanager.project_name")}
+                {...formik.getFieldProps("name")}
+                error_text={
+                  formik.touched.name && formik.errors.name ? formik.errors.name : ""
+                }
+              />
+            </div>
+
+            <div className="mt-8 rowTwoInput">
+              <DatePickerComponent
+                label={t("taskmanager.project_start_date")}
+                placeholder={t("taskmanager.select_date")}
+                defaulValue={startDateDefault}
+                onChange={(value) => formik.setFieldValue("startDate", value)}
+                error_text={
+                  formik.touched.startDate && formik.errors.startDate
+                    ? formik.errors.startDate
+                    : ""
+                }
+              />
+              <Input
+                label={t("taskmanager.employer_name")}
+                {...formik.getFieldProps("ownerName")}
+                error_text={
+                  formik.touched.ownerName && formik.errors.ownerName
+                    ? formik.errors.ownerName
+                    : ""
+                }
+              />
+            </div>
+
+            <div className="mt-8">
+              <Textarea
+                label={t("description")}
+                {...formik.getFieldProps("description")}
+                error_text={
+                  formik.touched.description && formik.errors.description
+                    ? formik.errors.description
+                    : ""
+                }
+              />
+            </div>
+          </div>
+        </div>
+
+        <CreateProjectSidebar
+          isActive={isActive}
+          onIsActiveChange={setIsActive}
+          selectedColor={selectedColor}
+          onColorChange={setSelectedColor}
+          selectedUsers={selectedUsers}
+          onSelectedUsersChange={setSelectedUsers}
+          selectedBackground={selectedBackground}
+          onBackgroundChange={setSelectedBackground}
+          backgroundImage={backgroundImage}
+          onBackgroundImageChange={setBackgroundImage}
+          workspaceId={workspaceId}
+          onWorkspaceIdChange={setWorkspaceId}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UpdateProject;

src/pages/taskmanager/project/components/ProjectCard.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { Pages } from "../../../../config/Pages";
 import type { ProjectItem } from "../types/ProjectTypes";
 import ProjectCardMenu from "./ProjectCardMenu";
@@ -34,8 +34,10 @@ const getCardBackgroundStyle = (project: ProjectItem): CSSProperties => {
 };
 
 const ProjectCard: FC<Props> = ({ project, onDelete }) => {
+  const navigate = useNavigate();
+
   const handleEdit = () => {
-    // TODO: navigate to edit page when available
+    navigate(`${Pages.taskmanager.updateProject}${project.id}`);
   };
 
   return (

src/pages/taskmanager/project/hooks/useProjectData.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/ProjectService";
-import { CreateProjectType } from "../types/ProjectTypes";
+import { CreateProjectType, UpdateProjectType } from "../types/ProjectTypes";
 
 export const useGetProjectsByWorkspace = (workspaceId: string) => {
   return useQuery({
@@ -10,6 +10,14 @@ export const useGetProjectsByWorkspace = (workspaceId: string) => {
   });
 };
 
+export const useGetProjectDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["project-detail", id],
+    queryFn: () => api.getProjectDetail(id),
+    enabled: !!id,
+  });
+};
+
 export const useCreateProject = () => {
   const queryClient = useQueryClient();
 
@@ -22,3 +30,23 @@ export const useCreateProject = () => {
     },
   });
 };
+
+export const useUpdateProject = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      params,
+    }: {
+      id: string;
+      params: UpdateProjectType;
+    }) => api.updateProject(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["projects"] });
+      queryClient.invalidateQueries({
+        queryKey: ["project-detail", variables.id],
+      });
+    },
+  });
+};

src/pages/taskmanager/project/service/ProjectService.ts

@@ -1,10 +1,13 @@
 import axios from "../../../../config/axios";
-import { CreateProjectType } from "../types/ProjectTypes";
+import { CreateProjectType, UpdateProjectType } from "../types/ProjectTypes";
 
 export const getProjectsByWorkspace = async (workspaceId: string) => {
-  const { data } = await axios.get(
+  const { data } = await axios.get(`/task-manager/projects/user/workspace/${workspaceId}`);
-    `/task-manager/projects/user/workspace/${workspaceId}`,
+  return data;
-  );
+};
+
+export const getProjectDetail = async (id: string) => {
+  const { data } = await axios.get(`/task-manager/projects/${id}`);
   return data;
 };
 
@@ -12,3 +15,8 @@ export const createProject = async (params: CreateProjectType) => {
   const { data } = await axios.post(`/task-manager/projects`, params);
   return data;
 };
+
+export const updateProject = async (id: string, params: UpdateProjectType) => {
+  const { data } = await axios.patch(`/task-manager/projects/${id}`, params);
+  return data;
+};

src/pages/taskmanager/project/types/ProjectTypes.ts

@@ -5,6 +5,12 @@ export type ProjectItem = {
   backgroundPicture?: string;
 };
 
+export type ProjectUserType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+};
+
 export type CreateProjectType = {
   name: string;
   ownerName: string;
@@ -16,3 +22,10 @@ export type CreateProjectType = {
   workspaceId: string;
   userIds: string[];
 };
+
+export type ProjectDetailType = CreateProjectType & {
+  id: string;
+  users?: ProjectUserType[];
+};
+
+export type UpdateProjectType = CreateProjectType;

src/router/Main.tsx

@@ -80,6 +80,7 @@ import PlanUsers from "../pages/support/PlanUsers";
 import UpdateSupport from "../pages/support/Update";
 import CreateProject from "../pages/taskmanager/project/Create.tsx";
 import ProjectList from "../pages/taskmanager/project/List.tsx";
+import UpdateProject from "../pages/taskmanager/project/Update.tsx";
 import Workspace from "../pages/taskmanager/workspace.tsx";
 import CreateWorkspace from "../pages/taskmanager/workspace/Create.tsx";
 import WorkspaceList from "../pages/taskmanager/workspace/List.tsx";
@@ -503,6 +504,10 @@ const MainRouter: FC = () => {
                 path={Pages.taskmanager.createProject}
                 element={<CreateProject />}
               />
+              <Route
+                path={Pages.taskmanager.updateProject + ":id"}
+                element={<UpdateProject />}
+              />
               <Route
                 path={Pages.taskmanager.projectList + ":workspaceId"}
                 element={<ProjectList />}