binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Merge conflicts resolved

Browse source
This commit is contained in:
Aaryan Khandelwal 2022-11-24 23:42:11 +05:30
parent dbf2a138b3
commit 8c7885cbfe
26 changed files with 1369 additions and 1025 deletions
Download patch file Download diff file Expand all files Collapse all files

98
components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx
View file

@ -1,24 +1,21 @@
import React, { useContext } from "react";
import React from "react";
// swr
import useSWR from "swr";
// react hook form
import { Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// service
import projectServices from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
// fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
// icons
import { CheckIcon } from "@heroicons/react/20/solid";
// types
import type { Control } from "react-hook-form";
import type { IIssue, WorkspaceMember } from "types";
import { UserIcon } from "@heroicons/react/24/outline";
import { SearchListbox } from "ui";
type Props = {
control: Control<IIssue, any>;
};
@ -38,86 +35,17 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
control={control}
name="assignees_list"
render={({ field: { value, onChange } }) => (
<Listbox
<SearchListbox
title="Assignees"
optionsFontsize="sm"
options={people?.map((person) => {
return { value: person.member.id, display: person.member.first_name };
})}
multiple={true}
value={value}
onChange={(data: any) => {
const valueCopy = [...(value ?? [])];
if (valueCopy.some((i) => i === data)) onChange(valueCopy.filter((i) => i !== data));
else onChange([...valueCopy, data]);
}}
>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300">
<UserIcon className="h-3 w-3" />
<span className="block truncate">
{value && value.length > 0
? value
.map(
(id) =>
people
?.find((i) => i.member.id === id)
?.member.email.substring(0, 4) + "..."
)
.join(", ")
: "Assignees"}
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{people?.map((person) => (
<Listbox.Option
key={person.member.id}
className={({ active }) =>
`${
active ? "text-white bg-theme" : "text-gray-900"
} cursor-pointer select-none relative p-2 rounded-md`
}
value={person.member.id}
>
{({ selected, active }) => (
<>
<span
className={`${
selected || (value ?? []).some((i) => i === person.member.id)
? "font-semibold"
: "font-normal"
} block truncate`}
>
{person.member.email}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active || (value ?? []).some((i) => i === person.member.id)
? "text-white"
: "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
onChange={onChange}
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
/>
)}
></Controller>
);

78
components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx
View file

@ -1,12 +1,8 @@
import React from "react";
// react hook form
import { Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks
import useUser from "lib/hooks/useUser";
// icons
import { CheckIcon } from "@heroicons/react/20/solid";
// types
import type { IIssue } from "types";
import type { Control } from "react-hook-form";
@ -16,12 +12,14 @@ type Props = {
control: Control<IIssue, any>;
};
import { SearchListbox } from "ui";
const SelectParent: React.FC<Props> = ({ control }) => {
const { issues: projectIssues } = useUser();
const getSelectedIssueKey = (issueId: string | undefined) => {
const identifier = projectIssues?.results?.find((i) => i.id.toString() === issueId?.toString())
?.project_detail.identifier;
?.project_detail?.identifier;
const sequenceId = projectIssues?.results?.find(
(i) => i.id.toString() === issueId?.toString()
@ -36,53 +34,29 @@ const SelectParent: React.FC<Props> = ({ control }) => {
control={control}
name="parent"
render={({ field: { value, onChange } }) => (
<Listbox as="div" value={value} onChange={onChange}>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300">
<UserIcon className="h-3 w-3 flex-shrink-0" />
<span className="block truncate">{getSelectedIssueKey(value?.toString())}</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 max-w-[15rem] rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{projectIssues?.results?.map((issue) => (
<Listbox.Option
key={issue.id}
value={issue.id}
className={({ active }) =>
`relative cursor-pointer select-none p-2 rounded-md ${
active ? "bg-theme text-white" : "text-gray-900"
}`
}
>
{({ active, selected }) => (
<>
<span className={`block truncate ${selected && "font-medium"}`}>
<span className="font-medium">
{issue.project_detail.identifier}-{issue.sequence_id}
</span>{" "}
{issue.name}
</span>
</>
)}
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
<SearchListbox
title="Parent issue"
optionsFontsize="sm"
options={projectIssues?.results?.map((issue) => {
return {
value: issue.id,
display: issue.name,
element: (
<div className="flex items-center space-x-3">
<div className="block truncate">
<span className="block truncate">{`${getSelectedIssueKey(issue.id)}`}</span>
<span className="block truncate text-gray-400">{issue.name}</span>
</div>
</div>
),
};
})}
value={value}
buttonClassName="max-h-30 overflow-y-scroll"
optionsClassName="max-h-30 overflow-y-scroll"
onChange={onChange}
icon={<UserIcon className="h-4 w-4 text-gray-400" />}
/>
)}
/>
);

3
components/project/issues/CreateUpdateIssueModal/SelectProject.tsx
View file

@ -6,8 +6,7 @@ import { Listbox, Transition } from "@headlessui/react";
// hooks
import useUser from "lib/hooks/useUser";
// icons
import { CheckIcon } from "@heroicons/react/20/solid";
import { ClipboardDocumentListIcon, Squares2X2Icon } from "@heroicons/react/24/outline";
import { ClipboardDocumentListIcon } from "@heroicons/react/24/outline";
// ui
import { Spinner } from "ui";
// types

119
components/project/issues/CreateUpdateIssueModal/SelectState.tsx
View file

@ -1,16 +1,12 @@
import React from "react";
// react hook form
import { Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks
import useUser from "lib/hooks/useUser";
// components
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
// icons
import { CheckIcon, PlusIcon } from "@heroicons/react/20/solid";
import { PlusIcon } from "@heroicons/react/20/solid";
// ui
import { Spinner } from "ui";
import { CustomListbox } from "ui";
// types
import type { Control } from "react-hook-form";
import type { IIssue } from "types";
@ -18,11 +14,10 @@ import { Squares2X2Icon } from "@heroicons/react/24/outline";
type Props = {
control: Control<IIssue, any>;
data?: IIssue;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
};
const SelectState: React.FC<Props> = ({ control, data, setIsOpen }) => {
const SelectState: React.FC<Props> = ({ control, setIsOpen }) => {
const { states } = useUser();
return (
@ -31,90 +26,30 @@ const SelectState: React.FC<Props> = ({ control, data, setIsOpen }) => {
control={control}
name="state"
render={({ field: { value, onChange } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300">
<Squares2X2Icon className="h-3 w-3" />
<span className="block truncate">
{states?.find((i) => i.id === value)?.name ?? "State"}
</span>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{states ? (
states.filter((i) => i.id !== data?.id).length > 0 ? (
states
.filter((i) => i.id !== data?.id)
.map((state) => (
<Listbox.Option
key={state.id}
className={({ active }) =>
`${
active ? "text-white bg-theme" : "text-gray-900"
} cursor-pointer select-none relative p-2 rounded-md`
}
value={state.id}
>
{({ selected, active }) => (
<>
<span
className={`${
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{state.name}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))
) : (
<p className="text-gray-400">No states found!</p>
)
) : (
<div className="flex justify-center">
<Spinner />
</div>
)}
</div>
<button
type="button"
className="select-none relative py-2 pl-3 pr-9 flex items-center gap-x-2 text-gray-400 hover:text-gray-500"
onClick={() => setIsOpen(true)}
>
<span>
<PlusIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
<span>
<span className="block truncate">Create state</span>
</span>
</button>
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
<CustomListbox
title="State"
options={states?.map((state) => {
return { value: state.id, display: state.name };
})}
value={value}
optionsFontsize="sm"
onChange={onChange}
icon={<Squares2X2Icon className="h-4 w-4 text-gray-400" />}
footerOption={
<button
type="button"
className="select-none relative py-2 pl-3 pr-9 flex items-center gap-x-2 text-gray-400 hover:text-gray-500"
onClick={() => setIsOpen(true)}
>
<span>
<PlusIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</span>
<span>
<span className="block truncate">Create state</span>
</span>
</button>
}
/>
)}
></Controller>
</>

75
components/project/issues/CreateUpdateIssueModal/index.tsx
View file

@ -1,10 +1,18 @@
import React, { useEffect, useState } from "react";
// next
import Link from "next/link";
import { useRouter } from "next/router";
// swr
import { mutate } from "swr";
// react hook form
import { useForm } from "react-hook-form";
// fetching keys
import { PROJECT_ISSUES_DETAILS, PROJECT_ISSUES_LIST, CYCLE_ISSUES } from "constants/fetch-keys";
import {
PROJECT_ISSUES_DETAILS,
PROJECT_ISSUES_LIST,
CYCLE_ISSUES,
USER_ISSUE,
} from "constants/fetch-keys";
// headless
import { Dialog, Transition } from "@headlessui/react";
// services
@ -15,7 +23,7 @@ import useToast from "lib/hooks/useToast";
// ui
import { Button, Input, TextArea } from "ui";
// commons
import { renderDateFormat } from "constants/common";
import { renderDateFormat, cosineSimilarity } from "constants/common";
// components
import SelectState from "./SelectState";
import SelectCycles from "./SelectCycles";
@ -55,6 +63,10 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
const [isCycleModalOpen, setIsCycleModalOpen] = useState(false);
const [isStateModalOpen, setIsStateModalOpen] = useState(false);
const [mostSimilarIssue, setMostSimilarIssue] = useState<string | undefined>();
const router = useRouter();
const handleClose = () => {
setIsOpen(false);
if (data) {
@ -69,7 +81,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
}, 500);
};
const { activeWorkspace, activeProject } = useUser();
const { activeWorkspace, activeProject, user, issues } = useUser();
const { setToastAlert } = useToast();
@ -165,6 +177,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
},
false
);
if (formData.sprints && formData.sprints !== null) {
await addIssueToSprint(res.id, formData.sprints, formData);
}
@ -175,6 +188,15 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
type: "success",
message: `Issue ${data ? "updated" : "created"} successfully`,
});
if (formData.assignees_list.some((assignee) => assignee === user?.id)) {
mutate<IIssue[]>(
USER_ISSUE,
(prevData) => {
return [res, ...(prevData ?? [])];
},
false
);
}
})
.catch((err) => {
Object.keys(err).map((key) => {
@ -235,6 +257,10 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
});
}, [data, prePopulateData, reset, projectId, activeProject, isOpen, watch]);
useEffect(() => {
return () => setMostSimilarIssue(undefined);
}, []);
return (
<>
{activeProject && (
@ -293,6 +319,13 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
label="Name"
name="name"
rows={1}
onChange={(e) => {
const value = e.target.value;
const similarIssue = issues?.results.find(
(i) => cosineSimilarity(i.name, value) > 0.7
);
setMostSimilarIssue(similarIssue?.id);
}}
className="resize-none"
placeholder="Enter name"
autoComplete="off"
@ -302,6 +335,42 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
required: "Name is required",
}}
/>
{mostSimilarIssue && (
<div className="flex items-center gap-x-2">
<p className="text-sm text-gray-500">
Did you mean{" "}
<button
type="button"
onClick={() => {
setMostSimilarIssue(undefined);
router.push(
`/projects/${activeProject?.id}/issues/${mostSimilarIssue}`
);
handleClose();
resetForm();
}}
>
<span className="italic">
{
issues?.results.find(
(issue) => issue.id === mostSimilarIssue
)?.name
}
</span>
</button>
?
</p>
<button
type="button"
className="text-sm text-blue-500"
onClick={() => {
setMostSimilarIssue(undefined);
}}
>
No
</button>
</div>
)}
</div>
<div>
<TextArea