danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create project

Browse Source
This commit is contained in:
hamid zarghami
2026-07-09 11:42:41 +03:30
parent 21a99d9ec1
commit b0737ea6ad
6 changed files with 245 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/langs/fa.json
+1
View File
@@ -985,6 +985,7 @@
"choose_color": "انتخاب رنگ دلخواه",
"users": "کاربران",
"select_user": "انتخاب کاربر",
"select_workspace": "انتخاب فضای کاری",
"no_users_added": "هنوز کاربری اضافه نکردی",
"new_project": "افزودن پروژه",
"submit_project": "ثبت پروژه",
src/pages/taskmanager/project/Create.tsx
+142 -8
View File
@@ -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} />
<Input label={t("taskmanager.employer_name")} />
<DatePickerComponent
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
+67 -15
View File
@@ -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 [isActive, setIsActive] = useState(true);
const [selectedColor, setSelectedColor] = useState("#A8E6CF");
const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
const getWorkspaces = useGetWorkspaces();
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
+16
View File
@@ -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
+7
View File
@@ -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
+12
View File
@@ -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[];
};