Project member management

2024-05-31 23:15:03 +09:00
parent db121940d8
commit 191d8c0a72
10 changed files with 194 additions and 61 deletions
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/AddMemberDialog.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/AddMemberDialog.tsx
@@ -71,11 +71,22 @@ export default function AddMemberDialog({ isOpen, members, onCancel, onAddMember
    fetchDataEffect();
  }, [searchText]);

+  const handleExit = () => {
+    setSearchText('');
+    setCandidates([]);
+    onCancel();
+  };
+
+  const handleAdd = (userAdded: UserType) => {
+    onAddMember(userAdded);
+    handleExit();
+  };
+
  return (
    <Modal
      isOpen={isOpen}
      onOpenChange={() => {
-        onCancel();
+        handleExit();
      }}
      size="2xl"
    >
@@ -90,10 +101,10 @@ export default function AddMemberDialog({ isOpen, members, onCancel, onAddMember
              setSearchText(e.target.value);
            }}
          />
-          <CandidatesTable candidates={candidates} onAddPress={onAddMember} messages={messages} />
+          <CandidatesTable candidates={candidates} onAddPress={handleAdd} messages={messages} />
        </ModalBody>
        <ModalFooter>
-          <Button variant="light" onPress={onCancel}>
+          <Button variant="light" onPress={handleExit}>
            {messages.close}
          </Button>
        </ModalFooter>
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/CandidatesTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/CandidatesTable.tsx
@@ -6,7 +6,7 @@ import Avatar from 'boring-avatars';

 type Props = {
  candidates: UserType[];
-  onAddPress: (memberAdded: UserType) => void;
+  onAddPress: (userAdded: UserType) => void;
  messages: SettingsMessages;
 };

--- a/frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/MembersTable.tsx
@@ -1,5 +1,19 @@
 import { useState, useMemo, useCallback } from 'react';
-import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, SortDescriptor } from '@nextui-org/react';
+import {
+  Button,
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
+  SortDescriptor,
+  DropdownTrigger,
+  Dropdown,
+  DropdownMenu,
+  DropdownItem,
+} from '@nextui-org/react';
+import { ChevronDown } from 'lucide-react';
 import { MemberType, UserType } from '@/types/user';
 import { SettingsMessages } from '@/types/settings';
 import { memberRoles } from '@/config/selection';
@@ -7,15 +21,18 @@ import Avatar from 'boring-avatars';

 type Props = {
  members: MemberType[];
+  onChangeRole: (userEdit: UserType, role: number) => void;
+  onDeleteMember: (userDeleted: UserType) => void;
  messages: SettingsMessages;
 };

