Project member management

backend/routes/members/edit.js

@@ -10,6 +10,7 @@ module.exports = function (sequelize) {
   router.put('/', verifySignedIn, verifyProjectManager, async (req, res) => {
     const userId = req.query.userId;
     const projectId = req.query.projectId;
+    const role = req.query.role;
 
     try {
       const member = await Member.findOne({
@@ -26,6 +27,7 @@ module.exports = function (sequelize) {
       await member.update({
         userId,
         projectId,
+        role,
       });
       res.json(member);
     } catch (error) {

frontend/messages/en.json

@@ -267,6 +267,8 @@
     "manager": "Manager",
     "developer": "Developer",
     "reporter": "Reporter",
+    "delete": "Delete",
+    "deleteMember": "Delete member",
     "no_members_found": "No members found",
     "add_member": "Add member",
     "user_name_or_email": "User name or email",

frontend/messages/ja.json

@@ -266,6 +266,8 @@
     "manager": "管理者",
     "developer": "開発者",
     "reporter": "報告者",
+    "delete": "削除",
+    "deleteMember": "メンバーの削除",
     "no_members_found": "メンバーがいません",
     "add_member": "メンバーの追加",
     "user_name_or_email": "ユーザー名またはメールアドレス",

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>

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;
 };
 

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;
     }

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 handleAddMember = async (userAdded: UserType) => {
-    const newMember = await addMember(context.token.access_token, memberAdded.id, projectId);
+    const newMember = await addMember(context.token.access_token, userAdded.id, projectId);
-    newMember.User = memberAdded;
+    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}

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 };

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'),

frontend/types/settings.ts

@@ -4,6 +4,11 @@ export type SettingsMessages = {
   email: string;
   username: string;
   role: string;
+  manager: string;
+  developer: string;
+  reporter: string;
+  delete: string;
+  deleteMember: string;
   noMembersFound: string;
   addMember: string;
   userNameOrEmail: string;