61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import type { ColumnDef } from "@tanstack/react-table";
|
|
import { useRef, useState } from "react";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import { DataTable, Button } from "@calcom/ui";
|
|
|
|
import CreateTeamDialog from "./CreateTeamDialog";
|
|
import GroupNameCell from "./GroupNameCell";
|
|
|
|
interface TeamGroupMapping {
|
|
name: string;
|
|
id: number;
|
|
groupNames: string[];
|
|
directoryId: string;
|
|
}
|
|
|
|
const GroupTeamMappingTable = () => {
|
|
const { t } = useLocale();
|
|
const [createTeamDialogOpen, setCreateTeamDialogOpen] = useState(false);
|
|
|
|
const { data } = trpc.viewer.dsync.teamGroupMapping.get.useQuery();
|
|
|
|
const tableContainerRef = useRef<HTMLDivElement>(null);
|
|
|
|
const columns: ColumnDef<TeamGroupMapping>[] = [
|
|
{
|
|
id: "name",
|
|
header: t("team"),
|
|
cell: ({ row }) => {
|
|
const { name } = row.original;
|
|
|
|
return <p>{name}</p>;
|
|
},
|
|
},
|
|
{
|
|
id: "group",
|
|
header: t("group_name"),
|
|
cell: ({ row }) => {
|
|
const { id, groupNames, directoryId } = row.original;
|
|
|
|
return <GroupNameCell groupNames={groupNames} teamId={id} directoryId={directoryId} />;
|
|
},
|
|
},
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<DataTable
|
|
data={data ? data.teamGroupMapping : []}
|
|
tableContainerRef={tableContainerRef}
|
|
columns={columns}
|
|
tableCTA={<Button onClick={() => setCreateTeamDialogOpen(true)}>Create team</Button>}
|
|
/>
|
|
<CreateTeamDialog open={createTeamDialogOpen} onOpenChange={setCreateTeamDialogOpen} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GroupTeamMappingTable;
|