edit and delete workspace

src/langs/fa.json

@@ -976,6 +976,7 @@
     "workspace_list": "لیست فضاهای کاری",
     "new_workspace": "ساخت فضای کاری جدید",
     "submit_workspace": "ثبت فضای کاری",
+    "workspace_deleted": "فضای کاری با موفقیت حذف شد",
     "workspacename": "نام",
     "workspacetype": "نوع",
     "workspace_info": "اطلاعات",

src/pages/taskmanager/workspace/List.tsx

@@ -2,22 +2,40 @@ import { FC } from "react";
 import { Add, Edit } from "iconsax-react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 import Button from "../../../components/Button";
 import PageLoading from "../../../components/PageLoading";
 import Td from "../../../components/Td";
+import TrashWithConfrim from "../../../components/TrashWithConfrim";
 import { Pages } from "../../../config/Pages";
-import { useGetWorkspaces } from "./hooks/useWorkspaceData";
+import { ErrorType } from "../../../helpers/types";
+import {
+  useDeleteWorkspace,
+  useGetWorkspaces,
+} from "./hooks/useWorkspaceData";
 import { WorkspaceItemType } from "./types/WorkspaceTypes";
 
 const WorkspaceList: FC = () => {
   const { t } = useTranslation("global");
   const getWorkspaces = useGetWorkspaces();
+  const deleteWorkspace = useDeleteWorkspace();
 
   const workspaces: WorkspaceItemType[] =
     getWorkspaces.data?.data?.workspaces ??
     getWorkspaces.data?.data ??
     [];
 
+  const handleDelete = (id: string) => {
+    deleteWorkspace.mutate(id, {
+      onSuccess: () => {
+        toast.success(t("taskmanager.workspace_deleted"));
+      },
+      onError: (error: ErrorType) => {
+        toast.error(error.response?.data?.error.message[0]);
+      },
+    });
+  };
+
   return (
     <div className="mt-4">
       <div className="flex w-full justify-between items-center">
@@ -42,7 +60,7 @@ const WorkspaceList: FC = () => {
                 <Td text={t("taskmanager.workspacename")} />
                 <Td text={t("taskmanager.workspace_description")} />
                 <Td text={t("taskmanager.workspace_status")} />
-                <Td text={t("edit")} />
+                <Td text="" />
               </tr>
             </thead>
             <tbody>
@@ -69,9 +87,15 @@ const WorkspaceList: FC = () => {
                     }
                   />
                   <Td text="">
-                    <Link to={Pages.taskmanager.updateWorkspace + item.id}>
+                    <div className="flex items-center gap-2">
-                      <Edit size={20} color="#8C90A3" />
+                      <Link to={Pages.taskmanager.updateWorkspace + item.id}>
-                    </Link>
+                        <Edit size={20} color="#8C90A3" />
+                      </Link>
+                      <TrashWithConfrim
+                        onDelete={() => handleDelete(item.id)}
+                        isLoading={deleteWorkspace.isPending}
+                      />
+                    </div>
                   </Td>
                 </tr>
               ))}

src/pages/taskmanager/workspace/Update.tsx

