forked from github/plane
Merge pull request #362 from makeplane/style/issue_dropdown
style: new dropdown
This commit is contained in:
Aaryan Khandelwal
GitHub
commit
aeadf0ebbf
@ -14,8 +14,8 @@ import {
|
||||
IssuePrioritySelect,
|
||||
IssueProjectSelect,
|
||||
IssueStateSelect,
|
||||
IssueDateSelect,
|
||||
} from "components/issues/select";
|
||||
import { CycleSelect as IssueCycleSelect } from "components/cycles/select";
|
||||
import { CreateStateModal } from "components/states";
|
||||
import { CreateUpdateCycleModal } from "components/cycles";
|
||||
import { CreateLabelModal } from "components/labels";
|
||||
@ -266,16 +266,16 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="cycle"
|
||||
name="priority"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<IssueCycleSelect projectId={projectId} value={value} onChange={onChange} />
|
||||
<IssuePrioritySelect value={value} onChange={onChange} />
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="priority"
|
||||
name="assignees"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<IssuePrioritySelect value={value} onChange={onChange} />
|
||||
<IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
@ -295,21 +295,10 @@ export const IssueForm: FC<IssueFormProps> = ({
|
||||
control={control}
|
||||
name="target_date"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomDatePicker
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
className="max-w-[7rem]"
|
||||
/>
|
||||
<IssueDateSelect value={value} onChange={onChange} />
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="assignees"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<IssueAssigneeSelect projectId={projectId} value={value} onChange={onChange} />
|
||||
)}
|
||||
/>
|
||||
<IssueParentSelect
|
||||
control={control}
|
||||
isOpen={parentIssueListModalOpen}
|
||||
|
||||
@ -10,6 +10,9 @@ import { Transition, Combobox } from "@headlessui/react";
|
||||
import projectServices from "services/project.service";
|
||||
// ui
|
||||
import { AssigneesList, Avatar } from "components/ui";
|
||||
// icons
|
||||
import { UserGroupIcon, MagnifyingGlassIcon, CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
// fetch keys
|
||||
import { PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
|
||||
@ -61,48 +64,83 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
<Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md">
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
{value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null}
|
||||
</div>
|
||||
<Combobox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
{value && value.length > 0 && Array.isArray(value) ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
|
||||
<AssigneesList userIds={value} length={3} showLength={false} />
|
||||
<span className=" text-gray-500">{value.length} Assignees</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<UserGroupIcon className="h-4 w-4 text-gray-500 " />
|
||||
<span className=" text-gray-500">Assignee</span>
|
||||
</span>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<Combobox.Input
|
||||
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
<div className="py-1">
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search for a person..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1.5">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate px-2 py-1 text-gray-900`
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-500`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{people && (
|
||||
<>
|
||||
<Avatar
|
||||
user={people?.find((p) => p.member.id === option.value)?.member}
|
||||
/>
|
||||
{option.display}
|
||||
</>
|
||||
{({ selected, active }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-1">
|
||||
<Avatar
|
||||
user={people?.find((p) => p.member.id === option.value)?.member}
|
||||
/>
|
||||
<span>{option.display}</span>
|
||||
</div>
|
||||
<div
|
||||
className={`flex justify-center items-center p-1 rounded border border-gray-500 border-opacity-0 group-hover:border-opacity-100
|
||||
${selected ? "border-opacity-100 " : ""}
|
||||
${active ? "bg-gray-100" : ""} `}
|
||||
>
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))
|
||||
|
||||
70
apps/app/components/issues/select/date.tsx
Normal file
70
apps/app/components/issues/select/date.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from "react";
|
||||
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
import { CalendarDaysIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// react-datepicker
|
||||
import DatePicker from "react-datepicker";
|
||||
// import "react-datepicker/dist/react-datepicker.css";
|
||||
import { renderDateFormat } from "helpers/date-time.helper";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
onChange: (val: string | null) => void;
|
||||
};
|
||||
|
||||
export const IssueDateSelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<Popover className="flex justify-center items-center relative rounded-lg">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
{value ? (
|
||||
<>
|
||||
<span className="text-gray-600">{value}</span>
|
||||
<button onClick={() => onChange(null)}>
|
||||
<XMarkIcon className="h-3 w-3 text-gray-600" />
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<CalendarDaysIcon className="h-4 w-4 flex-shrink-0 " />
|
||||
<span className="text-gray-500">Due Date</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute top-10 -left-10 z-20 transform overflow-hidden">
|
||||
<DatePicker
|
||||
selected={value ? new Date(value) : null}
|
||||
onChange={(val) => {
|
||||
if (!val) onChange("");
|
||||
else onChange(renderDateFormat(val));
|
||||
}}
|
||||
dateFormat="dd-MM-yyyy"
|
||||
inline
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
@ -4,3 +4,4 @@ export * from "./parent";
|
||||
export * from "./priority";
|
||||
export * from "./project";
|
||||
export * from "./state";
|
||||
export * from "./date";
|
||||
|
||||
@ -7,13 +7,20 @@ import useSWR from "swr";
|
||||
// headless ui
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
// icons
|
||||
import { PlusIcon, RectangleGroupIcon, TagIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
CheckIcon,
|
||||
MagnifyingGlassIcon,
|
||||
PlusIcon,
|
||||
RectangleGroupIcon,
|
||||
TagIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// services
|
||||
import issuesServices from "services/issues.service";
|
||||
// types
|
||||
import type { IIssueLabels } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
|
||||
import { IssueLabelsList } from "components/ui";
|
||||
|
||||
type Props = {
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
@ -52,36 +59,57 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
<Combobox.Label className="sr-only">Labels</Combobox.Label>
|
||||
<Combobox.Button
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open
|
||||
? "outline-none border-theme bg-theme/5 ring-1 ring-theme "
|
||||
: "hover:bg-theme/5 "
|
||||
}`
|
||||
}
|
||||
>
|
||||
<TagIcon className="h-3 w-3 text-gray-500" />
|
||||
<span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
|
||||
{Array.isArray(value)
|
||||
? value.map((v) => issueLabels?.find((l) => l.id === v)?.name).join(", ") ||
|
||||
"Labels"
|
||||
: issueLabels?.find((l) => l.id === value)?.name || "Labels"}
|
||||
</span>
|
||||
{value && value.length > 0 ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1">
|
||||
<IssueLabelsList
|
||||
labels={value.map((v) => issueLabels?.find((l) => l.id === v)?.color) ?? []}
|
||||
length={3}
|
||||
showLength
|
||||
/>
|
||||
<span className=" text-gray-600">{value.length} Labels</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<TagIcon className="h-3 w-3 text-gray-500" />
|
||||
<span className=" text-gray-500">Label</span>
|
||||
</span>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<Combobox.Input
|
||||
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
<div className="py-1">
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search for label..."
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1.5">
|
||||
{issueLabels && filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((label) => {
|
||||
@ -92,21 +120,36 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
return (
|
||||
<Combobox.Option
|
||||
key={label.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={label.id}
|
||||
>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor:
|
||||
label.color && label.color !== "" ? label.color : "#000",
|
||||
}}
|
||||
/>
|
||||
{label.name}
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor:
|
||||
label.color && label.color !== ""
|
||||
? label.color
|
||||
: "#000",
|
||||
}}
|
||||
/>
|
||||
<span>{label.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
);
|
||||
} else
|
||||
@ -119,20 +162,33 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
{children.map((child) => (
|
||||
<Combobox.Option
|
||||
key={child.id}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={child.id}
|
||||
>
|
||||
<span
|
||||
className="h-2 w-2 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: child?.color ?? "black",
|
||||
}}
|
||||
/>
|
||||
{child.name}
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: child?.color ?? "black",
|
||||
}}
|
||||
/>
|
||||
<span>{child.name}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${
|
||||
selected ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</div>
|
||||
@ -147,11 +203,13 @@ export const IssueLabelSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex select-none w-full items-center gap-2 p-2 text-gray-400 outline-none hover:bg-indigo-50 hover:text-gray-900"
|
||||
className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
|
||||
<span className="text-xs whitespace-nowrap">Create label</span>
|
||||
<span className="flex justify-start items-center gap-1">
|
||||
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
|
||||
<span className="text-gray-600">Create New Label</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
|
||||
@ -6,6 +6,7 @@ import { Listbox, Transition } from "@headlessui/react";
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
import { CheckIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
@ -16,34 +17,62 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<Listbox as="div" className="relative" value={value} onChange={onChange}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Listbox.Button className="flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
|
||||
<span className="text-gray-500 grid place-items-center">{getPriorityIcon(value)}</span>
|
||||
<div className="flex items-center gap-2 capitalize">{value ?? "Priority"}</div>
|
||||
<Listbox.Button
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `${value ? "text-xs" : "text-xs text-gray-500"}`)}
|
||||
</span>
|
||||
<span className={`${value ? "text-gray-600" : "text-gray-500"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
</span>
|
||||
</span>
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Listbox.Options className="absolute mt-1 max-h-32 min-w-[8rem] overflow-y-auto whitespace-nowrap bg-white shadow-lg text-xs z-10 rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="py-1">
|
||||
<Listbox.Options
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<div>
|
||||
{PRIORITIES.map((priority) => (
|
||||
<Listbox.Option
|
||||
key={priority}
|
||||
className={({ selected, active }) =>
|
||||
`${selected ? "bg-indigo-50 font-medium" : ""} ${
|
||||
active ? "bg-indigo-50" : ""
|
||||
} relative cursor-pointer select-none p-2 text-gray-900`
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={priority}
|
||||
>
|
||||
<span className="flex items-center gap-2 capitalize">
|
||||
{getPriorityIcon(priority)}
|
||||
{priority ?? "None"}
|
||||
</span>
|
||||
{({ selected, active }) => (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -7,13 +7,19 @@ import useSWR from "swr";
|
||||
// services
|
||||
import stateService from "services/state.service";
|
||||
// headless ui
|
||||
import { Squares2X2Icon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
Squares2X2Icon,
|
||||
PlusIcon,
|
||||
MagnifyingGlassIcon,
|
||||
CheckIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// icons
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
// fetch keys
|
||||
import { STATE_LIST } from "constants/fetch-keys";
|
||||
import { getStateGroupIcon } from "components/icons";
|
||||
|
||||
type Props = {
|
||||
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
@ -41,6 +47,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
value: state.id,
|
||||
display: state.name,
|
||||
color: state.color,
|
||||
group: state.group,
|
||||
}));
|
||||
|
||||
const filteredOptions =
|
||||
@ -48,6 +55,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
? options
|
||||
: options?.filter((option) => option.display.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
const currentOption = options?.find((option) => option.value === value);
|
||||
return (
|
||||
<Combobox
|
||||
as="div"
|
||||
@ -57,64 +65,80 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
>
|
||||
{({ open }: any) => (
|
||||
<>
|
||||
<Combobox.Label className="sr-only">State</Combobox.Label>
|
||||
<Combobox.Button
|
||||
className={`flex cursor-pointer items-center gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500`}
|
||||
className={({ open }) =>
|
||||
`flex items-center text-xs cursor-pointer border rounded-md shadow-sm duration-200
|
||||
${
|
||||
open ? "outline-none border-theme bg-theme/5 ring-1 ring-theme " : "hover:bg-theme/5"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<Squares2X2Icon className="h-3 w-3 text-gray-500" />
|
||||
<span className={`flex items-center gap-2 ${!value ? "" : "text-gray-900"}`}>
|
||||
{value && value !== "" ? (
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: options?.find((option) => option.value === value)?.color,
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
{options?.find((option) => option.value === value)?.display || "State"}
|
||||
</span>
|
||||
{value && value !== "" ? (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
{currentOption && currentOption.group
|
||||
? getStateGroupIcon(currentOption.group, "16", "16", currentOption.color)
|
||||
: ""}
|
||||
<span className=" text-gray-600">{currentOption?.display}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center justify-center text-xs gap-2 px-3 py-1.5">
|
||||
<Squares2X2Icon className="h-4 w-4 text-gray-500 " />
|
||||
<span className=" text-gray-500">{currentOption?.display || "State"}</span>
|
||||
</span>
|
||||
)}
|
||||
</Combobox.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Combobox.Options
|
||||
className={`absolute z-10 mt-1 max-h-32 min-w-[8rem] overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none text-xs`}
|
||||
className={`absolute z-10 max-h-52 min-w-[8rem] mt-1 px-2 py-2 text-xs
|
||||
rounded-md shadow-md overflow-auto border-none bg-white focus:outline-none`}
|
||||
>
|
||||
<Combobox.Input
|
||||
className="w-full border-b bg-transparent p-2 text-xs focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
<div className="py-1">
|
||||
<div className="flex justify-start items-center rounded-sm border-[0.6px] bg-gray-100 border-gray-200 w-full px-2">
|
||||
<MagnifyingGlassIcon className="h-3 w-3 text-gray-500" />
|
||||
<Combobox.Input
|
||||
className="w-full bg-transparent py-1 px-2 text-xs text-gray-500 focus:outline-none"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search States"
|
||||
displayValue={(assigned: any) => assigned?.name}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-1.5">
|
||||
{filteredOptions ? (
|
||||
filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<Combobox.Option
|
||||
key={option.value}
|
||||
className={({ active, selected }) =>
|
||||
`${active ? "bg-indigo-50" : ""} ${
|
||||
selected ? "bg-indigo-50 font-medium" : ""
|
||||
} flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
|
||||
className={({ active }) =>
|
||||
`${
|
||||
active ? "bg-gray-200" : ""
|
||||
} group flex min-w-[14rem] cursor-pointer select-none items-center gap-2 truncate rounded px-1 py-1.5 text-gray-600`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{states && (
|
||||
<>
|
||||
<span
|
||||
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
|
||||
style={{
|
||||
backgroundColor: option.color,
|
||||
}}
|
||||
/>
|
||||
{option.display}
|
||||
</>
|
||||
)}
|
||||
{({ selected, active }) =>
|
||||
states && (
|
||||
<div className="flex w-full gap-2 justify-between rounded">
|
||||
<div className="flex justify-start items-center gap-2">
|
||||
{getStateGroupIcon(option.group, "16", "16", option.color)}
|
||||
<span>{option.display}</span>
|
||||
</div>
|
||||
<div className="flex justify-center items-center p-1 rounded">
|
||||
<CheckIcon
|
||||
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Combobox.Option>
|
||||
))
|
||||
) : (
|
||||
@ -125,11 +149,13 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="flex select-none w-full items-center gap-2 p-2 text-gray-400 hover:bg-indigo-50 hover:text-gray-900"
|
||||
className="flex select-none w-full items-center py-2 px-1 rounded hover:bg-gray-200"
|
||||
onClick={() => setIsOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-3 w-3 text-gray-400" aria-hidden="true" />
|
||||
<span className="text-xs whitespace-nowrap">Create state</span>
|
||||
<span className="flex justify-start items-center gap-1">
|
||||
<PlusIcon className="h-4 w-4 text-gray-600" aria-hidden="true" />
|
||||
<span className="text-gray-600">Create New State</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</Combobox.Options>
|
||||
|
||||
@ -18,7 +18,7 @@ type AvatarProps = {
|
||||
};
|
||||
|
||||
export const Avatar: React.FC<AvatarProps> = ({ user, index }) => (
|
||||
<div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-2.5" : ""}`}>
|
||||
<div className={`relative h-5 w-5 rounded-full ${index && index !== 0 ? "-ml-3.5" : ""}`}>
|
||||
{user && user.avatar && user.avatar !== "" ? (
|
||||
<div
|
||||
className={`h-5 w-5 rounded-full border-2 ${
|
||||
@ -47,9 +47,15 @@ type AsigneesListProps = {
|
||||
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
|
||||
userIds?: string[];
|
||||
length?: number;
|
||||
showLength?: boolean;
|
||||
};
|
||||
|
||||
export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 5 }) => {
|
||||
export const AssigneesList: React.FC<AsigneesListProps> = ({
|
||||
users,
|
||||
userIds,
|
||||
length = 5,
|
||||
showLength = true,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug } = router.query;
|
||||
|
||||
@ -82,7 +88,13 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
|
||||
|
||||
return <Avatar key={userId} user={user} index={index} />;
|
||||
})}
|
||||
{userIds.length > length ? <span>+{userIds.length - length}</span> : null}
|
||||
{showLength ? (
|
||||
userIds.length > length ? (
|
||||
<span>+{userIds.length - length}</span>
|
||||
) : null
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -15,3 +15,4 @@ export * from "./progress-bar";
|
||||
export * from "./select";
|
||||
export * from "./spinner";
|
||||
export * from "./tooltip";
|
||||
export * from "./labels-list";
|
||||
|
||||
32
apps/app/components/ui/labels-list.tsx
Normal file
32
apps/app/components/ui/labels-list.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from "react";
|
||||
|
||||
type IssueLabelsListProps = {
|
||||
labels?: (string | undefined)[];
|
||||
length?: number;
|
||||
showLength?: boolean;
|
||||
};
|
||||
|
||||
export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
|
||||
labels,
|
||||
length = 5,
|
||||
showLength = true,
|
||||
}) => (
|
||||
<>
|
||||
{labels && (
|
||||
<>
|
||||
{labels.map((color, index) => (
|
||||
<div className={`flex h-4 w-4 rounded-full ${index ? "-ml-3.5" : ""}`}>
|
||||
<span
|
||||
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
|
||||
`}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
{labels.length > length ? <span>+{labels.length - length}</span> : null}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
Loading…
Reference in New Issue
Block a user