create project

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 [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">