@@ -0,0 +1,171 @@
+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 Button from "../../../components/Button";
+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 {
+  useGetWorkspaceDetail,
+  useUpdateWorkspace,
+} from "./hooks/useWorkspaceData";
+import { UpdateWorkspaceType, WorkspaceDetailType } from "./types/WorkspaceTypes";
+import CreateWorkspaceSidebar, {
+  SelectedUser,
+} from "./components/CreateWorkspaceSidebar";
+
+const UpdateWorkspace: FC = () => {
+  const { t } = useTranslation("global");
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const getWorkspaceDetail = useGetWorkspaceDetail(id || "");
+  const updateWorkspace = useUpdateWorkspace();
+
+  const [isActive, setIsActive] = useState(true);
+  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
+  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
+
+  const workspace: WorkspaceDetailType | undefined =
+    getWorkspaceDetail.data?.data?.workspace ??
+    getWorkspaceDetail.data?.data;
+
+  const handleUpdateWorkspace = (values: UpdateWorkspaceType) => {
+    if (!id) return;
+
+    updateWorkspace.mutate(
+      {
+        id,
+        params: values,
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("success"));
+          navigate(Pages.taskmanager.workspaceList);
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
+  const formik = useFormik<Pick<UpdateWorkspaceType, "name" | "description">>({
+    initialValues: {
+      name: "",
+      description: "",
+    },
+    validationSchema: Yup.object({
+      name: Yup.string().required(t("errors.required")),
+      description: Yup.string(),
+    }),
+    onSubmit: (values) => {
+      handleUpdateWorkspace({
+        ...values,
+        color: selectedColor,
+        isActive,
+        userIds: selectedUsers.map((user) => user.id),
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (!workspace) return;
+
+    formik.setValues({
+      name: workspace.name,
+      description: workspace.description ?? "",
+    });
+    setIsActive(workspace.isActive);
+    setSelectedColor(workspace.color);
+
+    if (workspace.users?.length) {
+      setSelectedUsers(
+        workspace.users.map((user) => ({
+          id: user.id,
+          name: `${user.firstName} ${user.lastName}`,
+        })),
+      );
+    } else if (workspace.userIds?.length) {
+      setSelectedUsers(
+        workspace.userIds.map((userId) => ({
+          id: userId,
+          name: userId,
+        })),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [workspace]);
+
+  if (getWorkspaceDetail.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={updateWorkspace.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.workspace_info")}</div>
+
+            <div className="mt-8">
+              <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
+          isActive={isActive}
+          onIsActiveChange={setIsActive}
+          selectedColor={selectedColor}
+          onColorChange={setSelectedColor}
+          selectedUsers={selectedUsers}
+          onSelectedUsersChange={setSelectedUsers}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default UpdateWorkspace;

src/pages/taskmanager/workspace/hooks/useWorkspaceData.ts

@@ -1,6 +1,9 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/WorkspaceService";
-import { CreateWorkspaceType } from "../types/WorkspaceTypes";
+import {
+  CreateWorkspaceType,
+  UpdateWorkspaceType,
+} from "../types/WorkspaceTypes";
 
 export const useGetWorkspaces = () => {
   return useQuery({
@@ -9,6 +12,14 @@ export const useGetWorkspaces = () => {
   });
 };
 
+export const useGetWorkspaceDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["workspace-detail", id],
+    queryFn: () => api.getWorkspaceDetail(id),
+    enabled: !!id,
+  });
+};
+
 export const useCreateWorkspace = () => {
   const queryClient = useQueryClient();
 
@@ -21,3 +32,32 @@ export const useCreateWorkspace = () => {
     },
   });
 };
+
+export const useUpdateWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      params,
+    }: {
+      id: string;
+      params: UpdateWorkspaceType;
+    }) => api.updateWorkspace(id, params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workspaces"] });
+      queryClient.invalidateQueries({ queryKey: ["workspace-detail"] });
+    },
+  });
+};
+
+export const useDeleteWorkspace = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => api.deleteWorkspace(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["workspaces"] });
+    },
+  });
+};

src/pages/taskmanager/workspace/service/WorkspaceService.ts

@@ -1,12 +1,30 @@
 import axios from "../../../../config/axios";
-import { CreateWorkspaceType } from "../types/WorkspaceTypes";
+import {
+  CreateWorkspaceType,
+  UpdateWorkspaceType,
+} from "../types/WorkspaceTypes";
 
 export const getWorkspacesByUser = async () => {
   const { data } = await axios.get(`/task-manager/workspaces/byuser`);
   return data;
 };
 
+export const getWorkspaceDetail = async (id: string) => {
+  const { data } = await axios.get(`/task-manager/workspaces/${id}`);
+  return data;
+};
+
 export const createWorkspace = async (params: CreateWorkspaceType) => {
   const { data } = await axios.post(`/task-manager/workspaces`, params);
   return data;
 };
+
+export const updateWorkspace = async (id: string, params: UpdateWorkspaceType) => {
+  const { data } = await axios.patch(`/task-manager/workspaces/${id}`, params);
+  return data;
+};
+
+export const deleteWorkspace = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/workspaces/${id}`);
+  return data;
+};

src/pages/taskmanager/workspace/types/WorkspaceTypes.ts

@@ -14,4 +14,15 @@ export type WorkspaceItemType = {
   isActive: boolean;
 };
 
+export type WorkspaceUserType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+};
+
+export type WorkspaceDetailType = WorkspaceItemType & {
+  userIds?: string[];
+  users?: WorkspaceUserType[];
+};
+
 export type UpdateWorkspaceType = CreateWorkspaceType;

src/router/Main.tsx

@@ -82,6 +82,7 @@ import CreateProject from "../pages/taskmanager/project/Create.tsx";
 import ProjectList from "../pages/taskmanager/project/List.tsx";
 import Workspace from "../pages/taskmanager/workspace.tsx";
 import CreateWorkspace from "../pages/taskmanager/workspace/Create.tsx";
+import UpdateWorkspace from "../pages/taskmanager/workspace/Update.tsx";
 import WorkspaceList from "../pages/taskmanager/workspace/List.tsx";
 import TicketCategory from "../pages/ticket/Category";
 import CreateTicket from "../pages/ticket/CreateTicket";
@@ -220,6 +221,7 @@ const MainRouter: FC = () => {
               <Route path={Pages.taskmanager.workspace + ":slug"} element={<Workspace />} />
               <Route path={Pages.taskmanager.workspaceList} element={<WorkspaceList />} />
               <Route path={Pages.taskmanager.createWorkspace} element={<CreateWorkspace />} />
+              <Route path={Pages.taskmanager.updateWorkspace + ":id"} element={<UpdateWorkspace />} />
               <Route path={Pages.taskmanager.createProject} element={<CreateProject />} />
               <Route path={Pages.taskmanager.projectList} element={<ProjectList />} />
             </Routes>