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

workspace create

Browse Source
This commit is contained in:
hamid zarghami
2026-07-09 10:09:47 +03:30
parent 9043cd4cb2
commit 43dc693061
11 changed files with 450 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config/SideBarSubMenu.ts
+1
View File
@@ -8,4 +8,5 @@ export const SideBarItemHasSubMenu = [
"blog",
"support",
"accessLogs",
"taskmanager",
];
src/langs/fa.json
+6 -1
View File
@@ -143,7 +143,11 @@
"guide": "راهنمای سرویس",
"access_logs_list": "لیست لاگ‌ها",
"access_logs_stats": "آمار لاگ‌ها",
"access_logs_errors": "لاگ‌های خطا"
"access_logs_errors": "لاگ‌های خطا",
"taskmanager_workspace": "فضای کاری",
"taskmanager_create_workspace": "ساخت فضای کاری جدید",
"taskmanager_project_list": "لیست پروژه‌ها",
"taskmanager_create_project": "افزودن پروژه"
},
"guide": {
"list_guide": "لیست راهنمای سرویس",
@@ -972,6 +976,7 @@
"submit_workspace": "ثبت فضای کاری",
"workspacename": "نام",
"workspacetype": "نوع",
"workspace_info": "اطلاعات",
"workspace_description": "توضیحات",
"workspace_status": "وضعیت فضای کار",
"choose_color": "انتخاب رنگ دلخواه",
src/pages/taskmanager/workspace/Create.tsx
+85 -12
View File
@@ -1,20 +1,71 @@
import { FC, useState } from "react";
import { TickCircle } from "iconsax-react";
import { useFormik } from "formik";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import * as Yup from "yup";
import Button from "../../../components/Button";
import Input from "../../../components/Input";
import Select from "../../../components/Select";
import Textarea from "../../../components/Textarea";
import CreateWorkspaceSidebar from "./components/CreateWorkspaceSidebar";
import { Pages } from "../../../config/Pages";
import { ErrorType } from "../../../helpers/types";
import { useCreateWorkspace } from "./hooks/useWorkspaceData";
import { CreateWorkspaceType } from "./types/WorkspaceTypes";
import CreateWorkspaceSidebar, {
SelectedUser,
} from "./components/CreateWorkspaceSidebar";
const CreateWorkspace = () => {
const CreateWorkspace: FC = () => {
const { t } = useTranslation("global");
const navigate = useNavigate();
const createWorkspace = useCreateWorkspace();
const [isActive, setIsActive] = useState(true);
const [selectedColor, setSelectedColor] = useState("#A8E6CF");
const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
const handleCreateWorkspace = (values: CreateWorkspaceType) => {
createWorkspace.mutate(values, {
onSuccess: () => {
toast.success(t("success"));
navigate(Pages.taskmanager.workspace + "dpage");
},
onError: (error: ErrorType) => {
toast.error(error.response?.data?.error.message[0]);
},
});
};
const formik = useFormik<Pick<CreateWorkspaceType, "name" | "description">>({
initialValues: {
name: "",
description: "",
},
validationSchema: Yup.object({
name: Yup.string().required(t("errors.required")),
description: Yup.string(),
}),
onSubmit: (values) => {
handleCreateWorkspace({
...values,
color: selectedColor,
isActive,
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_workspace")}</div>
<div>
<Button className="px-5" isLoading={false}>
<Button
className="px-5"
isLoading={createWorkspace.isPending}
onClick={() => formik.handleSubmit()}
>
<div className="flex gap-2">
<TickCircle className="size-5" color="#fff" />
<div>{t("taskmanager.submit_workspace")}</div>
@@ -26,20 +77,42 @@ const CreateWorkspace = () => {
<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">اطلاعات</div>
<div className="text-sm font-bold">{t("taskmanager.workspace_info")}</div>
<div className="mt-8 rowTwoInput">
<Input label={t("taskmanager.workspacename")} />
<Select label={t("taskmanager.workspacetype")} items={[]} />
</div>
<div className="mt-8">
<Textarea label={t("taskmanager.workspace_description")} />
<Input
label={t("taskmanager.workspacename")}
{...formik.getFieldProps("name")}
error_text={
formik.touched.name && formik.errors.name
? formik.errors.name
: ""
}
/>
</div>
<div className="mt-8">
<Textarea
label={t("taskmanager.workspace_description")}
{...formik.getFieldProps("description")}
error_text={
formik.touched.description && formik.errors.description
? formik.errors.description
: ""
}
/>
</div>
</div>
</div>
<CreateWorkspaceSidebar />
<CreateWorkspaceSidebar
isActive={isActive}
onIsActiveChange={setIsActive}
selectedColor={selectedColor}
onColorChange={setSelectedColor}
selectedUsers={selectedUsers}
onSelectedUsersChange={setSelectedUsers}
/>
</div>
</div>
);
src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx
+23 -11
View File
@@ -7,18 +7,30 @@ import { useGetUsers } from "../../../users/hooks/useUserData";
import { UserItemType } from "../../../users/types/UserTypes";
import WorkspaceColorPicker from "./WorkspaceColorPicker";
type SelectedUser = {
export type SelectedUser = {
id: string;
name: string;
};
const CreateWorkspaceSidebar: FC = () => {
type Props = {
isActive: boolean;
onIsActiveChange: (value: boolean) => void;
selectedColor: string;
onColorChange: (color: string) => void;
selectedUsers: SelectedUser[];
onSelectedUsersChange: (users: SelectedUser[]) => void;
};
const CreateWorkspaceSidebar: FC<Props> = ({
isActive,
onIsActiveChange,
selectedColor,
onColorChange,
selectedUsers,
onSelectedUsersChange,
}) => {
const { t } = useTranslation("global");
const getUsers = useGetUsers("");
const [isActive, setIsActive] = useState(true);
const [selectedColor, setSelectedColor] = useState("#A8E6CF");
const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
const [userSelectValue, setUserSelectValue] = useState("");
const userItems =
@@ -41,8 +53,8 @@ const CreateWorkspaceSidebar: FC = () => {
);
if (user) {
setSelectedUsers((prev) => [
...prev,
onSelectedUsersChange([
...selectedUsers,
{ id: user.id, name: `${user.firstName} ${user.lastName}` },
]);
}
@@ -51,7 +63,7 @@ const CreateWorkspaceSidebar: FC = () => {
};
const handleRemoveUser = (id: string) => {
setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
onSelectedUsersChange(selectedUsers.filter((user) => user.id !== id));
};
return (
@@ -60,7 +72,7 @@ const CreateWorkspaceSidebar: FC = () => {
<div>{t("taskmanager.workspace_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>
@@ -69,7 +81,7 @@ const CreateWorkspaceSidebar: FC = () => {
<div className="mt-3">
<WorkspaceColorPicker
selectedColor={selectedColor}
onChange={setSelectedColor}
onChange={onColorChange}
/>
</div>
</div>
src/pages/taskmanager/workspace/hooks/useWorkspaceData.ts
+16
View File
@@ -0,0 +1,16 @@
import { useMutation, useQueryClient } from "@tanstack/react-query";
import * as api from "../service/WorkspaceService";
import { CreateWorkspaceType } from "../types/WorkspaceTypes";
export const useCreateWorkspace = () => {
const queryClient = useQueryClient();
return useMutation({
mutationFn: (variables: CreateWorkspaceType) => api.createWorkspace(variables),
onSuccess: () => {
queryClient.invalidateQueries({
queryKey: ["workspaces"],
});
},
});
};
src/pages/taskmanager/workspace/service/WorkspaceService.ts
+7
View File
@@ -0,0 +1,7 @@
import axios from "../../../../config/axios";
import { CreateWorkspaceType } from "../types/WorkspaceTypes";
export const createWorkspace = async (params: CreateWorkspaceType) => {
const { data } = await axios.post(`/task-manager/workspaces`, params);
return data;
};
src/pages/taskmanager/workspace/types/WorkspaceTypes.ts
+7
View File
@@ -0,0 +1,7 @@
export type CreateWorkspaceType = {
name: string;
description: string;
color: string;
isActive: boolean;
userIds: string[];
};
src/shared/SideBar.tsx
+63 -5
View File
@@ -1,5 +1,6 @@
import {
Activity,
Add,
ArrowDown2,
BagTick,
Building,
@@ -51,6 +52,7 @@ import LearningSubMenu from "./components/LearningSubMenu";
import ReceiptSubMenu from "./components/ReceiptSubMenu";
import ServicesSubMenu from "./components/ServicesSubMenu";
import SupportSubMenu from "./components/SupportSubMenu";
import TaskManagerSubMenu from "./components/TaskManagerSubMenu";
import TicketSubMenu from "./components/TicketSubMenu";
import UsersSubMenu from "./components/UsersSubMenu";
import SideBarItem from "./SideBarItem";
@@ -69,10 +71,18 @@ const SideBar: FC = () => {
useEffect(() => {
const split = location.pathname.split("/");
const isTaskManagerRoute =
location.pathname.startsWith(Pages.taskmanager.workspace) ||
location.pathname === Pages.taskmanager.createWorkspace ||
location.pathname === Pages.taskmanager.createProject ||
location.pathname === Pages.taskmanager.projectList;
if (SideBarItemHasSubMenu.includes(split[1])) {
setSubMenuName(split[1]);
setSubtMenu(true);
} else if (isTaskManagerRoute) {
setSubMenuName("taskmanager");
setSubtMenu(true);
} else {
setSubMenuName("");
setSubtMenu(false);
@@ -459,18 +469,64 @@ const SideBar: FC = () => {
</div>
</div>
}
<div className={clx("text-xs text-[#8C90A3]")}>
<div className={clx("text-xs text-[#8C90A3]", !openMenu.includes("taskmanager") && "hidden")}>
<SideBarItem
icon={
<Task
variant={isActive("taskmanager") ? "Bold" : "Outline"}
color={isActive("taskmanager") ? "black" : "#8C90A3"}
variant={location.pathname.startsWith(Pages.taskmanager.workspace) ? "Bold" : "Outline"}
color={location.pathname.startsWith(Pages.taskmanager.workspace) ? "black" : "#8C90A3"}
size={iconSizeSideBar}
/>
}
title={t("sidebar.taskmanager")}
isActive={isActive("taskmanager")}
title={t("submenu.taskmanager_workspace")}
isActive={location.pathname.startsWith(Pages.taskmanager.workspace)}
link={Pages.taskmanager.workspace + "dpage"}
name="taskmanager"
activeName=""
/>
<SideBarItem
icon={
<Add
variant={location.pathname === Pages.taskmanager.createWorkspace ? "Bold" : "Outline"}
color={location.pathname === Pages.taskmanager.createWorkspace ? "black" : "#8C90A3"}
size={iconSizeSideBar}
/>
}
title={t("submenu.taskmanager_create_workspace")}
isActive={location.pathname === Pages.taskmanager.createWorkspace}
link={Pages.taskmanager.createWorkspace}
name="taskmanager"
activeName=""
/>
<SideBarItem
icon={
<Category
variant={location.pathname === Pages.taskmanager.projectList ? "Bold" : "Outline"}
color={location.pathname === Pages.taskmanager.projectList ? "black" : "#8C90A3"}
size={iconSizeSideBar}
/>
}
title={t("submenu.taskmanager_project_list")}
isActive={location.pathname === Pages.taskmanager.projectList}
link={Pages.taskmanager.projectList}
name="taskmanager"
activeName=""
/>
<SideBarItem
icon={
<Add
variant={location.pathname === Pages.taskmanager.createProject ? "Bold" : "Outline"}
color={location.pathname === Pages.taskmanager.createProject ? "black" : "#8C90A3"}
size={iconSizeSideBar}
/>
}
title={t("submenu.taskmanager_create_project")}
isActive={location.pathname === Pages.taskmanager.createProject}
link={Pages.taskmanager.createProject}
name="taskmanager"
activeName=""
/>
</div>
@@ -948,6 +1004,8 @@ const SideBar: FC = () => {
<SupportSubMenu />
) : subMenuName === "accessLogs" ? (
<AccessLogsSubMenu />
) : subMenuName === "taskmanager" ? (
<TaskManagerSubMenu />
) : null}
</div>
)}
src/shared/components/TaskManagerSubMenu.tsx
+50
View File
@@ -0,0 +1,50 @@
import { Add, Category, Task } from "iconsax-react";
import { FC } from "react";
import { useTranslation } from "react-i18next";
import { useLocation } from "react-router-dom";
import { Pages } from "../../config/Pages";
import SubMenuItem from "./SubMenuItem";
const TaskManagerSubMenu: FC = () => {
const { t } = useTranslation("global");
const location = useLocation();
const isWorkspaceActive = location.pathname.startsWith(Pages.taskmanager.workspace);
const isCreateWorkspaceActive = location.pathname === Pages.taskmanager.createWorkspace;
const isProjectListActive = location.pathname === Pages.taskmanager.projectList;
const isCreateProjectActive = location.pathname === Pages.taskmanager.createProject;
return (
<div className="py-12">
<div className="flex gap-3 items-center border-b pb-10 px-6">
<Task size={24} color="#000" variant="Bold" />
<div className="text-xs">{t("sidebar.taskmanager")}</div>
</div>
<div className="flex flex-col mt-10 gap-4">
<SubMenuItem
title={t("submenu.taskmanager_workspace")}
isActive={isWorkspaceActive}
link={Pages.taskmanager.workspace + "dpage"}
/>
<SubMenuItem
title={t("submenu.taskmanager_create_workspace")}
isActive={isCreateWorkspaceActive}
link={Pages.taskmanager.createWorkspace}
/>
<SubMenuItem
title={t("submenu.taskmanager_project_list")}
isActive={isProjectListActive}
link={Pages.taskmanager.projectList}
/>
<SubMenuItem
title={t("submenu.taskmanager_create_project")}
isActive={isCreateProjectActive}
link={Pages.taskmanager.createProject}
/>
</div>
</div>
);
};
export default TaskManagerSubMenu;