Add dropdown for updating member permissions (#41)

* Implement functionality to permissions dropdown

* Find project owner from projects json

* Show selected option in dropdown

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/projects/project/settings/MemberCard.tsx

@@ -1,17 +1,53 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 
 import { Select, Typography, Option } from '@material-tailwind/react';
 
 import { Member } from '../../../../types/project';
+import ConfirmDialog from '../../../shared/ConfirmDialog';
 
-const PERMISSION_OPTIONS = ['View only', 'View and edit'];
+const PERMISSION_OPTIONS = [
+  {
+    label: 'View only',
+    value: 'view',
+  },
+  {
+    label: 'View and edit',
+    value: 'view+edit',
+  },
+];
+
+const DROPDOWN_OPTIONS = [
+  ...PERMISSION_OPTIONS,
+  { label: 'Remove member', value: 'remove' },
+];
 
 interface MemberCardProps {
   member: Member;
   isFirstCard: boolean;
+  isOwner: boolean;
 }
 
-const MemberCard = ({ member, isFirstCard }: MemberCardProps) => {
+const MemberCard = ({ member, isFirstCard, isOwner }: MemberCardProps) => {
+  const [selectedPermission, setSelectedPermission] = useState(
+    member.permissions.join('+'),
+  );
+  const [removeMemberDialogOpen, setRemoveMemberDialogOpen] = useState(false);
+
+  const handlePermissionChange = useCallback(
+    (value: string) => {
+      setSelectedPermission(value);
+
+      if (value === 'remove') {
+        setRemoveMemberDialogOpen((prevVal) => !prevVal);
+        // To display updated label in next render
+        setTimeout(() => {
+          setSelectedPermission(selectedPermission);
+        });
+      }
+    },
+    [removeMemberDialogOpen, selectedPermission],
+  );
+
   return (
     <div
       className={`flex p-1 ${!isFirstCard && 'mt-1 border-t border-gray-300'}`}
@@ -21,16 +57,42 @@ const MemberCard = ({ member, isFirstCard }: MemberCardProps) => {
         <Typography variant="small">{member.name}</Typography>
         <Typography variant="small">{member.email}</Typography>
       </div>
-      <div>
-        <Select>
-          {PERMISSION_OPTIONS.map((permission, key) => (
-            <Option key={key} value={permission}>
-              ^ {permission}
+      <div className="grow">
+        <Select
+          size="lg"
+          label={isOwner ? 'Owner' : ''}
+          disabled={isOwner}
+          value={selectedPermission}
+          onChange={(value) => handlePermissionChange(value!)}
+          selected={(_, index) => (
+            <span>{DROPDOWN_OPTIONS[index!]?.label}</span>
+          )}
+        >
+          {DROPDOWN_OPTIONS.map((permission, key) => (
+            <Option key={key} value={permission.value}>
+              ^ {permission.label}
+              {permission.value === selectedPermission && (
+                <p className="float-right">^</p>
+              )}
             </Option>
           ))}
-          <Option>^ Remove member</Option>
         </Select>
       </div>
+      <ConfirmDialog
+        dialogTitle="Remove member?"
+        handleOpen={() => setRemoveMemberDialogOpen((preVal) => !preVal)}
+        open={removeMemberDialogOpen}
+        confirmButtonTitle="Yes, Remove member"
+        handleConfirm={() => {
+          setRemoveMemberDialogOpen((preVal) => !preVal);
+        }}
+        color="red"
+      >
+        <Typography variant="small">
+          Once removed, {member.name} ({member.email}) will not be able to
+          access this project.
+        </Typography>
+      </ConfirmDialog>
     </div>
   );
 };

packages/frontend/src/components/projects/project/settings/MembersTabPanel.tsx

@@ -27,7 +27,7 @@ const MembersTabPanel = () => {
   }, [currProject]);
 
   return (
-    <div className="p-2">
+    <div className="p-2 mb-20">
       <div className="flex justify-between mb-2">
         <div className="flex">
           <Typography variant="h6">Members</Typography>
@@ -49,6 +49,7 @@ const MembersTabPanel = () => {
             member={member}
             key={member.id}
             isFirstCard={index === FIRST_MEMBER_CARD}
+            isOwner={member.id === currProject?.ownerId}
           />
         );
       })}