create project

src/langs/fa.json

@@ -985,6 +985,7 @@
     "choose_color": "انتخاب رنگ دلخواه",
     "users": "کاربران",
     "select_user": "انتخاب کاربر",
+    "select_workspace": "انتخاب فضای کاری",
     "no_users_added": "هنوز کاربری اضافه نکردی",
     "new_project": "افزودن پروژه",
     "submit_project": "ثبت پروژه",

src/pages/taskmanager/project/Create.tsx

@@ -1,20 +1,110 @@
+import { FC, useState } from "react";
 import { TickCircle } from "iconsax-react";
+import { useFormik } from "formik";
 import { useTranslation } from "react-i18next";
+import { useNavigate, useSearchParams } 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 Textarea from "../../../components/Textarea";
-import CreateProjectSidebar from "./components/CreateProjectSidebar";
+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 { useCreateProject } from "./hooks/useProjectData";
+import { CreateProjectType } from "./types/ProjectTypes";
 
-const CreateProject = () => {
+const CreateProject: FC = () => {
   const { t } = useTranslation("global");
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const createProject = useCreateProject();
+  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(searchParams.get("workspaceId") ?? "");
+
+  const handleCreateProject = async (values: CreateProjectType) => {
+    createProject.mutate(values, {
+      onSuccess: () => {
+        toast.success(t("success"));
+        navigate(Pages.taskmanager.projectList);
+      },
+      onError: (error: ErrorType) => {
+        toast.error(error.response?.data?.error.message[0]);
+      },
+    });
+  };
+
+  const formik = useFormik<
+    Pick<CreateProjectType, "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 = "";
+
+      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;
+        }
+      }
+
+      handleCreateProject({
+        ...values,
+        startDate: moment(values.startDate, "jYYYY/jMM/jDD").format("YYYY-MM-DD"),
+        backgroundPicture,
+        backgroundColor: selectedColor,
+        isActive,
+        workspaceId,
+        userIds: selectedUsers.map((user) => user.id),
+      });
+    },
+  });
 
   return (
     <div className="w-full mt-4">
       <div className="flex w-full justify-between items-center">
         <div>{t("taskmanager.new_project")}</div>
         <div>
-          <Button className="px-5" isLoading={false}>
+          <Button
+            className="px-5"
+            isLoading={createProject.isPending || singleUpload.isPending}
+            onClick={() => formik.handleSubmit()}
+          >
             <div className="flex gap-2">
               <TickCircle className="size-5" color="#fff" />
               <div>{t("taskmanager.submit_project")}</div>
@@ -29,21 +119,65 @@ const CreateProject = () => {
             <div className="text-sm font-bold">{t("taskmanager.project_info")}</div>
 
             <div className="mt-8">
-              <Input label={t("taskmanager.project_name")} />
+              <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")} onChange={() => undefined} />
+              <DatePickerComponent
-              <Input label={t("taskmanager.employer_name")} />
+                label={t("taskmanager.project_start_date")}
+                placeholder={t("taskmanager.select_date")}
+                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")} />
+              <Textarea
+                label={t("description")}
+                {...formik.getFieldProps("description")}
+                error_text={
+                  formik.touched.description && formik.errors.description
+                    ? formik.errors.description
+                    : ""
+                }
+              />
             </div>
           </div>
         </div>
 
-        <CreateProjectSidebar />
+        <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>
   );

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

@@ -5,14 +5,16 @@ import Select from "../../../../components/Select";
 import SwitchComponent from "../../../../components/Switch";
 import { useGetUsers } from "../../../users/hooks/useUserData";
 import { UserItemType } from "../../../users/types/UserTypes";
+import { useGetWorkspaces } from "../../workspace/hooks/useWorkspaceData";
+import { WorkspaceItemType } from "../../workspace/types/WorkspaceTypes";
 import WorkspaceColorPicker from "../../workspace/components/WorkspaceColorPicker";
 
-type SelectedUser = {
+export type SelectedUser = {
   id: string;
   name: string;
 };
 
-const BACKGROUND_PRESETS = [
+export const BACKGROUND_PRESETS = [
   "linear-gradient(45deg, #6a11cb, #2575fc)",
   "linear-gradient(45deg, #ff00cc, #333399)",
   "linear-gradient(45deg, #ff0000, #ff8c00)",
@@ -21,18 +23,53 @@ const BACKGROUND_PRESETS = [
   "linear-gradient(45deg, #2c3e50, #4ca1af)",
 ] as const;
 
-const CreateProjectSidebar: FC = () => {
+type Props = {
+  isActive: boolean;
+  onIsActiveChange: (value: boolean) => void;
+  selectedColor: string;
+  onColorChange: (color: string) => void;
+  selectedUsers: SelectedUser[];
+  onSelectedUsersChange: (users: SelectedUser[]) => void;
+  selectedBackground: string;
+  onBackgroundChange: (background: string) => void;
+  backgroundImage: File | null;
+  onBackgroundImageChange: (file: File | null) => void;
+  workspaceId: string;
+  onWorkspaceIdChange: (id: string) => void;
+  workspaceError?: string;
+};
+
+const CreateProjectSidebar: FC<Props> = ({
+  isActive,
+  onIsActiveChange,
+  selectedColor,
+  onColorChange,
+  selectedUsers,
+  onSelectedUsersChange,
+  selectedBackground,
+  onBackgroundChange,
+  backgroundImage,
+  onBackgroundImageChange,
+  workspaceId,
+  onWorkspaceIdChange,
+  workspaceError,
+}) => {
   const { t } = useTranslation("global");
   const getUsers = useGetUsers("");
-
+  const getWorkspaces = useGetWorkspaces();
-  const [isActive, setIsActive] = useState(true);
-  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
-  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
   const [userSelectValue, setUserSelectValue] = useState("");
-  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
-  const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const workspaces: WorkspaceItemType[] =
+    getWorkspaces.data?.data?.workspaces ??
+    getWorkspaces.data?.data ??
+    [];
+
+  const workspaceItems = workspaces.map((workspace) => ({
+    label: workspace.name,
+    value: workspace.id,
+  }));
+
   const userItems =
     getUsers.data?.data?.users
       ?.filter((user: UserItemType) => !selectedUsers.some((selected) => selected.id === user.id))
@@ -48,19 +85,22 @@ const CreateProjectSidebar: FC = () => {
     const user = getUsers.data?.data?.users?.find((item: UserItemType) => item.id === value);
 
     if (user) {
-      setSelectedUsers((prev) => [...prev, { id: user.id, name: `${user.firstName} ${user.lastName}` }]);
+      onSelectedUsersChange([
+        ...selectedUsers,
+        { id: user.id, name: `${user.firstName} ${user.lastName}` },
+      ]);
     }
 
     setUserSelectValue("");
   };
 
   const handleRemoveUser = (id: string) => {
-    setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
+    onSelectedUsersChange(selectedUsers.filter((user) => user.id !== id));
   };
 
   const handleBackgroundImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const file = event.target.files?.[0] ?? null;
-    setBackgroundImage(file);
+    onBackgroundImageChange(file);
   };
 
   return (
@@ -69,10 +109,22 @@ const CreateProjectSidebar: FC = () => {
         <div>{t("taskmanager.project_status")}</div>
         <div className="flex gap-2 text-xs items-center text-description">
           <div>{isActive ? t("slider.active") : t("slider.inactive")}</div>
-          <SwitchComponent active={isActive} onChange={setIsActive} />
+          <SwitchComponent active={isActive} onChange={onIsActiveChange} />
         </div>
       </div>
 
+      <div className="mt-8">
+        <Select
+          label={t("taskmanager.workspacename")}
+          placeholder={t("taskmanager.select_workspace")}
+          items={workspaceItems}
+          value={workspaceId}
+          onChange={(e) => onWorkspaceIdChange(e.target.value)}
+          className="border"
+          error_text={workspaceError ?? ""}
+        />
+      </div>
+
       <div className="mt-8">
         <Select label={t("taskmanager.users")} placeholder={t("taskmanager.select_user")} items={userItems} value={userSelectValue} onChange={handleUserSelect} className="border" />
 
@@ -102,7 +154,7 @@ const CreateProjectSidebar: FC = () => {
                 background,
                 borderColor: selectedBackground === background ? "#000" : "#E2E8F0",
               }}
-              onClick={() => setSelectedBackground(background)}
+              onClick={() => onBackgroundChange(background)}
             />
           ))}
         </div>
@@ -110,7 +162,7 @@ const CreateProjectSidebar: FC = () => {
 
       <div className="mt-8">
         <div className="text-sm mb-3">{t("taskmanager.choose_color")}</div>
-        <WorkspaceColorPicker selectedColor={selectedColor} onChange={setSelectedColor} />
+        <WorkspaceColorPicker selectedColor={selectedColor} onChange={onColorChange} />
       </div>
 
       <div className="mt-8">

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

@@ -0,0 +1,16 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/ProjectService";
+import { CreateProjectType } from "../types/ProjectTypes";
+
+export const useCreateProject = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateProjectType) => api.createProject(variables),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["projects"],
+      });
+    },
+  });
+};

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

@@ -0,0 +1,7 @@
+import axios from "../../../../config/axios";
+import { CreateProjectType } from "../types/ProjectTypes";
+
+export const createProject = async (params: CreateProjectType) => {
+  const { data } = await axios.post(`/task-manager/projects`, params);
+  return data;
+};

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

@@ -8,3 +8,15 @@ export type WorkspaceInfo = {
   name: string;
   description: string;
 };
+
+export type CreateProjectType = {
+  name: string;
+  ownerName: string;
+  description: string;
+  startDate: string;
+  backgroundPicture: string;
+  backgroundColor: string;
+  isActive: boolean;
+  workspaceId: string;
+  userIds: string[];
+};