forked from github/plane
style: peek overview and issue details properties (#3447)
* style: peek overview and issue details properties * fix: cycle and module remove function * style: update placeholder text color * fix: relation constant * chore: added todos to fix later
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
81f84f24f7
commit
a2f34e9573
@ -118,7 +118,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
|
||||
<Combobox.Options className="fixed z-10" static>
|
||||
<div
|
||||
className={cn(
|
||||
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap",
|
||||
"my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-[12rem] whitespace-nowrap",
|
||||
optionsClassName
|
||||
)}
|
||||
ref={setPopperElement}
|
||||
|
||||
@ -22,13 +22,9 @@ type Props = {
|
||||
|
||||
const projectService = new ProjectService();
|
||||
|
||||
export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
isOpen,
|
||||
handleClose: onClose,
|
||||
searchParams,
|
||||
handleOnSubmit,
|
||||
workspaceLevelToggle = false,
|
||||
}) => {
|
||||
export const ExistingIssuesListModal: React.FC<Props> = (props) => {
|
||||
const { isOpen, handleClose: onClose, searchParams, handleOnSubmit, workspaceLevelToggle = false } = props;
|
||||
// states
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [issues, setIssues] = useState<ISearchIssueResponse[]>([]);
|
||||
const [isSearching, setIsSearching] = useState(false);
|
||||
@ -92,7 +88,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
return (
|
||||
<>
|
||||
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
|
||||
<Dialog as="div" className="relative z-20" onClose={handleClose}>
|
||||
<Dialog as="div" className="relative z-20" onClose={() => {}}>
|
||||
<Transition.Child
|
||||
as={React.Fragment}
|
||||
enter="ease-out duration-300"
|
||||
@ -260,16 +256,16 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
|
||||
)}
|
||||
</Combobox.Options>
|
||||
</Combobox>
|
||||
{selectedIssues.length > 0 && (
|
||||
<div className="flex items-center justify-end gap-2 p-3">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<div className="flex items-center justify-end gap-2 p-3">
|
||||
<Button variant="neutral-primary" size="sm" onClick={handleClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
{selectedIssues.length > 0 && (
|
||||
<Button variant="primary" size="sm" onClick={onSubmit} loading={isSubmitting}>
|
||||
{isSubmitting ? "Adding..." : "Add selected issues"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
|
||||
@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
|
||||
type Props = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
onChange: (val: string | null) => void;
|
||||
projectId: string;
|
||||
value: string | null;
|
||||
@ -26,8 +27,11 @@ type Props = TDropdownProps & {
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
cycle: ICycle | null;
|
||||
hideIcon: boolean;
|
||||
hideText?: boolean;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
placeholder: string;
|
||||
};
|
||||
|
||||
type DropdownOptions =
|
||||
@ -39,7 +43,15 @@ type DropdownOptions =
|
||||
| undefined;
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, cycle, dropdownArrow, hideText = false } = props;
|
||||
const {
|
||||
className,
|
||||
cycle,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -48,29 +60,49 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}{" "}
|
||||
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, cycle, dropdownArrow, hideText = false } = props;
|
||||
const {
|
||||
className,
|
||||
cycle,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, cycle, dropdownArrow, hideText = false } = props;
|
||||
const {
|
||||
className,
|
||||
cycle,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -79,9 +111,11 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<ContrastIcon className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? "Cycle"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <ContrastIcon className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{cycle?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -95,7 +129,10 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
onChange,
|
||||
placeholder = "Cycle",
|
||||
placement,
|
||||
projectId,
|
||||
value,
|
||||
@ -178,9 +215,7 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", {
|
||||
className,
|
||||
})}
|
||||
className={cn("h-full", className)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
@ -210,44 +245,63 @@ export const CycleDropdown: React.FC<Props> = observer((props) => {
|
||||
)}
|
||||
onClick={openDropdown}
|
||||
>
|
||||
{/* TODO: move button components to a single file for each dropdown */}
|
||||
{buttonVariant === "border-with-text" ? (
|
||||
<BorderButton
|
||||
cycle={selectedCycle}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
<BorderButton
|
||||
cycle={selectedCycle}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-with-text" ? (
|
||||
<BackgroundButton
|
||||
cycle={selectedCycle}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
<BackgroundButton
|
||||
cycle={selectedCycle}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-with-text" ? (
|
||||
<TransparentButton
|
||||
cycle={selectedCycle}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
<TransparentButton
|
||||
cycle={selectedCycle}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
|
||||
@ -13,28 +13,40 @@ import { cn } from "helpers/common.helper";
|
||||
import { TDropdownProps } from "./types";
|
||||
|
||||
type Props = TDropdownProps & {
|
||||
clearIconClassName?: string;
|
||||
icon?: React.ReactNode;
|
||||
isClearable?: boolean;
|
||||
minDate?: Date;
|
||||
maxDate?: Date;
|
||||
onChange: (val: Date | null) => void;
|
||||
placeholder: string;
|
||||
value: Date | string | null;
|
||||
closeOnSelect?: boolean;
|
||||
};
|
||||
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
clearIconClassName: string;
|
||||
date: string | Date | null;
|
||||
icon: React.ReactNode;
|
||||
isClearable: boolean;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
onClear: () => void;
|
||||
placeholder: string;
|
||||
};
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, date, icon, isClearable, hideText = false, onClear, placeholder } = props;
|
||||
const {
|
||||
className,
|
||||
clearIconClassName,
|
||||
date,
|
||||
icon,
|
||||
isClearable,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
onClear,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -43,11 +55,11 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{!hideIcon && icon}
|
||||
{!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
|
||||
{isClearable && (
|
||||
<X
|
||||
className="h-2 w-2 flex-shrink-0"
|
||||
className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClear();
|
||||
@ -59,17 +71,27 @@ const BorderButton = (props: ButtonProps) => {
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, date, icon, isClearable, hideText = false, onClear, placeholder } = props;
|
||||
const {
|
||||
className,
|
||||
clearIconClassName,
|
||||
date,
|
||||
icon,
|
||||
isClearable,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
onClear,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
{icon}
|
||||
{!hideIcon && icon}
|
||||
{!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
|
||||
{isClearable && (
|
||||
<X
|
||||
className="h-2 w-2 flex-shrink-0"
|
||||
className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClear();
|
||||
@ -81,7 +103,17 @@ const BackgroundButton = (props: ButtonProps) => {
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, date, icon, isClearable, hideText = false, onClear, placeholder } = props;
|
||||
const {
|
||||
className,
|
||||
clearIconClassName,
|
||||
date,
|
||||
icon,
|
||||
isClearable,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
onClear,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -90,11 +122,11 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
{icon}
|
||||
{!hideIcon && icon}
|
||||
{!hideText && <span className="flex-grow truncate">{date ? renderFormattedDate(date) : placeholder}</span>}
|
||||
{isClearable && (
|
||||
<X
|
||||
className="h-2 w-2 flex-shrink-0"
|
||||
className={cn("h-2 w-2 flex-shrink-0", clearIconClassName)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onClear();
|
||||
@ -111,13 +143,15 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
buttonContainerClassName,
|
||||
buttonVariant,
|
||||
className = "",
|
||||
clearIconClassName = "",
|
||||
disabled = false,
|
||||
hideIcon = false,
|
||||
icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
|
||||
isClearable = true,
|
||||
minDate,
|
||||
maxDate,
|
||||
onChange,
|
||||
placeholder,
|
||||
placeholder = "Date",
|
||||
placement,
|
||||
value,
|
||||
closeOnSelect = true,
|
||||
@ -157,7 +191,7 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", className)}
|
||||
className={cn("h-full", className)}
|
||||
onKeyDown={handleKeyDown}
|
||||
>
|
||||
<Combobox.Button as={React.Fragment}>
|
||||
@ -178,6 +212,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
<BorderButton
|
||||
date={value}
|
||||
className={buttonClassName}
|
||||
clearIconClassName={clearIconClassName}
|
||||
hideIcon={hideIcon}
|
||||
icon={icon}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable && isDateSelected}
|
||||
@ -187,6 +223,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
<BorderButton
|
||||
date={value}
|
||||
className={buttonClassName}
|
||||
clearIconClassName={clearIconClassName}
|
||||
hideIcon={hideIcon}
|
||||
icon={icon}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable && isDateSelected}
|
||||
@ -197,6 +235,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
<BackgroundButton
|
||||
date={value}
|
||||
className={buttonClassName}
|
||||
clearIconClassName={clearIconClassName}
|
||||
hideIcon={hideIcon}
|
||||
icon={icon}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable && isDateSelected}
|
||||
@ -206,6 +246,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
<BackgroundButton
|
||||
date={value}
|
||||
className={buttonClassName}
|
||||
clearIconClassName={clearIconClassName}
|
||||
hideIcon={hideIcon}
|
||||
icon={icon}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable && isDateSelected}
|
||||
@ -216,6 +258,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
<TransparentButton
|
||||
date={value}
|
||||
className={buttonClassName}
|
||||
clearIconClassName={clearIconClassName}
|
||||
hideIcon={hideIcon}
|
||||
icon={icon}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable && isDateSelected}
|
||||
@ -225,6 +269,8 @@ export const DateDropdown: React.FC<Props> = (props) => {
|
||||
<TransparentButton
|
||||
date={value}
|
||||
className={buttonClassName}
|
||||
clearIconClassName={clearIconClassName}
|
||||
hideIcon={hideIcon}
|
||||
icon={icon}
|
||||
placeholder={placeholder}
|
||||
isClearable={isClearable && isDateSelected}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
|
||||
import { Fragment, ReactNode, useRef, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Combobox } from "@headlessui/react";
|
||||
import { usePopper } from "react-popper";
|
||||
@ -16,6 +16,7 @@ import { TDropdownProps } from "./types";
|
||||
type Props = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
onChange: (val: number | null) => void;
|
||||
projectId: string;
|
||||
value: number | null;
|
||||
@ -25,7 +26,10 @@ type ButtonProps = {
|
||||
className?: string;
|
||||
estimatePoint: string | null;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
placeholder: string;
|
||||
};
|
||||
|
||||
type DropdownOptions =
|
||||
@ -37,7 +41,15 @@ type DropdownOptions =
|
||||
| undefined;
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, estimatePoint, dropdownArrow, hideText = false } = props;
|
||||
const {
|
||||
className,
|
||||
estimatePoint,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -46,29 +58,49 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Triangle className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : "Estimate"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, estimatePoint, dropdownArrow, hideText = false } = props;
|
||||
const {
|
||||
className,
|
||||
estimatePoint,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
<Triangle className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : "Estimate"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, estimatePoint, dropdownArrow, hideText = false } = props;
|
||||
const {
|
||||
className,
|
||||
estimatePoint,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -77,9 +109,11 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<Triangle className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : "Estimate"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <Triangle className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{estimatePoint !== null ? estimatePoint : placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -93,7 +127,10 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
onChange,
|
||||
placeholder = "Estimate",
|
||||
placement,
|
||||
projectId,
|
||||
value,
|
||||
@ -167,9 +204,7 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", {
|
||||
className,
|
||||
})}
|
||||
className={cn("h-full w-full", className)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
@ -204,39 +239,57 @@ export const EstimateDropdown: React.FC<Props> = observer((props) => {
|
||||
estimatePoint={selectedEstimate}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
<BorderButton
|
||||
estimatePoint={selectedEstimate}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-with-text" ? (
|
||||
<BackgroundButton
|
||||
estimatePoint={selectedEstimate}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
<BackgroundButton
|
||||
estimatePoint={selectedEstimate}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-with-text" ? (
|
||||
<TransparentButton
|
||||
estimatePoint={selectedEstimate}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
<TransparentButton
|
||||
estimatePoint={selectedEstimate}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
|
||||
@ -10,7 +10,9 @@ import { cn } from "helpers/common.helper";
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
placeholder: string;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
userIds: string | string[] | null;
|
||||
};
|
||||
@ -41,7 +43,15 @@ const ButtonAvatars = observer(({ userIds }: { userIds: string | string[] | null
|
||||
});
|
||||
|
||||
export const BorderButton = observer((props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, placeholder, userIds } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
userIds,
|
||||
} = props;
|
||||
// store hooks
|
||||
const { getUserDetails } = useMember();
|
||||
|
||||
@ -54,19 +64,29 @@ export const BorderButton = observer((props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<ButtonAvatars userIds={userIds} />
|
||||
{!hideIcon && <ButtonAvatars userIds={userIds} />}
|
||||
{!hideText && (
|
||||
<span className="flex-grow truncate">
|
||||
{userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
|
||||
</span>
|
||||
)}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const BackgroundButton = observer((props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, placeholder, userIds } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
userIds,
|
||||
} = props;
|
||||
// store hooks
|
||||
const { getUserDetails } = useMember();
|
||||
|
||||
@ -76,19 +96,29 @@ export const BackgroundButton = observer((props: ButtonProps) => {
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
<ButtonAvatars userIds={userIds} />
|
||||
{!hideIcon && <ButtonAvatars userIds={userIds} />}
|
||||
{!hideText && (
|
||||
<span className="flex-grow truncate">
|
||||
{userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
|
||||
</span>
|
||||
)}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const TransparentButton = observer((props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, placeholder, userIds } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
userIds,
|
||||
} = props;
|
||||
// store hooks
|
||||
const { getUserDetails } = useMember();
|
||||
|
||||
@ -101,13 +131,15 @@ export const TransparentButton = observer((props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<ButtonAvatars userIds={userIds} />
|
||||
{!hideIcon && <ButtonAvatars userIds={userIds} />}
|
||||
{!hideText && (
|
||||
<span className="flex-grow truncate">
|
||||
{userIds ? (isMultiple ? placeholder : getUserDetails(userIds)?.display_name) : placeholder}
|
||||
</span>
|
||||
)}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Fragment, useEffect, useRef, useState } from "react";
|
||||
import { Fragment, useRef, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Combobox } from "@headlessui/react";
|
||||
import { usePopper } from "react-popper";
|
||||
@ -29,6 +29,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
multiple,
|
||||
onChange,
|
||||
placeholder = "Members",
|
||||
@ -108,9 +110,7 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", {
|
||||
className,
|
||||
})}
|
||||
className={cn("h-full", className)}
|
||||
onKeyDown={handleKeyDown}
|
||||
{...comboboxProps}
|
||||
>
|
||||
@ -143,6 +143,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
@ -150,6 +152,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
hideText
|
||||
/>
|
||||
@ -158,6 +162,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
@ -165,6 +171,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
hideText
|
||||
/>
|
||||
@ -173,6 +181,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
@ -180,6 +190,8 @@ export const ProjectMemberDropdown: React.FC<Props> = observer((props) => {
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
hideText
|
||||
/>
|
||||
|
||||
1
web/components/dropdowns/member/types.d.ts
vendored
1
web/components/dropdowns/member/types.d.ts
vendored
@ -3,6 +3,7 @@ import { TDropdownProps } from "../types";
|
||||
export type MemberDropdownProps = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
placeholder?: string;
|
||||
} & (
|
||||
| {
|
||||
|
||||
@ -5,6 +5,8 @@ import { usePopper } from "react-popper";
|
||||
import { Check, Search } from "lucide-react";
|
||||
// hooks
|
||||
import { useMember, useUser } from "hooks/store";
|
||||
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
// components
|
||||
import { BackgroundButton, BorderButton, TransparentButton } from "components/dropdowns";
|
||||
// icons
|
||||
@ -13,8 +15,6 @@ import { Avatar } from "@plane/ui";
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
import { MemberDropdownProps } from "./types";
|
||||
import { useDropdownKeyDown } from "hooks/use-dropdown-key-down";
|
||||
import useOutsideClickDetector from "hooks/use-outside-click-detector";
|
||||
|
||||
export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((props) => {
|
||||
const {
|
||||
@ -25,6 +25,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
multiple,
|
||||
onChange,
|
||||
placeholder = "Members",
|
||||
@ -97,9 +99,7 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", {
|
||||
className,
|
||||
})}
|
||||
className={cn("h-full", className)}
|
||||
{...comboboxProps}
|
||||
handleKeyDown={handleKeyDown}
|
||||
>
|
||||
@ -130,6 +130,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
@ -137,6 +139,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
hideText
|
||||
/>
|
||||
@ -145,6 +149,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
@ -152,6 +158,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
hideText
|
||||
/>
|
||||
@ -160,6 +168,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
@ -167,6 +177,8 @@ export const WorkspaceMemberDropdown: React.FC<MemberDropdownProps> = observer((
|
||||
userIds={value}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
hideText
|
||||
/>
|
||||
|
||||
@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
|
||||
type Props = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
onChange: (val: string | null) => void;
|
||||
projectId: string;
|
||||
value: string | null;
|
||||
@ -34,12 +35,23 @@ type DropdownOptions =
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
module: IModule | null;
|
||||
placeholder: string;
|
||||
};
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, module } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
module,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -48,29 +60,49 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<DiceIcon className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{module?.name ?? "Module"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, module } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
module,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
<DiceIcon className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{module?.name ?? "Module"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, module } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
module,
|
||||
placeholder,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -79,9 +111,11 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<DiceIcon className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideText && <span className="flex-grow truncate">{module?.name ?? "Module"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && <DiceIcon className="h-3 w-3 flex-shrink-0" />}
|
||||
{!hideText && <span className="flex-grow truncate">{module?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -95,7 +129,10 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
onChange,
|
||||
placeholder = "Module",
|
||||
placement,
|
||||
projectId,
|
||||
value,
|
||||
@ -178,7 +215,7 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", className)}
|
||||
className={cn("h-full", className)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
@ -213,39 +250,57 @@ export const ModuleDropdown: React.FC<Props> = observer((props) => {
|
||||
module={selectedModule}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
<BorderButton
|
||||
module={selectedModule}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-with-text" ? (
|
||||
<BackgroundButton
|
||||
module={selectedModule}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
<BackgroundButton
|
||||
module={selectedModule}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-with-text" ? (
|
||||
<TransparentButton
|
||||
module={selectedModule}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
<TransparentButton
|
||||
module={selectedModule}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
|
||||
@ -19,6 +19,7 @@ import { useTheme } from "next-themes";
|
||||
type Props = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
highlightUrgent?: boolean;
|
||||
onChange: (val: TIssuePriorities) => void;
|
||||
value: TIssuePriorities;
|
||||
@ -27,13 +28,23 @@ type Props = TDropdownProps & {
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
highlightUrgent: boolean;
|
||||
priority: TIssuePriorities;
|
||||
};
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, highlightUrgent, priority } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
highlightUrgent,
|
||||
priority,
|
||||
} = props;
|
||||
|
||||
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
|
||||
|
||||
@ -59,35 +70,47 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
>
|
||||
<PriorityIcon
|
||||
priority={priority}
|
||||
size={12}
|
||||
className={cn("flex-shrink-0", {
|
||||
// increase the icon size if text is hidden
|
||||
"h-3.5 w-3.5": hideText,
|
||||
// centre align the icons if text is hidden
|
||||
"translate-x-[0.0625rem]": hideText && priority === "high",
|
||||
"translate-x-0.5": hideText && priority === "medium",
|
||||
"translate-x-1": hideText && priority === "low",
|
||||
// highlight the icon if priority is urgent
|
||||
"text-white": priority === "urgent" && highlightUrgent,
|
||||
{!hideIcon && (
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<PriorityIcon
|
||||
priority={priority}
|
||||
size={12}
|
||||
className={cn("flex-shrink-0", {
|
||||
// increase the icon size if text is hidden
|
||||
"h-3.5 w-3.5": hideText,
|
||||
// centre align the icons if text is hidden
|
||||
"translate-x-[0.0625rem]": hideText && priority === "high",
|
||||
"translate-x-0.5": hideText && priority === "medium",
|
||||
"translate-x-1": hideText && priority === "low",
|
||||
// highlight the icon if priority is urgent
|
||||
"text-white": priority === "urgent" && highlightUrgent,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, highlightUrgent, priority } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
highlightUrgent,
|
||||
priority,
|
||||
} = props;
|
||||
|
||||
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
|
||||
|
||||
@ -113,35 +136,47 @@ const BackgroundButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
>
|
||||
<PriorityIcon
|
||||
priority={priority}
|
||||
size={12}
|
||||
className={cn("flex-shrink-0", {
|
||||
// increase the icon size if text is hidden
|
||||
"h-3.5 w-3.5": hideText,
|
||||
// centre align the icons if text is hidden
|
||||
"translate-x-[0.0625rem]": hideText && priority === "high",
|
||||
"translate-x-0.5": hideText && priority === "medium",
|
||||
"translate-x-1": hideText && priority === "low",
|
||||
// highlight the icon if priority is urgent
|
||||
"text-white": priority === "urgent" && highlightUrgent,
|
||||
{!hideIcon && (
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<PriorityIcon
|
||||
priority={priority}
|
||||
size={12}
|
||||
className={cn("flex-shrink-0", {
|
||||
// increase the icon size if text is hidden
|
||||
"h-3.5 w-3.5": hideText,
|
||||
// centre align the icons if text is hidden
|
||||
"translate-x-[0.0625rem]": hideText && priority === "high",
|
||||
"translate-x-0.5": hideText && priority === "medium",
|
||||
"translate-x-1": hideText && priority === "low",
|
||||
// highlight the icon if priority is urgent
|
||||
"text-white": priority === "urgent" && highlightUrgent,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, highlightUrgent, priority } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
highlightUrgent,
|
||||
priority,
|
||||
} = props;
|
||||
|
||||
const priorityDetails = ISSUE_PRIORITIES.find((p) => p.key === priority);
|
||||
|
||||
@ -167,29 +202,33 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
>
|
||||
<PriorityIcon
|
||||
priority={priority}
|
||||
size={12}
|
||||
className={cn("flex-shrink-0", {
|
||||
// increase the icon size if text is hidden
|
||||
"h-3.5 w-3.5": hideText,
|
||||
// centre align the icons if text is hidden
|
||||
"translate-x-[0.0625rem]": hideText && priority === "high",
|
||||
"translate-x-0.5": hideText && priority === "medium",
|
||||
"translate-x-1": hideText && priority === "low",
|
||||
// highlight the icon if priority is urgent
|
||||
"text-white": priority === "urgent" && highlightUrgent,
|
||||
{!hideIcon && (
|
||||
<div
|
||||
className={cn({
|
||||
// highlight just the icon if text is visible and priority is urgent
|
||||
"bg-red-500 p-1 rounded": priority === "urgent" && !hideText && highlightUrgent,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<PriorityIcon
|
||||
priority={priority}
|
||||
size={12}
|
||||
className={cn("flex-shrink-0", {
|
||||
// increase the icon size if text is hidden
|
||||
"h-3.5 w-3.5": hideText,
|
||||
// centre align the icons if text is hidden
|
||||
"translate-x-[0.0625rem]": hideText && priority === "high",
|
||||
"translate-x-0.5": hideText && priority === "medium",
|
||||
"translate-x-1": hideText && priority === "low",
|
||||
// highlight the icon if priority is urgent
|
||||
"text-white": priority === "urgent" && highlightUrgent,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{priorityDetails?.title}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -203,6 +242,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
highlightUrgent = true,
|
||||
onChange,
|
||||
placement,
|
||||
@ -260,9 +301,7 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", {
|
||||
className,
|
||||
})}
|
||||
className={cn("h-full", className)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
@ -300,6 +339,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
})}
|
||||
highlightUrgent={highlightUrgent}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
<BorderButton
|
||||
@ -309,6 +350,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
})}
|
||||
highlightUrgent={highlightUrgent}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
/>
|
||||
) : buttonVariant === "background-with-text" ? (
|
||||
@ -319,6 +362,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
})}
|
||||
highlightUrgent={highlightUrgent}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
<BackgroundButton
|
||||
@ -328,6 +373,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
})}
|
||||
highlightUrgent={highlightUrgent}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
/>
|
||||
) : buttonVariant === "transparent-with-text" ? (
|
||||
@ -338,6 +385,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
})}
|
||||
highlightUrgent={highlightUrgent}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
<TransparentButton
|
||||
@ -347,6 +396,8 @@ export const PriorityDropdown: React.FC<Props> = (props) => {
|
||||
})}
|
||||
highlightUrgent={highlightUrgent}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
/>
|
||||
) : null}
|
||||
|
||||
@ -17,6 +17,7 @@ import { TDropdownProps } from "./types";
|
||||
type Props = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
onChange: (val: string) => void;
|
||||
value: string | null;
|
||||
};
|
||||
@ -24,12 +25,23 @@ type Props = TDropdownProps & {
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
placeholder: string;
|
||||
project: IProject | null;
|
||||
};
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, project } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
project,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -38,33 +50,57 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className="grid place-items-center flex-shrink-0">
|
||||
{project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
|
||||
</span>
|
||||
{!hideText && <span className="flex-grow truncate">{project?.name ?? "Project"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && (
|
||||
<span className="grid place-items-center flex-shrink-0">
|
||||
{project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
|
||||
</span>
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, project } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
project,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
<span className="grid place-items-center flex-shrink-0">
|
||||
{project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
|
||||
</span>
|
||||
{!hideText && <span className="flex-grow truncate">{project?.name ?? "Project"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && (
|
||||
<span className="grid place-items-center flex-shrink-0">
|
||||
{project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
|
||||
</span>
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, project } = props;
|
||||
const {
|
||||
className,
|
||||
dropdownArrow,
|
||||
dropdownArrowClassName,
|
||||
hideIcon = false,
|
||||
hideText = false,
|
||||
placeholder,
|
||||
project,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -73,11 +109,15 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<span className="grid place-items-center flex-shrink-0">
|
||||
{project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
|
||||
</span>
|
||||
{!hideText && <span className="flex-grow truncate">{project?.name ?? "Project"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{!hideIcon && (
|
||||
<span className="grid place-items-center flex-shrink-0">
|
||||
{project?.emoji ? renderEmoji(project?.emoji) : project?.icon_prop ? renderEmoji(project?.icon_prop) : null}
|
||||
</span>
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{project?.name ?? placeholder}</span>}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -91,7 +131,10 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
onChange,
|
||||
placeholder = "Project",
|
||||
placement,
|
||||
value,
|
||||
tabIndex,
|
||||
@ -158,7 +201,7 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", className)}
|
||||
className={cn("h-full", className)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
@ -193,39 +236,57 @@ export const ProjectDropdown: React.FC<Props> = observer((props) => {
|
||||
project={selectedProject}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
<BorderButton
|
||||
project={selectedProject}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-with-text" ? (
|
||||
<BackgroundButton
|
||||
project={selectedProject}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
<BackgroundButton
|
||||
project={selectedProject}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-with-text" ? (
|
||||
<TransparentButton
|
||||
project={selectedProject}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
<TransparentButton
|
||||
project={selectedProject}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
placeholder={placeholder}
|
||||
/>
|
||||
) : null}
|
||||
</button>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
|
||||
import { Fragment, ReactNode, useRef, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Combobox } from "@headlessui/react";
|
||||
import { usePopper } from "react-popper";
|
||||
@ -18,6 +18,7 @@ import { TDropdownProps } from "./types";
|
||||
type Props = TDropdownProps & {
|
||||
button?: ReactNode;
|
||||
dropdownArrow?: boolean;
|
||||
dropdownArrowClassName?: string;
|
||||
onChange: (val: string) => void;
|
||||
projectId: string;
|
||||
value: string;
|
||||
@ -26,12 +27,14 @@ type Props = TDropdownProps & {
|
||||
type ButtonProps = {
|
||||
className?: string;
|
||||
dropdownArrow: boolean;
|
||||
dropdownArrowClassName: string;
|
||||
hideIcon?: boolean;
|
||||
hideText?: boolean;
|
||||
state: IState | undefined;
|
||||
};
|
||||
|
||||
const BorderButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, state } = props;
|
||||
const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, state } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -40,29 +43,37 @@ const BorderButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideIcon && (
|
||||
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const BackgroundButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, state } = props;
|
||||
const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, state } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn("h-full flex items-center gap-1.5 rounded text-xs px-2 py-0.5 bg-custom-background-80", className)}
|
||||
>
|
||||
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideIcon && (
|
||||
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const TransparentButton = (props: ButtonProps) => {
|
||||
const { className, dropdownArrow, hideText = false, state } = props;
|
||||
const { className, dropdownArrow, dropdownArrowClassName, hideIcon = false, hideText = false, state } = props;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -71,9 +82,13 @@ const TransparentButton = (props: ButtonProps) => {
|
||||
className
|
||||
)}
|
||||
>
|
||||
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
|
||||
{!hideIcon && (
|
||||
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
|
||||
)}
|
||||
{!hideText && <span className="flex-grow truncate">{state?.name ?? "State"}</span>}
|
||||
{dropdownArrow && <ChevronDown className="h-2.5 w-2.5 flex-shrink-0" aria-hidden="true" />}
|
||||
{dropdownArrow && (
|
||||
<ChevronDown className={cn("h-2.5 w-2.5 flex-shrink-0", dropdownArrowClassName)} aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -87,6 +102,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||
className = "",
|
||||
disabled = false,
|
||||
dropdownArrow = false,
|
||||
dropdownArrowClassName = "",
|
||||
hideIcon = false,
|
||||
onChange,
|
||||
placement,
|
||||
projectId,
|
||||
@ -134,7 +151,6 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||
const filteredOptions =
|
||||
query === "" ? options : options?.filter((o) => o.query.toLowerCase().includes(query.toLowerCase()));
|
||||
|
||||
|
||||
const selectedState = getStateById(value);
|
||||
|
||||
const openDropdown = () => {
|
||||
@ -151,7 +167,7 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||
as="div"
|
||||
ref={dropdownRef}
|
||||
tabIndex={tabIndex}
|
||||
className={cn("h-full flex-shrink-0", className)}
|
||||
className={cn("h-full", className)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={disabled}
|
||||
@ -186,12 +202,16 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||
state={selectedState}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
/>
|
||||
) : buttonVariant === "border-without-text" ? (
|
||||
<BorderButton
|
||||
state={selectedState}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
/>
|
||||
) : buttonVariant === "background-with-text" ? (
|
||||
@ -199,12 +219,16 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||
state={selectedState}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
/>
|
||||
) : buttonVariant === "background-without-text" ? (
|
||||
<BackgroundButton
|
||||
state={selectedState}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
hideText
|
||||
/>
|
||||
) : buttonVariant === "transparent-with-text" ? (
|
||||
@ -212,12 +236,15 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
|
||||
state={selectedState}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideIcon={hideIcon}
|
||||
/>
|
||||
) : buttonVariant === "transparent-without-text" ? (
|
||||
<TransparentButton
|
||||
state={selectedState}
|
||||
className={buttonClassName}
|
||||
dropdownArrow={dropdownArrow && !disabled}
|
||||
dropdownArrowClassName={dropdownArrowClassName}
|
||||
hideText
|
||||
/>
|
||||
) : null}
|
||||
|
||||
2
web/components/dropdowns/types.d.ts
vendored
2
web/components/dropdowns/types.d.ts
vendored
@ -14,6 +14,8 @@ export type TDropdownProps = {
|
||||
buttonVariant: TButtonVariants;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
hideIcon?: boolean;
|
||||
placeholder?: string;
|
||||
placement?: Placement;
|
||||
tabIndex?: number;
|
||||
};
|
||||
|
||||
@ -1,14 +1,18 @@
|
||||
import React, { ReactNode, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// hooks
|
||||
import { useCycle, useIssueDetail } from "hooks/store";
|
||||
import { useIssueDetail } from "hooks/store";
|
||||
// components
|
||||
import { CycleDropdown } from "components/dropdowns";
|
||||
// ui
|
||||
import { ContrastIcon, CustomSearchSelect, Spinner, Tooltip } from "@plane/ui";
|
||||
import { Spinner } from "@plane/ui";
|
||||
// helpers
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
import type { TIssueOperations } from "./root";
|
||||
|
||||
type TIssueCycleSelect = {
|
||||
className?: string;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
@ -17,84 +21,40 @@ type TIssueCycleSelect = {
|
||||
};
|
||||
|
||||
export const IssueCycleSelect: React.FC<TIssueCycleSelect> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
|
||||
// hooks
|
||||
const { getCycleById, currentProjectIncompleteCycleIds, fetchAllCycles } = useCycle();
|
||||
const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
|
||||
// states
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
// store hooks
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
// state
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_CYCLES` : null, async () => {
|
||||
if (workspaceSlug && projectId) await fetchAllCycles(workspaceSlug, projectId);
|
||||
});
|
||||
|
||||
// derived values
|
||||
const issue = getIssueById(issueId);
|
||||
const projectCycleIds = currentProjectIncompleteCycleIds;
|
||||
const issueCycle = (issue && issue.cycle_id && getCycleById(issue.cycle_id)) || undefined;
|
||||
const disableSelect = disabled || isUpdating;
|
||||
|
||||
const handleIssueCycleChange = async (cycleId: string) => {
|
||||
if (!cycleId) return;
|
||||
const handleIssueCycleChange = async (cycleId: string | null) => {
|
||||
if (!issue || issue.cycle_id === cycleId) return;
|
||||
setIsUpdating(true);
|
||||
if (issue && issue.cycle_id === cycleId)
|
||||
await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, cycleId, issueId);
|
||||
else await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
|
||||
if (cycleId) await issueOperations.addIssueToCycle(workspaceSlug, projectId, cycleId, [issueId]);
|
||||
else await issueOperations.removeIssueFromCycle(workspaceSlug, projectId, issue.cycle_id ?? "", issueId);
|
||||
setIsUpdating(false);
|
||||
};
|
||||
|
||||
type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
|
||||
const options: TDropdownOptions | undefined = projectCycleIds
|
||||
? (projectCycleIds
|
||||
.map((cycleId) => {
|
||||
const cycle = getCycleById(cycleId) || undefined;
|
||||
if (!cycle) return undefined;
|
||||
return {
|
||||
value: cycle.id,
|
||||
query: cycle.name,
|
||||
content: (
|
||||
<div className="flex items-center gap-1.5 truncate">
|
||||
<span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
|
||||
<ContrastIcon />
|
||||
</span>
|
||||
<span className="flex-grow truncate">{cycle.name}</span>
|
||||
</div>
|
||||
) as ReactNode,
|
||||
};
|
||||
})
|
||||
.filter((cycle) => cycle !== undefined) as TDropdownOptions)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<CustomSearchSelect
|
||||
value={issue?.cycle_id || undefined}
|
||||
onChange={(value: any) => handleIssueCycleChange(value)}
|
||||
options={options}
|
||||
customButton={
|
||||
<div>
|
||||
<Tooltip position="left" tooltipContent={`${issueCycle ? issueCycle?.name : "No cycle"}`}>
|
||||
<button
|
||||
type="button"
|
||||
className={`flex w-full items-center rounded bg-custom-background-80 px-2.5 py-0.5 text-xs ${
|
||||
disableSelect ? "cursor-not-allowed" : ""
|
||||
} max-w-[10rem]`}
|
||||
>
|
||||
<span
|
||||
className={`flex items-center gap-1.5 truncate ${
|
||||
issueCycle ? "text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
<span className="flex-shrink-0">{issueCycle && <ContrastIcon className="h-3.5 w-3.5" />}</span>
|
||||
<span className="truncate">{issueCycle ? issueCycle?.name : "No cycle"}</span>
|
||||
</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
}
|
||||
noChevron
|
||||
<div className={cn("flex items-center gap-1 h-full", className)}>
|
||||
<CycleDropdown
|
||||
value={issue?.cycle_id ?? null}
|
||||
onChange={handleIssueCycleChange}
|
||||
projectId={projectId}
|
||||
disabled={disableSelect}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-full group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.cycle_id ? "" : "text-custom-text-400"}`}
|
||||
placeholder="No cycle"
|
||||
hideIcon
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
{isUpdating && <Spinner className="h-4 w-4" />}
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,18 @@
|
||||
import React, { ReactNode, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// hooks
|
||||
import { useModule, useIssueDetail } from "hooks/store";
|
||||
import { useIssueDetail } from "hooks/store";
|
||||
// components
|
||||
import { ModuleDropdown } from "components/dropdowns";
|
||||
// ui
|
||||
import { CustomSearchSelect, DiceIcon, Spinner, Tooltip } from "@plane/ui";
|
||||
import { Spinner } from "@plane/ui";
|
||||
// helpers
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
import type { TIssueOperations } from "./root";
|
||||
|
||||
type TIssueModuleSelect = {
|
||||
className?: string;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
@ -17,58 +21,42 @@ type TIssueModuleSelect = {
|
||||
};
|
||||
|
||||
export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
|
||||
// hooks
|
||||
const { getModuleById, projectModuleIds, fetchModules } = useModule();
|
||||
const { className = "", workspaceSlug, projectId, issueId, issueOperations, disabled = false } = props;
|
||||
// states
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
// store hooks
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
// state
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
useSWR(workspaceSlug && projectId ? `PROJECT_${projectId}_ISSUE_${issueId}_MODULES` : null, async () => {
|
||||
if (workspaceSlug && projectId) await fetchModules(workspaceSlug, projectId);
|
||||
});
|
||||
|
||||
// derived values
|
||||
const issue = getIssueById(issueId);
|
||||
const issueModule = (issue && issue.module_id && getModuleById(issue.module_id)) || undefined;
|
||||
const disableSelect = disabled || isUpdating;
|
||||
|
||||
const handleIssueModuleChange = async (moduleId: string) => {
|
||||
if (!moduleId) return;
|
||||
const handleIssueModuleChange = async (moduleId: string | null) => {
|
||||
if (!issue || issue.module_id === moduleId) return;
|
||||
setIsUpdating(true);
|
||||
if (issue && issue.module_id === moduleId)
|
||||
await issueOperations.removeIssueFromModule(workspaceSlug, projectId, moduleId, issueId);
|
||||
else await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
|
||||
if (moduleId) await issueOperations.addIssueToModule(workspaceSlug, projectId, moduleId, [issueId]);
|
||||
else await issueOperations.removeIssueFromModule(workspaceSlug, projectId, issue.module_id ?? "", issueId);
|
||||
setIsUpdating(false);
|
||||
};
|
||||
|
||||
type TDropdownOptions = { value: string; query: string; content: ReactNode }[];
|
||||
const options: TDropdownOptions | undefined = projectModuleIds
|
||||
? (projectModuleIds
|
||||
.map((moduleId) => {
|
||||
const _module = getModuleById(moduleId);
|
||||
if (!_module) return undefined;
|
||||
|
||||
return {
|
||||
value: _module.id,
|
||||
query: _module.name,
|
||||
content: (
|
||||
<div className="flex items-center gap-1.5 truncate">
|
||||
<span className="flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center">
|
||||
<DiceIcon />
|
||||
</span>
|
||||
<span className="flex-grow truncate">{_module.name}</span>
|
||||
</div>
|
||||
) as ReactNode,
|
||||
};
|
||||
})
|
||||
.filter((_module) => _module !== undefined) as TDropdownOptions)
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1">
|
||||
<CustomSearchSelect
|
||||
<div className={cn("flex items-center gap-1 h-full", className)}>
|
||||
<ModuleDropdown
|
||||
value={issue?.module_id ?? null}
|
||||
onChange={handleIssueModuleChange}
|
||||
buttonVariant="transparent-with-text"
|
||||
projectId={projectId}
|
||||
disabled={disableSelect}
|
||||
className="w-full group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.module_id ? "" : "text-custom-text-400"}`}
|
||||
placeholder="No module"
|
||||
hideIcon
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
{/* <CustomSearchSelect
|
||||
value={issue?.module_id}
|
||||
onChange={(value: any) => handleIssueModuleChange(value)}
|
||||
options={options}
|
||||
@ -95,7 +83,7 @@ export const IssueModuleSelect: React.FC<TIssueModuleSelect> = observer((props)
|
||||
}
|
||||
noChevron
|
||||
disabled={disableSelect}
|
||||
/>
|
||||
/> */}
|
||||
{isUpdating && <Spinner className="h-4 w-4" />}
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,86 +1,103 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { X } from "lucide-react";
|
||||
import { Pencil, X } from "lucide-react";
|
||||
// hooks
|
||||
import { useIssueDetail, useProject } from "hooks/store";
|
||||
import { Spinner } from "@plane/ui";
|
||||
// components
|
||||
import { ParentIssuesListModal } from "components/issues";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// helpers
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
import { TIssueOperations } from "./root";
|
||||
|
||||
type TIssueParentSelect = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
className?: string;
|
||||
disabled?: boolean;
|
||||
issueId: string;
|
||||
issueOperations: TIssueOperations;
|
||||
|
||||
disabled?: boolean;
|
||||
projectId: string;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export const IssueParentSelect: React.FC<TIssueParentSelect> = observer(
|
||||
({ workspaceSlug, projectId, issueId, issueOperations, disabled = false }) => {
|
||||
// hooks
|
||||
const { getProjectById } = useProject();
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
// state
|
||||
const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
|
||||
const [updating, setUpdating] = useState(false);
|
||||
export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props) => {
|
||||
const { className = "", disabled = false, issueId, issueOperations, projectId, workspaceSlug } = props;
|
||||
// store hooks
|
||||
const { getProjectById } = useProject();
|
||||
const {
|
||||
issue: { getIssueById },
|
||||
} = useIssueDetail();
|
||||
const { isParentIssueModalOpen, toggleParentIssueModal } = useIssueDetail();
|
||||
// derived values
|
||||
const issue = getIssueById(issueId);
|
||||
const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
|
||||
const parentIssueProjectDetails =
|
||||
parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
|
||||
|
||||
const issue = getIssueById(issueId);
|
||||
const handleParentIssue = async (_issueId: string | null = null) => {
|
||||
try {
|
||||
await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
|
||||
await issueOperations.fetch(workspaceSlug, projectId, issueId);
|
||||
toggleParentIssueModal(false);
|
||||
} catch (error) {
|
||||
console.error("something went wrong while fetching the issue");
|
||||
}
|
||||
};
|
||||
|
||||
const parentIssue = issue?.parent_id ? getIssueById(issue.parent_id) : undefined;
|
||||
const parentIssueProjectDetails =
|
||||
parentIssue && parentIssue.project_id ? getProjectById(parentIssue.project_id) : undefined;
|
||||
if (!issue) return <></>;
|
||||
|
||||
const handleParentIssue = async (_issueId: string | null = null) => {
|
||||
setUpdating(true);
|
||||
try {
|
||||
await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
|
||||
await issueOperations.fetch(workspaceSlug, projectId, issueId);
|
||||
toggleParentIssueModal(false);
|
||||
setUpdating(false);
|
||||
} catch (error) {
|
||||
console.error("something went wrong while fetching the issue");
|
||||
}
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<ParentIssuesListModal
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
isOpen={isParentIssueModalOpen}
|
||||
handleClose={() => toggleParentIssueModal(false)}
|
||||
onChange={(issue: any) => handleParentIssue(issue?.id)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
|
||||
{
|
||||
"cursor-not-allowed": disabled,
|
||||
"hover:bg-custom-background-80": !disabled,
|
||||
},
|
||||
className
|
||||
)}
|
||||
onClick={() => toggleParentIssueModal(true)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{issue.parent_id && parentIssue ? (
|
||||
<div className="flex items-center gap-1 bg-green-500/20 text-green-700 rounded px-1.5 py-1">
|
||||
<Link
|
||||
href={`/${workspaceSlug}/projects/${projectId}/issues/${parentIssue?.id}`}
|
||||
className="text-xs font-medium"
|
||||
>
|
||||
{parentIssueProjectDetails?.identifier}-{parentIssue.sequence_id}
|
||||
</Link>
|
||||
|
||||
if (!issue) return <></>;
|
||||
|
||||
return (
|
||||
<div className="relative flex items-center gap-2">
|
||||
<ParentIssuesListModal
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
isOpen={isParentIssueModalOpen}
|
||||
handleClose={() => toggleParentIssueModal(false)}
|
||||
onChange={(issue: any) => handleParentIssue(issue?.id)}
|
||||
/>
|
||||
|
||||
<button
|
||||
className={`flex items-center gap-2 rounded bg-custom-background-80 px-2.5 py-0.5 text-xs w-max max-w-max" ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer "
|
||||
}`}
|
||||
disabled={disabled}
|
||||
>
|
||||
<div onClick={() => toggleParentIssueModal(true)}>
|
||||
{issue?.parent_id && parentIssue ? (
|
||||
`${parentIssueProjectDetails?.identifier}-${parentIssue.sequence_id}`
|
||||
) : (
|
||||
<span className="text-custom-text-200">Select issue</span>
|
||||
{!disabled && (
|
||||
<Tooltip tooltipContent="Remove">
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
handleParentIssue(null);
|
||||
}}
|
||||
>
|
||||
<X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{issue?.parent_id && parentIssue && !disabled && (
|
||||
<div onClick={() => handleParentIssue(null)}>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{updating && <Spinner className="h-4 w-4" />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
) : (
|
||||
<span className="text-sm text-custom-text-400">Add parent issue</span>
|
||||
)}
|
||||
{!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,42 +1,45 @@
|
||||
import React, { useState } from "react";
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { X, CopyPlus } from "lucide-react";
|
||||
import { CircleDot, CopyPlus, Pencil, X, XCircle } from "lucide-react";
|
||||
// hooks
|
||||
import { useIssueDetail, useIssues, useProject, useUser } from "hooks/store";
|
||||
import { useIssueDetail, useIssues, useProject } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { ExistingIssuesListModal } from "components/core";
|
||||
// icons
|
||||
import { BlockerIcon, BlockedIcon, RelatedIcon } from "@plane/ui";
|
||||
// ui
|
||||
import { RelatedIcon, Tooltip } from "@plane/ui";
|
||||
// helpers
|
||||
import { cn } from "helpers/common.helper";
|
||||
// types
|
||||
import { TIssueRelationTypes, ISearchIssueResponse } from "@plane/types";
|
||||
|
||||
export type TRelationObject = { name: string; icon: (size: number) => any; className: string };
|
||||
export type TRelationObject = { className: string; icon: (size: number) => React.ReactElement; placeholder: string };
|
||||
|
||||
export const issueRelationObject: Record<TIssueRelationTypes, TRelationObject> = {
|
||||
relates_to: {
|
||||
className: "bg-custom-background-80 text-custom-text-200",
|
||||
icon: (size) => <RelatedIcon height={size} width={size} />,
|
||||
placeholder: "Add related issues",
|
||||
},
|
||||
blocking: {
|
||||
name: "Blocking",
|
||||
icon: (size: number = 16) => <BlockerIcon height={size} width={size} />,
|
||||
className: "text-yellow-500 duration-300 hover:border-yellow-500/20 hover:bg-yellow-500/20",
|
||||
className: "bg-yellow-500/20 text-yellow-700",
|
||||
icon: (size) => <XCircle size={size} />,
|
||||
placeholder: "None",
|
||||
},
|
||||
blocked_by: {
|
||||
name: "Blocked by",
|
||||
icon: (size: number = 16) => <BlockedIcon height={size} width={size} />,
|
||||
className: "border-custom-border-200 text-red-500 hover:border-red-500/20 hover:bg-red-500/20",
|
||||
className: "bg-red-500/20 text-red-700",
|
||||
icon: (size) => <CircleDot size={size} />,
|
||||
placeholder: "None",
|
||||
},
|
||||
duplicate: {
|
||||
name: "Duplicate",
|
||||
icon: (size: number = 16) => <CopyPlus height={size} width={size} />,
|
||||
className: "border-custom-border-200",
|
||||
},
|
||||
relates_to: {
|
||||
name: "Relates to",
|
||||
icon: (size: number = 16) => <RelatedIcon height={size} width={size} />,
|
||||
className: "border-custom-border-200",
|
||||
className: "bg-custom-background-80 text-custom-text-200",
|
||||
icon: (size) => <CopyPlus size={size} />,
|
||||
placeholder: "None",
|
||||
},
|
||||
};
|
||||
|
||||
type TIssueRelationSelect = {
|
||||
className?: string;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
issueId: string;
|
||||
@ -45,22 +48,21 @@ type TIssueRelationSelect = {
|
||||
};
|
||||
|
||||
export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
|
||||
const { className = "", workspaceSlug, projectId, issueId, relationKey, disabled = false } = props;
|
||||
// hooks
|
||||
const { currentUser } = useUser();
|
||||
const { getProjectById } = useProject();
|
||||
const {
|
||||
createRelation,
|
||||
removeRelation,
|
||||
relation: { getRelationByIssueIdRelationType },
|
||||
isRelationModalOpen,
|
||||
toggleRelationModal,
|
||||
} = useIssueDetail();
|
||||
const { issueMap } = useIssues();
|
||||
// states
|
||||
const [isRelationModalOpen, setIsRelationModalOpen] = useState(false);
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const relationIssueIds = getRelationByIssueIdRelationType(issueId as string, relationKey);
|
||||
const relationIssueIds = getRelationByIssueIdRelationType(issueId, relationKey);
|
||||
|
||||
const onSubmit = async (data: ISearchIssueResponse[]) => {
|
||||
if (data.length === 0) {
|
||||
@ -73,95 +75,84 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
|
||||
}
|
||||
|
||||
await createRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId as string,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
issueId,
|
||||
relationKey,
|
||||
data.map((i) => i.id)
|
||||
);
|
||||
|
||||
setIsRelationModalOpen(false);
|
||||
toggleRelationModal(null);
|
||||
};
|
||||
|
||||
if (!relationIssueIds) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ExistingIssuesListModal
|
||||
isOpen={isRelationModalOpen}
|
||||
handleClose={() => setIsRelationModalOpen(false)}
|
||||
isOpen={isRelationModalOpen === relationKey}
|
||||
handleClose={() => toggleRelationModal(null)}
|
||||
searchParams={{ issue_relation: true, issue_id: issueId }}
|
||||
handleOnSubmit={onSubmit}
|
||||
workspaceLevelToggle
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
"group flex items-center justify-between gap-2 px-2 py-0.5 rounded outline-none",
|
||||
{
|
||||
"cursor-not-allowed": disabled,
|
||||
"hover:bg-custom-background-80": !disabled,
|
||||
},
|
||||
className
|
||||
)}
|
||||
onClick={() => toggleRelationModal(relationKey)}
|
||||
disabled={disabled}
|
||||
>
|
||||
{relationIssueIds.length > 0 ? (
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{relationIssueIds.map((relationIssueId) => {
|
||||
const currentIssue = issueMap[relationIssueId];
|
||||
if (!currentIssue) return;
|
||||
|
||||
<div className="flex flex-wrap items-start py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
|
||||
{relationKey && issueRelationObject[relationKey] && (
|
||||
<>
|
||||
{issueRelationObject[relationKey].icon(16)}
|
||||
<p>{issueRelationObject[relationKey].name}</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
const projectDetails = getProjectById(currentIssue.project_id);
|
||||
|
||||
<div className="space-y-1 sm:basis-1/2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{relationIssueIds && relationIssueIds.length > 0
|
||||
? relationIssueIds.map((relationIssueId: any) => {
|
||||
const currentIssue = issueMap[relationIssueId];
|
||||
if (!currentIssue) return;
|
||||
|
||||
const projectDetails = getProjectById(currentIssue.project_id);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={relationIssueId}
|
||||
className={`group flex cursor-pointer items-center gap-1 rounded-2xl border border-custom-border-200 px-1.5 py-0.5 text-xs duration-300 ${issueRelationObject[relationKey].className}`}
|
||||
>
|
||||
<a
|
||||
href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${relationIssueId}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="flex items-center gap-1"
|
||||
return (
|
||||
<div
|
||||
key={relationIssueId}
|
||||
className={`group flex items-center gap-1 rounded px-1.5 py-1 ${issueRelationObject[relationKey].className}`}
|
||||
>
|
||||
<a
|
||||
href={`/${workspaceSlug}/projects/${projectDetails?.id}/issues/${currentIssue.id}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-xs font-medium"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
|
||||
</a>
|
||||
{!disabled && (
|
||||
<Tooltip tooltipContent="Remove">
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
removeRelation(workspaceSlug, projectId, issueId, relationKey, relationIssueId);
|
||||
}}
|
||||
>
|
||||
{issueRelationObject[relationKey].icon(10)}
|
||||
{`${projectDetails?.identifier}-${currentIssue?.sequence_id}`}
|
||||
</a>
|
||||
{!disabled && (
|
||||
<button
|
||||
type="button"
|
||||
className="opacity-0 duration-300 group-hover:opacity-100"
|
||||
onClick={() => {
|
||||
if (!currentUser) return;
|
||||
removeRelation(
|
||||
workspaceSlug as string,
|
||||
projectId as string,
|
||||
issueId,
|
||||
relationKey,
|
||||
relationIssueId
|
||||
);
|
||||
}}
|
||||
>
|
||||
<X className="h-2 w-2" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
<X className="h-2.5 w-2.5 text-custom-text-300 hover:text-red-500" />
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`rounded bg-custom-background-80 px-2.5 py-0.5 text-xs text-custom-text-200 ${
|
||||
disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-custom-background-80"
|
||||
}`}
|
||||
onClick={() => setIsRelationModalOpen(true)}
|
||||
disabled={disabled}
|
||||
>
|
||||
Select issues
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-sm text-custom-text-400">{issueRelationObject[relationKey].placeholder}</span>
|
||||
)}
|
||||
{!disabled && <Pencil className="h-4 w-4 flex-shrink-0 hidden group-hover:inline" />}
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,7 +1,19 @@
|
||||
import React, { useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { CalendarDays, LinkIcon, Signal, Tag, Trash2, Triangle, LayoutPanelTop } from "lucide-react";
|
||||
import {
|
||||
LinkIcon,
|
||||
Signal,
|
||||
Tag,
|
||||
Trash2,
|
||||
Triangle,
|
||||
LayoutPanelTop,
|
||||
XCircle,
|
||||
CircleDot,
|
||||
CopyPlus,
|
||||
CalendarClock,
|
||||
CalendarCheck2,
|
||||
} from "lucide-react";
|
||||
// hooks
|
||||
import { useEstimate, useIssueDetail, useProject, useProjectState, useUser } from "hooks/store";
|
||||
import useToast from "hooks/use-toast";
|
||||
@ -16,12 +28,17 @@ import {
|
||||
IssueLabel,
|
||||
} from "components/issues";
|
||||
import { IssueSubscription } from "./subscription";
|
||||
import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
|
||||
// ui
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
import {
|
||||
DateDropdown,
|
||||
EstimateDropdown,
|
||||
PriorityDropdown,
|
||||
ProjectMemberDropdown,
|
||||
StateDropdown,
|
||||
} from "components/dropdowns";
|
||||
// icons
|
||||
import { ContrastIcon, DiceIcon, DoubleCircleIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
|
||||
import { ContrastIcon, DiceIcon, DoubleCircleIcon, RelatedIcon, StateGroupIcon, UserGroupIcon } from "@plane/ui";
|
||||
// helpers
|
||||
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import type { TIssueOperations } from "./root";
|
||||
@ -96,23 +113,6 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
|
||||
const projectDetails = issue ? getProjectById(issue.project_id) : null;
|
||||
|
||||
const showFirstSection =
|
||||
fieldsToShow.includes("all") ||
|
||||
fieldsToShow.includes("state") ||
|
||||
fieldsToShow.includes("assignee") ||
|
||||
fieldsToShow.includes("priority") ||
|
||||
fieldsToShow.includes("estimate");
|
||||
|
||||
const showSecondSection =
|
||||
fieldsToShow.includes("all") ||
|
||||
fieldsToShow.includes("parent") ||
|
||||
fieldsToShow.includes("blocker") ||
|
||||
fieldsToShow.includes("blocked") ||
|
||||
fieldsToShow.includes("dueDate");
|
||||
|
||||
const showThirdSection =
|
||||
fieldsToShow.includes("all") || fieldsToShow.includes("cycle") || fieldsToShow.includes("module");
|
||||
|
||||
const minDate = issue.start_date ? new Date(issue.start_date) : null;
|
||||
minDate?.setDate(minDate.getDate());
|
||||
|
||||
@ -180,248 +180,279 @@ export const IssueDetailsSidebar: React.FC<Props> = observer((props) => {
|
||||
</div>
|
||||
|
||||
<div className="h-full w-full overflow-y-auto px-5">
|
||||
<div className={`divide-y-2 divide-custom-border-200 ${!is_editable ? "opacity-60" : ""}`}>
|
||||
{showFirstSection && (
|
||||
<div className="py-1">
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>State</p>
|
||||
</div>
|
||||
|
||||
<div className="h-5 sm:w-1/2">
|
||||
<StateDropdown
|
||||
value={issue?.state_id ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Assignees</p>
|
||||
</div>
|
||||
|
||||
<div className="h-5 sm:w-1/2">
|
||||
<ProjectMemberDropdown
|
||||
value={issue?.assignee_ids ?? undefined}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })
|
||||
}
|
||||
disabled={!is_editable}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
placeholder="Assignees"
|
||||
multiple
|
||||
buttonVariant={
|
||||
issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"
|
||||
}
|
||||
buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<Signal className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Priority</p>
|
||||
</div>
|
||||
|
||||
<div className="h-5 sm:w-1/2">
|
||||
<PriorityDropdown
|
||||
value={issue?.priority || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
|
||||
areEstimatesEnabledForCurrentProject && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<Triangle className="h-4 w-4 flex-shrink-0 " />
|
||||
<p>Estimate</p>
|
||||
</div>
|
||||
|
||||
<div className="h-5 sm:w-1/2">
|
||||
<EstimateDropdown
|
||||
value={issue?.estimate_point || null}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
|
||||
}
|
||||
projectId={projectId}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<h5 className="text-sm font-medium mt-6">Properties</h5>
|
||||
{/* TODO: render properties using a common component */}
|
||||
<div className={`mt-3 space-y-2 ${!is_editable ? "opacity-60" : ""}`}>
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("state")) && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>State</span>
|
||||
</div>
|
||||
<StateDropdown
|
||||
value={issue?.state_id ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-3/5 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName="text-sm"
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showSecondSection && (
|
||||
<div className="py-1">
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
|
||||
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Parent</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<IssueParentSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
|
||||
<IssueRelationSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="blocking"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
|
||||
<IssueRelationSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="blocked_by"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
|
||||
<IssueRelationSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="duplicate"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
|
||||
<IssueRelationSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="relates_to"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Start date</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<CustomDatePicker
|
||||
placeholder="Start date"
|
||||
value={issue.start_date || undefined}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })
|
||||
}
|
||||
className="border-none bg-custom-background-80"
|
||||
maxDate={maxDate ?? undefined}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:basis-1/2">
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Due date</p>
|
||||
</div>
|
||||
<div className="sm:basis-1/2">
|
||||
<CustomDatePicker
|
||||
placeholder="Due date"
|
||||
value={issue.target_date || undefined}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })
|
||||
}
|
||||
className="border-none bg-custom-background-80"
|
||||
minDate={minDate ?? undefined}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("assignee")) && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Assignees</span>
|
||||
</div>
|
||||
<ProjectMemberDropdown
|
||||
value={issue?.assignee_ids ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
|
||||
disabled={!is_editable}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
placeholder="Add assignees"
|
||||
multiple
|
||||
buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"}
|
||||
className="w-3/5 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm justify-between ${
|
||||
issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"
|
||||
}`}
|
||||
hideIcon={issue.assignee_ids?.length === 0}
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{showThirdSection && (
|
||||
<div className="py-1">
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<ContrastIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Cycle</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<IssueCycleSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("priority")) && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<Signal className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Priority</span>
|
||||
</div>
|
||||
<PriorityDropdown
|
||||
value={issue?.priority || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="border-with-text"
|
||||
className="w-3/5 flex-grow rounded px-2 hover:bg-custom-background-80"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName="w-min h-auto whitespace-nowrap"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
|
||||
<div className="flex flex-wrap items-center py-2">
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<DiceIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Module</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<IssueModuleSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("startDate")) && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CalendarClock className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Start date</span>
|
||||
</div>
|
||||
<DateDropdown
|
||||
placeholder="Add start date"
|
||||
value={issue.start_date}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, {
|
||||
start_date: val ? renderFormattedPayloadDate(val) : null,
|
||||
})
|
||||
}
|
||||
maxDate={maxDate ?? undefined}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-3/5 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
|
||||
hideIcon
|
||||
clearIconClassName="h-3 w-3 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("dueDate")) && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Due date</span>
|
||||
</div>
|
||||
<DateDropdown
|
||||
placeholder="Add due date"
|
||||
value={issue.target_date}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, {
|
||||
target_date: val ? renderFormattedPayloadDate(val) : null,
|
||||
})
|
||||
}
|
||||
minDate={minDate ?? undefined}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-3/5 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
|
||||
hideIcon
|
||||
clearIconClassName="h-3 w-3 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("estimate")) &&
|
||||
areEstimatesEnabledForCurrentProject && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<Triangle className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Estimate</span>
|
||||
</div>
|
||||
)}
|
||||
<EstimateDropdown
|
||||
value={issue?.estimate_point !== null ? issue.estimate_point : null}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })
|
||||
}
|
||||
projectId={projectId}
|
||||
disabled={!is_editable}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-3/5 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
|
||||
placeholder="None"
|
||||
hideIcon
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("module")) && projectDetails?.module_view && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<DiceIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Module</span>
|
||||
</div>
|
||||
<IssueModuleSelect
|
||||
className="w-3/5 flex-grow"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("cycle")) && projectDetails?.cycle_view && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<ContrastIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Cycle</span>
|
||||
</div>
|
||||
<IssueCycleSelect
|
||||
className="w-3/5 flex-grow"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("parent")) && (
|
||||
<div className="flex items-center gap-2 h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Parent</span>
|
||||
</div>
|
||||
<IssueParentSelect
|
||||
className="w-3/5 flex-grow h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("relates_to")) && (
|
||||
<div className="flex items-center gap-2 min-h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<RelatedIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Relates to</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/5 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="relates_to"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("blocker")) && (
|
||||
<div className="flex items-center gap-2 min-h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<XCircle className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Blocking</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/5 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="blocking"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("blocked")) && (
|
||||
<div className="flex items-center gap-2 min-h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CircleDot className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Blocked by</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/5 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="blocked_by"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("duplicate")) && (
|
||||
<div className="flex items-center gap-2 min-h-8">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CopyPlus className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Duplicate of</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/5 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="duplicate"
|
||||
disabled={!is_editable}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(fieldsToShow.includes("all") || fieldsToShow.includes("label")) && (
|
||||
<div className={`flex flex-wrap items-start py-2 ${!is_editable ? "opacity-60" : ""}`}>
|
||||
<div className="flex items-center gap-x-2 text-sm text-custom-text-200 sm:w-1/2">
|
||||
<div className="flex items-center gap-2 min-h-8 py-2">
|
||||
<div className="flex items-center gap-1 w-2/5 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<Tag className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Label</p>
|
||||
<span>Labels</span>
|
||||
</div>
|
||||
<div className="space-y-1 sm:w-1/2">
|
||||
<div className="w-3/5 flex-grow min-h-8 h-full">
|
||||
<IssueLabel
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
|
||||
@ -63,6 +63,12 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
|
||||
|
||||
const defaultLabelOptions = issue?.label_ids?.map((id) => labelMap[id]) || [];
|
||||
|
||||
const minDate = issue.start_date ? new Date(issue.start_date) : null;
|
||||
minDate?.setDate(minDate.getDate());
|
||||
|
||||
const maxDate = issue.target_date ? new Date(issue.target_date) : null;
|
||||
maxDate?.setDate(maxDate.getDate());
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
{/* basic properties */}
|
||||
@ -111,6 +117,7 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
|
||||
value={issue.start_date ?? null}
|
||||
onChange={handleStartDate}
|
||||
icon={<CalendarClock className="h-3 w-3 flex-shrink-0" />}
|
||||
maxDate={maxDate ?? undefined}
|
||||
placeholder="Start date"
|
||||
buttonVariant={issue.start_date ? "border-with-text" : "border-without-text"}
|
||||
disabled={isReadOnly}
|
||||
@ -122,10 +129,10 @@ export const IssueProperties: React.FC<IIssueProperties> = observer((props) => {
|
||||
<WithDisplayPropertiesHOC displayProperties={displayProperties} displayPropertyKey="due_date">
|
||||
<div className="h-5">
|
||||
<DateDropdown
|
||||
minDate={issue.start_date ? new Date(issue.start_date) : undefined}
|
||||
value={issue?.target_date ?? null}
|
||||
onChange={handleTargetDate}
|
||||
icon={<CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
|
||||
minDate={minDate ?? undefined}
|
||||
placeholder="Due date"
|
||||
buttonVariant={issue.target_date ? "border-with-text" : "border-without-text"}
|
||||
disabled={isReadOnly}
|
||||
|
||||
@ -1,10 +1,20 @@
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { CalendarDays, Signal, Tag, Triangle, LayoutPanelTop } from "lucide-react";
|
||||
import {
|
||||
Signal,
|
||||
Tag,
|
||||
Triangle,
|
||||
LayoutPanelTop,
|
||||
CircleDot,
|
||||
CopyPlus,
|
||||
XCircle,
|
||||
CalendarClock,
|
||||
CalendarCheck2,
|
||||
} from "lucide-react";
|
||||
// hooks
|
||||
import { useIssueDetail, useProject } from "hooks/store";
|
||||
// ui icons
|
||||
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon } from "@plane/ui";
|
||||
import { DiceIcon, DoubleCircleIcon, UserGroupIcon, ContrastIcon, RelatedIcon } from "@plane/ui";
|
||||
import {
|
||||
IssueLinkRoot,
|
||||
IssueCycleSelect,
|
||||
@ -12,10 +22,17 @@ import {
|
||||
IssueParentSelect,
|
||||
IssueLabel,
|
||||
TIssueOperations,
|
||||
IssueRelationSelect,
|
||||
} from "components/issues";
|
||||
import { EstimateDropdown, PriorityDropdown, ProjectMemberDropdown, StateDropdown } from "components/dropdowns";
|
||||
import {
|
||||
DateDropdown,
|
||||
EstimateDropdown,
|
||||
PriorityDropdown,
|
||||
ProjectMemberDropdown,
|
||||
StateDropdown,
|
||||
} from "components/dropdowns";
|
||||
// components
|
||||
import { CustomDatePicker } from "components/ui";
|
||||
import { renderFormattedPayloadDate } from "helpers/date-time.helper";
|
||||
|
||||
interface IPeekOverviewProperties {
|
||||
workspaceSlug: string;
|
||||
@ -45,191 +62,272 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = observer((pro
|
||||
maxDate?.setDate(maxDate.getDate());
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col">
|
||||
<div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
|
||||
{/* state */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>State</p>
|
||||
</div>
|
||||
<div>
|
||||
<StateDropdown
|
||||
value={issue?.state_id ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
disabled={disabled}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* assignee */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Assignees</p>
|
||||
</div>
|
||||
<div className="h-5 sm:w-1/2">
|
||||
<ProjectMemberDropdown
|
||||
value={issue?.assignee_ids ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
|
||||
disabled={disabled}
|
||||
projectId={projectId?.toString() ?? ""}
|
||||
placeholder="Assignees"
|
||||
multiple
|
||||
buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "background-with-text"}
|
||||
buttonClassName={issue?.assignee_ids?.length > 0 ? "hover:bg-transparent px-0" : ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* priority */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<Signal className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Priority</p>
|
||||
</div>
|
||||
<div className="h-5">
|
||||
<PriorityDropdown
|
||||
value={issue?.priority || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
|
||||
disabled={disabled}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* estimate */}
|
||||
{isEstimateEnabled && (
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<Triangle className="h-4 w-4 flex-shrink-0 " />
|
||||
<p>Estimate</p>
|
||||
</div>
|
||||
<div>
|
||||
<EstimateDropdown
|
||||
value={issue?.estimate_point || null}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
|
||||
projectId={projectId}
|
||||
disabled={disabled}
|
||||
buttonVariant="background-with-text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* start date */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Start date</p>
|
||||
</div>
|
||||
<div>
|
||||
<CustomDatePicker
|
||||
placeholder="Start date"
|
||||
value={issue.start_date || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { start_date: val })}
|
||||
className="border-none bg-custom-background-80"
|
||||
maxDate={maxDate ?? undefined}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* due date */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<CalendarDays className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Due date</p>
|
||||
</div>
|
||||
<div>
|
||||
<CustomDatePicker
|
||||
placeholder="Due date"
|
||||
value={issue.target_date || undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { target_date: val })}
|
||||
className="border-none bg-custom-background-80"
|
||||
minDate={minDate ?? undefined}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* parent */}
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Parent</p>
|
||||
</div>
|
||||
<div>
|
||||
<IssueParentSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-1">
|
||||
<h6 className="text-sm font-medium">Properties</h6>
|
||||
{/* TODO: render properties using a common component */}
|
||||
<div className={`w-full space-y-2 mt-3 ${disabled ? "opacity-60" : ""}`}>
|
||||
{/* state */}
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<DoubleCircleIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>State</span>
|
||||
</div>
|
||||
<StateDropdown
|
||||
value={issue?.state_id ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { state_id: val })}
|
||||
projectId={projectId}
|
||||
disabled={disabled}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-3/4 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName="text-sm"
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="border-t border-custom-border-200" />
|
||||
|
||||
<div className={`flex w-full flex-col gap-5 py-5 ${disabled ? "opacity-60" : ""}`}>
|
||||
{projectDetails?.cycle_view && (
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<ContrastIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Cycle</p>
|
||||
</div>
|
||||
<div>
|
||||
<IssueCycleSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{projectDetails?.module_view && (
|
||||
<div className="flex w-full items-center gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<DiceIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Module</p>
|
||||
</div>
|
||||
<div>
|
||||
<IssueModuleSelect
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex w-full items-start gap-2">
|
||||
<div className="flex w-40 flex-shrink-0 items-center gap-2 text-sm">
|
||||
<Tag className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Label</p>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
|
||||
</div>
|
||||
{/* assignee */}
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<UserGroupIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Assignees</span>
|
||||
</div>
|
||||
<ProjectMemberDropdown
|
||||
value={issue?.assignee_ids ?? undefined}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { assignee_ids: val })}
|
||||
disabled={disabled}
|
||||
projectId={projectId}
|
||||
placeholder="Add assignees"
|
||||
multiple
|
||||
buttonVariant={issue?.assignee_ids?.length > 0 ? "transparent-without-text" : "transparent-with-text"}
|
||||
className="w-3/4 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm justify-between ${issue?.assignee_ids.length > 0 ? "" : "text-custom-text-400"}`}
|
||||
hideIcon={issue.assignee_ids?.length === 0}
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span className="border-t border-custom-border-200" />
|
||||
{/* priority */}
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<Signal className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Priority</span>
|
||||
</div>
|
||||
<PriorityDropdown
|
||||
value={issue?.priority}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { priority: val })}
|
||||
disabled={disabled}
|
||||
buttonVariant="border-with-text"
|
||||
className="w-3/4 flex-grow rounded px-2 hover:bg-custom-background-80 group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName="w-min h-auto whitespace-nowrap"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full pt-3">
|
||||
<IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
|
||||
{/* start date */}
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CalendarClock className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Start date</span>
|
||||
</div>
|
||||
<DateDropdown
|
||||
value={issue.start_date}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, {
|
||||
start_date: val ? renderFormattedPayloadDate(val) : null,
|
||||
})
|
||||
}
|
||||
placeholder="Add start date"
|
||||
buttonVariant="transparent-with-text"
|
||||
maxDate={maxDate ?? undefined}
|
||||
disabled={disabled}
|
||||
className="w-3/4 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.start_date ? "" : "text-custom-text-400"}`}
|
||||
hideIcon
|
||||
clearIconClassName="h-3 w-3 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* due date */}
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CalendarCheck2 className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Due date</span>
|
||||
</div>
|
||||
<DateDropdown
|
||||
value={issue.target_date}
|
||||
onChange={(val) =>
|
||||
issueOperations.update(workspaceSlug, projectId, issueId, {
|
||||
target_date: val ? renderFormattedPayloadDate(val) : null,
|
||||
})
|
||||
}
|
||||
placeholder="Add due date"
|
||||
buttonVariant="transparent-with-text"
|
||||
minDate={minDate ?? undefined}
|
||||
disabled={disabled}
|
||||
className="w-3/4 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.target_date ? "" : "text-custom-text-400"}`}
|
||||
hideIcon
|
||||
clearIconClassName="h-3 w-3 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* estimate */}
|
||||
{isEstimateEnabled && (
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<Triangle className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Estimate</span>
|
||||
</div>
|
||||
<EstimateDropdown
|
||||
value={issue?.estimate_point !== null ? issue.estimate_point : null}
|
||||
onChange={(val) => issueOperations.update(workspaceSlug, projectId, issueId, { estimate_point: val })}
|
||||
projectId={projectId}
|
||||
disabled={disabled}
|
||||
buttonVariant="transparent-with-text"
|
||||
className="w-3/4 flex-grow group"
|
||||
buttonContainerClassName="w-full text-left"
|
||||
buttonClassName={`text-sm ${issue?.estimate_point !== null ? "" : "text-custom-text-400"}`}
|
||||
placeholder="None"
|
||||
hideIcon
|
||||
dropdownArrow
|
||||
dropdownArrowClassName="h-3.5 w-3.5 hidden group-hover:inline"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{projectDetails?.module_view && (
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<DiceIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Module</span>
|
||||
</div>
|
||||
<IssueModuleSelect
|
||||
className="w-3/4 flex-grow"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{projectDetails?.cycle_view && (
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<ContrastIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Cycle</span>
|
||||
</div>
|
||||
<IssueCycleSelect
|
||||
className="w-3/4 flex-grow"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* parent */}
|
||||
<div className="flex w-full items-center gap-3 h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<LayoutPanelTop className="h-4 w-4 flex-shrink-0" />
|
||||
<p>Parent</p>
|
||||
</div>
|
||||
<IssueParentSelect
|
||||
className="w-3/4 flex-grow h-full"
|
||||
disabled={disabled}
|
||||
issueId={issueId}
|
||||
issueOperations={issueOperations}
|
||||
projectId={projectId}
|
||||
workspaceSlug={workspaceSlug}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* relates to */}
|
||||
<div className="flex items-center gap-3 min-h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<RelatedIcon className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Relates to</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/4 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="relates_to"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* blocking */}
|
||||
<div className="flex items-center gap-3 min-h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<XCircle className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Blocking</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/4 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="blocking"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* blocked by */}
|
||||
<div className="flex items-center gap-3 min-h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CircleDot className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Blocked by</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/4 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="blocked_by"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* duplicate of */}
|
||||
<div className="flex items-center gap-3 min-h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<CopyPlus className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Duplicate of</span>
|
||||
</div>
|
||||
<IssueRelationSelect
|
||||
className="w-3/4 flex-grow min-h-8 h-full"
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
issueId={issueId}
|
||||
relationKey="duplicate"
|
||||
disabled={disabled}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* label */}
|
||||
<div className="flex w-full items-center gap-3 min-h-8">
|
||||
<div className="flex items-center gap-1 w-1/4 flex-shrink-0 text-sm text-custom-text-300">
|
||||
<Tag className="h-4 w-4 flex-shrink-0" />
|
||||
<span>Labels</span>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<IssueLabel workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
<div className="w-full pt-3">
|
||||
<IssueLinkRoot workspaceSlug={workspaceSlug} projectId={projectId} issueId={issueId} disabled={disabled} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -42,7 +42,6 @@ export const ViewEstimateSelect: React.FC<Props> = observer((props) => {
|
||||
maxHeight="md"
|
||||
noChevron
|
||||
disabled={disabled}
|
||||
optionsClassName="w-full"
|
||||
>
|
||||
<CustomSelect.Option value={null}>
|
||||
<>
|
||||
|
||||
@ -40,6 +40,7 @@ export interface IIssueDetail
|
||||
isIssueLinkModalOpen: boolean;
|
||||
isParentIssueModalOpen: boolean;
|
||||
isDeleteIssueModalOpen: boolean;
|
||||
isRelationModalOpen: TIssueRelationTypes | null;
|
||||
// computed
|
||||
isAnyModalOpen: boolean;
|
||||
// actions
|
||||
@ -47,6 +48,7 @@ export interface IIssueDetail
|
||||
toggleIssueLinkModal: (value: boolean) => void;
|
||||
toggleParentIssueModal: (value: boolean) => void;
|
||||
toggleDeleteIssueModal: (value: boolean) => void;
|
||||
toggleRelationModal: (value: TIssueRelationTypes | null) => void;
|
||||
// store
|
||||
rootIssueStore: IIssueRootStore;
|
||||
issue: IIssueStore;
|
||||
@ -67,6 +69,7 @@ export class IssueDetail implements IIssueDetail {
|
||||
isIssueLinkModalOpen: boolean = false;
|
||||
isParentIssueModalOpen: boolean = false;
|
||||
isDeleteIssueModalOpen: boolean = false;
|
||||
isRelationModalOpen: TIssueRelationTypes | null = null;
|
||||
// store
|
||||
rootIssueStore: IIssueRootStore;
|
||||
issue: IIssueStore;
|
||||
@ -87,6 +90,7 @@ export class IssueDetail implements IIssueDetail {
|
||||
isIssueLinkModalOpen: observable.ref,
|
||||
isParentIssueModalOpen: observable.ref,
|
||||
isDeleteIssueModalOpen: observable.ref,
|
||||
isRelationModalOpen: observable.ref,
|
||||
// computed
|
||||
isAnyModalOpen: computed,
|
||||
// action
|
||||
@ -94,6 +98,7 @@ export class IssueDetail implements IIssueDetail {
|
||||
toggleIssueLinkModal: action,
|
||||
toggleParentIssueModal: action,
|
||||
toggleDeleteIssueModal: action,
|
||||
toggleRelationModal: action,
|
||||
});
|
||||
|
||||
// store
|
||||
@ -112,7 +117,12 @@ export class IssueDetail implements IIssueDetail {
|
||||
|
||||
// computed
|
||||
get isAnyModalOpen() {
|
||||
return this.isIssueLinkModalOpen || this.isParentIssueModalOpen || this.isDeleteIssueModalOpen;
|
||||
return (
|
||||
this.isIssueLinkModalOpen ||
|
||||
this.isParentIssueModalOpen ||
|
||||
this.isDeleteIssueModalOpen ||
|
||||
Boolean(this.isRelationModalOpen)
|
||||
);
|
||||
}
|
||||
|
||||
// actions
|
||||
@ -120,6 +130,7 @@ export class IssueDetail implements IIssueDetail {
|
||||
toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
|
||||
toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value);
|
||||
toggleDeleteIssueModal = (value: boolean) => (this.isDeleteIssueModalOpen = value);
|
||||
toggleRelationModal = (value: TIssueRelationTypes | null) => (this.isRelationModalOpen = value);
|
||||
|
||||
// issue
|
||||
fetchIssue = async (workspaceSlug: string, projectId: string, issueId: string) =>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user