mirror of
https://github.com/makeplane/plane
synced 2025-08-07 19:59:33 +00:00
[WEB-1959]: Fix/member page revamp (#5163)
* fix: css issue + no pending issues handled * fix: type issues * fix: css changes
This commit is contained in:
@@ -16,7 +16,8 @@ export const metadata: Metadata = {
|
||||
"Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
|
||||
openGraph: {
|
||||
title: "Plane | Simple, extensible, open-source project management tool.",
|
||||
description: "Plane Deploy is a customer feedback management tool built on top of plane.so",
|
||||
description:
|
||||
"Open-source project management tool to manage issues, sprints, and product roadmaps with peace of mind.",
|
||||
url: "https://app.plane.so/",
|
||||
},
|
||||
keywords:
|
||||
|
||||
@@ -6,7 +6,7 @@ import { AccountTypeColumn, NameColumn } from "@/components/project/settings/mem
|
||||
import { EUserWorkspaceRoles } from "@/constants/workspace";
|
||||
import { useUser } from "@/hooks/store";
|
||||
|
||||
interface RowData {
|
||||
export interface RowData {
|
||||
member: IWorkspaceMember;
|
||||
role: EUserWorkspaceRoles;
|
||||
}
|
||||
|
||||
@@ -82,7 +82,8 @@ export const ProjectMemberListItem: React.FC<Props> = observer((props) => {
|
||||
columns={columns}
|
||||
data={(memberDetails?.filter((member): member is IProjectMemberDetails => member !== null) ?? []) as any}
|
||||
keyExtractor={(rowData) => rowData?.member.id ?? ""}
|
||||
thClassName="text-left font-medium divide-x-0 border-b border-t divide-custom-border-200"
|
||||
tHeadClassName="border-b border-custom-border-100"
|
||||
thClassName="text-left font-medium divide-x-0"
|
||||
tBodyClassName="divide-y-0"
|
||||
tBodyTrClassName="divide-x-0"
|
||||
tHeadTrClassName="divide-x-0"
|
||||
|
||||
@@ -42,10 +42,10 @@ export const ProjectMemberList: React.FC = observer(() => {
|
||||
|
||||
<div className="flex items-center justify-between gap-4 border-b border-custom-border-100 py-3.5 overflow-x-hidden">
|
||||
<h4 className="text-xl font-medium">Members</h4>
|
||||
<div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5 text-custom-text-400">
|
||||
<div className="ml-auto flex items-center justify-start gap-1 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
|
||||
<Search className="h-3.5 w-3.5" />
|
||||
<input
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none"
|
||||
className="w-full max-w-[234px] border-none bg-transparent text-sm focus:outline-none placeholder:text-custom-text-400"
|
||||
placeholder="Search"
|
||||
value={searchQuery}
|
||||
autoFocus
|
||||
@@ -68,7 +68,7 @@ export const ProjectMemberList: React.FC = observer(() => {
|
||||
<MembersSettingsLoader />
|
||||
) : (
|
||||
<div className="divide-y divide-custom-border-100 overflow-scroll">
|
||||
<ProjectMemberListItem memberDetails={memberDetails ?? []} />
|
||||
{searchedMembers.length !== 0 && <ProjectMemberListItem memberDetails={memberDetails ?? []} />}
|
||||
|
||||
{searchedMembers.length === 0 && (
|
||||
<h4 className="text-sm mt-16 text-center text-custom-text-400">No matching members</h4>
|
||||
|
||||
@@ -28,7 +28,7 @@ type AccountTypeProps = {
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const NameColumn: React.FC<NameProps> = (props: any) => {
|
||||
export const NameColumn: React.FC<NameProps> = (props) => {
|
||||
const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
|
||||
return (
|
||||
<Disclosure>
|
||||
|
||||
@@ -27,7 +27,7 @@ type AccountTypeProps = {
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export const NameColumn: React.FC<NameProps> = (props: any) => {
|
||||
export const NameColumn: React.FC<NameProps> = (props) => {
|
||||
const { rowData, workspaceSlug, isAdmin, currentUser, setRemoveMemberModal } = props;
|
||||
return (
|
||||
<Disclosure>
|
||||
|
||||
@@ -50,12 +50,12 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
|
||||
return (
|
||||
<>
|
||||
<div className="divide-y-[0.5px] divide-custom-border-100 overflow-scroll ">
|
||||
<WorkspaceMembersListItem memberDetails={memberDetails ?? []} />
|
||||
{searchedMemberIds?.length !== 0 && <WorkspaceMembersListItem memberDetails={memberDetails ?? []} />}
|
||||
{searchedInvitationsIds?.length === 0 && searchedMemberIds?.length === 0 && (
|
||||
<h4 className="mt-16 text-center text-sm text-custom-text-400">No matching members</h4>
|
||||
)}
|
||||
</div>
|
||||
{isAdmin && (
|
||||
{isAdmin && searchedInvitationsIds && searchedInvitationsIds.length > 0 && (
|
||||
<Collapsible
|
||||
isOpen={showPendingInvites}
|
||||
onToggle={() => setShowPendingInvites((prev) => !prev)}
|
||||
@@ -74,11 +74,9 @@ export const WorkspaceMembersList: FC<{ searchQuery: string; isAdmin: boolean }>
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="ml-auto items-center gap-1.5 rounded-md bg-custom-background-100 py-1.5">
|
||||
{searchedInvitationsIds && searchedInvitationsIds.length > 0
|
||||
? searchedInvitationsIds?.map((invitationId) => (
|
||||
<WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
|
||||
))
|
||||
: null}
|
||||
{searchedInvitationsIds?.map((invitationId) => (
|
||||
<WorkspaceInvitationsListItem key={invitationId} invitationId={invitationId} />
|
||||
))}
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Collapsible>
|
||||
|
||||
Reference in New Issue
Block a user