style: member role visibility (#2919)

* style: member role visibility

* fix: build errors
This commit is contained in:
Lakhan Baheti 2023-11-28 17:11:04 +05:30 committed by GitHub
parent 3914a75334
commit 62c0615012
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -2,7 +2,17 @@ import React, { useEffect, useRef, useState } from "react";
import Image from "next/image";
import { useTheme } from "next-themes";
import { Listbox, Transition } from "@headlessui/react";
import { Control, Controller, FieldArrayWithId, UseFieldArrayRemove, useFieldArray, useForm } from "react-hook-form";
import {
Control,
Controller,
FieldArrayWithId,
UseFieldArrayRemove,
UseFormGetValues,
UseFormSetValue,
UseFormWatch,
useFieldArray,
useForm,
} from "react-hook-form";
import { Check, ChevronDown, Plus, XCircle } from "lucide-react";
// services
import { WorkspaceService } from "services/workspace.service";
@ -34,6 +44,7 @@ type Props = {
type EmailRole = {
email: string;
role: TUserWorkspaceRole;
role_active: boolean;
};
type FormValues = {
@ -44,6 +55,9 @@ type InviteMemberFormProps = {
index: number;
remove: UseFieldArrayRemove;
control: Control<FormValues, any>;
setValue: UseFormSetValue<FormValues>;
getValues: UseFormGetValues<FormValues>;
watch: UseFormWatch<FormValues>;
field: FieldArrayWithId<FormValues, "emails", "id">;
fields: FieldArrayWithId<FormValues, "emails", "id">[];
errors: any;
@ -53,9 +67,33 @@ type InviteMemberFormProps = {
// services
const workspaceService = new WorkspaceService();
const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
const placeholderEmails = [
"charlie.taylor@frstflit.com",
"octave.chanute@frstflit.com",
"george.spratt@frstflit.com",
"frank.coffyn@frstflit.com",
"amos.root@frstflit.com",
"edward.deeds@frstflit.com",
"charles.m.manly@frstflit.com",
"glenn.curtiss@frstflit.com",
"thomas.selfridge@frstflit.com",
"albert.zahm@frstflit.com",
];
const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
const { control, index, fields, remove, errors, isInvitationDisabled, setIsInvitationDisabled } = props;
const {
control,
index,
fields,
remove,
errors,
isInvitationDisabled,
setIsInvitationDisabled,
setValue,
getValues,
watch,
} = props;
const buttonRef = useRef<HTMLButtonElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);
@ -64,7 +102,34 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
useDynamicDropdownPosition(isDropdownOpen, () => setIsDropdownOpen(false), buttonRef, dropdownRef);
const email = watch(`emails.${index}.email`);
const emailOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
if (event.target.value === "") {
const validEmail = fields.map((_, i) => emailRegex.test(getValues(`emails.${i}.email`))).includes(true);
if (validEmail) {
setIsInvitationDisabled(false);
} else {
setIsInvitationDisabled(true);
}
if (getValues(`emails.${index}.role_active`)) {
setValue(`emails.${index}.role_active`, false);
}
} else {
if (!getValues(`emails.${index}.role_active`)) {
setValue(`emails.${index}.role_active`, true);
}
if (isInvitationDisabled && emailRegex.test(event.target.value)) {
setIsInvitationDisabled(false);
} else if (!isInvitationDisabled && !emailRegex.test(event.target.value)) {
setIsInvitationDisabled(true);
}
}
};
return (
<div>
<div className="group relative grid grid-cols-11 gap-4">
<div className="col-span-7 bg-onboarding-background-200 rounded-md">
<Controller
@ -72,7 +137,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
name={`emails.${index}.email`}
rules={{
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
value: emailRegex,
message: "Invalid Email ID",
},
}}
@ -83,34 +148,12 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
type="text"
value={value}
onChange={(event) => {
if (event.target.value === "") {
const validEmail = !fields
.filter((ele) => {
ele.id !== `emails.${index}.email`;
})
.map((ele) => ele.email)
.includes("");
if (validEmail) {
setIsInvitationDisabled(false);
} else {
setIsInvitationDisabled(true);
}
} else if (
isInvitationDisabled &&
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(event.target.value)
) {
setIsInvitationDisabled(false);
} else if (
!isInvitationDisabled &&
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(event.target.value)
) {
setIsInvitationDisabled(true);
}
emailOnChange(event);
onChange(event);
}}
ref={ref}
hasError={Boolean(errors.emails?.[index]?.email)}
placeholder="Enter their email..."
placeholder={placeholderEmails[index % placeholderEmails.length]}
className="text-xs sm:text-sm w-full h-12 placeholder:text-onboarding-text-400 border-onboarding-border-100"
/>
)}
@ -128,6 +171,7 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
onChange={(val) => {
onChange(val);
setIsDropdownOpen(false);
setValue(`emails.${index}.role_active`, true);
}}
className="flex-shrink-0 text-left w-full"
>
@ -137,9 +181,23 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
onClick={() => setIsDropdownOpen((prev) => !prev)}
className="flex items-center px-2.5 h-11 py-2 text-xs justify-between gap-1 w-full rounded-md duration-300"
>
<span className="text-xs text-onboarding-text-400 sm:text-sm">{ROLE[value]}</span>
<span
className={`text-xs ${
!getValues(`emails.${index}.role_active`)
? "text-onboarding-text-400"
: "text-onboarding-text-100"
} sm:text-sm`}
>
{ROLE[value]}
</span>
<ChevronDown className="h-4 w-4 stroke-onboarding-text-400" />
<ChevronDown
className={`h-4 w-4 ${
!getValues(`emails.${index}.role_active`)
? "stroke-onboarding-text-400"
: "stroke-onboarding-text-100"
}`}
/>
</Listbox.Button>
<Transition
@ -162,7 +220,8 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
key={key}
value={parseInt(key)}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${active || selected ? "bg-onboarding-background-400/40" : ""
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-onboarding-background-400/40" : ""
} ${selected ? "text-onboarding-text-100" : "text-custom-text-200"}`
}
>
@ -191,6 +250,13 @@ const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
</button>
)}
</div>
{email && !emailRegex.test(email) && (
<div className="">
<span className="text-sm">🤥</span>{" "}
<span className="text-xs text-red-500 mt-1">That doesn{"'"}t look like an email address.</span>
</div>
)}
</div>
);
};
@ -204,6 +270,9 @@ export const InviteMembers: React.FC<Props> = (props) => {
const {
control,
watch,
getValues,
setValue,
handleSubmit,
formState: { isSubmitting, errors, isValid },
} = useForm<FormValues>();
@ -229,7 +298,12 @@ export const InviteMembers: React.FC<Props> = (props) => {
payload = { emails: payload.emails.filter((email) => email.email !== "") };
await workspaceService
.inviteWorkspace(workspace.slug, payload)
.inviteWorkspace(workspace.slug, {
emails: payload.emails.map((email) => ({
email: email.email,
role: email.role,
})),
})
.then(async () => {
setToastAlert({
type: "success",
@ -249,16 +323,16 @@ export const InviteMembers: React.FC<Props> = (props) => {
};
const appendField = () => {
append({ email: "", role: 15 });
append({ email: "", role: 15, role_active: false });
};
useEffect(() => {
if (fields.length === 0) {
append(
[
{ email: "", role: 15 },
{ email: "", role: 15 },
{ email: "", role: 15 },
{ email: "", role: 15, role_active: false },
{ email: "", role: 15, role_active: false },
{ email: "", role: 15, role_active: false },
],
{
focusIndex: 0,
@ -325,6 +399,9 @@ export const InviteMembers: React.FC<Props> = (props) => {
<div className="space-y-3 sm:space-y-4 mb-3">
{fields.map((field, index) => (
<InviteMemberForm
watch={watch}
getValues={getValues}
setValue={setValue}
isInvitationDisabled={isInvitationDisabled}
setIsInvitationDisabled={(value: boolean) => setIsInvitationDisabled(value)}
control={control}