diff --git a/src/pages/(admin)/Lists/GroupList.tsx b/src/pages/(admin)/Lists/GroupList.tsx index 3f7c1a6a..993f56da 100644 --- a/src/pages/(admin)/Lists/GroupList.tsx +++ b/src/pages/(admin)/Lists/GroupList.tsx @@ -173,14 +173,13 @@ const CreatePanel = ({user, users, group, onClose}: CreateDialogProps) => { control: (styles) => ({ ...styles, backgroundColor: "white", - borderRadius: "999px", padding: "1rem 1.5rem", zIndex: "40", }), }} /> {user.type !== "teacher" && ( - )} @@ -204,6 +203,7 @@ const filterTypes = ["corporate", "teacher", "mastercorporate"]; export default function GroupList({user}: {user: User}) { const [isCreating, setIsCreating] = useState(false); const [editingGroup, setEditingGroup] = useState(); + const [viewingAllParticipants, setViewingAllParticipants] = useState(); const {permissions} = usePermissions(user?.id || ""); @@ -254,11 +254,29 @@ export default function GroupList({user}: {user: User}) { }), columnHelper.accessor("participants", { header: "Participants", - cell: (info) => - info - .getValue() - .map((x) => users.find((y) => y.id === x)?.name) - .join(", "), + cell: (info) => ( + + {info + .getValue() + .slice(0, viewingAllParticipants === info.row.original.id ? undefined : 5) + .map((x) => users.find((y) => y.id === x)?.name) + .join(", ")} + {info.getValue().length > 5 && viewingAllParticipants !== info.row.original.id && ( + + )} + {info.getValue().length > 5 && viewingAllParticipants === info.row.original.id && ( + + )} + + ), }), { header: "",