shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: monorepo

Browse Source
This commit is contained in:
Henry
2024-12-12 14:34:10 +00:00
parent b8eed7a90c
commit 0c8d17dce5
370 changed files with 10280 additions and 39805 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
apps/web/src/views/members/components/DeleteMemberConfirmation.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { api } from "~/utils/api";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { useWorkspace } from "~/providers/workspace";
import Button from "~/components/Button";
export function DeleteMemberConfirmation() {
const utils = api.useUtils();
const { closeModal, entityLabel, entityId } = useModal();
const { workspace } = useWorkspace();
const { showPopup } = usePopup();
const deleteMember = api.member.delete.useMutation({
onSuccess: async () => {
closeModal();
try {
await utils.workspace.byId.refetch();
} catch (e) {
console.error(e);
}
},
onError: () => {
showPopup({
header: "Unable to remove member",
message: "Please try again later, or contact customer support.",
});
closeModal();
},
});
const handleDeleteMember = () => {
if (entityId)
deleteMember.mutate({
memberPublicId: entityId,
workspacePublicId: workspace.publicId,
});
};
return (
<div className="p-5">
<div className="flex w-full flex-col justify-between pb-4">
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
{`Are you sure want to remove ${entityLabel}?`}
</h2>
<p className="text-sm font-medium text-light-900 dark:text-dark-900">
{"They won't be able to access this workspace."}
</p>
</div>
<div className="mt-5 flex justify-end space-x-2 sm:mt-6">
<Button onClick={() => closeModal()} variant="secondary">
Cancel
</Button>
<Button onClick={handleDeleteMember} isLoading={deleteMember.isPending}>
Remove
</Button>
</div>
</div>
);
}

71
apps/web/src/views/members/components/InviteMemberForm.tsx Normal file
View File