-export default function MembersTable({ members, messages }: Props) {
+export default function MembersTable({ members, onChangeRole, onDeleteMember, messages }: Props) {
  const headerColumns = [
-    { name: messages.avatar, uid: 'avatar', sortable: false },
+    { name: messages.avatar, uid: 'avatar' },
    { name: messages.email, uid: 'email', sortable: true },
    { name: messages.username, uid: 'username', sortable: true },
    { name: messages.role, uid: 'role', sortable: true },
+    { name: messages.delete, uid: 'delete' },
  ];

  const [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
@@ -51,7 +68,28 @@ export default function MembersTable({ members, messages }: Props) {
      case 'username':
        return member.User.username;
      case 'role':
-        return <span>{messages[memberRoles[cellValue].uid]}</span>;
+        return (
+          <Dropdown>
+            <DropdownTrigger>
+              <Button size="sm" variant="light" endContent={<ChevronDown size={16} />}>
+                <span className="w-12">{messages[memberRoles[cellValue].uid]}</span>
+              </Button>
+            </DropdownTrigger>
+            <DropdownMenu aria-label="test case actions">
+              {memberRoles.map((role, index) => (
+                <DropdownItem key={index} onPress={() => onChangeRole(member.User, index)}>
+                  {messages[role.uid]}
+                </DropdownItem>
+              ))}
+            </DropdownMenu>
+          </Dropdown>
+        );
+      case 'delete':
+        return (
+          <Button size="sm" color="danger" variant="light" onClick={() => onDeleteMember(member.User)}>
+            {messages.deleteMember}
+          </Button>
+        );
      default:
        return cellValue;
    }
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/SettingsPage.tsx
@@ -7,9 +7,8 @@ import { MemberType, UserType } from '@/types/user';
 import { SettingsMessages } from '@/types/settings';
 import { TokenContext } from '@/utils/TokenProvider';
 import MembersTable from './MembersTable';
-import Config from '@/config/config';
 import AddMemberDialog from './AddMemberDialog';
-const apiServer = Config.apiServer;
+import { fetchProjectMembers, addMember, deleteMember, updateMember } from './membersControl';

 type Props = {
  projectId: string;
@@ -17,53 +16,6 @@ type Props = {
  locale: string;
 };

-// Member Search
-async function fetchProjectMembers(jwt: string, projectId: string) {
-  const fetchOptions = {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${jwt}`,
-    },
-  };
-
-  const url = `${apiServer}/members?projectId=${projectId}`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
-  }
-}
-
-async function addMember(jwt: string, userId: string, projectId: string) {
-  const fetchOptions = {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Authorization: `Bearer ${jwt}`,
-    },
-  };
-
-  const url = `${apiServer}/members?userId=${userId}&projectId=${projectId}`;
-
-  try {
-    const response = await fetch(url, fetchOptions);
-    if (!response.ok) {
-      throw new Error(`HTTP error! Status: ${response.status}`);
-    }
-    const data = await response.json();
-    return data;
-  } catch (error: any) {
-    console.error('Error fetching data:', error.message);
-  }
-}
-
 export default function SettingsPage({ projectId, messages, locale }: Props) {
  const context = useContext(TokenContext);
  const [members, setMembers] = useState<MemberType[]>([]);
@@ -86,9 +38,9 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
    fetchDataEffect();
  }, [context]);

-  const handleAddMember = async (memberAdded: UserType) => {
-    const newMember = await addMember(context.token.access_token, memberAdded.id, projectId);
-    newMember.User = memberAdded;
+  const handleAddMember = async (userAdded: UserType) => {
+    const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
+    newMember.User = userAdded;
    const updateMembers = [...members];
    updateMembers.push(newMember);
    setMembers(updateMembers);
@@ -96,6 +48,23 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
    setIsDialogOpen(false);
  };

+  const handleDeleteMember = async (userDeleted: UserType) => {
+    await deleteMember(context.token.access_token, userDeleted.id, projectId);
+    setMembers(members.filter((member) => member.User.id !== userDeleted.id));
+  };
+
+  const handleChangeRole = async (userEdit: UserType, role: number) => {
+    await updateMember(context.token.access_token, userEdit.id, projectId, role);
+    setMembers((prevMembers) => {
+      return prevMembers.map((member) => {
+        if (member.User.id === userEdit.id) {
+          return { ...member, role: role };
+        }
+        return member;
+      });
+    });
+  };
+
  return (
    <div className="container mx-auto max-w-3xl pt-16 px-6 flex-grow">
      <div className="w-full p-3 flex items-center justify-between">
@@ -105,7 +74,12 @@ export default function SettingsPage({ projectId, messages, locale }: Props) {
        </Button>
      </div>

-      <MembersTable members={members} messages={messages} />
+      <MembersTable
+        members={members}
+        onChangeRole={handleChangeRole}
+        onDeleteMember={handleDeleteMember}
+        messages={messages}
+      />

      <AddMemberDialog
        isOpen={isDialogOpen}
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/membersControl.ts
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/membersControl.ts
@@ -0,0 +1,97 @@
+import Config from '@/config/config';
+const apiServer = Config.apiServer;
+
+async function fetchProjectMembers(jwt: string, projectId: string) {
+  const fetchOptions = {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/members?projectId=${projectId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
+async function addMember(jwt: string, userId: string, projectId: string) {
+  const fetchOptions = {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/members?userId=${userId}&projectId=${projectId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
+async function deleteMember(jwt: string, userId: string, projectId: string) {
+  const fetchOptions = {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/members?userId=${userId}&projectId=${projectId}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    console.log(data);
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
+async function updateMember(jwt: string, userId: string, projectId: string, role: number) {
+  const fetchOptions = {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${jwt}`,
+    },
+  };
+
+  const url = `${apiServer}/members?userId=${userId}&projectId=${projectId}&role=${role}`;
+
+  try {
+    const response = await fetch(url, fetchOptions);
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data;
+  } catch (error: any) {
+    console.error('Error fetching data:', error.message);
+  }
+}
+
+export { fetchProjectMembers, addMember, deleteMember, updateMember };
--- a/frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
+++ b/frontend/src/app/[locale]/projects/[projectId]/settings/page.tsx
@@ -12,6 +12,8 @@ export default function Page({ params }: { params: { projectId: string; locale:
    manager: t('manager'),
    developer: t('developer'),
    reporter: t('reporter'),
+    delete: t('delete'),
+    deleteMember: t('deleteMember'),
    noMembersFound: t('no_members_found'),
    addMember: t('add_member'),
    userNameOrEmail: t('user_name_or_email'),