binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-1959]: Chore/settings member page (#5144)

Browse source 
* chore: implemented table component in ui library

* chore: added export in the UI package

* chore/member-page-revamp

* fix: added custom popover className

* fix: updated ui for projects

* fix: hide pending invites for members

* fix: added ee component

* removed unwanted logging

* fix: seperated components

* fix: used collapsible instead of disclosure

* fix: removed commented code

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
This commit is contained in:
Akshita Goyal 2024-07-18 13:02:22 +05:30 • committed by GitHub
parent 474d7ef3c0
commit fff27c60e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 758 additions and 491 deletions
Download patch file Download diff file Expand all files Collapse all files

75
web/ce/components/projects/settings/useProjectColumns.tsx Normal file
View file

@ -0,0 +1,75 @@
import { useState } from "react";
import { useParams } from "next/navigation";
import { IWorkspaceMember } from "@plane/types";
import { EUserProjectRoles } from "@plane/types/src/enums";
import { AccountTypeColumn, NameColumn } from "@/components/project/settings/member-columns";
import { EUserWorkspaceRoles } from "@/constants/workspace";
import { useUser } from "@/hooks/store";
interface RowData {
member: IWorkspaceMember;
role: EUserWorkspaceRoles;
}
const useProjectColumns = () => {
// states
const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
const { workspaceSlug, projectId } = useParams();
const {
membership: { currentProjectRole },
data: currentUser,
} = useUser();
const getFormattedDate = (dateStr: string) => {
const date = new Date(dateStr);
const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
return date.toLocaleDateString("en-US", options);
};
// derived values
const isAdmin = currentProjectRole === EUserProjectRoles.ADMIN;
const columns = [
{
key: "Full Name",
content: "Full Name",
thClassName: "text-left",
tdRender: (rowData: RowData) => (
<NameColumn
rowData={rowData}
workspaceSlug={workspaceSlug as string}
isAdmin={isAdmin}
currentUser={currentUser}
setRemoveMemberModal={setRemoveMemberModal}
/>
),
},
{
key: "Display Name",
content: "Display Name",
tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
},
{
key: "Account Type",
content: "Account Type",
tdRender: (rowData: RowData) => (
<AccountTypeColumn
rowData={rowData}
currentProjectRole={currentProjectRole}
projectId={projectId as string}
workspaceSlug={workspaceSlug as string}
/>
),
},
{
key: "Joining Date",
content: "Joining Date",
tdRender: (rowData: RowData) => <div>{getFormattedDate(rowData.member.joining_date)}</div>,
},
];
return { columns, workspaceSlug, projectId, removeMemberModal, setRemoveMemberModal };
};
export default useProjectColumns;

69
web/ce/components/workspace/settings/useMemberColumns.tsx Normal file
View file

@ -0,0 +1,69 @@
import { useState } from "react";
import { useParams } from "next/navigation";
import { AccountTypeColumn, NameColumn, RowData } from "@/components/workspace/settings/member-columns";
import { EUserWorkspaceRoles } from "@/constants/workspace";
import { useUser } from "@/hooks/store";
const useMemberColumns = () => {
// states
const [removeMemberModal, setRemoveMemberModal] = useState<RowData | null>(null);
const { workspaceSlug } = useParams();
const {
membership: { currentWorkspaceRole },
data: currentUser,
} = useUser();
const getFormattedDate = (dateStr: string) => {
const date = new Date(dateStr);
const options: Intl.DateTimeFormatOptions = { year: "numeric", month: "long", day: "numeric" };
return date.toLocaleDateString("en-US", options);
};
const isAdmin = currentWorkspaceRole === EUserWorkspaceRoles.ADMIN;
const columns = [
{
key: "Full Name",
content: "Full Name",
thClassName: "text-left",
tdRender: (rowData: RowData) => (
<NameColumn
rowData={rowData}
workspaceSlug={workspaceSlug as string}
isAdmin={isAdmin}
currentUser={currentUser}
setRemoveMemberModal={setRemoveMemberModal}
/>
),
},
{
key: "Display Name",
content: "Display Name",
tdRender: (rowData: RowData) => <div className="w-32">{rowData.member.display_name}</div>,
},
{
key: "Account Type",
content: "Account Type",
tdRender: (rowData: RowData) => (
<AccountTypeColumn
rowData={rowData}
currentWorkspaceRole={currentWorkspaceRole}
workspaceSlug={workspaceSlug as string}
/>
),
},
{
key: "Joining Date",
content: "Joining Date",
tdRender: (rowData: RowData) => <div>{getFormattedDate(rowData.member.joining_date)}</div>,
},
];
return { columns, workspaceSlug, removeMemberModal, setRemoveMemberModal };
};
export default useMemberColumns;