@@ -0,0 +1,71 @@
import { useForm } from "react-hook-form";
import { HiXMark } from "react-icons/hi2";
import { type InviteMemberInput } from "@kan/api/types";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { api } from "~/utils/api";
export function InviteMemberForm() {
const utils = api.useUtils();
const { closeModal } = useModal();
const { workspace } = useWorkspace();
const { register, handleSubmit } = useForm<InviteMemberInput>({
defaultValues: {
email: "",
workspacePublicId: workspace?.publicId || "",
},
});
const refetchBoards = () => utils.board.all.refetch();
const createBoard = api.member.invite.useMutation({
onSuccess: async () => {
closeModal();
await utils.workspace.byId.refetch();
await refetchBoards();
},
});
const onSubmit = (data: InviteMemberInput) => {
createBoard.mutate(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="px-5 pt-5">
<div className="text-neutral-9000 flex w-full items-center justify-between pb-4 dark:text-dark-1000">
<h2 className="text-sm font-bold">Add member</h2>
<button
className="hover:bg-li ght-300 rounded p-1 focus:outline-none dark:hover:bg-dark-300"
onClick={(e) => {
e.preventDefault();
closeModal();
}}
>
<HiXMark size={18} className="dark:text-dark-9000 text-light-900" />
</button>
</div>
<input
id="email"
placeholder="Email"
{...register("email", { required: true })}
className="block w-full rounded-md border-0 bg-white/5 py-1.5 text-neutral-900 placeholder-dark-800 shadow-sm ring-1 ring-inset ring-light-600 focus:ring-2 focus:ring-inset focus:ring-light-600 dark:bg-dark-300 dark:text-dark-1000 dark:ring-dark-700 dark:focus:ring-dark-700 sm:text-sm sm:leading-6"
/>
</div>
<div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
<div>
<button
type="submit"
className="inline-flex w-full justify-center rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 shadow-sm focus-visible:outline-none dark:bg-dark-1000 dark:text-dark-50"
>
Invite member
</button>
</div>
</div>
</form>
);
}

42
apps/web/src/views/members/components/MemberDropdown.tsx Normal file
View File

@@ -0,0 +1,42 @@
import { Fragment } from "react";
import { Menu, Transition } from "@headlessui/react";
import { HiEllipsisVertical } from "react-icons/hi2";
export default function MemberDropdown() {
return (
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button
type="button"
className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-transparent text-dark-900 focus:outline-none "
>
<span className="sr-only">Open options</span>
<HiEllipsisVertical className="h-5 w-5" aria-hidden="true" />
</Menu.Button>
</div>
<Transition
as={Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md border border-dark-400 bg-dark-200 shadow-sm ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="flex flex-col">
<Menu.Item>
<button
// onClick={}
className="m-1 flex items-center rounded-[5px] px-3 py-2 text-left text-xs text-dark-1000 hover:bg-dark-400"
>
Remove
</button>
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
);
}

222
apps/web/src/views/members/index.tsx Normal file
View File

@@ -0,0 +1,222 @@
import { HiOutlinePlusSmall, HiEllipsisHorizontal } from "react-icons/hi2";
import { twMerge } from "tailwind-merge";
import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace";
import { PageHead } from "~/components/PageHead";
import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { InviteMemberForm } from "./components/InviteMemberForm";
import { DeleteMemberConfirmation } from "./components/DeleteMemberConfirmation";
import Dropdown from "~/components/Dropdown";
import { api } from "~/utils/api";
import { getInitialsFromName, inferInitialsFromEmail } from "~/utils/helpers";
export default function MembersPage() {
const { modalContentType, openModal } = useModal();
const { workspace } = useWorkspace();
const { data, isLoading } = api.workspace.byId.useQuery(
{ workspacePublicId: workspace.publicId },
// { enabled: workspace?.publicId ? true : false },
);
const TableRow = ({
memberPublicId,
memberName,
memberEmail,
memberRole,
memberStatus,
isLastRow,
showSkeleton,
}: {
memberPublicId?: string;
memberName?: string | null | undefined;
memberEmail?: string | null | undefined;
memberRole?: string;
memberStatus?: string;
isLastRow?: boolean;
showSkeleton?: boolean;
}) => {
const initials = memberName
? getInitialsFromName(memberName)
: inferInitialsFromEmail(memberEmail ?? "");
return (
<tr className="rounded-b-lg">
<td className={twMerge("w-[65%]", isLastRow ? "rounded-bl-lg" : "")}>
<div className="flex items-center p-4">
<div className="flex-shrink-0">
<span
className={twMerge(
"inline-flex h-9 w-9 items-center justify-center rounded-full bg-light-1000 dark:bg-dark-400",
showSkeleton && "animate-pulse bg-light-200 dark:bg-dark-200",
)}
>
<span className="text-sm font-medium leading-none text-white">
{initials}
</span>
</span>
</div>
<div className="ml-2 min-w-0 flex-1">
<div>
<div className="flex items-center">
<p
className={twMerge(
"mr-2 text-sm font-medium text-neutral-900 dark:text-dark-1000",
showSkeleton &&
"md mb-2 h-3 w-[125px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
)}
>
{memberName}
</p>
</div>
<p
className={twMerge(
"truncate text-sm text-dark-900",
showSkeleton &&
"h-3 w-[175px] animate-pulse rounded-sm bg-light-200 dark:bg-dark-200",
)}
>
{memberEmail}
</p>
</div>
</div>
</div>
</td>
<td
className={twMerge(
"w-[35%] min-w-[150px]",
isLastRow && "rounded-br-lg",
)}
>
<div className="flex w-full items-center justify-between px-3">
<div>
<span
className={twMerge(
"inline-flex items-center rounded-md bg-emerald-500/10 px-1.5 py-0.5 text-[11px] font-medium text-emerald-400 ring-1 ring-inset ring-emerald-500/20",
showSkeleton &&
"h-5 w-[50px] animate-pulse bg-light-200 ring-0 dark:bg-dark-200",
)}
>
{memberRole &&
memberRole.charAt(0).toUpperCase() + memberRole.slice(1)}
</span>
{memberStatus === "invited" && (
<span className="ml-2 inline-flex items-center rounded-md bg-gray-500/10 px-1.5 py-0.5 text-[11px] font-medium text-gray-400 ring-1 ring-inset ring-gray-500/20">
Pending
</span>
)}
</div>
<div className={twMerge("relative", showSkeleton && "hidden")}>
<Dropdown
items={[
{
label: "Remove member",
action: () =>
openModal(
"REMOVE_MEMBER",
memberPublicId,
memberEmail ?? "",
),
},
]}
>
<HiEllipsisHorizontal
size={25}
className="text-light-900 dark:text-dark-900"
/>
</Dropdown>
</div>
</div>
</td>
</tr>
);
};
return (
<>
<PageHead title={`Members | ${workspace?.name ?? "Workspace"}`} />
<div className="px-28 py-12">
<div className="mb-8 flex w-full justify-between">
<h1 className="font-medium tracking-tight text-neutral-900 dark:text-dark-1000 sm:text-[1.2rem]">
Members
</h1>
<div className="flex">
<button
type="button"
className="flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"
onClick={() => openModal("INVITE_MEMBER")}
>
<div className="h-5 w-5 items-center">
<HiOutlinePlusSmall
className="-mr-0.5 h-5 w-5"
aria-hidden="true"
/>
</div>
Invite
</button>
</div>
</div>
<div className="mt-8 flow-root">
<div className="-mx-4 -my-2 overflow-x-visible sm:-mx-6 lg:-mx-8">
<div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
<div className="h-full shadow ring-1 ring-black ring-opacity-5 sm:rounded-lg">
<table className="min-w-full divide-y divide-light-600 dark:divide-dark-600">
<thead className="rounded-t-lg bg-light-300 dark:bg-dark-200">
<tr>
<th
scope="col"
className="w-[65%] rounded-tl-lg py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-light-900 dark:text-dark-900 sm:pl-6"
>
User
</th>
<th
scope="col"
className="w-[35%] rounded-tr-lg px-3 py-3.5 text-left text-sm font-semibold text-light-900 dark:text-dark-900"
>
Role
</th>
</tr>
</thead>
<tbody className="divide-y divide-light-600 bg-light-50 dark:divide-dark-600 dark:bg-dark-100">
{!isLoading &&
data?.members.map((member, index) => (
<TableRow
key={member.publicId}
memberPublicId={member.publicId}
memberName={member?.user?.name}
memberEmail={member?.user?.email}
memberRole={member.role}
memberStatus={member.status}
isLastRow={index === data.members.length - 1}
/>
))}
{isLoading && (
<>
<TableRow showSkeleton />
<TableRow showSkeleton />
<TableRow showSkeleton isLastRow />
</>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
<Modal>
{modalContentType === "NEW_WORKSPACE" && <NewWorkspaceForm />}
{modalContentType === "INVITE_MEMBER" && <InviteMemberForm />}
{modalContentType === "REMOVE_MEMBER" && <DeleteMemberConfirmation />}
</Modal>
</div>
</>
);
}