Merge pull request #4 from dakshesh14/main

feat: edit state, help button, loader while login in
This commit is contained in:
Vamsi Kurama 2022-11-25 00:25:42 +05:30 committed by GitHub
commit 2d081d3582
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
29 changed files with 956 additions and 557 deletions

View File

@ -5,18 +5,18 @@ import { useRouter } from "next/router";
import { Combobox, Dialog, Transition } from "@headlessui/react"; import { Combobox, Dialog, Transition } from "@headlessui/react";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
import useTheme from "lib/hooks/useTheme";
import useToast from "lib/hooks/useToast";
// icons // icons
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid"; import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
import { DocumentPlusIcon, FolderPlusIcon, FolderIcon } from "@heroicons/react/24/outline"; import { DocumentPlusIcon, FolderPlusIcon, FolderIcon } from "@heroicons/react/24/outline";
// commons // commons
import { classNames } from "constants/common"; import { classNames, copyTextToClipboard } from "constants/common";
// components // components
import ShortcutsModal from "components/command-palette/shortcuts"; import ShortcutsModal from "components/command-palette/shortcuts";
import CreateProjectModal from "components/project/CreateProjectModal"; import CreateProjectModal from "components/project/CreateProjectModal";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal"; import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
// hooks
import useTheme from "lib/hooks/useTheme";
// types // types
import { IIssue } from "types"; import { IIssue } from "types";
type ItemType = { type ItemType = {
@ -40,6 +40,8 @@ const CommandPalette: React.FC = () => {
const { toggleCollapsed } = useTheme(); const { toggleCollapsed } = useTheme();
const { setToastAlert } = useToast();
const filteredIssues: IIssue[] = const filteredIssues: IIssue[] =
query === "" query === ""
? issues?.results ?? [] ? issues?.results ?? []
@ -72,7 +74,7 @@ const CommandPalette: React.FC = () => {
const handleKeyDown = useCallback( const handleKeyDown = useCallback(
(e: KeyboardEvent) => { (e: KeyboardEvent) => {
if (e.key === "/") { if (e.ctrlKey && e.key === "/") {
e.preventDefault(); e.preventDefault();
setIsPaletteOpen(true); setIsPaletteOpen(true);
} else if (e.ctrlKey && e.key === "i") { } else if (e.ctrlKey && e.key === "i") {
@ -90,9 +92,28 @@ const CommandPalette: React.FC = () => {
} else if (e.ctrlKey && e.key === "q") { } else if (e.ctrlKey && e.key === "q") {
e.preventDefault(); e.preventDefault();
setIsCreateCycleModalOpen(true); setIsCreateCycleModalOpen(true);
} else if (e.ctrlKey && e.altKey && e.key === "c") {
e.preventDefault();
if (!router.query.issueId) return;
const url = new URL(window.location.href);
copyTextToClipboard(url.href)
.then(() => {
setToastAlert({
type: "success",
title: "Copied to clipboard",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Some error occurred",
});
});
} }
}, },
[toggleCollapsed] [toggleCollapsed, setToastAlert, router]
); );
useEffect(() => { useEffect(() => {

View File

@ -59,7 +59,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{ {
title: "Navigation", title: "Navigation",
shortcuts: [ shortcuts: [
{ key: "/", description: "To open navigator" }, { key: "Ctrl + /", description: "To open navigator" },
{ key: "↑", description: "Move up" }, { key: "↑", description: "Move up" },
{ key: "↓", description: "Move down" }, { key: "↓", description: "Move down" },
{ key: "←", description: "Move left" }, { key: "←", description: "Move left" },
@ -75,6 +75,10 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
{ key: "Ctrl + i", description: "To open create issue modal" }, { key: "Ctrl + i", description: "To open create issue modal" },
{ key: "Ctrl + q", description: "To open create cycle modal" }, { key: "Ctrl + q", description: "To open create cycle modal" },
{ key: "Ctrl + h", description: "To open shortcuts guide" }, { key: "Ctrl + h", description: "To open shortcuts guide" },
{
key: "Ctrl + alt + c",
description: "To copy issue url when on issue detail page.",
},
], ],
}, },
].map(({ title, shortcuts }) => ( ].map(({ title, shortcuts }) => (

View File

@ -92,7 +92,6 @@ const CreateProjectModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
const checkIdentifier = (slug: string, value: string) => { const checkIdentifier = (slug: string, value: string) => {
projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => { projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
console.log(response); console.log(response);
if (response.exists) setError("identifier", { message: "Identifier already exists" }); if (response.exists) setError("identifier", { message: "Identifier already exists" });
}); });
}; };

View File

@ -130,11 +130,11 @@ const SprintView: React.FC<Props> = ({
<span <span
className="text-black rounded px-2 py-0.5 text-sm border" className="text-black rounded px-2 py-0.5 text-sm border"
style={{ style={{
backgroundColor: `${issue.issue_details.state_detail.color}20`, backgroundColor: `${issue.issue_details.state_detail?.color}20`,
borderColor: issue.issue_details.state_detail.color, borderColor: issue.issue_details.state_detail?.color,
}} }}
> >
{issue.issue_details.state_detail.name} {issue.issue_details.state_detail?.name}
</span> </span>
<div className="relative"> <div className="relative">
<Menu> <Menu>

View File

@ -22,9 +22,9 @@ import { ChevronDownIcon } from "@heroicons/react/24/outline";
import type { IState } from "types"; import type { IState } from "types";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
projectId: string; projectId: string;
data?: IState; data?: IState;
handleClose: () => void;
}; };
const defaultValues: Partial<IState> = { const defaultValues: Partial<IState> = {
@ -33,14 +33,9 @@ const defaultValues: Partial<IState> = {
color: "#000000", color: "#000000",
}; };
const CreateUpdateStateModal: React.FC<Props> = ({ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
isOpen, const onClose = () => {
setIsOpen, handleClose();
data,
projectId,
}) => {
const handleClose = () => {
setIsOpen(false);
const timeout = setTimeout(() => { const timeout = setTimeout(() => {
reset(defaultValues); reset(defaultValues);
clearTimeout(timeout); clearTimeout(timeout);
@ -70,12 +65,8 @@ const CreateUpdateStateModal: React.FC<Props> = ({
await stateService await stateService
.createState(activeWorkspace.slug, projectId, payload) .createState(activeWorkspace.slug, projectId, payload)
.then((res) => { .then((res) => {
mutate<IState[]>( mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
STATE_LIST(projectId), onClose();
(prevData) => [...(prevData ?? []), res],
false
);
handleClose();
}) })
.catch((err) => { .catch((err) => {
Object.keys(err).map((key) => { Object.keys(err).map((key) => {
@ -101,7 +92,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
}, },
false false
); );
handleClose(); onClose();
}) })
.catch((err) => { .catch((err) => {
Object.keys(err).map((key) => { Object.keys(err).map((key) => {
@ -115,16 +106,15 @@ const CreateUpdateStateModal: React.FC<Props> = ({
useEffect(() => { useEffect(() => {
if (data) { if (data) {
setIsOpen(true);
reset(data); reset(data);
} else { } else {
reset(defaultValues); reset(defaultValues);
} }
}, [data, setIsOpen, reset]); }, [data, reset]);
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={handleClose}> <Dialog as="div" className="relative z-10" onClose={onClose}>
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"
@ -152,10 +142,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div> <div>
<div className="mt-3 sm:mt-5"> <div className="mt-3 sm:mt-5">
<Dialog.Title <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
as="h3"
className="text-lg font-medium leading-6 text-gray-900"
>
{data ? "Update" : "Create"} State {data ? "Update" : "Create"} State
</Dialog.Title> </Dialog.Title>
<div className="mt-2 space-y-3"> <div className="mt-2 space-y-3">
@ -188,8 +175,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
<span <span
className="w-4 h-4 ml-2 rounded" className="w-4 h-4 ml-2 rounded"
style={{ style={{
backgroundColor: backgroundColor: watch("color") ?? "green",
watch("color") ?? "green",
}} }}
></span> ></span>
)} )}
@ -214,14 +200,10 @@ const CreateUpdateStateModal: React.FC<Props> = ({
<Controller <Controller
name="color" name="color"
control={control} control={control}
render={({ render={({ field: { value, onChange } }) => (
field: { value, onChange },
}) => (
<TwitterPicker <TwitterPicker
color={value} color={value}
onChange={(value) => onChange={(value) => onChange(value.hex)}
onChange(value.hex)
}
/> />
)} )}
/> />
@ -245,7 +227,7 @@ const CreateUpdateStateModal: React.FC<Props> = ({
</div> </div>
</div> </div>
<div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"> <div className="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3">
<Button theme="secondary" onClick={handleClose}> <Button theme="secondary" onClick={onClose}>
Cancel Cancel
</Button> </Button>
<Button type="submit" disabled={isSubmitting}> <Button type="submit" disabled={isSubmitting}>

View File

@ -1,24 +1,21 @@
import React, { useContext } from "react"; import React from "react";
// swr // swr
import useSWR from "swr"; import useSWR from "swr";
// react hook form // react hook form
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// service // service
import projectServices from "lib/services/project.service"; import projectServices from "lib/services/project.service";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// fetch keys // fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
// icons
import { CheckIcon } from "@heroicons/react/20/solid";
// types // types
import type { Control } from "react-hook-form"; import type { Control } from "react-hook-form";
import type { IIssue, WorkspaceMember } from "types"; import type { IIssue, WorkspaceMember } from "types";
import { UserIcon } from "@heroicons/react/24/outline"; import { UserIcon } from "@heroicons/react/24/outline";
import { SearchListbox } from "ui";
type Props = { type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
}; };
@ -38,86 +35,17 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
control={control} control={control}
name="assignees_list" name="assignees_list"
render={({ field: { value, onChange } }) => ( 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} value={value}
onChange={(data: any) => { onChange={onChange}
const valueCopy = [...(value ?? [])]; icon={<UserIcon className="h-4 w-4 text-gray-400" />}
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 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>
)} )}
></Controller> ></Controller>
); );

View File

@ -1,12 +1,8 @@
import React from "react"; import React from "react";
// react hook form // react hook form
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// icons
import { CheckIcon } from "@heroicons/react/20/solid";
// types // types
import type { IIssue } from "types"; import type { IIssue } from "types";
import type { Control } from "react-hook-form"; import type { Control } from "react-hook-form";
@ -16,12 +12,14 @@ type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
}; };
import { SearchListbox } from "ui";
const SelectParent: React.FC<Props> = ({ control }) => { const SelectParent: React.FC<Props> = ({ control }) => {
const { issues: projectIssues } = useUser(); const { issues: projectIssues } = useUser();
const getSelectedIssueKey = (issueId: string | undefined) => { const getSelectedIssueKey = (issueId: string | undefined) => {
const identifier = projectIssues?.results?.find((i) => i.id.toString() === issueId?.toString()) const identifier = projectIssues?.results?.find((i) => i.id.toString() === issueId?.toString())
?.project_detail.identifier; ?.project_detail?.identifier;
const sequenceId = projectIssues?.results?.find( const sequenceId = projectIssues?.results?.find(
(i) => i.id.toString() === issueId?.toString() (i) => i.id.toString() === issueId?.toString()
@ -36,53 +34,29 @@ const SelectParent: React.FC<Props> = ({ control }) => {
control={control} control={control}
name="parent" name="parent"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Listbox as="div" value={value} onChange={onChange}> <SearchListbox
{({ open }) => ( title="Parent issue"
<> optionsFontsize="sm"
<div className="relative"> options={projectIssues?.results?.map((issue) => {
<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"> return {
<UserIcon className="h-3 w-3 flex-shrink-0" /> value: issue.id,
<span className="block truncate">{getSelectedIssueKey(value?.toString())}</span> display: issue.name,
</Listbox.Button> element: (
<div className="flex items-center space-x-3">
<Transition <div className="block truncate">
show={open} <span className="block truncate">{`${getSelectedIssueKey(issue.id)}`}</span>
as={React.Fragment} <span className="block truncate text-gray-400">{issue.name}</span>
leave="transition ease-in duration-100" </div>
leaveFrom="opacity-100" </div>
leaveTo="opacity-0" ),
> };
<Listbox.Options className="absolute 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"> value={value}
{projectIssues?.results?.map((issue) => ( buttonClassName="max-h-30 overflow-y-scroll"
<Listbox.Option optionsClassName="max-h-30 overflow-y-scroll"
key={issue.id} onChange={onChange}
value={issue.id} icon={<UserIcon className="h-4 w-4 text-gray-400" />}
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>
)} )}
/> />
); );

View File

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

View File

@ -1,16 +1,12 @@
import React from "react"; import React from "react";
// react hook form // react hook form
import { Controller } from "react-hook-form"; import { Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// components
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
// icons // icons
import { CheckIcon, PlusIcon } from "@heroicons/react/20/solid"; import { PlusIcon } from "@heroicons/react/20/solid";
// ui // ui
import { Spinner } from "ui"; import { CustomListbox } from "ui";
// types // types
import type { Control } from "react-hook-form"; import type { Control } from "react-hook-form";
import type { IIssue } from "types"; import type { IIssue } from "types";
@ -18,11 +14,10 @@ import { Squares2X2Icon } from "@heroicons/react/24/outline";
type Props = { type Props = {
control: Control<IIssue, any>; control: Control<IIssue, any>;
data?: IIssue;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}; };
const SelectState: React.FC<Props> = ({ control, data, setIsOpen }) => { const SelectState: React.FC<Props> = ({ control, setIsOpen }) => {
const { states } = useUser(); const { states } = useUser();
return ( return (
@ -31,90 +26,30 @@ const SelectState: React.FC<Props> = ({ control, data, setIsOpen }) => {
control={control} control={control}
name="state" name="state"
render={({ field: { value, onChange } }) => ( render={({ field: { value, onChange } }) => (
<Listbox value={value} onChange={onChange}> <CustomListbox
{({ open }) => ( title="State"
<> options={states?.map((state) => {
<div className="relative"> return { value: state.id, display: state.name };
<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" /> value={value}
<span className="block truncate"> optionsFontsize="sm"
{states?.find((i) => i.id === value)?.name ?? "State"} onChange={onChange}
</span> icon={<Squares2X2Icon className="h-4 w-4 text-gray-400" />}
</Listbox.Button> footerOption={
<button
<Transition type="button"
show={open} className="select-none relative py-2 pl-3 pr-9 flex items-center gap-x-2 text-gray-400 hover:text-gray-500"
as={React.Fragment} onClick={() => setIsOpen(true)}
leave="transition ease-in duration-100" >
leaveFrom="opacity-100" <span>
leaveTo="opacity-0" <PlusIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
> </span>
<Listbox.Options className="absolute 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"> <span>
<div className="p-1"> <span className="block truncate">Create state</span>
{states ? ( </span>
states.filter((i) => i.id !== data?.id).length > 0 ? ( </button>
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>
)} )}
></Controller> ></Controller>
</> </>

View File

@ -1,10 +1,18 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
// next
import Link from "next/link";
import { useRouter } from "next/router";
// swr // swr
import { mutate } from "swr"; import { mutate } from "swr";
// react hook form // react hook form
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
// fetching keys // 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 // headless
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// services // services
@ -15,7 +23,7 @@ import useToast from "lib/hooks/useToast";
// ui // ui
import { Button, Input, TextArea } from "ui"; import { Button, Input, TextArea } from "ui";
// commons // commons
import { renderDateFormat } from "constants/common"; import { renderDateFormat, cosineSimilarity } from "constants/common";
// components // components
import SelectState from "./SelectState"; import SelectState from "./SelectState";
import SelectCycles from "./SelectCycles"; import SelectCycles from "./SelectCycles";
@ -55,6 +63,10 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
const [isCycleModalOpen, setIsCycleModalOpen] = useState(false); const [isCycleModalOpen, setIsCycleModalOpen] = useState(false);
const [isStateModalOpen, setIsStateModalOpen] = useState(false); const [isStateModalOpen, setIsStateModalOpen] = useState(false);
const [mostSimilarIssue, setMostSimilarIssue] = useState<string | undefined>();
const router = useRouter();
const handleClose = () => { const handleClose = () => {
setIsOpen(false); setIsOpen(false);
if (data) { if (data) {
@ -69,7 +81,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
}, 500); }, 500);
}; };
const { activeWorkspace, activeProject } = useUser(); const { activeWorkspace, activeProject, user, issues } = useUser();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
@ -165,6 +177,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
}, },
false false
); );
if (formData.sprints && formData.sprints !== null) { if (formData.sprints && formData.sprints !== null) {
await addIssueToSprint(res.id, formData.sprints, formData); await addIssueToSprint(res.id, formData.sprints, formData);
} }
@ -175,6 +188,15 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
type: "success", type: "success",
message: `Issue ${data ? "updated" : "created"} successfully`, 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) => { .catch((err) => {
Object.keys(err).map((key) => { Object.keys(err).map((key) => {
@ -235,13 +257,17 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
}); });
}, [data, prePopulateData, reset, projectId, activeProject, isOpen, watch]); }, [data, prePopulateData, reset, projectId, activeProject, isOpen, watch]);
useEffect(() => {
return () => setMostSimilarIssue(undefined);
}, []);
return ( return (
<> <>
{activeProject && ( {activeProject && (
<> <>
<CreateUpdateStateModal <CreateUpdateStateModal
isOpen={isStateModalOpen} isOpen={isStateModalOpen}
setIsOpen={setIsStateModalOpen} handleClose={() => setIsStateModalOpen(false)}
projectId={activeProject?.id} projectId={activeProject?.id}
/> />
<CreateUpdateCycleModal <CreateUpdateCycleModal
@ -293,6 +319,13 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
label="Name" label="Name"
name="name" name="name"
rows={1} 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" className="resize-none"
placeholder="Enter name" placeholder="Enter name"
autoComplete="off" autoComplete="off"
@ -302,6 +335,42 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
required: "Name is required", 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>
<div> <div>
<TextArea <TextArea

View File

@ -1,7 +1,8 @@
// next
import Link from "next/link";
// react // react
import React from "react"; import React from "react";
// next
import Link from "next/link";
import Image from "next/image";
// swr // swr
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// ui // ui
@ -274,15 +275,31 @@ const ListView: React.FC<Props> = ({
value={person.member.id} value={person.member.id}
> >
<div <div
className={`flex items-center ${ className={`flex items-center gap-x-1 ${
assignees.includes( assignees.includes(
person.member.email person.member.first_name
) )
? "font-medium" ? "font-medium"
: "font-normal" : "font-normal"
}`} }`}
> >
{person.member.email} {person.member.avatar &&
person.member.avatar !== "" ? (
<div className="relative w-4 h-4">
<Image
src={person.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<p>
{person.member.first_name.charAt(0)}
</p>
)}
<p>{person.member.first_name}</p>
</div> </div>
</Listbox.Option> </Listbox.Option>
))} ))}

View File

@ -1,45 +1,32 @@
// react // react
import React from "react"; import React from "react";
// ui // swr
import { Listbox, Transition } from "@headlessui/react"; import useSWR from "swr";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// services
import issuesServices from "lib/services/issues.services";
import stateServices from "lib/services/state.services";
// swr
import useSWR, { mutate } from "swr";
// types
import { IIssue, IssueResponse, IState } from "types";
// constants // constants
import { addSpaceIfCamelCase, classNames } from "constants/common"; import { addSpaceIfCamelCase, classNames } from "constants/common";
import { STATE_LIST, USER_ISSUE } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
// services
import stateServices from "lib/services/state.services";
// ui
import { Listbox, Transition } from "@headlessui/react";
// types
import { IIssue, IState } from "types";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
updateIssues: (
workspaceSlug: string,
projectId: string,
issueId: string,
issue: Partial<IIssue>
) => void;
}; };
const ChangeStateDropdown = ({ issue }: Props) => { const ChangeStateDropdown: React.FC<Props> = ({ issue, updateIssues }) => {
const { activeWorkspace } = useUser(); const { activeWorkspace } = useUser();
const partialUpdateIssue = (formData: Partial<IIssue>, projectId: string, issueId: string) => {
if (!activeWorkspace) return;
issuesServices
.patchIssue(activeWorkspace.slug, projectId, issueId, formData)
.then((response) => {
// mutate<IssueResponse>(
// USER_ISSUE,
// (prevData) => ({
// ...(prevData as IssueResponse),
// }),
// false
// );
})
.catch((error) => {
console.log(error);
});
};
const { data: states } = useSWR<IState[]>( const { data: states } = useSWR<IState[]>(
activeWorkspace ? STATE_LIST(issue.project) : null, activeWorkspace ? STATE_LIST(issue.project) : null,
activeWorkspace ? () => stateServices.getStates(activeWorkspace.slug, issue.project) : null activeWorkspace ? () => stateServices.getStates(activeWorkspace.slug, issue.project) : null
@ -51,7 +38,11 @@ const ChangeStateDropdown = ({ issue }: Props) => {
as="div" as="div"
value={issue.state} value={issue.state}
onChange={(data: string) => { onChange={(data: string) => {
partialUpdateIssue({ state: data }, issue.project, issue.id); if (!activeWorkspace) return;
updateIssues(activeWorkspace.slug, issue.project, issue.id, {
state: data,
state_detail: states?.find((state) => state.id === data),
});
}} }}
className="flex-shrink-0" className="flex-shrink-0"
> >

View File

@ -1,4 +1,5 @@
import { FC, CSSProperties, useEffect, useState } from "react"; import { FC, CSSProperties } from "react";
// next
import Script from "next/script"; import Script from "next/script";
export interface IGoogleLoginButton { export interface IGoogleLoginButton {
@ -28,7 +29,7 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
size: "large", size: "large",
logo_alignment: "center", logo_alignment: "center",
width: document.getElementById("googleSignInButton")?.offsetWidth, width: document.getElementById("googleSignInButton")?.offsetWidth,
text: props.text || "Continue with Google", text: "continue_with",
} as GsiButtonConfiguration // customization attributes } as GsiButtonConfiguration // customization attributes
); );
window?.google?.accounts.id.prompt(); // also display the One Tap dialog window?.google?.accounts.id.prompt(); // also display the One Tap dialog

View File

@ -107,3 +107,75 @@ export const addSpaceIfCamelCase = (str: string) => {
export const replaceUnderscoreIfSnakeCase = (str: string) => { export const replaceUnderscoreIfSnakeCase = (str: string) => {
return str.replace(/_/g, " "); return str.replace(/_/g, " ");
}; };
const fallbackCopyTextToClipboard = (text: string) => {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
// FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
var successful = document.execCommand("copy");
var msg = successful ? "successful" : "unsuccessful";
console.log("Fallback: Copying text command was " + msg);
} catch (err) {
console.error("Fallback: Oops, unable to copy", err);
}
document.body.removeChild(textArea);
};
export const copyTextToClipboard = async (text: string) => {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
await navigator.clipboard.writeText(text);
};
const wordsVector = (str: string) => {
const words = str.split(" ");
const vector: any = {};
for (let i = 0; i < words.length; i++) {
const word = words[i];
if (vector[word]) {
vector[word] += 1;
} else {
vector[word] = 1;
}
}
return vector;
};
export const cosineSimilarity = (a: string, b: string) => {
const vectorA = wordsVector(a.trim());
const vectorB = wordsVector(b.trim());
const vectorAKeys = Object.keys(vectorA);
const vectorBKeys = Object.keys(vectorB);
const union = vectorAKeys.concat(vectorBKeys);
let dotProduct = 0;
let magnitudeA = 0;
let magnitudeB = 0;
for (let i = 0; i < union.length; i++) {
const key = union[i];
const valueA = vectorA[key] || 0;
const valueB = vectorB[key] || 0;
dotProduct += valueA * valueB;
magnitudeA += valueA * valueA;
magnitudeB += valueB * valueB;
}
return dotProduct / Math.sqrt(magnitudeA * magnitudeB);
};

View File

@ -1,15 +1,16 @@
import React, { useState } from "react";
// next // next
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// react import Image from "next/image";
import React, { useState } from "react";
// services // services
import useUser from "lib/hooks/useUser";
import userService from "lib/services/user.service"; import userService from "lib/services/user.service";
import authenticationService from "lib/services/authentication.service";
// hooks
import useUser from "lib/hooks/useUser";
import useTheme from "lib/hooks/useTheme";
// components // components
import CreateProjectModal from "components/project/CreateProjectModal"; import CreateProjectModal from "components/project/CreateProjectModal";
// types
import { IUser } from "types";
// headless ui // headless ui
import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react"; import { Dialog, Disclosure, Menu, Transition } from "@headlessui/react";
// icons // icons
@ -25,14 +26,15 @@ import {
UserGroupIcon, UserGroupIcon,
UserIcon, UserIcon,
XMarkIcon, XMarkIcon,
InboxIcon,
ArrowLongLeftIcon, ArrowLongLeftIcon,
QuestionMarkCircleIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// constants // constants
import { classNames } from "constants/common"; import { classNames } from "constants/common";
import { Spinner } from "ui"; // ui
import useTheme from "lib/hooks/useTheme"; import { Spinner, Tooltip } from "ui";
import authenticationService from "lib/services/authentication.service"; // types
import type { IUser } from "types";
const navigation = (projectId: string) => [ const navigation = (projectId: string) => [
{ {
@ -107,7 +109,7 @@ const Sidebar: React.FC = () => {
const router = useRouter(); const router = useRouter();
const { projects } = useUser(); const { projects, user } = useUser();
const { projectId } = router.query; const { projectId } = router.query;
@ -205,7 +207,11 @@ const Sidebar: React.FC = () => {
<div className="h-full flex flex-1 flex-col border-r border-gray-200"> <div className="h-full flex flex-1 flex-col border-r border-gray-200">
<div className="h-full flex flex-1 flex-col pt-5"> <div className="h-full flex flex-1 flex-col pt-5">
<div className="px-2"> <div className="px-2">
<div className={`relative ${sidebarCollapse ? "flex" : "grid grid-cols-5 gap-1"}`}> <div
className={`relative ${
sidebarCollapse ? "flex" : "grid grid-cols-5 gap-1 items-center"
}`}
>
<Menu as="div" className="col-span-4 inline-block text-left w-full"> <Menu as="div" className="col-span-4 inline-block text-left w-full">
<div className="w-full"> <div className="w-full">
<Menu.Button <Menu.Button
@ -213,16 +219,25 @@ const Sidebar: React.FC = () => {
!sidebarCollapse ? "hover:bg-gray-50 border border-gray-300 shadow-sm" : "" !sidebarCollapse ? "hover:bg-gray-50 border border-gray-300 shadow-sm" : ""
}`} }`}
> >
<span className="flex gap-x-1 items-center"> <div className="flex gap-x-1 items-center">
<p className="h-5 w-5 p-4 flex items-center justify-center bg-gray-500 text-white rounded uppercase"> <div className="h-5 w-5 p-4 flex items-center justify-center bg-gray-500 text-white rounded uppercase relative">
{activeWorkspace?.name?.charAt(0) ?? "N"} {activeWorkspace?.logo && activeWorkspace.logo !== "" ? (
</p> <Image
src={activeWorkspace.logo}
alt="Workspace Logo"
layout="fill"
objectFit="cover"
/>
) : (
activeWorkspace?.name?.charAt(0) ?? "N"
)}
</div>
{!sidebarCollapse && ( {!sidebarCollapse && (
<p className="truncate w-20 text-left ml-1"> <p className="truncate w-20 text-left ml-1">
{activeWorkspace?.name ?? "Loading..."} {activeWorkspace?.name ?? "Loading..."}
</p> </p>
)} )}
</span> </div>
{!sidebarCollapse && ( {!sidebarCollapse && (
<div className="flex-grow flex justify-end"> <div className="flex-grow flex justify-end">
<ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" /> <ChevronDownIcon className="-mr-1 ml-2 h-5 w-5" aria-hidden="true" />
@ -301,9 +316,19 @@ const Sidebar: React.FC = () => {
</Menu> </Menu>
{!sidebarCollapse && ( {!sidebarCollapse && (
<Menu as="div" className="inline-block text-left w-full"> <Menu as="div" className="inline-block text-left w-full">
<div className="h-full w-full"> <div className="h-10 w-10">
<Menu.Button className="grid place-items-center h-full w-full rounded-md shadow-sm px-2 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus:outline-none"> <Menu.Button className="grid relative place-items-center h-full w-full rounded-md shadow-sm px-2 py-2 bg-white text-gray-700 hover:bg-gray-50 focus:outline-none">
<UserIcon className="h-5 w-5" /> {user?.avatar && user.avatar !== "" ? (
<Image
src={user.avatar}
alt="User Avatar"
layout="fill"
objectFit="cover"
className="rounded-full"
/>
) : (
<UserIcon className="h-5 w-5" />
)}
</Menu.Button> </Menu.Button>
</div> </div>
@ -464,7 +489,7 @@ const Sidebar: React.FC = () => {
</div> </div>
)} )}
</div> </div>
<div className="px-2 py-2 bg-gray-50 w-full self-baseline"> <div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2">
<button <button
type="button" type="button"
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 w-full ${ className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 w-full ${
@ -472,12 +497,26 @@ const Sidebar: React.FC = () => {
}`} }`}
onClick={() => toggleCollapsed()} onClick={() => toggleCollapsed()}
> >
<ArrowLongLeftIcon <Tooltip content="Click to toggle sidebar" position="right">
className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${ <ArrowLongLeftIcon
sidebarCollapse ? "rotate-180" : "" className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
}`} sidebarCollapse ? "rotate-180" : ""
/> }`}
{!sidebarCollapse && "Collapse"} />
</Tooltip>
</button>
<button
type="button"
onClick={() => {
const e = new KeyboardEvent("keydown", {
ctrlKey: true,
key: "h",
});
document.dispatchEvent(e);
}}
title="Help"
>
<QuestionMarkCircleIcon className="h-4 w-4 text-gray-500" />
</button> </button>
</div> </div>
</div> </div>

View File

@ -27,11 +27,13 @@ class UserService extends APIService {
} }
async currentUser(): Promise<any> { async currentUser(): Promise<any> {
if (!this.getAccessToken()) return null;
return this.get(USER_ENDPOINT) return this.get(USER_ENDPOINT)
.then((response) => { .then((response) => {
return response?.data; return response?.data;
}) })
.catch((error) => { .catch((error) => {
this.purgeAccessToken();
throw error?.response?.data; throw error?.response?.data;
}); });
} }

99
pages/magic-sign-in.tsx Normal file
View File

@ -0,0 +1,99 @@
import React, { useState, useEffect } from "react";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
// services
import authenticationService from "lib/services/authentication.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// layouts
import DefaultLayout from "layouts/DefaultLayout";
const MagicSignIn: NextPage = () => {
const router = useRouter();
const [isSigningIn, setIsSigningIn] = useState(true);
const [errorSigningIn, setErrorSignIn] = useState<string | undefined>();
const { password, key } = router.query;
const { setToastAlert } = useToast();
const { mutateUser, mutateWorkspaces } = useUser();
useEffect(() => {
setIsSigningIn(true);
setErrorSignIn(undefined);
if (!password || !key) return;
authenticationService
.magicSignIn({ token: password, key })
.then(async (res) => {
setIsSigningIn(false);
await mutateUser();
await mutateWorkspaces();
if (res.user.is_onboarded) router.push("/");
else router.push("/invitations");
})
.catch((err) => {
setErrorSignIn(err.response.data.error);
setIsSigningIn(false);
});
}, [password, key, mutateUser, mutateWorkspaces, router]);
return (
<DefaultLayout
meta={{
title: "Magic Sign In",
}}
>
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">
{isSigningIn ? (
<div className="w-full h-full flex flex-col gap-y-2 justify-center items-center">
<h2 className="text-4xl">Signing you in...</h2>
<p className="text-sm text-gray-600">
Please wait while we are preparing your take off.
</p>
</div>
) : errorSigningIn ? (
<div className="w-full h-full flex flex-col gap-y-2 justify-center items-center">
<h2 className="text-4xl">Error</h2>
<p className="text-sm text-gray-600">
{errorSigningIn}.
<span
className="underline cursor-pointer"
onClick={() => {
authenticationService
.emailCode({ email: (key as string).split("_")[1] })
.then(() => {
setToastAlert({
type: "success",
title: "Email sent",
message: "A new link/code has been send to you.",
});
})
.catch(() => {
setToastAlert({
type: "error",
title: "Error",
message: "Unable to send email.",
});
});
}}
>
Send link again?
</span>
</p>
</div>
) : (
<div className="w-full h-full flex flex-col gap-y-2 justify-center items-center">
<h2 className="text-4xl">Success</h2>
<p className="text-sm text-gray-600">Redirecting you to the app...</p>
</div>
)}
</div>
</DefaultLayout>
);
};
export default MagicSignIn;

View File

@ -1,5 +1,5 @@
// react // react
import React, { useState } from "react"; import React from "react";
// next // next
import type { NextPage } from "next"; import type { NextPage } from "next";
// swr // swr
@ -8,37 +8,65 @@ import useSWR from "swr";
import ProjectLayout from "layouts/ProjectLayout"; import ProjectLayout from "layouts/ProjectLayout";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
// ui // ui
import { Spinner } from "ui"; import { Spinner } from "ui";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace"; import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
import HeaderButton from "ui/HeaderButton"; import HeaderButton from "ui/HeaderButton";
// icons
import { PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
// services
import userService from "lib/services/user.service";
// types
import { IIssue } from "types";
// constants // constants
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
import { USER_ISSUE } from "constants/fetch-keys"; import { USER_ISSUE } from "constants/fetch-keys";
import { classNames } from "constants/common"; import { classNames } from "constants/common";
// services
import userService from "lib/services/user.service";
import issuesServices from "lib/services/issues.services";
// components
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
// icons
import { PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
// types
import { IIssue } from "types";
const MyIssues: NextPage = () => { const MyIssues: NextPage = () => {
const [isOpen, setIsOpen] = useState(false);
const { user } = useUser(); const { user } = useUser();
const { data: myIssues } = useSWR<IIssue[]>( const { data: myIssues, mutate: mutateMyIssue } = useSWR<IIssue[]>(
user ? USER_ISSUE : null, user ? USER_ISSUE : null,
user ? () => userService.userIssues() : null user ? () => userService.userIssues() : null
); );
const updateMyIssues = (
workspaceSlug: string,
projectId: string,
issueId: string,
issue: Partial<IIssue>
) => {
mutateMyIssue((prevData) => {
return prevData?.map((prevIssue) => {
if (prevIssue.id === issueId) {
return {
...prevIssue,
...issue,
state_detail: {
...prevIssue.state_detail,
...issue.state_detail,
},
};
}
return prevIssue;
});
}, false);
issuesServices
.patchIssue(workspaceSlug, projectId, issueId, issue)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
};
return ( return (
<ProjectLayout> <ProjectLayout>
<CreateUpdateIssuesModal isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="w-full h-full flex flex-col space-y-5"> <div className="w-full h-full flex flex-col space-y-5">
{myIssues ? ( {myIssues ? (
<> <>
@ -116,13 +144,16 @@ const MyIssues: NextPage = () => {
</td> </td>
<td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td> <td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td>
<td className="px-3 py-4"> <td className="px-3 py-4">
{myIssue.project_detail.name} {myIssue.project_detail?.name}
<br /> <br />
<span className="text-xs">{`(${myIssue.project_detail.identifier}-${myIssue.sequence_id})`}</span> <span className="text-xs">{`(${myIssue.project_detail?.identifier}-${myIssue.sequence_id})`}</span>
</td> </td>
<td className="px-3 py-4 capitalize">{myIssue.priority}</td> <td className="px-3 py-4 capitalize">{myIssue.priority}</td>
<td className="relative px-3 py-4"> <td className="relative px-3 py-4">
<ChangeStateDropdown issue={myIssue} /> <ChangeStateDropdown
issue={myIssue}
updateIssues={updateMyIssues}
/>
</td> </td>
</tr> </tr>
))} ))}
@ -150,7 +181,13 @@ const MyIssues: NextPage = () => {
</span> </span>
} }
Icon={PlusIcon} Icon={PlusIcon}
action={() => setIsOpen(true)} action={() => {
const e = new KeyboardEvent("keydown", {
key: "i",
ctrlKey: true,
});
document.dispatchEvent(e);
}}
/> />
</EmptySpace> </EmptySpace>
</div> </div>

View File

@ -1,4 +1,4 @@
import React, { useEffect } from "react"; import React, { useEffect, useCallback, useState } from "react";
// swr // swr
import { mutate } from "swr"; import { mutate } from "swr";
// next // next
@ -20,13 +20,22 @@ import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast"; import useToast from "lib/hooks/useToast";
// fetch keys // fetch keys
import { PROJECT_DETAILS, PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { PROJECT_DETAILS, PROJECTS_LIST, WORKSPACE_MEMBERS } from "constants/fetch-keys";
// commons
import { addSpaceIfCamelCase, debounce } from "constants/common";
// components
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
// ui // ui
import { Spinner, Button, Input, TextArea, Select } from "ui"; import { Spinner, Button, Input, TextArea, Select } from "ui";
import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs"; import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
// icons // icons
import { ChevronDownIcon, CheckIcon } from "@heroicons/react/24/outline"; import {
ChevronDownIcon,
CheckIcon,
PlusIcon,
PencilSquareIcon,
} from "@heroicons/react/24/outline";
// types // types
import type { IProject, IWorkspace, WorkspaceMember } from "types"; import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
const defaultValues: Partial<IProject> = { const defaultValues: Partial<IProject> = {
name: "", name: "",
@ -41,16 +50,20 @@ const ProjectSettings: NextPage = () => {
handleSubmit, handleSubmit,
reset, reset,
control, control,
setError,
formState: { errors, isSubmitting }, formState: { errors, isSubmitting },
} = useForm<IProject>({ } = useForm<IProject>({
defaultValues, defaultValues,
}); });
const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
const [selectedState, setSelectedState] = useState<string | undefined>();
const router = useRouter(); const router = useRouter();
const { projectId } = router.query; const { projectId } = router.query;
const { activeWorkspace, activeProject } = useUser(); const { activeWorkspace, activeProject, states } = useUser();
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
@ -81,6 +94,7 @@ const ProjectSettings: NextPage = () => {
const payload: Partial<IProject> = { const payload: Partial<IProject> = {
name: formData.name, name: formData.name,
network: formData.network, network: formData.network,
identifier: formData.identifier,
description: formData.description, description: formData.description,
default_assignee: formData.default_assignee, default_assignee: formData.default_assignee,
project_lead: formData.project_lead, project_lead: formData.project_lead,
@ -113,9 +127,28 @@ const ProjectSettings: NextPage = () => {
}); });
}; };
const checkIdentifier = (slug: string, value: string) => {
projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
console.log(response);
if (response.exists) setError("identifier", { message: "Identifier already exists" });
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
return ( return (
<ProjectLayout> <ProjectLayout>
<div className="w-full h-full space-y-5"> <div className="w-full h-full space-y-5">
<CreateUpdateStateModal
isOpen={isCreateStateModalOpen || Boolean(selectedState)}
handleClose={() => {
setSelectedState(undefined);
setIsCreateStateModalOpen(false);
}}
projectId={projectId as string}
data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
/>
<Breadcrumbs> <Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" /> <BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name} Settings`} /> <BreadcrumbItem title={`${activeProject?.name} Settings`} />
@ -169,8 +202,20 @@ const ProjectSettings: NextPage = () => {
register={register} register={register}
placeholder="Enter identifier" placeholder="Enter identifier"
label="Identifier" label="Identifier"
onChange={(e: any) => {
if (!activeWorkspace || !e.target.value) return;
checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
}}
validations={{ validations={{
required: "Identifier is required", required: "Identifier is required",
minLength: {
value: 1,
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 9,
message: "Identifier must at most be of 9 characters",
},
}} }}
/> />
</div> </div>
@ -358,6 +403,47 @@ const ProjectSettings: NextPage = () => {
</Button> </Button>
</div> </div>
</section> </section>
<section className="space-y-5">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
<p className="mt-1 text-sm text-gray-500">
Manage the state of this project.
</p>
</div>
<div className="flex justify-between gap-3">
<div className="w-full space-y-5">
{states?.map((state) => (
<div
className="border p-1 px-4 rounded flex justify-between items-center"
key={state.id}
>
<div className="flex items-center gap-x-2">
<div
className="w-3 h-3 rounded-full"
style={{
backgroundColor: state.color,
}}
></div>
<h4>{addSpaceIfCamelCase(state.name)}</h4>
</div>
<div>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-5 w-5 text-gray-400" />
</button>
</div>
</div>
))}
<button
type="button"
className="flex items-center gap-x-1"
onClick={() => setIsCreateStateModalOpen(true)}
>
<PlusIcon className="h-4 w-4 text-gray-400" />
<span>Add State</span>
</button>
</div>
</div>
</section>
</div> </div>
</form> </form>
</div> </div>

View File

@ -1,10 +1,9 @@
import React, { useCallback, useState, useEffect } from "react";
// next // next
import type { NextPage } from "next"; import type { NextPage } from "next";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import Image from "next/image"; import Image from "next/image";
// react
import React, { useCallback, useState } from "react";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// services // services
@ -37,8 +36,10 @@ const SignIn: NextPage = () => {
const { mutateUser, mutateWorkspaces } = useUser(); const { mutateUser, mutateWorkspaces } = useUser();
const [githubToken, setGithubToken] = React.useState(undefined); const [githubToken, setGithubToken] = useState(undefined);
const [loginCallBackURL, setLoginCallBackURL] = React.useState(undefined); const [loginCallBackURL, setLoginCallBackURL] = useState(undefined);
const [isGoogleAuthenticationLoading, setIsGoogleAuthenticationLoading] = useState(false);
const onSignInSuccess = useCallback( const onSignInSuccess = useCallback(
async (res: any) => { async (res: any) => {
@ -54,7 +55,7 @@ const SignIn: NextPage = () => {
return githubToken; return githubToken;
}, [githubToken]); }, [githubToken]);
React.useEffect(() => { useEffect(() => {
const { const {
query: { code }, query: { code },
} = router; } = router;
@ -63,7 +64,7 @@ const SignIn: NextPage = () => {
} }
}, [router, githubTokenMemo]); }, [router, githubTokenMemo]);
React.useEffect(() => { useEffect(() => {
if (githubToken) { if (githubToken) {
authenticationService authenticationService
.socialAuth({ .socialAuth({
@ -80,10 +81,12 @@ const SignIn: NextPage = () => {
} }
}, [githubToken, mutateUser, mutateWorkspaces, router, onSignInSuccess]); }, [githubToken, mutateUser, mutateWorkspaces, router, onSignInSuccess]);
React.useEffect(() => { useEffect(() => {
const origin = const origin =
typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; typeof window !== "undefined" && window.location.origin ? window.location.origin : "";
setLoginCallBackURL(`${origin}/signin` as any); setLoginCallBackURL(`${origin}/signin` as any);
return () => setIsGoogleAuthenticationLoading(false);
}, []); }, []);
return ( return (
@ -92,6 +95,11 @@ const SignIn: NextPage = () => {
title: "Plane - Sign In", title: "Plane - Sign In",
}} }}
> >
{isGoogleAuthenticationLoading && (
<div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
<h2 className="text-2xl text-black">Sign in with Google. Please wait...</h2>
</div>
)}
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto"> <div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">
<div className="min-h-full w-full flex flex-col justify-center py-12 px-6 lg:px-8"> <div className="min-h-full w-full flex flex-col justify-center py-12 px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="sm:mx-auto sm:w-full sm:max-w-md">
@ -129,6 +137,7 @@ const SignIn: NextPage = () => {
</button> </button>
<GoogleLoginButton <GoogleLoginButton
onSuccess={({ clientId, credential }) => { onSuccess={({ clientId, credential }) => {
setIsGoogleAuthenticationLoading(true);
authenticationService authenticationService
.socialAuth({ .socialAuth({
medium: "google", medium: "google",
@ -140,6 +149,7 @@ const SignIn: NextPage = () => {
}) })
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
setIsGoogleAuthenticationLoading(false);
}); });
}} }}
onFailure={(err) => { onFailure={(err) => {

View File

@ -1,31 +0,0 @@
import React, { useState } from "react";
const assignees = [
{
name: "Wade Cooper",
value: "wade-cooper",
},
{ name: "Unassigned", value: "null" },
];
import { SearchListbox } from "ui";
const Page = () => {
const [assigned, setAssigned] = useState(assignees[0]);
return (
<div className="flex justify-center items-center h-screen w-full">
<SearchListbox
display="Assign"
name="assignee"
options={assignees}
onChange={(value) => {
setAssigned(assignees.find((assignee) => assignee.value === value) ?? assignees[0]);
}}
value={assigned.value}
/>
</div>
);
};
export default Page;

View File

@ -64,7 +64,10 @@ const WorkspaceSettings = () => {
await mutateWorkspaces((workspaces) => { await mutateWorkspaces((workspaces) => {
return (workspaces ?? []).map((workspace) => { return (workspaces ?? []).map((workspace) => {
if (workspace.slug === activeWorkspace.slug) { if (workspace.slug === activeWorkspace.slug) {
return res; return {
...workspace,
...res,
};
} }
return workspace; return workspace;
}); });
@ -116,10 +119,10 @@ const WorkspaceSettings = () => {
<input {...getInputProps()} /> <input {...getInputProps()} />
<div className="text-gray-500 mb-2">Logo</div> <div className="text-gray-500 mb-2">Logo</div>
<div> <div>
<div className="h-60 bg-blue-50" {...getRootProps()}> <div className="w-1/2 aspect-square bg-blue-50" {...getRootProps()}>
{((watch("logo") && watch("logo") !== null && watch("logo") !== "") || {((watch("logo") && watch("logo") !== null && watch("logo") !== "") ||
(image && image !== null)) && ( (image && image !== null)) && (
<div className="relative flex mx-auto h-60"> <div className="relative flex mx-auto h-full">
<Image <Image
src={image ? URL.createObjectURL(image) : watch("logo") ?? ""} src={image ? URL.createObjectURL(image) : watch("logo") ?? ""}
alt="Workspace Logo" alt="Workspace Logo"

163
ui/CustomListbox/index.tsx Normal file
View File

@ -0,0 +1,163 @@
import React from "react";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// icons
import { CheckIcon } from "@heroicons/react/20/solid";
import { Props } from "./types";
const CustomListbox: React.FC<Props> = ({
title,
options,
value,
onChange,
multiple,
icon,
width,
footerOption,
optionsFontsize,
className,
label,
}) => {
return (
<Listbox value={value} onChange={onChange} multiple={multiple}>
{({ open }) => (
<>
{label && (
<Listbox.Label>
<div className="text-gray-500 mb-2">{label}</div>
</Listbox.Label>
)}
<div className="relative">
<Listbox.Button
className={`flex items-center gap-1 hover:bg-gray-100 relative border rounded-md shadow-sm cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm duration-300 ${
width === "sm"
? "w-32"
: width === "md"
? "w-48"
: width === "lg"
? "w-64"
: width === "xl"
? "w-80"
: width === "2xl"
? "w-96"
: width === "w-full"
? "w-full"
: ""
}
${className || "px-2 py-1"}`}
>
{icon ?? null}
<span className="block truncate">
{Array.isArray(value)
? value.map((v) => options?.find((o) => o.value === v)?.display).join(", ") ||
`${title}`
: options?.find((o) => o.value === value)?.display || `${title}`}
</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 mt-1 bg-white shadow-lg ${
width === "sm"
? "w-32"
: width === "md"
? "w-48"
: width === "lg"
? "w-64"
: width === "xl"
? "w-80"
: width === "2xl"
? "w-96"
: width === "w-full"
? "w-full"
: ""
} ${
optionsFontsize === "sm"
? "text-xs"
: optionsFontsize === "md"
? "text-base"
: optionsFontsize === "lg"
? "text-lg"
: optionsFontsize === "xl"
? "text-xl"
: optionsFontsize === "2xl"
? "text-2xl"
: ""
} ${
className || ""
} rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none z-10`}
>
<div className="p-1">
{options ? (
options.length > 0 ? (
options.map((option) => (
<Listbox.Option
key={option.value}
className={({ active }) =>
`${
active ? "text-white bg-theme" : "text-gray-900"
} cursor-pointer select-none relative p-2 rounded-md`
}
value={option.value}
>
{({ selected, active }) => (
<>
<span
className={`${
selected ||
(Array.isArray(value)
? value.includes(option.value)
: value === option.value)
? "font-semibold"
: "font-normal"
} block truncate`}
>
{option.display}
</span>
{selected ||
(Array.isArray(value)
? value.includes(option.value)
: value === option.value) ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ||
(Array.isArray(value)
? value.includes(option.value)
: value === option.value)
? "text-white"
: "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))
) : (
<p className="text-sm text-gray-500 text-center">No options</p>
)
) : (
<p className="text-sm text-gray-500 text-center">Loading...</p>
)}
</div>
{footerOption ?? null}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
);
};
export default CustomListbox;

13
ui/CustomListbox/types.d.ts vendored Normal file
View File

@ -0,0 +1,13 @@
export type Props = {
title: string;
label?: string;
options?: Array<{ display: string; value: any }>;
icon?: JSX.Element;
value: any;
onChange: (value: any) => void;
multiple?: boolean;
width?: "sm" | "md" | "lg" | "xl" | "2xl" | "w-full";
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
className?: string;
footerOption?: JSX.Element;
};

View File

@ -1,52 +0,0 @@
import React from "react";
// headless ui
import { Listbox } from "@headlessui/react";
// icons
import { ChevronDownIcon } from "@heroicons/react/24/outline";
// types
type Props = {
value: any;
placeholder: string | JSX.Element;
className?: string;
theme?: "white" | "purple";
onChange: (value: any) => void;
icon?: () => React.ReactNode;
children: React.ReactNode;
};
const ListBox: React.FC<Props> = ({
value,
onChange,
placeholder,
icon,
children,
className,
theme,
}) => {
return (
<div className="relative">
<Listbox value={value} onChange={onChange}>
<Listbox.Button
className={`p-2 rounded flex items-center gap-x-2 ${
theme === "white"
? "bg-white border border-gray-200"
: "bg-purple-200"
} ${className ? className : ""}`}
>
{icon && icon()}
<p className="font-semibold">{placeholder}</p>
<div className="flex-grow flex justify-end">
<ChevronDownIcon width="20" height="20" />
</div>
</Listbox.Button>
<Listbox.Options className="absolute mt-1 w-full bg-white border border-gray-300 flex flex-col gap-y-2 py-3 z-50">
{children}
</Listbox.Options>
</Listbox>
</div>
);
};
export { Listbox };
export default ListBox;

View File

@ -7,18 +7,23 @@ import { classNames } from "constants/common";
import type { Props } from "./types"; import type { Props } from "./types";
const SearchListbox: React.FC<Props> = ({ const SearchListbox: React.FC<Props> = ({
display, title,
options, options,
onChange, onChange,
value, value,
multiple: canSelectMultiple, multiple: canSelectMultiple,
icon,
width,
optionsFontsize,
buttonClassName,
optionsClassName,
}) => { }) => {
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
const filteredOptions = const filteredOptions =
query === "" query === ""
? options ? options
: options.filter((option) => option.name.toLowerCase().includes(query.toLowerCase())); : options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
const props: any = { const props: any = {
value, value,
@ -34,66 +39,112 @@ const SearchListbox: React.FC<Props> = ({
} }
return ( return (
<div className="flex flex-nowrap justify-end space-x-2 py-2 px-2 sm:px-3"> <Combobox as="div" {...props} className="flex-shrink-0">
<Combobox as="div" {...props} className="flex-shrink-0"> {({ open }: any) => (
{({ open }: any) => ( <>
<> <Combobox.Label className="sr-only"> {title} </Combobox.Label>
<Combobox.Label className="sr-only"> {display} </Combobox.Label> <div className="relative">
<div className="relative"> <Combobox.Button
<Combobox.Button className="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3"> 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 ${
<span width === "sm"
className={classNames( ? "w-32"
value === null || value === undefined ? "" : "text-gray-900", : width === "md"
"hidden truncate sm:ml-2 sm:block" ? "w-48"
)} : width === "lg"
> ? "w-64"
{value : width === "xl"
? options.find((option) => option.value === value)?.name ?? "None" ? "w-80"
: `Select ${display}`} : width === "2xl"
</span> ? "w-96"
</Combobox.Button> : ""
} ${buttonClassName || ""}`}
<Transition >
show={open} {icon ?? null}
as={React.Fragment} <span
leave="transition ease-in duration-100" className={classNames(
leaveFrom="opacity-100" value === null || value === undefined ? "" : "text-gray-900",
leaveTo="opacity-0" "hidden truncate sm:ml-2 sm:block"
)}
> >
<Combobox.Options className="absolute right-0 z-10 mt-1 max-h-56 w-52 px-1 py-1 overflow-auto rounded-lg bg-white text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"> {Array.isArray(value)
<Combobox.Input ? value
className="w-full bg-transparent border-b py-2 pl-3 mb-1 focus:outline-none sm:text-sm" .map((v) => options?.find((option) => option.value === v)?.display)
onChange={(event) => setQuery(event.target.value)} .join(", ") || title
placeholder="Search" : options?.find((option) => option.value === value)?.display || title}
displayValue={(assigned: any) => assigned?.name} </span>
/> </Combobox.Button>
{filteredOptions.length > 0 ? (
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Combobox.Options
className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none z-10 ${
width === "sm"
? "w-32"
: width === "md"
? "w-48"
: width === "lg"
? "w-64"
: width === "xl"
? "w-80"
: width === "2xl"
? "w-96"
: ""
}} ${
optionsFontsize === "sm"
? "text-xs"
: optionsFontsize === "md"
? "text-base"
: optionsFontsize === "lg"
? "text-lg"
: optionsFontsize === "xl"
? "text-xl"
: optionsFontsize === "2xl"
? "text-2xl"
: ""
} ${optionsClassName || ""}`}
>
<Combobox.Input
className="w-full bg-transparent border-b py-2 pl-3 mb-1 focus:outline-none sm:text-sm"
onChange={(event) => setQuery(event.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( filteredOptions.map((option) => (
<Combobox.Option <Combobox.Option
key={option.value} key={option.value}
className={({ active }) => className={({ active }) =>
classNames( `${
active ? "bg-gray-50" : "bg-white", active ? "text-white bg-theme" : "text-gray-900"
"relative rounded cursor-default select-none py-2 px-3" } cursor-pointer select-none relative p-2 rounded-md`
)
} }
value={option.value} value={option.value}
> >
<div className="flex items-center"> <div className="flex items-center">
<span className="ml-3 block truncate font-medium">{option.name}</span> <span className="ml-3 block truncate font-medium">
{option.element ?? option.display}
</span>
</div> </div>
</Combobox.Option> </Combobox.Option>
)) ))
) : ( ) : (
<div className="text-center text-gray-400 m-1 mt-0">No results found</div> <p className="text-sm text-gray-500">No {title.toLowerCase()} found</p>
)} )
</Combobox.Options> ) : (
</Transition> <p className="text-sm text-gray-500">Loading...</p>
</div> )}
</> </Combobox.Options>
)} </Transition>
</Combobox> </div>
</div> </>
)}
</Combobox>
); );
}; };

View File

@ -1,10 +1,14 @@
type Value = any; type Value = any;
export type Props = { export type Props = {
display: string; title: string;
name: string;
multiple?: boolean; multiple?: boolean;
options: Array<{ name: string; value: Value }>; options?: Array<{ display: string; element?: JSX.Element; value: Value }>;
onChange: (value: Value) => void; onChange: (value: Value) => void;
value: Value; value: Value;
icon?: JSX.Element;
buttonClassName?: string;
optionsClassName?: string;
width?: "sm" | "md" | "lg" | "xl" | "2xl";
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
}; };

View File

@ -1,59 +1,41 @@
import React, { useEffect, useRef, useState } from "react"; import React from "react";
type TooltipProps = { type Props = {
content: string; children: React.ReactNode;
position: string; content: React.ReactNode;
children: any; position?: "top" | "bottom" | "left" | "right";
className?: string;
}; };
const Tooltip: React.FC<TooltipProps> = (props) => { const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => {
const myRef = useRef<any>();
const myRef2 = useRef<any>();
const [position, setPosition] = useState<any>({});
const [show, setShow] = useState<any>(false);
useEffect(() => {
const contentHeight = myRef2.current.clientHeight;
const pos = {
x: myRef.current.offsetLeft + myRef.current.clientWidth / 2,
y: myRef.current.offsetTop,
};
setPosition(pos);
}, []);
return ( return (
<> <div className="relative group">
<div className="inline-block z-99" ref={myRef}> <div
className={`fixed pointer-events-none transition-opacity opacity-0 group-hover:opacity-100 bg-black text-white px-3 py-1 rounded ${
position === "right"
? "left-14"
: position === "left"
? "right-14"
: position === "top"
? "bottom-14"
: "top-14"
}`}
>
<p className="truncate text-sx">{content}</p>
<span <span
className={`bg-black text-white p-2 rounded text-xs fixed ${ className={`absolute w-2 h-2 bg-black ${
props.position === "top" || props.position === "bottom" position === "top"
? "translate-x-[-50%]" ? "top-full left-1/2 transform -translate-y-1/2 -translate-x-1/2 rotate-45"
: "translate-y-[-50%]" : position === "bottom"
} duration-300 ${ ? "bottom-full left-1/2 transform translate-y-1/2 -translate-x-1/2 rotate-45"
show ? "opacity-1 pointer-events-all" : "opacity-0 pointer-events-none" : position === "left"
} ${props.className}`} ? "left-full top-1/2 transform translate-x-1/2 -translate-y-1/2 rotate-45"
style={{ top: `${position.y}px`, left: `${position.x}px` }} : "right-full top-1/2 transform translate-x-1/2 -translate-y-1/2 rotate-45"
ref={myRef2} }`}
> ></span>
{props.content}
{/* Lorem ipsum, dolor sit amet consectetur adipisicing elit.Illo consequuntur libero placeat
porro facere itaque vitae, iusto quos fugiat consequatur. */}
</span>
{React.cloneElement(props.children, {
onMouseOver: () => setShow(true),
onMouseOut: () => setShow(false),
})}
</div> </div>
</> {children}
</div>
); );
}; };
Tooltip.defaultProps = {
position: "top",
};
export default Tooltip; export default Tooltip;

View File

@ -2,7 +2,8 @@ export { default as Button } from "./Button";
export { default as Input } from "./Input"; export { default as Input } from "./Input";
export { default as Select } from "./Select"; export { default as Select } from "./Select";
export { default as TextArea } from "./TextArea"; export { default as TextArea } from "./TextArea";
export { default as ListBox } from "./ListBox"; export { default as CustomListbox } from "./CustomListbox";
export { default as Spinner } from "./Spinner"; export { default as Spinner } from "./Spinner";
export { default as Tooltip } from "./Tooltip"; export { default as Tooltip } from "./Tooltip";
export { default as SearchListbox } from "./SearchListbox"; export { default as SearchListbox } from "./SearchListbox";
export { default as HeaderButton } from "./HeaderButton";