feat: workspace member bulk invite (#1530)

* feat: workspace member bulk invite

* style: invite dropdown styling
This commit is contained in:
Anmol Singh Bhatia 2023-07-25 15:42:52 +05:30 committed by GitHub
parent 2bb842367f
commit 9b531aca47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 155 additions and 94 deletions

View File

@ -71,7 +71,6 @@ const SendProjectInvitationModal: React.FC<Props> = ({ isOpen, setIsOpen, member
const { const {
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
reset, reset,
handleSubmit, handleSubmit,
control, control,

View File

@ -1,23 +1,19 @@
import React from "react"; import React, { useEffect } from "react";
import { mutate } from "swr";
// react-hook-form // react-hook-form
import { Controller, useForm } from "react-hook-form"; import { Controller, useFieldArray, useForm } from "react-hook-form";
// headless // headless
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// services // services
import workspaceService from "services/workspace.service"; import workspaceService from "services/workspace.service";
// contexts
import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui"; import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
// icons
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
// types // types
import { ICurrentUserResponse, IWorkspaceMemberInvitation } from "types"; import { ICurrentUserResponse, IWorkspace, IWorkspaceMemberInvitation } from "types";
// fetch-keys
import { WORKSPACE_INVITATIONS } from "constants/fetch-keys";
// constants // constants
import { ROLE } from "constants/workspace"; import { ROLE } from "constants/workspace";
@ -25,60 +21,92 @@ type Props = {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
workspace_slug: string; workspace_slug: string;
members: any[];
user: ICurrentUserResponse | undefined; user: ICurrentUserResponse | undefined;
}; };
const defaultValues: Partial<IWorkspaceMemberInvitation> = { type EmailRole = {
email: string;
role: 5 | 10 | 15 | 20;
};
type FormValues = {
emails: EmailRole[];
};
const defaultValues: FormValues = {
emails: [
{
email: "", email: "",
role: 5, role: 15,
},
],
}; };
const SendWorkspaceInvitationModal: React.FC<Props> = ({ const SendWorkspaceInvitationModal: React.FC<Props> = ({
isOpen, isOpen,
setIsOpen, setIsOpen,
workspace_slug, workspace_slug,
members,
user, user,
}) => { }) => {
const { setToastAlert } = useToast();
const { memberDetails } = useWorkspaceMyMembership();
const { const {
control, control,
register,
formState: { errors, isSubmitting },
handleSubmit,
reset, reset,
} = useForm<IWorkspaceMemberInvitation>({ handleSubmit,
defaultValues, formState: { isSubmitting, errors },
reValidateMode: "onChange", } = useForm<FormValues>();
const { fields, append, remove } = useFieldArray({
control,
name: "emails",
}); });
const { setToastAlert } = useToast();
const handleClose = () => { const handleClose = () => {
setIsOpen(false); setIsOpen(false);
const timeout = setTimeout(() => {
reset(defaultValues); reset(defaultValues);
clearTimeout(timeout);
}, 500);
}; };
const onSubmit = async (formData: IWorkspaceMemberInvitation) => { const onSubmit = async (formData: FormValues) => {
if (!workspace_slug) return;
const payload = { ...formData };
await workspaceService await workspaceService
.inviteWorkspace(workspace_slug, { emails: [formData] }, user) .inviteWorkspace(workspace_slug, payload, user)
.then((res) => { .then(async (res) => {
setIsOpen(false); setIsOpen(false);
handleClose(); handleClose();
mutate(WORKSPACE_INVITATIONS, (prevData: any) => [
{ ...res, ...formData },
...(prevData ?? []),
]);
setToastAlert({ setToastAlert({
type: "success", type: "success",
title: "Success!", title: "Success!",
message: "Member invited successfully.", message: "Invitations sent successfully.",
}); });
}) })
.catch((err) => console.log(err)); .catch((err) => {
setToastAlert({
type: "error",
title: "Error!",
message: `${err.error}`,
});
console.log(err);
})
.finally(() => reset(defaultValues));
}; };
const appendField = () => {
append({ email: "", role: 15 });
};
useEffect(() => {
if (fields.length === 0) {
append([{ email: "", role: 15 }]);
}
}, [fields, append]);
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-20" onClose={handleClose}> <Dialog as="div" className="relative z-20" onClose={handleClose}>
@ -91,11 +119,11 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<div className="fixed inset-0 bg-[#131313] bg-opacity-50 transition-opacity" /> <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
</Transition.Child> </Transition.Child>
<div className="fixed inset-0 z-20 overflow-y-auto"> <div className="fixed inset-0 z-20 overflow-y-auto">
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0"> <div className="flex items-center justify-center min-h-full p-4 text-center">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -105,73 +133,108 @@ const SendWorkspaceInvitationModal: React.FC<Props> = ({
leaveFrom="opacity-100 translate-y-0 sm:scale-100" leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
> >
<Dialog.Panel className="relative transform rounded-lg bg-custom-background-90 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl"> <Dialog.Panel className="relative transform rounded-lg border border-custom-border-100 bg-custom-background-100 p-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl opacity-100 translate-y-0 sm:scale-100">
<form onSubmit={handleSubmit(onSubmit)}> <form
onSubmit={handleSubmit(onSubmit)}
onKeyDown={(e) => {
if (e.code === "Enter") e.preventDefault();
}}
>
<div className="space-y-5"> <div className="space-y-5">
<div>
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium leading-6 text-custom-text-100" className="text-lg font-medium leading-6 text-custom-text-100"
> >
Members Invite people to collaborate
</Dialog.Title> </Dialog.Title>
<div className="mt-2">
<p className="text-sm text-custom-text-200"> <p className="text-sm text-custom-text-200">
Invite members to work on your workspace. Invite members to work on your workspace.
</p> </p>
</div> </div>
<div className="space-y-3">
<div> <div className="space-y-4 mb-3">
<Input {fields.map((field, index) => (
id="email" <div key={field.id} className="group relative grid grid-cols-11 gap-4">
label="Email" <div className="col-span-7">
name="email"
type="email"
placeholder="Enter email"
error={errors.email}
register={register}
validations={{
required: "Email is required",
validate: (value) => {
if (members.find((member) => member.email === value))
return "Email already exist";
},
}}
/>
</div>
<div>
<Controller <Controller
control={control} control={control}
name={`emails.${index}.email`}
rules={{
required: "Email ID is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: "Invalid Email ID",
},
}}
render={({ field }) => (
<>
<Input
{...field}
className="text-xs sm:text-sm"
placeholder="Enter their email..."
/>
{errors.emails?.[index]?.email && (
<span className="ml-1 text-red-500 text-xs">
{errors.emails?.[index]?.email?.message}
</span>
)}
</>
)}
/>
</div>
<div className="col-span-3">
<Controller
control={control}
name={`emails.${index}.role`}
rules={{ required: true }} rules={{ required: true }}
name="role"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<CustomSelect <CustomSelect
value={value} value={value}
label={ROLE[value]} label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange} onChange={onChange}
width="w-full" width="w-full"
input input
> >
{Object.entries(ROLE).map(([key, value]) => { {Object.entries(ROLE).map(([key, value]) => (
if (parseInt(key) > (memberDetails?.role ?? 5)) return null; <CustomSelect.Option key={key} value={parseInt(key)}>
return (
<CustomSelect.Option key={key} value={key}>
{value} {value}
</CustomSelect.Option> </CustomSelect.Option>
); ))}
})}
</CustomSelect> </CustomSelect>
)} )}
/> />
</div> </div>
{fields.length > 1 && (
<button
type="button"
className="self-center place-items-center rounded -ml-3"
onClick={() => remove(index)}
>
<XMarkIcon className="h-3.5 w-3.5 text-custom-text-200" />
</button>
)}
</div>
))}
</div> </div>
</div> </div>
<div className="mt-5 flex justify-end gap-2">
<div className="mt-5 flex items-center justify-between gap-2">
<button
type="button"
className="flex items-center gap-2 outline-custom-primary bg-transparent text-custom-primary text-sm font-medium py-2 pr-3"
onClick={appendField}
>
<PlusIcon className="h-4 w-4" />
Add more
</button>
<div className="flex items-center gap-2">
<SecondaryButton onClick={handleClose}>Cancel</SecondaryButton> <SecondaryButton onClick={handleClose}>Cancel</SecondaryButton>
<PrimaryButton type="submit" loading={isSubmitting}> <PrimaryButton type="submit" loading={isSubmitting}>
{isSubmitting ? "Sending Invitation..." : "Send Invitation"} {isSubmitting ? "Sending Invitation..." : "Send Invitation"}
</PrimaryButton> </PrimaryButton>
</div> </div>
</div>
</form> </form>
</Dialog.Panel> </Dialog.Panel>
</Transition.Child> </Transition.Child>

View File

@ -144,7 +144,6 @@ const MembersSettings: NextPage = () => {
isOpen={inviteModal} isOpen={inviteModal}
setIsOpen={setInviteModal} setIsOpen={setInviteModal}
workspace_slug={workspaceSlug as string} workspace_slug={workspaceSlug as string}
members={members}
user={user} user={user}
/> />
<div className="p-8"> <div className="p-8">