135 lines
4.7 KiB
TypeScript
135 lines
4.7 KiB
TypeScript
import { Fragment } from "react";
|
|
import { api } from "~/utils/api";
|
|
import { Menu, Transition } from "@headlessui/react";
|
|
import { HiMiniPlus } from "react-icons/hi2";
|
|
import { useFormik } from "formik";
|
|
|
|
interface MemberSelectorProps {
|
|
cardPublicId: string;
|
|
members: {
|
|
publicId: string;
|
|
user: {
|
|
id: string;
|
|
name: string | null;
|
|
};
|
|
selected: boolean;
|
|
}[];
|
|
}
|
|
|
|
export default function LabelSelector({
|
|
cardPublicId,
|
|
members,
|
|
}: MemberSelectorProps) {
|
|
const utils = api.useUtils();
|
|
|
|
const refetchCard = () => utils.card.byId.refetch({ id: cardPublicId });
|
|
|
|
const addOrRemoveMember = api.card.addOrRemoveMember.useMutation({
|
|
onSuccess: async () => {
|
|
await refetchCard();
|
|
},
|
|
});
|
|
|
|
const formik = useFormik({
|
|
initialValues: {
|
|
...Object.fromEntries(
|
|
members?.map((member) => [member.publicId, member.selected]) ?? [],
|
|
),
|
|
},
|
|
onSubmit: (values) => {
|
|
console.log({ values });
|
|
},
|
|
enableReinitialize: true,
|
|
});
|
|
|
|
const selectedMembers = members.filter((member) => member.selected);
|
|
|
|
return (
|
|
<>
|
|
<Menu
|
|
as="div"
|
|
className="relative flex w-full flex-wrap items-center text-left"
|
|
>
|
|
<Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
|
|
{selectedMembers.length ? (
|
|
<div className="isolate flex -space-x-1 overflow-hidden">
|
|
{selectedMembers.map((member) => (
|
|
<span
|
|
key={member.publicId}
|
|
className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
|
|
>
|
|
<span className="text-[10px] font-medium leading-none text-white">
|
|
{member.user?.name
|
|
? member.user?.name
|
|
.split(" ")
|
|
.map((namePart) => namePart.charAt(0).toUpperCase())
|
|
.join("")
|
|
: null}
|
|
</span>
|
|
</span>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<HiMiniPlus size={22} className="pr-2" />
|
|
{"Add member"}
|
|
</>
|
|
)}
|
|
</Menu.Button>
|
|
|
|
<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-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
|
|
<div className="p-2">
|
|
<form onSubmit={formik.handleSubmit}>
|
|
{members?.map((member) => (
|
|
<Menu.Item key={member.publicId}>
|
|
<div
|
|
key={member.publicId}
|
|
className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
|
|
onClick={async (e) => {
|
|
e.preventDefault();
|
|
await formik.setFieldValue(
|
|
member.publicId,
|
|
!formik.values[member.publicId],
|
|
);
|
|
|
|
addOrRemoveMember.mutate({
|
|
cardPublicId,
|
|
workspaceMemberPublicId: member.publicId,
|
|
});
|
|
|
|
await formik.submitForm();
|
|
}}
|
|
>
|
|
<input
|
|
id={member.publicId}
|
|
name={member.publicId}
|
|
type="checkbox"
|
|
className="h-[14px] w-[14px] rounded bg-transparent"
|
|
onClick={(event) => event.stopPropagation()}
|
|
onChange={formik.handleChange}
|
|
checked={formik.values[member.publicId]}
|
|
/>
|
|
<label htmlFor={member.publicId} className="ml-3 text-sm">
|
|
{member?.user?.name}
|
|
</label>
|
|
</div>
|
|
</Menu.Item>
|
|
))}
|
|
</form>
|
|
</div>
|
|
</Menu.Items>
|
|
</Transition>
|
|
</Menu>
|
|
</>
|
|
);
|
|
}
|