workspace users

src/pages/taskmanager/project/components/CreateProjectSidebar.tsx

@@ -3,10 +3,14 @@ import { FC, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 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 {
+  useGetWorkspaces,
+  useGetWorkspaceUsers,
+} from "../../workspace/hooks/useWorkspaceData";
+import {
+  WorkspaceItemType,
+  WorkspaceUserType,
+} from "../../workspace/types/WorkspaceTypes";
 import WorkspaceColorPicker from "../../workspace/components/WorkspaceColorPicker";
 import UserAvatar from "../../components/UserAvatar";
 
@@ -67,8 +71,8 @@ const CreateProjectSidebar: FC<Props> = ({
   className,
 }) => {
   const { t } = useTranslation("global");
-  const getUsers = useGetUsers("");
   const getWorkspaces = useGetWorkspaces();
+  const getWorkspaceUsers = useGetWorkspaceUsers(workspaceId);
   const [userSelectValue, setUserSelectValue] = useState("");
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -82,19 +86,24 @@ const CreateProjectSidebar: FC<Props> = ({
     value: workspace.id,
   }));
 
-  const userItems =
-    getUsers.data?.data?.users
-      ?.filter((user: UserItemType) => !selectedUsers.some((selected) => selected.id === user.id))
-      .map((user: UserItemType) => ({
-        label: `${user.firstName} ${user.lastName}`,
-        value: user.id,
-      })) ?? [];
+  const workspaceUsers: WorkspaceUserType[] = Array.isArray(
+    getWorkspaceUsers.data?.data,
+  )
+    ? getWorkspaceUsers.data.data
+    : (getWorkspaceUsers.data?.data?.users ?? []);
+
+  const userItems = workspaceUsers
+    .filter((user) => !selectedUsers.some((selected) => selected.id === user.id))
+    .map((user) => ({
+      label: `${user.firstName} ${user.lastName}`,
+      value: user.id,
+    }));
 
   const handleUserSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     if (!value) return;
 
-    const user = getUsers.data?.data?.users?.find((item: UserItemType) => item.id === value);
+    const user = workspaceUsers.find((item) => item.id === value);
 
     if (user) {
       onSelectedUsersChange([
@@ -140,14 +149,26 @@ const CreateProjectSidebar: FC<Props> = ({
           placeholder={t("taskmanager.select_workspace")}
           items={workspaceItems}
           value={workspaceId}
-          onChange={(e) => onWorkspaceIdChange(e.target.value)}
+          onChange={(e) => {
+            onWorkspaceIdChange(e.target.value);
+            onSelectedUsersChange([]);
+            setUserSelectValue("");
+          }}
           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" />
+        <Select
+          label={t("taskmanager.users")}
+          placeholder={t("taskmanager.select_user")}
+          items={userItems}
+          value={userSelectValue}
+          onChange={handleUserSelect}
+          className="border"
+          disabled={!workspaceId}
+        />
 
         <div className="mt-3 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap min-h-[52px]">
           {selectedUsers.length === 0 ? (

src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx

@@ -3,7 +3,7 @@ import { CloseCircle } from "iconsax-react";
 import { useTranslation } from "react-i18next";
 import SwitchComponent from "../../../../components/Switch";
 import Select from "../../../../components/Select";
-import { useGetUsers } from "../../../users/hooks/useUserData";
+import { useGetAdminsListAll } from "../../../users/hooks/useUserData";
 import { UserItemType } from "../../../users/types/UserTypes";
 import WorkspaceColorPicker from "./WorkspaceColorPicker";
 import UserAvatar from "../../components/UserAvatar";
@@ -32,27 +32,25 @@ const CreateWorkspaceSidebar: FC<Props> = ({
   onSelectedUsersChange,
 }) => {
   const { t } = useTranslation("global");
-  const getUsers = useGetUsers("");
+  const getAdmins = useGetAdminsListAll();
   const [userSelectValue, setUserSelectValue] = useState("");
 
-  const userItems =
-    getUsers.data?.data?.users
-      ?.filter(
-        (user: UserItemType) =>
-          !selectedUsers.some((selected) => selected.id === user.id),
-      )
-      .map((user: UserItemType) => ({
-        label: `${user.firstName} ${user.lastName}`,
-        value: user.id,
-      })) ?? [];
+  const admins: UserItemType[] = getAdmins.data?.data ?? [];
+
+  const userItems = admins
+    .filter(
+      (user) => !selectedUsers.some((selected) => selected.id === user.id),
+    )
+    .map((user) => ({
+      label: `${user.firstName} ${user.lastName}`,
+      value: user.id,
+    }));
 
   const handleUserSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const value = e.target.value;
     if (!value) return;
 
-    const user = getUsers.data?.data?.users?.find(
-      (item: UserItemType) => item.id === value,
-    );
+    const user = admins.find((item) => item.id === value);
 
     if (user) {
       onSelectedUsersChange([

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

@@ -20,6 +20,14 @@ export const useGetWorkspaceDetail = (id: string) => {
   });
 };
 
+export const useGetWorkspaceUsers = (id: string) => {
+  return useQuery({
+    queryKey: ["workspace-users", id],
+    queryFn: () => api.getWorkspaceUsers(id),
+    enabled: !!id,
+  });
+};
+
 export const useCreateWorkspace = () => {
   const queryClient = useQueryClient();
 

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

@@ -14,6 +14,11 @@ export const getWorkspaceDetail = async (id: string) => {
   return data;
 };
 
+export const getWorkspaceUsers = async (id: string) => {
+  const { data } = await axios.get(`/task-manager/workspaces/${id}/users`);
+  return data;
+};
+
 export const createWorkspace = async (params: CreateWorkspaceType) => {
   const { data } = await axios.post(`/task-manager/workspaces`, params);
   return data;