Restyle project members page

This commit is contained in:
Tuan Dang
2023-11-24 20:00:40 +07:00
parent 180274be34
commit 0c0139ac8f
3 changed files with 34 additions and 33 deletions
@@ -57,10 +57,8 @@ export const OrgMembersSection = () => {
} }
if (isMoreUsersNotAllowed) { if (isMoreUsersNotAllowed) {
console.log("no more users allowed");
handlePopUpOpen("upgradePlan"); handlePopUpOpen("upgradePlan");
} else { } else {
console.log("yes more users allowed");
handlePopUpOpen("addMember"); handlePopUpOpen("addMember");
} }
} }
@@ -120,11 +118,6 @@ export const OrgMembersSection = () => {
completeInviteLink={completeInviteLink} completeInviteLink={completeInviteLink}
setCompleteInviteLink={setCompleteInviteLink} setCompleteInviteLink={setCompleteInviteLink}
/> />
{/* <AddServiceTokenV3Modal
popUp={popUp}
handlePopUpOpen={handlePopUpOpen}
handlePopUpToggle={handlePopUpToggle}
/> */}
<DeleteActionModal <DeleteActionModal
isOpen={popUp.removeMember.isOpen} isOpen={popUp.removeMember.isOpen}
title={`Are you sure want to remove member with email ${ title={`Are you sure want to remove member with email ${
@@ -229,7 +229,6 @@ export const OrgMembersTable = ({
{(isAllowed) => ( {(isAllowed) => (
<IconButton <IconButton
onClick={() => { onClick={() => {
console.log("TODO: delete logic here");
handlePopUpOpen("removeMember", { orgMembershipId, email }) handlePopUpOpen("removeMember", { orgMembershipId, email })
}} }}
size="lg" size="lg"
@@ -2,7 +2,7 @@ import { useCallback, useMemo, useState } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Link from "next/link"; import Link from "next/link";
import { faMagnifyingGlass, faPlus, faTrash, faUsers } from "@fortawesome/free-solid-svg-icons"; import { faMagnifyingGlass, faPlus, faUsers,faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { zodResolver } from "@hookform/resolvers/zod"; import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod"; import { z } from "zod";
@@ -243,29 +243,35 @@ export const MemberListTab = () => {
const isLoading = isMembersLoading || isRolesLoading; const isLoading = isMembersLoading || isRolesLoading;
return ( return (
<div className="w-full"> <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex"> <div className="flex justify-between mb-8">
<div className="mr-4 flex-1"> <p className="text-xl font-semibold text-mineshaft-100">
<Input Members
value={searchMemberFilter} </p>
onChange={(e) => setSearchMemberFilter(e.target.value)} <ProjectPermissionCan
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />} I={ProjectPermissionActions.Create}
placeholder="Search members..." a={ProjectPermissionSub.Member}
/> >
</div> {(isAllowed) => (
<ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Member}> <Button
{(isAllowed) => ( colorSchema="secondary"
<Button type="submit"
isDisabled={!isAllowed} leftIcon={<FontAwesomeIcon icon={faPlus} />}
leftIcon={<FontAwesomeIcon icon={faPlus} />} onClick={() => handlePopUpOpen("addMember")}
onClick={() => handlePopUpOpen("addMember")} isDisabled={!isAllowed}
> >
Add Member Add Member
</Button> </Button>
)} )}
</ProjectPermissionCan> </ProjectPermissionCan>
</div> </div>
<div> <Input
value={searchMemberFilter}
onChange={(e) => setSearchMemberFilter(e.target.value)}
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
placeholder="Search members..."
/>
<div className="mt-4">
<TableContainer> <TableContainer>
<Table> <Table>
<THead> <THead>
@@ -273,7 +279,7 @@ export const MemberListTab = () => {
<Th>Name</Th> <Th>Name</Th>
<Th>Email</Th> <Th>Email</Th>
<Th>Role</Th> <Th>Role</Th>
<Th aria-label="actions" /> <Th className="w-5" />
</Tr> </Tr>
</THead> </THead>
<TBody> <TBody>
@@ -339,14 +345,17 @@ export const MemberListTab = () => {
> >
{(isAllowed) => ( {(isAllowed) => (
<IconButton <IconButton
ariaLabel="delete" size="lg"
colorSchema="danger" colorSchema="danger"
variant="plain"
ariaLabel="update"
className="ml-4"
isDisabled={userId === u?._id || !isAllowed} isDisabled={userId === u?._id || !isAllowed}
onClick={() => onClick={() =>
handlePopUpOpen("removeMember", { id: membershipId }) handlePopUpOpen("removeMember", { id: membershipId })
} }
> >
<FontAwesomeIcon icon={faTrash} /> <FontAwesomeIcon icon={faXmark} />
</IconButton> </IconButton>
)} )}
</ProjectPermissionCan> </ProjectPermissionCan>