update project
This commit is contained in:
hamid zarghami
@@ -173,6 +173,7 @@ export const Pages = {
|
||||
createWorkspace: "/workspace/create",
|
||||
updateWorkspace: "/workspace/update/",
|
||||
createProject: "/project/create",
|
||||
updateProject: "/project/update/",
|
||||
projectList: "/project/list/",
|
||||
},
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
@@ -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 (
|
||||
|
||||
@@ -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],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
@@ -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(
|
||||
`/task-manager/projects/user/workspace/${workspaceId}`,
|
||||
);
|
||||
const { data } = await axios.get(`/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;
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 />}
|
||||
|
||||
Reference in New Issue
Block a user