108 lines
4.6 KiB
TypeScript
108 lines
4.6 KiB
TypeScript
import { CogIcon, TrashIcon, UsersIcon } from "@heroicons/react/outline";
|
|
import Dropdown from "../ui/Dropdown";
|
|
import { useState } from "react";
|
|
|
|
export default function TeamListItem(props) {
|
|
const [team, setTeam] = useState(props.team);
|
|
|
|
const acceptInvite = () => invitationResponse(true);
|
|
const declineInvite = () => invitationResponse(false);
|
|
|
|
const invitationResponse = (accept: boolean) =>
|
|
fetch("/api/user/membership", {
|
|
method: accept ? "PATCH" : "DELETE",
|
|
body: JSON.stringify({ teamId: props.team.id }),
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
}).then(() => {
|
|
// success
|
|
setTeam(null);
|
|
props.onChange();
|
|
});
|
|
|
|
return (
|
|
team && (
|
|
<li className="mb-2 mt-2 divide-y">
|
|
<div className="flex justify-between mb-2 mt-2">
|
|
<div>
|
|
<UsersIcon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -mt-4 mr-2 h-6 w-6 inline" />
|
|
<div className="inline-block -mt-1">
|
|
<span className="font-bold text-neutral-700 text-sm">{props.team.name}</span>
|
|
<span className="text-xs text-gray-400 -mt-1 block capitalize">
|
|
{props.team.role.toLowerCase()}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{props.team.role === "INVITEE" && (
|
|
<div>
|
|
<button
|
|
className="btn-sm bg-transparent text-green-500 border border-green-500 px-3 py-1 rounded-sm ml-2"
|
|
onClick={acceptInvite}>
|
|
Accept invitation
|
|
</button>
|
|
<button className="btn-sm bg-transparent px-2 py-1 ml-1">
|
|
<TrashIcon className="h-6 w-6 inline text-gray-400 -mt-1" onClick={declineInvite} />
|
|
</button>
|
|
</div>
|
|
)}
|
|
{props.team.role === "MEMBER" && (
|
|
<div>
|
|
<button
|
|
onClick={declineInvite}
|
|
className="btn-sm bg-transparent text-gray-400 border border-gray-400 px-3 py-1 rounded-sm ml-2">
|
|
Leave
|
|
</button>
|
|
</div>
|
|
)}
|
|
{props.team.role === "OWNER" && (
|
|
<div>
|
|
<Dropdown className="relative inline-block text-left">
|
|
<button className="btn-sm bg-transparent text-gray-400 px-3 py-1 rounded-sm ml-2">
|
|
<CogIcon className="h-6 w-6 inline text-gray-400" />
|
|
</button>
|
|
<ul
|
|
role="menu"
|
|
className="z-10 origin-top-right absolute right-0 w-36 rounded-sm shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
|
|
<li
|
|
className="text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
role="menuitem">
|
|
<button className="block px-4 py-2" onClick={() => props.onActionSelect("invite")}>
|
|
Invite members
|
|
</button>
|
|
</li>
|
|
<li
|
|
className="text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
role="menuitem">
|
|
<button className="block px-4 py-2" onClick={() => props.onActionSelect("edit")}>
|
|
Manage team
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</Dropdown>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{/*{props.team.userRole === 'Owner' && expanded && <div className="pt-2">
|
|
{props.team.members.length > 0 && <div>
|
|
<h2 className="text-lg font-medium text-gray-900 mb-1">Members</h2>
|
|
<table className="table-auto mb-2 w-full">
|
|
<tbody>
|
|
{props.team.members.map( (member) => <tr key={member.email}>
|
|
<td className="py-1 pl-2">Alex van Andel ({ member.email })</td>
|
|
<td>Owner</td>
|
|
<td className="text-right p-1">
|
|
<button className="btn-sm text-xs bg-transparent text-red-400 border border-red-400 px-3 py-1 rounded-sm ml-2"><UserRemoveIcon className="text-red-400 group-hover:text-gray-500 flex-shrink-0 -mt-1 mr-1 h-4 w-4 inline"/>Remove</button>
|
|
</td>
|
|
</tr>)}
|
|
</tbody>
|
|
</table>
|
|
</div>}
|
|
<button className="btn-sm bg-transparent text-gray-400 border border-gray-400 px-3 py-1 rounded-sm"><UserAddIcon className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -mt-1 h-6 w-6 inline"/> Invite member</button>
|
|
<button className="btn-sm bg-transparent text-red-400 border border-red-400 px-3 py-1 rounded-sm ml-2">Disband</button>
|
|
</div>}*/}
|
|
</li>
|
|
)
|
|
);
|
|
}
|