Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: ui and bugs #2289

Merged
merged 12 commits into from
Sep 28, 2023
Merged

fix: ui and bugs #2289

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
add6395
fix: 24 character limit on first & last name in onboarding page
dakshesh14 Sep 27, 2023
9357e14
fix: no option: 'Add Issue' in archive issue page
dakshesh14 Sep 27, 2023
0298248
fix: in archive issue directly sending to issue detail page
dakshesh14 Sep 27, 2023
edc7960
fix: issue type showing in archive issue
dakshesh14 Sep 27, 2023
f5d10e9
fix: custom menu overflowing
dakshesh14 Sep 27, 2023
0471828
fix: changing subscriber in filters has no effect
dakshesh14 Sep 27, 2023
ebcea2a
Merge branch 'develop' of https://github.com/makeplane/plane into fix…
dakshesh14 Sep 28, 2023
d9a4152
style: border in quick-add
dakshesh14 Sep 28, 2023
4e65d7d
fix: on onboarding member role overflowing
dakshesh14 Sep 28, 2023
36ca7e2
fix: inconsistent icons in issue detail
dakshesh14 Sep 28, 2023
4f303f5
style: spacing, borders and shadows in quick-add
dakshesh14 Sep 28, 2023
3fe432c
fix: custom menu truncate
dakshesh14 Sep 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: on onboarding member role overflowing
  • Loading branch information
@dakshesh14
dakshesh14 committed Sep 28, 2023
commit 4e65d7d736239c52d11a0b7861f93d31cf1e565b
225 changes: 155 additions & 70 deletions web/components/onboarding/invite-members.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
import React, { useEffect } from "react";
import React, { useEffect, useRef, useState } from "react";

// headless ui
import { Listbox, Transition } from "@headlessui/react";
// react-hook-form
import { Controller, useFieldArray, useForm } from "react-hook-form";
import {
Control,
Controller,
FieldArrayWithId,
UseFieldArrayRemove,
useFieldArray,
useForm,
} from "react-hook-form";
// services
import workspaceService from "services/workspace.service";
// hooks
import useToast from "hooks/use-toast";
// ui
import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
import { Input, PrimaryButton, SecondaryButton } from "components/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// icons
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { ChevronDownIcon } from "@heroicons/react/20/solid";
import { PlusIcon, XMarkIcon, CheckIcon } from "@heroicons/react/24/outline";
// types
import { ICurrentUserResponse, IWorkspace, TOnboardingSteps } from "types";
// constants
Expand All @@ -31,12 +43,136 @@ type FormValues = {
emails: EmailRole[];
};

export const InviteMembers: React.FC<Props> = ({
finishOnboarding,
stepChange,
user,
workspace,
}) => {
type InviteMemberFormProps = {
index: number;
remove: UseFieldArrayRemove;
control: Control<FormValues, any>;
field: FieldArrayWithId<FormValues, "emails", "id">;
fields: FieldArrayWithId<FormValues, "emails", "id">[];
errors: any;
};

const InviteMemberForm: React.FC<InviteMemberFormProps> = (props) => {
const { control, index, fields, remove, errors } = props;

const buttonRef = useRef<HTMLButtonElement>(null);
const dropdownRef = useRef<HTMLDivElement>(null);

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

useDynamicDropdownPosition(
isDropdownOpen,
() => setIsDropdownOpen(false),
buttonRef,
dropdownRef
);

return (
<div className="group relative grid grid-cols-11 gap-4">
<div className="col-span-7">
<Controller
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="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 }}
render={({ field: { value, onChange } }) => (
<Listbox
as="div"
value={value}
onChange={(val) => {
onChange(val);
setIsDropdownOpen(false);
}}
className="flex-shrink-0 text-left w-full"
>
<Listbox.Button
type="button"
ref={buttonRef}
onClick={() => setIsDropdownOpen((prev) => !prev)}
className="flex items-center px-2.5 py-2 text-xs justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none"
>
<span className="text-xs sm:text-sm">{ROLE[value]}</span>
<ChevronDownIcon className="h-3 w-3" aria-hidden="true" />
</Listbox.Button>

<Transition
show={isDropdownOpen}
as={React.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"
>
<Listbox.Options
ref={dropdownRef}
className="fixed w-36 z-10 border border-custom-border-300 mt-1 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none max-h-48"
>
<div className="space-y-1 p-2">
{Object.entries(ROLE).map(([key, value]) => (
<Listbox.Option
key={key}
value={parseInt(key)}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">{value}</div>
{selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
</div>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</Listbox>
)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
className="hidden group-hover:grid 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>
);
};

export const InviteMembers: React.FC<Props> = (props) => {
const { finishOnboarding, stepChange, user, workspace } = props;

const { setToastAlert } = useToast();

const {
Expand Down Expand Up @@ -109,66 +245,15 @@ export const InviteMembers: React.FC<Props> = ({
</div>
<div className="space-y-3 sm:space-y-4 mb-3 h-full overflow-y-auto">
{fields.map((field, index) => (
<div key={field.id} className="group relative grid grid-cols-11 gap-4">
<div className="col-span-7">
<Controller
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="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 }}
render={({ field: { value, onChange } }) => (
<CustomSelect
value={value}
label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
onChange={onChange}
width="w-full"
input
>
{Object.entries(ROLE).map(([key, value]) => (
<CustomSelect.Option key={key} value={parseInt(key)}>
{value}
</CustomSelect.Option>
))}
</CustomSelect>
)}
/>
</div>
{fields.length > 1 && (
<button
type="button"
className="hidden group-hover:grid 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>
<InviteMemberForm
control={control}
errors={errors}
field={field}
fields={fields}
index={index}
remove={remove}
key={field.id}
/>
))}
</div>
<button
Expand Down