Feature/move list to client (#50)
This commit is contained in:
Carl-Gerhard Lindesvärd
committed by
GitHub
GitHub
parent
c2abdaadf2
commit
668434d246
112
apps/dashboard/src/components/settings/invites/columns.tsx
Normal file
112
apps/dashboard/src/components/settings/invites/columns.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { TooltipComplete } from '@/components/tooltip-complete';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { api } from '@/trpc/client';
|
||||
import type { ColumnDef, Row } from '@tanstack/react-table';
|
||||
import { MoreHorizontalIcon } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { pathOr } from 'ramda';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import type { IServiceInvite, IServiceProject } from '@openpanel/db';
|
||||
|
||||
export function useColumns(
|
||||
projects: IServiceProject[]
|
||||
): ColumnDef<IServiceInvite>[] {
|
||||
return [
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Mail',
|
||||
cell: ({ row }) => (
|
||||
<div className="font-medium">{row.original.email}</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'role',
|
||||
header: 'Role',
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Created',
|
||||
cell: ({ row }) => (
|
||||
<TooltipComplete
|
||||
content={new Date(row.original.createdAt).toLocaleString()}
|
||||
>
|
||||
{new Date(row.original.createdAt).toLocaleDateString()}
|
||||
</TooltipComplete>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'access',
|
||||
header: 'Access',
|
||||
cell: ({ row }) => {
|
||||
const access = pathOr<string[]>([], ['meta', 'access'], row.original);
|
||||
return (
|
||||
<>
|
||||
{access.map((id) => {
|
||||
const project = projects.find((p) => p.id === id);
|
||||
if (!project) {
|
||||
return (
|
||||
<Badge key={id} className="mr-1">
|
||||
Unknown
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge key={id} color="blue" className="mr-1">
|
||||
{project.name}
|
||||
</Badge>
|
||||
);
|
||||
})}
|
||||
{access.length === 0 && (
|
||||
<Badge variant={'secondary'}>All projects</Badge>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
return <ActionCell row={row} />;
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
function ActionCell({ row }: { row: Row<IServiceInvite> }) {
|
||||
const router = useRouter();
|
||||
const revoke = api.organization.revokeInvite.useMutation({
|
||||
onSuccess() {
|
||||
toast.success(`Invite for ${row.original.email} revoked`);
|
||||
router.refresh();
|
||||
},
|
||||
onError() {
|
||||
toast.error(`Failed to revoke invite for ${row.original.email}`);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button icon={MoreHorizontalIcon} size="icon" variant={'outline'} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onClick={() => {
|
||||
revoke.mutate({ memberId: row.original.id });
|
||||
}}
|
||||
>
|
||||
Revoke invite
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
46
apps/dashboard/src/components/settings/invites/index.tsx
Normal file
46
apps/dashboard/src/components/settings/invites/index.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { FullPageEmptyState } from '@/components/full-page-empty-state';
|
||||
import { GanttChartIcon } from 'lucide-react';
|
||||
|
||||
import type { IServiceInvite, IServiceProject } from '@openpanel/db';
|
||||
|
||||
import { useColumns } from './columns';
|
||||
|
||||
type CommonProps = {
|
||||
projects: IServiceProject[];
|
||||
data: IServiceInvite[];
|
||||
};
|
||||
|
||||
type Props = CommonProps;
|
||||
|
||||
export const InvitesTable = ({ projects, data }: Props) => {
|
||||
const columns = useColumns(projects);
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (data?.length === 0) {
|
||||
return (
|
||||
<FullPageEmptyState title="No members here" icon={GanttChartIcon}>
|
||||
<p>Could not find any members</p>
|
||||
</FullPageEmptyState>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable data={data ?? []} columns={columns} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
140
apps/dashboard/src/components/settings/members/columns.tsx
Normal file
140
apps/dashboard/src/components/settings/members/columns.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
import { useState } from 'react';
|
||||
import { TooltipComplete } from '@/components/tooltip-complete';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ComboboxAdvanced } from '@/components/ui/combobox-advanced';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { api } from '@/trpc/client';
|
||||
import type { ColumnDef, Row } from '@tanstack/react-table';
|
||||
import { MoreHorizontalIcon } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
import type { IServiceMember, IServiceProject } from '@openpanel/db';
|
||||
|
||||
export function useColumns(projects: IServiceProject[]) {
|
||||
const columns: ColumnDef<IServiceMember>[] = [
|
||||
{
|
||||
accessorKey: 'user',
|
||||
header: 'Name',
|
||||
cell: ({ row }) => {
|
||||
const user = row.original.user;
|
||||
if (!user) return null;
|
||||
return [user.firstName, user.lastName].filter(Boolean).join(' ');
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: 'Email',
|
||||
cell: ({ row }) => {
|
||||
const user = row.original.user;
|
||||
if (!user) return null;
|
||||
return <div className="font-medium">{user.email}</div>;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'role',
|
||||
header: 'Role',
|
||||
},
|
||||
{
|
||||
accessorKey: 'createdAt',
|
||||
header: 'Created',
|
||||
cell: ({ row }) => (
|
||||
<TooltipComplete
|
||||
content={new Date(row.original.createdAt).toLocaleString()}
|
||||
>
|
||||
{new Date(row.original.createdAt).toLocaleDateString()}
|
||||
</TooltipComplete>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'access',
|
||||
header: 'Access',
|
||||
cell: ({ row }) => {
|
||||
return <AccessCell row={row} projects={projects} />;
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'actions',
|
||||
cell: ({ row }) => {
|
||||
return <ActionsCell row={row} />;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return columns;
|
||||
}
|
||||
|
||||
function AccessCell({
|
||||
row,
|
||||
projects,
|
||||
}: {
|
||||
row: Row<IServiceMember>;
|
||||
projects: IServiceProject[];
|
||||
}) {
|
||||
const [access, setAccess] = useState<string[]>(
|
||||
row.original.access.map((item) => item.projectId)
|
||||
);
|
||||
const mutation = api.organization.updateMemberAccess.useMutation();
|
||||
|
||||
return (
|
||||
<ComboboxAdvanced
|
||||
placeholder="Restrict access to projects"
|
||||
value={access}
|
||||
onChange={(newAccess) => {
|
||||
setAccess(newAccess);
|
||||
mutation.mutate({
|
||||
userId: row.original.user!.id,
|
||||
organizationSlug: row.original.organizationId,
|
||||
access: newAccess as string[],
|
||||
});
|
||||
}}
|
||||
items={projects.map((item) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ActionsCell({ row }: { row: Row<IServiceMember> }) {
|
||||
const router = useRouter();
|
||||
const revoke = api.organization.removeMember.useMutation({
|
||||
onSuccess() {
|
||||
toast.success(
|
||||
`${row.original.user?.firstName} has been removed from the organization`
|
||||
);
|
||||
router.refresh();
|
||||
},
|
||||
onError() {
|
||||
toast.error(
|
||||
`Failed to remove ${row.original.user?.firstName} from the organization`
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button icon={MoreHorizontalIcon} size="icon" variant={'outline'} />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem
|
||||
className="text-destructive"
|
||||
onClick={() => {
|
||||
revoke.mutate({
|
||||
organizationId: row.original.organizationId,
|
||||
userId: row.original.id,
|
||||
});
|
||||
}}
|
||||
>
|
||||
Remove member
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
);
|
||||
}
|
||||
46
apps/dashboard/src/components/settings/members/index.tsx
Normal file
46
apps/dashboard/src/components/settings/members/index.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
'use client';
|
||||
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { FullPageEmptyState } from '@/components/full-page-empty-state';
|
||||
import { GanttChartIcon } from 'lucide-react';
|
||||
|
||||
import type { IServiceMember, IServiceProject } from '@openpanel/db';
|
||||
|
||||
import { useColumns } from './columns';
|
||||
|
||||
type CommonProps = {
|
||||
projects: IServiceProject[];
|
||||
data: IServiceMember[];
|
||||
};
|
||||
|
||||
type Props = CommonProps;
|
||||
|
||||
export const MembersTable = ({ projects, data }: Props) => {
|
||||
const columns = useColumns(projects);
|
||||
|
||||
if (!data) {
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
<div className="card h-[74px] w-full animate-pulse items-center justify-between rounded-lg p-4"></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (data?.length === 0) {
|
||||
return (
|
||||
<FullPageEmptyState title="No members here" icon={GanttChartIcon}>
|
||||
<p>Could not find any members</p>
|
||||
</FullPageEmptyState>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataTable data={data ?? []} columns={columns} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user