space updates

* space UI
* space management
* space permissions
* other fixes

apps/client/src/features/workspace/components/members/components/workspace-members-table.tsx

@@ -1,10 +1,36 @@
 import { Group, Table, Avatar, Text, Badge } from "@mantine/core";
-import { useWorkspaceMembersQuery } from "@/features/workspace/queries/workspace-query.ts";
+import {
+  useChangeMemberRoleMutation,
+  useWorkspaceMembersQuery,
+} from "@/features/workspace/queries/workspace-query.ts";
 import { UserAvatar } from "@/components/ui/user-avatar.tsx";
 import React from "react";
+import RoleSelectMenu from "@/components/ui/role-select-menu.tsx";
+import {
+  getUserRoleLabel,
+  userRoleData,
+} from "@/features/workspace/types/user-role-data.ts";
 
 export default function WorkspaceMembersTable() {
   const { data, isLoading } = useWorkspaceMembersQuery();
+  const changeMemberRoleMutation = useChangeMemberRoleMutation();
+
+  const handleRoleChange = async (
+    userId: string,
+    currentRole: string,
+    newRole: string,
+  ) => {
+    if (newRole === currentRole) {
+      return;
+    }
+
+    const memberRoleUpdate = {
+      userId: userId,
+      role: newRole,
+    };
+
+    await changeMemberRoleMutation.mutateAsync(memberRoleUpdate);
+  };
 
   return (
     <>
@@ -39,7 +65,15 @@ export default function WorkspaceMembersTable() {
                   <Badge variant="light">Active</Badge>
                 </Table.Td>
 
-                <Table.Td>{user.role}</Table.Td>
+                <Table.Td>
+                  <RoleSelectMenu
+                    roles={userRoleData}
+                    roleName={getUserRoleLabel(user.role)}
+                    onChange={(newRole) =>
+                      handleRoleChange(user.id, user.role, newRole)
+                    }
+                  />
+                </Table.Td>
               </Table.Tr>
             ))}
           </Table.Tbody>

apps/client/src/features/workspace/queries/workspace-query.ts

@@ -1,6 +1,10 @@
-import { useQuery } from "@tanstack/react-query";
-import { getWorkspaceMembers } from "@/features/workspace/services/workspace-service";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  changeMemberRole,
+  getWorkspaceMembers,
+} from "@/features/workspace/services/workspace-service";
 import { QueryParams } from "@/lib/types.ts";
+import { notifications } from "@mantine/notifications";
 
 export function useWorkspaceMembersQuery(params?: QueryParams) {
   return useQuery({
@@ -8,3 +12,21 @@ export function useWorkspaceMembersQuery(params?: QueryParams) {
     queryFn: () => getWorkspaceMembers(params),
   });
 }
+
+export function useChangeMemberRoleMutation() {
+  const queryClient = useQueryClient();
+
+  return useMutation<any, Error, any>({
+    mutationFn: (data) => changeMemberRole(data),
+    onSuccess: (data, variables) => {
+      notifications.show({ message: "Member role updated successfully" });
+      queryClient.refetchQueries({
+        queryKey: ["workspaceMembers", variables.spaceId],
+      });
+    },
+    onError: (error) => {
+      const errorMessage = error["response"]?.data?.message;
+      notifications.show({ message: errorMessage, color: "red" });
+    },
+  });
+}

apps/client/src/features/workspace/services/workspace-service.ts

@@ -1,7 +1,7 @@
 import api from "@/lib/api-client";
 import { IUser } from "@/features/user/types/user.types";
 import { IWorkspace } from "../types/workspace.types";
-import { QueryParams } from "@/lib/types.ts";
+import { IPagination, QueryParams } from "@/lib/types.ts";
 
 export async function getWorkspace(): Promise<IWorkspace> {
   const req = await api.post<IWorkspace>("/workspace/info");
@@ -9,8 +9,10 @@ export async function getWorkspace(): Promise<IWorkspace> {
 }
 
 // Todo: fix all paginated types
-export async function getWorkspaceMembers(params?: QueryParams): Promise<any> {
-  const req = await api.post<any>("/workspace/members", params);
+export async function getWorkspaceMembers(
+  params?: QueryParams,
+): Promise<IPagination<IUser>> {
+  const req = await api.post("/workspace/members", params);
   return req.data;
 }
 
@@ -19,3 +21,10 @@ export async function updateWorkspace(data: Partial<IWorkspace>) {
 
   return req.data as IWorkspace;
 }
+
+export async function changeMemberRole(data: {
+  userId: string;
+  role: string;
+}): Promise<void> {
+  await api.post("/workspace/members/role", data);
+}

apps/client/src/features/workspace/types/user-role-data.ts

@@ -0,0 +1,24 @@
+import { IRoleData, UserRole } from "@/lib/types.ts";
+
+export const userRoleData: IRoleData[] = [
+  {
+    label: "Owner",
+    value: UserRole.OWNER,
+    description: "Can manage workspace",
+  },
+  {
+    label: "Admin",
+    value: UserRole.ADMIN,
+    description: "Can manage workspace but cannot delete it",
+  },
+  {
+    label: "Member",
+    value: UserRole.MEMBER,
+    description: "Can become members of groups and spaces in workspace.",
+  },
+];
+
+export function getUserRoleLabel(value: string) {
+  const role = userRoleData.find((item) => item.value === value);
+  return role ? role.label : undefined;
+}