github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor and beautify issue properties (#2539)

Browse Source 
* chore: update all issue property components

* style: issue properties
This commit is contained in:
Aaryan Khandelwal 2023-10-25 19:47:58 +05:30 committed by GitHub
parent ca2da41dd2
commit a49f00bd39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
40 changed files with 1066 additions and 1747 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

160
web/components/estimates/estimate-select.tsx Normal file
View File

@ -0,0 +1,160 @@
import React, { useState } from "react";
import { usePopper } from "react-popper";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search, Triangle } from "lucide-react";
// types
import { Tooltip } from "components/ui";
import { Placement } from "@popperjs/core";
// constants
import { IEstimatePoint } from "types";
type Props = {
value: number | null;
onChange: (value: number | null) => void;
estimatePoints: IEstimatePoint[] | undefined;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
placement?: Placement;
hideDropdownArrow?: boolean;
disabled?: boolean;
};
export const EstimateSelect: React.FC<Props> = (props) => {
const {
value,
onChange,
estimatePoints,
className = "",
buttonClassName = "",
optionsClassName = "",
placement,
hideDropdownArrow = false,
disabled = false,
} = props;
const [query, setQuery] = useState("");
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
const options: { value: number | null; query: string; content: any }[] | undefined = estimatePoints?.map(
(estimate) => ({
value: estimate.key,
query: estimate.value,
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3" strokeWidth={2} />
{estimate.value}
</div>
),
})
);
options?.unshift({
value: null,
query: "none",
content: (
<div className="flex items-center gap-2">
<Triangle className="h-3 w-3" strokeWidth={2} />
None
</div>
),
});
const filteredOptions =
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const selectedEstimate = estimatePoints?.find((e) => e.key === value);
const label = (
<Tooltip tooltipHeading="Estimate" tooltipContent={selectedEstimate?.value ?? "None"} position="top">
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
<Triangle className="h-3 w-3" strokeWidth={2} />
<span className="truncate">{selectedEstimate?.value ?? "None"}</span>
</div>
</Tooltip>
);
return (
<Combobox
as="div"
className={`flex-shrink-0 text-left ${className}`}
value={value}
onChange={(val) => onChange(val as number | null)}
disabled={disabled}
>
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
</button>
</Combobox.Button>
<Combobox.Options className="fixed z-10">
<div
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
<Search className="h-3.5 w-3.5 text-custom-text-300" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className="h-3.5 w-3.5" />}
</>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</div>
</Combobox.Options>
</Combobox>
);
};

3
web/components/estimates/index.tsx → web/components/estimates/index.ts
View File

@ -1,3 +1,4 @@
export * from "./create-update-estimate-modal";
export * from "./single-estimate";
export * from "./delete-estimate-modal";
export * from "./estimate-select";
export * from "./single-estimate";

27
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -2,7 +2,7 @@ import { Draggable } from "@hello-pangea/dnd";
// components
import { KanBanProperties } from "./properties";
// types
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
interface IssueBlockProps {
sub_group_id: string;
@ -18,10 +18,27 @@ interface IssueBlockProps {
) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
displayProperties: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
estimates: IEstimatePoint[] | null;
}
export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
const { sub_group_id, columnId, index, issue, isDragDisabled, handleIssues, quickActions, displayProperties } = props;
const {
sub_group_id,
columnId,
index,
issue,
isDragDisabled,
handleIssues,
quickActions,
displayProperties,
states,
labels,
members,
estimates,
} = props;
const updateIssue = (sub_group_by: string | null, group_by: string | null, issueToUpdate: IIssue) => {
if (issueToUpdate) handleIssues(sub_group_by, group_by, issueToUpdate, "update");
@ -54,7 +71,7 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
{issue.project_detail.identifier}-{issue.sequence_id}
</div>
)}
<div className="line-clamp-2 h-[40px] text-sm font-medium text-custom-text-100">{issue.name}</div>
<div className="line-clamp-2 text-sm font-medium text-custom-text-100">{issue.name}</div>
<div>
<KanBanProperties
sub_group_id={sub_group_id}
@ -62,6 +79,10 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = (props) => {
issue={issue}
handleIssues={updateIssue}
display_properties={displayProperties}
states={states}
labels={labels}
members={members}
estimates={estimates}
/>
</div>
</div>

24
web/components/issues/issue-layouts/kanban/blocks-list.tsx
View File

@ -1,6 +1,6 @@
// components
import { KanbanIssueBlock } from "components/issues";
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
interface IssueBlocksListProps {
sub_group_id: string;
@ -15,10 +15,26 @@ interface IssueBlocksListProps {
) => void;
quickActions: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => React.ReactNode;
display_properties: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
estimates: IEstimatePoint[] | null;
}
export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) => {
const { sub_group_id, columnId, issues, isDragDisabled, handleIssues, quickActions, display_properties } = props;
const {
sub_group_id,
columnId,
issues,
isDragDisabled,
handleIssues,
quickActions,
display_properties,
states,
labels,
members,
estimates,
} = props;
return (
<>
@ -35,6 +51,10 @@ export const KanbanIssueBlocksList: React.FC<IssueBlocksListProps> = (props) =>
columnId={columnId}
sub_group_id={sub_group_id}
isDragDisabled={isDragDisabled}
states={states}
labels={labels}
members={members}
estimates={estimates}
/>
))}
</>

57
web/components/issues/issue-layouts/kanban/default.tsx
View File

@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
import { KanbanIssueBlocksList } from "components/issues";
// types
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
// constants
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
@ -29,6 +29,11 @@ export interface IGroupByKanBan {
display_properties: any;
kanBanToggle: any;
handleKanBanToggle: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
priorities: any;
estimates: IEstimatePoint[] | null;
}
const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
@ -45,6 +50,11 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
display_properties,
kanBanToggle,
handleKanBanToggle,
states,
labels,
members,
priorities,
estimates,
} = props;
const verticalAlignPosition = (_list: any) =>
@ -93,6 +103,10 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
handleIssues={handleIssues}
quickActions={quickActions}
display_properties={display_properties}
states={states}
labels={labels}
members={members}
estimates={estimates}
/>
) : (
isDragDisabled && (
@ -128,14 +142,13 @@ export interface IKanBan {
display_properties: any;
kanBanToggle: any;
handleKanBanToggle: any;
states: any;
states: IState[] | null;
stateGroups: any;
priorities: any;
labels: any;
members: any;
projects: any;
estimates: any;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
estimates: IEstimatePoint[] | null;
}
export const KanBan: React.FC<IKanBan> = observer((props) => {
@ -176,6 +189,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
display_properties={display_properties}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
@ -193,6 +211,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
display_properties={display_properties}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
@ -210,6 +233,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
display_properties={display_properties}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
@ -227,6 +255,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
display_properties={display_properties}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
@ -244,6 +277,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
display_properties={display_properties}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
@ -261,6 +299,11 @@ export const KanBan: React.FC<IKanBan> = observer((props) => {
display_properties={display_properties}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
</div>

4
web/components/issues/issue-layouts/kanban/index.ts
View File

@ -1,5 +1,3 @@
export * from "./block";
export * from "./roots";
export * from "./blocks-list";
export * from "./cycle-root";
export * from "./module-root";
export * from "./root";

362
web/components/issues/issue-layouts/kanban/properties.tsx
View File

@ -10,190 +10,196 @@ import { IssuePropertyAssignee } from "../properties/assignee";
import { IssuePropertyEstimates } from "../properties/estimates";
import { IssuePropertyDate } from "../properties/date";
import { Tooltip } from "@plane/ui";
import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite, TIssuePriorities } from "types";
export interface IKanBanProperties {
sub_group_id: string;
columnId: string;
issue: any;
handleIssues?: (sub_group_by: string | null, group_by: string | null, issue: any) => void;
issue: IIssue;
handleIssues: (sub_group_by: string | null, group_by: string | null, issue: IIssue) => void;
display_properties: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
estimates: IEstimatePoint[] | null;
}
export const KanBanProperties: React.FC<IKanBanProperties> = observer(
({ sub_group_id, columnId: group_id, issue, handleIssues, display_properties }) => {
const handleState = (id: string) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, state: id }
);
};
export const KanBanProperties: React.FC<IKanBanProperties> = observer((props) => {
const {
sub_group_id,
columnId: group_id,
issue,
handleIssues,
display_properties,
states,
labels,
members,
estimates,
} = props;
const handlePriority = (id: string) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, priority: id }
);
};
const handleLabel = (ids: string[]) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, labels: ids }
);
};
const handleAssignee = (ids: string[]) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, assignees: ids }
);
};
const handleStartDate = (date: string) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, start_date: date }
);
};
const handleTargetDate = (date: string) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, target_date: date }
);
};
const handleEstimate = (id: string) => {
if (handleIssues)
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, estimate_point: id }
);
};
return (
<div className="relative flex gap-2 overflow-x-auto whitespace-nowrap">
{/* basic properties */}
{/* state */}
{display_properties && display_properties?.state && (
<IssuePropertyState
value={issue?.state || null}
dropdownArrow={false}
onChange={(id: string) => handleState(id)}
disabled={false}
/>
)}
{/* priority */}
{display_properties && display_properties?.priority && (
<IssuePropertyPriority
value={issue?.priority || null}
dropdownArrow={false}
onChange={(id: string) => handlePriority(id)}
disabled={false}
/>
)}
{/* label */}
{display_properties && display_properties?.labels && (
<IssuePropertyLabels
value={issue?.labels || null}
dropdownArrow={false}
onChange={(ids: string[]) => handleLabel(ids)}
disabled={false}
/>
)}
{/* assignee */}
{display_properties && display_properties?.assignee && (
<IssuePropertyAssignee
value={issue?.assignees || null}
dropdownArrow={false}
onChange={(ids: string[]) => handleAssignee(ids)}
disabled={false}
/>
)}
{/* start date */}
{display_properties && display_properties?.start_date && (
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={false}
/>
)}
{/* target/due date */}
{display_properties && display_properties?.due_date && (
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={false}
/>
)}
{/* estimates */}
{display_properties && display_properties?.estimate && (
<IssuePropertyEstimates
value={issue?.estimate_point?.toString() || null}
dropdownArrow={false}
onChange={(id: string) => handleEstimate(id)}
disabled={false}
workspaceSlug={issue?.workspace_detail?.slug || null}
projectId={issue?.project_detail?.id || null}
/>
)}
{/* extra render properties */}
{/* sub-issues */}
{display_properties && display_properties?.sub_issue_count && (
<Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Layers width={10} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
</div>
</Tooltip>
)}
{/* attachments */}
{display_properties && display_properties?.attachment_count && (
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Paperclip width={10} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
</div>
</Tooltip>
)}
{/* link */}
{display_properties && display_properties?.link && (
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Link width={10} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
</div>
</Tooltip>
)}
</div>
const handleState = (state: IState) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, state: state.id }
);
}
);
};
const handlePriority = (value: TIssuePriorities) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, priority: value }
);
};
const handleLabel = (ids: string[]) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, labels_list: ids }
);
};
const handleAssignee = (ids: string[]) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, assignees_list: ids }
);
};
const handleStartDate = (date: string) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, start_date: date }
);
};
const handleTargetDate = (date: string) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, target_date: date }
);
};
const handleEstimate = (value: number | null) => {
handleIssues(
!sub_group_id && sub_group_id === "null" ? null : sub_group_id,
!group_id && group_id === "null" ? null : group_id,
{ ...issue, estimate_point: value }
);
};
return (
<div className="flex items-center gap-2 flex-wrap whitespace-nowrap">
{/* basic properties */}
{/* state */}
{display_properties && display_properties?.state && (
<IssuePropertyState
value={issue?.state_detail || null}
onChange={handleState}
states={states}
disabled={false}
hideDropdownArrow={true}
/>
)}
{/* priority */}
{display_properties && display_properties?.priority && (
<IssuePropertyPriority
value={issue?.priority || null}
onChange={handlePriority}
disabled={false}
hideDropdownArrow={true}
/>
)}
{/* label */}
{display_properties && display_properties?.labels && (
<IssuePropertyLabels
value={issue?.labels || null}
onChange={handleLabel}
labels={labels}
disabled={false}
hideDropdownArrow={true}
/>
)}
{/* assignee */}
{display_properties && display_properties?.assignee && (
<IssuePropertyAssignee
value={issue?.assignees || null}
hideDropdownArrow={true}
onChange={handleAssignee}
members={members}
disabled={false}
/>
)}
{/* start date */}
{display_properties && display_properties?.start_date && (
<IssuePropertyDate
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={false}
placeHolder="Start date"
/>
)}
{/* target/due date */}
{display_properties && display_properties?.due_date && (
<IssuePropertyDate
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={false}
placeHolder="Target date"
/>
)}
{/* estimates */}
{display_properties && display_properties?.estimate && (
<IssuePropertyEstimates
value={issue?.estimate_point || null}
onChange={handleEstimate}
estimatePoints={estimates}
disabled={false}
hideDropdownArrow={true}
/>
)}
{/* extra render properties */}
{/* sub-issues */}
{display_properties && display_properties?.sub_issue_count && (
<Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.sub_issues_count}</div>
</div>
</Tooltip>
)}
{/* attachments */}
{display_properties && display_properties?.attachment_count && (
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.attachment_count}</div>
</div>
</Tooltip>
)}
{/* link */}
{display_properties && display_properties?.link && (
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.link_count}</div>
</div>
</Tooltip>
)}
</div>
);
});

31
web/components/issues/issue-layouts/kanban/cycle-root.tsx → web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
View File

@ -5,9 +5,11 @@ import { DragDropContext } from "@hello-pangea/dnd";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { KanBanSwimLanes } from "./swimlanes";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "../swimlanes";
import { KanBan } from "../default";
import { CycleIssueQuickActions } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue } from "types";
// constants
@ -25,7 +27,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = router.query;
const issues = cycleIssueStore?.getIssues;
@ -60,12 +62,12 @@ export const CycleKanBanLayout: React.FC = observer(() => {
if (!workspaceSlug || !cycleId) return;
if (action === "update") {
cycleIssueStore.updateIssueStructure(group_by, null, issue);
cycleIssueStore.updateIssueStructure(group_by, sub_group_by, issue);
issueDetailStore.updateIssue(workspaceSlug.toString(), issue.project, issue.id, issue);
}
if (action === "delete") cycleIssueStore.deleteIssue(group_by, null, issue);
if (action === "delete") cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
if (action === "remove" && issue.bridge_id) {
cycleIssueStore.deleteIssue(group_by, null, issue);
cycleIssueStore.deleteIssue(group_by, sub_group_by, issue);
cycleIssueStore.removeIssueFromCycle(
workspaceSlug.toString(),
issue.project,
@ -81,13 +83,18 @@ export const CycleKanBanLayout: React.FC = observer(() => {
cycleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
};
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const states = projectStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.projectStates || null;
const estimates = null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
projectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
: null;
return (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@ -113,9 +120,9 @@ export const CycleKanBanLayout: React.FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
) : (
<KanBanSwimLanes
@ -138,9 +145,9 @@ export const CycleKanBanLayout: React.FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
)}
</DragDropContext>

5
web/components/issues/issue-layouts/kanban/roots/index.ts Normal file
View File

@ -0,0 +1,5 @@
export * from "./cycle-root";
export * from "./module-root";
export * from "./profile-issues-root";
export * from "./project-root";
export * from "./project-view-root";

25
web/components/issues/issue-layouts/kanban/module-root.tsx → web/components/issues/issue-layouts/kanban/roots/module-root.tsx
View File

@ -5,9 +5,11 @@ import { DragDropContext } from "@hello-pangea/dnd";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { KanBanSwimLanes } from "./swimlanes";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "../swimlanes";
import { KanBan } from "../default";
import { ModuleIssueQuickActions } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue } from "types";
// constants
@ -25,7 +27,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
} = useMobxStore();
const router = useRouter();
const { workspaceSlug, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = router.query;
const issues = moduleIssueStore?.getIssues;
@ -81,13 +83,18 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
moduleIssueKanBanViewStore.handleKanBanToggle(toggle, value);
};
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const states = projectStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.projectStates || null;
const estimates = null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
projectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
: null;
return (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@ -113,9 +120,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
) : (
<KanBanSwimLanes
@ -138,9 +145,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
)}
</DragDropContext>

13
web/components/issues/issue-layouts/kanban/profile-issues-root.tsx → web/components/issues/issue-layouts/kanban/roots/profile-issues-root.tsx
View File

@ -5,8 +5,8 @@ import { DragDropContext } from "@hello-pangea/dnd";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { KanBanSwimLanes } from "./swimlanes";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "../swimlanes";
import { KanBan } from "../default";
import { ProjectIssueQuickActions } from "components/issues";
// constants
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
@ -79,7 +79,6 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.workspaceProjects || null;
const estimates = null;
return (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@ -104,9 +103,9 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={null}
/>
) : (
<KanBanSwimLanes
@ -128,9 +127,9 @@ export const ProfileIssuesKanBanLayout: FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={null}
/>
)}
</DragDropContext>

29
web/components/issues/issue-layouts/kanban/root.tsx → web/components/issues/issue-layouts/kanban/roots/project-root.tsx
View File

@ -1,13 +1,15 @@
import { FC, useCallback } from "react";
import { useCallback } from "react";
import { useRouter } from "next/router";
import { DragDropContext } from "@hello-pangea/dnd";
import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { KanBanSwimLanes } from "./swimlanes";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "../swimlanes";
import { KanBan } from "../default";
import { ProjectIssueQuickActions } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue } from "types";
// constants
@ -15,9 +17,9 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
export interface IKanBanLayout {}
export const KanBanLayout: FC = observer(() => {
export const KanBanLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query;
const {
project: projectStore,
@ -72,13 +74,18 @@ export const KanBanLayout: FC = observer(() => {
issueKanBanViewStore.handleKanBanToggle(toggle, value);
};
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const states = projectStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.projectStates || null;
const estimates = null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
projectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
: null;
return (
<div className={`relative min-w-full w-max min-h-full h-max bg-custom-background-90 px-3`}>
@ -103,9 +110,9 @@ export const KanBanLayout: FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
) : (
<KanBanSwimLanes
@ -127,9 +134,9 @@ export const KanBanLayout: FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
)}
</DragDropContext>

6
web/components/issues/issue-layouts/kanban/view-root.tsx → web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
View File

@ -4,8 +4,8 @@ import { DragDropContext } from "@hello-pangea/dnd";
// mobx
import { observer } from "mobx-react-lite";
// components
import { KanBanSwimLanes } from "./swimlanes";
import { KanBan } from "./default";
import { KanBanSwimLanes } from "../swimlanes";
import { KanBan } from "../default";
// store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
@ -14,7 +14,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
export interface IViewKanBanLayout {}
export const ViewKanBanLayout: React.FC = observer(() => {
export const ProjectViewKanBanLayout: React.FC = observer(() => {
const {
project: projectStore,
issue: issueStore,

57
web/components/issues/issue-layouts/kanban/swimlanes.tsx
View File

@ -7,7 +7,7 @@ import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
import { KanBan } from "./default";
// types
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
// constants
import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES, getValueFromObject } from "constants/issue";
@ -19,6 +19,11 @@ interface ISubGroupSwimlaneHeader {
listKey: string;
kanBanToggle: any;
handleKanBanToggle: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
estimates: IEstimatePoint[] | null;
}
const SubGroupSwimlaneHeader: React.FC<ISubGroupSwimlaneHeader> = ({
issues,
@ -71,13 +76,13 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
display_properties: any;
kanBanToggle: any;
handleKanBanToggle: any;
states: any;
states: IState[] | null;
stateGroups: any;
priorities: any;
labels: any;
members: any;
projects: any;
estimates: any;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
estimates: IEstimatePoint[] | null;
}
const SubGroupSwimlane: React.FC<ISubGroupSwimlane> = observer((props) => {
const {
@ -171,13 +176,13 @@ export interface IKanBanSwimLanes {
display_properties: any;
kanBanToggle: any;
handleKanBanToggle: any;
states: any;
states: IState[] | null;
stateGroups: any;
priorities: any;
labels: any;
members: any;
projects: any;
estimates: any;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
estimates: IEstimatePoint[] | null;
}
export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
@ -213,6 +218,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
projects={projects}
estimates={estimates}
/>
)}
@ -225,6 +235,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`key`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
projects={projects}
estimates={estimates}
/>
)}
@ -237,6 +252,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`key`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
projects={projects}
estimates={estimates}
/>
)}
@ -249,6 +269,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
projects={projects}
estimates={estimates}
/>
)}
@ -261,6 +286,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`member.id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
projects={projects}
estimates={estimates}
/>
)}
@ -273,6 +303,11 @@ export const KanBanSwimLanes: React.FC<IKanBanSwimLanes> = observer((props) => {
listKey={`member.id`}
kanBanToggle={kanBanToggle}
handleKanBanToggle={handleKanBanToggle}
states={states}
labels={labels}
members={members}
projects={projects}
estimates={estimates}
/>
)}
</div>

17
web/components/issues/issue-layouts/list/block.tsx
View File

@ -4,7 +4,7 @@ import { IssuePeekOverview } from "components/issues/issue-peek-overview";
// ui
import { Tooltip } from "@plane/ui";
// types
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
interface IssueBlockProps {
columnId: string;
@ -12,18 +12,17 @@ interface IssueBlockProps {
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
display_properties: any;
states: any;
labels: any;
members: any;
priorities: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
estimates: IEstimatePoint[] | null;
}
export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
const { columnId, issue, handleIssues, quickActions, display_properties, states, labels, members, priorities } =
props;
const { columnId, issue, handleIssues, quickActions, display_properties, states, labels, members, estimates } = props;
const updateIssue = (group_by: string | null, issueToUpdate: IIssue) => {
if (issueToUpdate && handleIssues) handleIssues(group_by, issueToUpdate, "update");
handleIssues(group_by, issueToUpdate, "update");
};
return (
@ -55,7 +54,7 @@ export const IssueBlock: React.FC<IssueBlockProps> = (props) => {
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
{quickActions(!columnId && columnId === "null" ? null : columnId, issue)}
</div>

14
web/components/issues/issue-layouts/list/blocks-list.tsx
View File

@ -2,7 +2,7 @@ import { FC } from "react";
// components
import { IssueBlock } from "components/issues";
// types
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite } from "types";
interface Props {
columnId: string;
@ -10,14 +10,14 @@ interface Props {
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
display_properties: any;
states: any;
labels: any;
members: any;
priorities: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
estimates: IEstimatePoint[] | null;
}
export const IssueBlocksList: FC<Props> = (props) => {
const { columnId, issues, handleIssues, quickActions, display_properties, states, labels, members, priorities } =
const { columnId, issues, handleIssues, quickActions, display_properties, states, labels, members, estimates } =
props;
return (
@ -35,7 +35,7 @@ export const IssueBlocksList: FC<Props> = (props) => {
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
))}
</>

28
web/components/issues/issue-layouts/list/default.tsx
View File

@ -2,11 +2,11 @@ import React from "react";
import { observer } from "mobx-react-lite";
// components
import { ListGroupByHeaderRoot } from "./headers/group-by-root";
import { IssueBlock } from "./block";
import { IssueBlocksList } from "components/issues";
// types
import { IEstimatePoint, IIssue, IIssueLabels, IProject, IState, IUserLite } from "types";
// constants
import { getValueFromObject } from "constants/issue";
import { IIssue } from "types";
import { IssueBlocksList } from "./blocks-list";
export interface IGroupByList {
issues: any;
@ -17,13 +17,13 @@ export interface IGroupByList {
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
display_properties: any;
is_list?: boolean;
states: any;
labels: any;
members: any;
projects: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
stateGroups: any;
priorities: any;
estimates: any;
estimates: IEstimatePoint[] | null;
}
const GroupByList: React.FC<IGroupByList> = observer((props) => {
@ -72,7 +72,7 @@ const GroupByList: React.FC<IGroupByList> = observer((props) => {
states={states}
labels={labels}
members={members}
priorities={priorities}
estimates={estimates}
/>
)}
</div>
@ -90,13 +90,13 @@ export interface IList {
handleIssues: (group_by: string | null, issue: IIssue, action: "update" | "delete") => void;
quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
display_properties: any;
states: any;
labels: any;
members: any;
projects: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
projects: IProject[] | null;
stateGroups: any;
priorities: any;
estimates: any;
estimates: IEstimatePoint[] | null;
}
export const List: React.FC<IList> = observer((props) => {

4
web/components/issues/issue-layouts/list/index.ts
View File

@ -1,5 +1,3 @@
export * from "./roots";
export * from "./block";
export * from "./blocks-list";
export * from "./cycle-root";
export * from "./module-root";
export * from "./root";

103
web/components/issues/issue-layouts/list/properties.tsx
View File

@ -11,49 +11,48 @@ import { IssuePropertyDate } from "../properties/date";
// ui
import { Tooltip } from "@plane/ui";
// types
import { IIssue } from "types";
import { IEstimatePoint, IIssue, IIssueLabels, IState, IUserLite, TIssuePriorities } from "types";
export interface IKanBanProperties {
columnId: string;
issue: any;
handleIssues?: (group_by: string | null, issue: IIssue) => void;
issue: IIssue;
handleIssues: (group_by: string | null, issue: IIssue) => void;
display_properties: any;
states: any;
labels: any;
members: any;
priorities: any;
states: IState[] | null;
labels: IIssueLabels[] | null;
members: IUserLite[] | null;
estimates: IEstimatePoint[] | null;
}
export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, priorities } = props;
const { columnId: group_id, issue, handleIssues, display_properties, states, labels, members, estimates } = props;
const handleState = (id: string) => {
if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: id });
const handleState = (state: IState) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, state: state.id });
};
const handlePriority = (id: string) => {
if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: id });
const handlePriority = (value: TIssuePriorities) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, priority: value });
};
const handleLabel = (ids: string[]) => {
if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels: ids });
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, labels_list: ids });
};
const handleAssignee = (ids: string[]) => {
if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees: ids });
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, assignees_list: ids });
};
const handleStartDate = (date: string) => {
if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, start_date: date });
};
const handleTargetDate = (date: string) => {
if (handleIssues) handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, target_date: date });
};
const handleEstimate = (id: string) => {
if (handleIssues)
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: id });
const handleEstimate = (value: number | null) => {
handleIssues(!group_id && group_id === "null" ? null : group_id, { ...issue, estimate_point: value });
};
return (
@ -62,22 +61,21 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
{/* state */}
{display_properties && display_properties?.state && states && (
<IssuePropertyState
value={issue?.state || null}
dropdownArrow={false}
onChange={(id: string) => handleState(id)}
value={issue?.state_detail || null}
hideDropdownArrow={true}
onChange={handleState}
disabled={false}
list={states}
states={states}
/>
)}
{/* priority */}
{display_properties && display_properties?.priority && priorities && (
{display_properties && display_properties?.priority && (
<IssuePropertyPriority
value={issue?.priority || null}
dropdownArrow={false}
onChange={(id: string) => handlePriority(id)}
onChange={handlePriority}
disabled={false}
list={priorities}
hideDropdownArrow={true}
/>
)}
@ -85,10 +83,10 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
{display_properties && display_properties?.labels && labels && (
<IssuePropertyLabels
value={issue?.labels || null}
dropdownArrow={false}
onChange={(ids: string[]) => handleLabel(ids)}
onChange={handleLabel}
labels={labels}
disabled={false}
list={labels}
hideDropdownArrow={true}
/>
)}
@ -96,10 +94,10 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
{display_properties && display_properties?.assignee && members && (
<IssuePropertyAssignee
value={issue?.assignees || null}
dropdownArrow={false}
onChange={(ids: string[]) => handleAssignee(ids)}
hideDropdownArrow={true}
onChange={handleAssignee}
disabled={false}
list={members}
members={members}
/>
)}
@ -109,7 +107,7 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
value={issue?.start_date || null}
onChange={(date: string) => handleStartDate(date)}
disabled={false}
placeHolder={`Start date`}
placeHolder="Start date"
/>
)}
@ -119,31 +117,28 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
value={issue?.target_date || null}
onChange={(date: string) => handleTargetDate(date)}
disabled={false}
placeHolder={`Target date`}
placeHolder="Target date"
/>
)}
{/* estimates */}
{display_properties && display_properties?.estimate && (
<IssuePropertyEstimates
value={issue?.estimate_point?.toString() || null}
dropdownArrow={false}
onChange={(id: string) => handleEstimate(id)}
value={issue?.estimate_point || null}
estimatePoints={estimates}
hideDropdownArrow={true}
onChange={handleEstimate}
disabled={false}
workspaceSlug={issue?.workspace_detail?.slug || null}
projectId={issue?.project_detail?.id || null}
/>
)}
{/* extra render properties */}
{/* sub-issues */}
{display_properties && display_properties?.sub_issue_count && (
<Tooltip tooltipHeading="Sub-issue" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Layers width={10} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{issue.sub_issues_count}</div>
<Tooltip tooltipHeading="Sub-issues" tooltipContent={`${issue.sub_issues_count}`}>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Layers className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.sub_issues_count}</div>
</div>
</Tooltip>
)}
@ -151,11 +146,9 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
{/* attachments */}
{display_properties && display_properties?.attachment_count && (
<Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
<div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Paperclip width={10} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{issue.attachment_count}</div>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Paperclip className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.attachment_count}</div>
</div>
</Tooltip>
)}
@ -163,11 +156,9 @@ export const KanBanProperties: FC<IKanBanProperties> = observer((props) => {
{/* link */}
{display_properties && display_properties?.link && (
<Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
<div className="flex-shrink-0 border border-custom-border-300 min-w-[22px] h-[22px] overflow-hidden rounded-sm flex justify-center items-center cursor-pointer">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Link width={10} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{issue.link_count}</div>
<div className="flex-shrink-0 border-[0.5px] border-custom-border-300 overflow-hidden rounded flex justify-center items-center gap-2 px-2.5 py-1 h-5">
<Link className="h-3 w-3 flex-shrink-0" strokeWidth={2} />
<div className="text-xs">{issue.link_count}</div>
</div>
</Tooltip>
)}

19
web/components/issues/issue-layouts/list/cycle-root.tsx → web/components/issues/issue-layouts/list/roots/cycle-root.tsx
View File

@ -4,8 +4,10 @@ import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { List } from "./default";
import { List } from "../default";
import { CycleIssueQuickActions } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue } from "types";
// constants
@ -15,7 +17,7 @@ export interface ICycleListLayout {}
export const CycleListLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, cycleId } = router.query;
const { workspaceSlug, projectId, cycleId } = router.query;
const {
project: projectStore,
@ -52,13 +54,18 @@ export const CycleListLayout: React.FC = observer(() => {
[cycleIssueStore, issueDetailStore, cycleId, workspaceSlug]
);
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const states = projectStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.projectStates || null;
const estimates = null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
projectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
: null;
return (
<div className={`relative w-full h-full bg-custom-background-90`}>
@ -79,9 +86,9 @@ export const CycleListLayout: React.FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
</div>
);

5
web/components/issues/issue-layouts/list/roots/index.ts Normal file
View File

@ -0,0 +1,5 @@
export * from "./cycle-root";
export * from "./module-root";
export * from "./profile-issues-root";
export * from "./project-root";
export * from "./project-view-root";

19
web/components/issues/issue-layouts/list/module-root.tsx → web/components/issues/issue-layouts/list/roots/module-root.tsx
View File

@ -4,8 +4,10 @@ import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { List } from "./default";
import { List } from "../default";
import { ModuleIssueQuickActions } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue } from "types";
// constants
@ -15,7 +17,7 @@ export interface IModuleListLayout {}
export const ModuleListLayout: React.FC = observer(() => {
const router = useRouter();
const { workspaceSlug, moduleId } = router.query;
const { workspaceSlug, projectId, moduleId } = router.query;
const {
project: projectStore,
@ -52,13 +54,18 @@ export const ModuleListLayout: React.FC = observer(() => {
[moduleIssueStore, issueDetailStore, moduleId, workspaceSlug]
);
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const states = projectStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.projectStates || null;
const estimates = null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
projectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
: null;
return (
<div className={`relative w-full h-full bg-custom-background-90`}>
@ -79,9 +86,9 @@ export const ModuleListLayout: React.FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
</div>
);

7
web/components/issues/issue-layouts/list/profile-issues-root.tsx → web/components/issues/issue-layouts/list/roots/profile-issues-root.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
// mobx store
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { List } from "./default";
import { List } from "../default";
import { ProjectIssueQuickActions } from "components/issues";
// types
import { IIssue } from "types";
@ -50,7 +50,6 @@ export const ProfileIssuesListLayout: FC = observer(() => {
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.workspaceProjects || null;
const estimates = null;
return (
<div className={`relative w-full h-full bg-custom-background-90`}>
@ -70,9 +69,9 @@ export const ProfileIssuesListLayout: FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={null}
/>
</div>
);

19
web/components/issues/issue-layouts/list/root.tsx → web/components/issues/issue-layouts/list/roots/project-root.tsx
View File

@ -4,8 +4,10 @@ import { observer } from "mobx-react-lite";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
// components
import { List } from "./default";
import { List } from "../default";
import { ProjectIssueQuickActions } from "components/issues";
// helpers
import { orderArrayBy } from "helpers/array.helper";
// types
import { IIssue } from "types";
// constants
@ -13,7 +15,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
export const ListLayout: FC = observer(() => {
const router = useRouter();
const { workspaceSlug } = router.query;
const { workspaceSlug, projectId } = router.query;
const {
project: projectStore,
@ -41,13 +43,18 @@ export const ListLayout: FC = observer(() => {
[issueStore, issueDetailStore, workspaceSlug]
);
const projectDetails = projectId ? projectStore.project_details[projectId.toString()] : null;
const states = projectStore?.projectStates || null;
const priorities = ISSUE_PRIORITIES || null;
const labels = projectStore?.projectLabels || null;
const members = projectStore?.projectMembers || null;
const stateGroups = ISSUE_STATE_GROUPS || null;
const projects = projectStore?.projectStates || null;
const estimates = null;
const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
const estimates =
projectDetails?.estimate !== null
? projectStore.projectEstimates?.find((e) => e.id === projectDetails?.estimate) || null
: null;
return (
<div className="relative w-full h-full bg-custom-background-90">
@ -67,9 +74,9 @@ export const ListLayout: FC = observer(() => {
stateGroups={stateGroups}
priorities={priorities}
labels={labels}
members={members}
members={members?.map((m) => m.member) ?? null}
projects={projects}
estimates={estimates}
estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
/>
</div>
);

4
web/components/issues/issue-layouts/list/view-root.tsx → web/components/issues/issue-layouts/list/roots/project-view-root.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import { observer } from "mobx-react-lite";
// components
import { List } from "./default";
import { List } from "../default";
// store
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
@ -10,7 +10,7 @@ import { ISSUE_STATE_GROUPS, ISSUE_PRIORITIES } from "constants/issue";
export interface IViewListLayout {}
export const ViewListLayout: React.FC = observer(() => {
export const ProjectViewListLayout: React.FC = observer(() => {
const { project: projectStore, issue: issueStore, issueFilter: issueFilterStore }: RootStore = useMobxStore();
const issues = issueStore?.getIssues;

256
web/components/issues/issue-layouts/properties/assignee.tsx
View File

@ -1,252 +1,28 @@
import { FC, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { ChevronDown, Search, X, Check } from "lucide-react";
import { observer } from "mobx-react-lite";
// components
import { Tooltip } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
interface IFiltersOption {
id: string;
title: string;
avatar: string;
}
import { MembersSelect } from "components/project";
// types
import { IUserLite } from "types";
export interface IIssuePropertyAssignee {
value?: any;
onChange?: (id: any, data: any) => void;
value: string[];
onChange: (data: string[]) => void;
members: IUserLite[] | null;
disabled?: boolean;
list?: any;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
dropdownArrow?: boolean;
hideDropdownArrow?: boolean;
}
export const IssuePropertyAssignee: FC<IIssuePropertyAssignee> = observer((props) => {
const { value, onChange, disabled, list, className, buttonClassName, optionsClassName, dropdownArrow = true } = props;
const dropdownBtn = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [search, setSearch] = useState<string>("");
const options: IFiltersOption[] | [] =
(list &&
list?.length > 0 &&
list.map((_member: any) => ({
id: _member?.member?.id,
title: _member?.member?.display_name,
avatar: _member?.member?.avatar && _member?.member?.avatar !== "" ? _member?.member?.avatar : null,
}))) ||
[];
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const selectedOption: IFiltersOption[] =
(value && value?.length > 0 && options.filter((_member: IFiltersOption) => value.includes(_member.id))) || [];
const filteredOptions: IFiltersOption[] =
search === ""
? options && options.length > 0
? options
: []
: options && options.length > 0
? options.filter((_member: IFiltersOption) =>
_member.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
)
: [];
const assigneeRenderLength = 5;
export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer((props) => {
const { value, onChange, members, disabled = false, hideDropdownArrow = false } = props;
return (
<Combobox
multiple={true}
as="div"
className={`${className}`}
value={selectedOption.map((_member: IFiltersOption) => _member.id) as string[]}
onChange={(data: string[]) => {
if (onChange && selectedOption) onChange(data, selectedOption);
}}
<MembersSelect
value={value}
onChange={onChange}
members={members ?? undefined}
disabled={disabled}
>
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Combobox.Button
ref={dropdownBtn}
type="button"
className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{selectedOption && selectedOption?.length > 0 ? (
<>
{selectedOption?.length > 1 ? (
<Tooltip
tooltipHeading={`Assignees`}
tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
>
<div className="flex-shrink-0 flex justify-center items-center gap-1 pr-[8px]">
{selectedOption.slice(0, assigneeRenderLength).map((_assignee) => (
<div
key={_assignee?.id}
className="flex-shrink-0 w-[16px] h-[16px] rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300"
>
{_assignee && _assignee.avatar ? (
<img
src={_assignee.avatar}
className="absolute top-0 left-0 h-full w-full object-cover"
alt={_assignee.title}
/>
) : (
_assignee.title[0]
)}
</div>
))}
{selectedOption.length > assigneeRenderLength && (
<div className="flex-shrink-0 h-[16px] px-0.5 rounded-sm bg-gray-700 flex justify-center items-center text-white capitalize relative -mr-[8px] text-xs overflow-hidden border border-custom-border-300">
+{selectedOption?.length - assigneeRenderLength}
</div>
)}
</div>
</Tooltip>
) : (
<Tooltip
tooltipHeading={`Assignees`}
tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
>
<div className="flex-shrink-0 flex justify-center items-center gap-1 text-xs">
<div className="flex-shrink-0 w-4 h-4 rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden text-xs">
{selectedOption[0] && selectedOption[0].avatar ? (
<img
src={selectedOption[0].avatar}
className="absolute top-0 left-0 h-full w-full object-cover"
alt={selectedOption[0].title}
/>
) : (
<div className="w-full h-full bg-gray-700 flex justify-center items-center">
{selectedOption[0].title[0]}
</div>
)}
</div>
<div className="line-clamp-1">{selectedOption[0].title}</div>
</div>
</Tooltip>
)}
</>
) : (
<Tooltip tooltipHeading={`Assignees`} tooltipContent={``}>
<div className="text-xs">Select Assignees</div>
</Tooltip>
)}
{dropdownArrow && !disabled && (
<div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
<ChevronDown width={14} strokeWidth={2} />
</div>
)}
</Combobox.Button>
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Combobox.Options
ref={dropdownOptions}
className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
>
{options && options.length > 0 ? (
<>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
<div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
<Search width={12} strokeWidth={2} />
</div>
<div>
<Combobox.Input
className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
{search && search.length > 0 && (
<div
onClick={() => setSearch("")}
className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
>
<X width={12} strokeWidth={2} />
</div>
)}
</div>
<div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.id}
value={option.id}
className={({ active }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || (value && value.length > 0 && value.includes(option?.id))
? "bg-custom-background-80"
: ""
} ${
value && value.length > 0 && value.includes(option?.id)
? "text-custom-text-100"
: "text-custom-text-200"
}`
}
>
<div className="flex items-center gap-1 w-full px-1">
<div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
{option && option.avatar ? (
<img
src={option.avatar}
className="absolute top-0 left-0 h-full w-full object-cover"
alt={option.title}
/>
) : (
<div className="w-full h-full bg-gray-700 flex justify-center items-center">
{option.title[0]}
</div>
)}
</div>
<div className="line-clamp-1">{option.title}</div>
{value && value.length > 0 && value.includes(option?.id) && (
<div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
<Check width={13} strokeWidth={2} />
</div>
)}
</div>
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</>
) : (
<p className="text-center text-custom-text-200">No options available.</p>
)}
</Combobox.Options>
</div>
</>
);
}}
</Combobox>
hideDropdownArrow={hideDropdownArrow}
multiple
/>
);
});

140
web/components/issues/issue-layouts/properties/date.tsx
View File

@ -15,85 +15,81 @@ import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
import { renderDateFormat } from "helpers/date-time.helper";
export interface IIssuePropertyDate {
value?: any;
onChange?: (date: any) => void;
value: any;
onChange: (date: any) => void;
disabled?: boolean;
placeHolder?: string;
}
export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer(
({ value, onChange, disabled, placeHolder }) => {
const dropdownBtn = React.useRef<any>(null);
const dropdownOptions = React.useRef<any>(null);
export const IssuePropertyDate: React.FC<IIssuePropertyDate> = observer((props) => {
const { value, onChange, disabled, placeHolder } = props;
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const dropdownBtn = React.useRef<any>(null);
const dropdownOptions = React.useRef<any>(null);
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const [isOpen, setIsOpen] = React.useState<boolean>(false);
return (
<Popover as="div" className="relative">
{({ open }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
return (
<>
<Popover.Button
ref={dropdownBtn}
className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
}`}
>
<Tooltip tooltipHeading={placeHolder ? placeHolder : `Select date`} tooltipContent={value}>
<div className="flex-shrink-0 overflow-hidden rounded-sm flex justify-center items-center">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Calendar width={10} strokeWidth={2} />
</div>
{value ? (
<>
<div className="px-1 text-xs">{value}</div>
<div
className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center cursor-pointer"
onClick={() => {
if (onChange) onChange(null);
}}
>
<X width={10} strokeWidth={2} />
</div>
</>
) : (
<div className="text-xs">{placeHolder ? placeHolder : `Select date`}</div>
)}
</div>
</Tooltip>
</Popover.Button>
return (
<Popover as="div" className="relative">
{({ open }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Popover.Panel
ref={dropdownOptions}
className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
>
{({ close }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: any) => {
if (onChange && val) {
onChange(renderDateFormat(val));
close();
}
}}
dateFormat="dd-MM-yyyy"
calendarClassName="h-full"
inline
/>
return (
<>
<Popover.Button
ref={dropdownBtn}
className={`px-2.5 py-1 h-5 flex items-center rounded border-[0.5px] border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
}`}
>
<Tooltip tooltipHeading={placeHolder} tooltipContent={value ?? "None"}>
<div className="overflow-hidden flex justify-center items-center gap-2">
<Calendar className="h-3 w-3" strokeWidth={2} />
{value && (
<>
<div className="text-xs">{value}</div>
<div
className="flex-shrink-0 flex justify-center items-center"
onClick={() => {
if (onChange) onChange(null);
}}
>
<X className="h-2.5 w-2.5" strokeWidth={2} />
</div>
</>
)}
</Popover.Panel>
</div>
</>
);
}}
</Popover>
);
}
);
</div>
</Tooltip>
</Popover.Button>
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Popover.Panel
ref={dropdownOptions}
className={`absolute z-10 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1`}
>
{({ close }) => (
<DatePicker
selected={value ? new Date(value) : new Date()}
onChange={(val: any) => {
if (onChange && val) {
onChange(renderDateFormat(val));
close();
}
}}
dateFormat="dd-MM-yyyy"
calendarClassName="h-full"
inline
/>
)}
</Popover.Panel>
</div>
</>
);
}}
</Popover>
);
});

229
web/components/issues/issue-layouts/properties/estimates.tsx
View File

@ -1,217 +1,28 @@
import React from "react";
// headless ui
import { Combobox } from "@headlessui/react";
// lucide icons
import { ChevronDown, Search, X, Check, Triangle } from "lucide-react";
// mobx
import { observer } from "mobx-react-lite";
// components
import { Tooltip } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
// mobx
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";
interface IFiltersOption {
id: string;
title: string;
key: string;
}
import { EstimateSelect } from "components/estimates";
// types
import { IEstimatePoint } from "types";
export interface IIssuePropertyEstimates {
value?: any;
onChange?: (id: any) => void;
value: number | null;
onChange: (value: number | null) => void;
estimatePoints: IEstimatePoint[] | null;
disabled?: boolean;
workspaceSlug?: string;
projectId?: string;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
dropdownArrow?: boolean;
hideDropdownArrow?: boolean;
}
export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer(
({
value,
onChange,
disabled,
export const IssuePropertyEstimates: React.FC<IIssuePropertyEstimates> = observer((props) => {
const { value, onChange, estimatePoints, disabled, hideDropdownArrow = false } = props;
workspaceSlug,
projectId,
className,
buttonClassName,
optionsClassName,
dropdownArrow = true,
}) => {
const { project: projectStore }: RootStore = useMobxStore();
const dropdownBtn = React.useRef<any>(null);
const dropdownOptions = React.useRef<any>(null);
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const [search, setSearch] = React.useState<string>("");
const projectDetail =
(workspaceSlug && projectId && projectStore?.getProjectById(workspaceSlug, projectId)) || null;
const projectEstimateId = (projectDetail && projectDetail?.estimate) || null;
const estimates = (projectEstimateId && projectStore?.getProjectEstimateById(projectEstimateId)) || null;
const options: IFiltersOption[] | [] =
(estimates &&
estimates.points &&
estimates.points.length > 0 &&
estimates.points.map((_estimate) => ({
id: _estimate?.id,
title: _estimate?.value,
key: _estimate?.key.toString(),
}))) ||
[];
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const selectedOption: IFiltersOption | null | undefined =
(value && options.find((_estimate: IFiltersOption) => _estimate.key === value)) || null;
const filteredOptions: IFiltersOption[] =
search === ""
? options && options.length > 0
? options
: []
: options && options.length > 0
? options.filter((_estimate: IFiltersOption) =>
_estimate.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
)
: [];
return (
<Combobox
as="div"
className={`${className}`}
value={selectedOption && selectedOption.key}
onChange={(data: string) => {
if (onChange) onChange(data);
}}
disabled={disabled}
>
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Combobox.Button
ref={dropdownBtn}
type="button"
className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{selectedOption ? (
<Tooltip tooltipHeading={`Estimates`} tooltipContent={selectedOption?.title}>
<div className="flex-shrink-0 flex justify-center items-center gap-1">
<div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
<Triangle width={14} strokeWidth={2} />
</div>
<div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
</div>
</Tooltip>
) : (
<Tooltip tooltipHeading={`Estimates`} tooltipContent={``}>
<div className="text-xs">Select Estimates</div>
</Tooltip>
)}
{dropdownArrow && !disabled && (
<div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
<ChevronDown width={14} strokeWidth={2} />
</div>
)}
</Combobox.Button>
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Combobox.Options
ref={dropdownOptions}
className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
>
{options && options.length > 0 ? (
<>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
<div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
<Search width={12} strokeWidth={2} />
</div>
<div>
<Combobox.Input
className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
{search && search.length > 0 && (
<div
onClick={() => setSearch("")}
className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
>
<X width={12} strokeWidth={2} />
</div>
)}
</div>
<div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.key}
value={option.key}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center gap-1 w-full px-1">
<div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
<Triangle width={14} strokeWidth={2} />
</div>
<div className="line-clamp-1">{option.title}</div>
{selected && (
<div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
<Check width={13} strokeWidth={2} />
</div>
)}
</div>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</>
) : (
<p className="text-center text-custom-text-200">No options available.</p>
)}
</Combobox.Options>
</div>
</>
);
}}
</Combobox>
);
}
);
return (
<EstimateSelect
value={value}
onChange={onChange}
estimatePoints={estimatePoints ?? undefined}
buttonClassName="h-5"
disabled={disabled}
hideDropdownArrow={hideDropdownArrow}
/>
);
});

234
web/components/issues/issue-layouts/properties/labels.tsx
View File

@ -1,230 +1,28 @@
import { FC, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { ChevronDown, Search, X, Check } from "lucide-react";
import { observer } from "mobx-react-lite";
// components
import { Tooltip } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
interface IFiltersOption {
id: string;
title: string;
color: string | null;
}
import { LabelSelect } from "components/project";
// types
import { IIssueLabels } from "types";
export interface IIssuePropertyLabels {
value?: any;
onChange?: (id: any, data: any) => void;
value: string[];
onChange: (data: string[]) => void;
labels: IIssueLabels[] | null;
disabled?: boolean;
list?: any;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
dropdownArrow?: boolean;
hideDropdownArrow?: boolean;
}
export const IssuePropertyLabels: FC<IIssuePropertyLabels> = observer((props) => {
const {
value,
onChange,
disabled,
list,
className,
buttonClassName,
optionsClassName,
dropdownArrow = true,
} = props;
const dropdownBtn = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [search, setSearch] = useState<string>("");
const options: IFiltersOption[] | [] =
(list &&
list?.length > 0 &&
list.map((_label: any) => ({
id: _label?.id,
title: _label?.name,
color: _label?.color || null,
}))) ||
[];
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const selectedOption: IFiltersOption[] =
(value && value?.length > 0 && options.filter((_label: IFiltersOption) => value.includes(_label.id))) || [];
const filteredOptions: IFiltersOption[] =
search === ""
? options && options.length > 0
? options
: []
: options && options.length > 0
? options.filter((_label: IFiltersOption) =>
_label.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
)
: [];
export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((props) => {
const { value, onChange, labels, disabled, hideDropdownArrow = false } = props;
return (
<Combobox
multiple={true}
as="div"
className={`${className}`}
value={selectedOption.map((_label: IFiltersOption) => _label.id) as string[]}
onChange={(data: string[]) => {
if (onChange && selectedOption) onChange(data, selectedOption);
}}
<LabelSelect
value={value}
onChange={onChange}
labels={labels ?? undefined}
buttonClassName="h-5"
disabled={disabled}
>
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Combobox.Button
ref={dropdownBtn}
type="button"
className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{selectedOption && selectedOption?.length > 0 ? (
<>
{selectedOption?.length === 1 ? (
<Tooltip
tooltipHeading={`Labels`}
tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
>
<div className="flex-shrink-0 flex justify-center items-center gap-1">
<div
className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
style={{
backgroundColor: selectedOption[0]?.color || "#444",
}}
/>
<div className="pl-0.5 pr-1 text-xs">{selectedOption[0]?.title}</div>
</div>
</Tooltip>
) : (
<Tooltip
tooltipHeading={`Labels`}
tooltipContent={(selectedOption.map((_label: IFiltersOption) => _label.title) || []).join(", ")}
>
<div className="flex-shrink-0 flex justify-center items-center gap-1">
<div
className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
style={{ backgroundColor: "#444" }}
/>
<div className="pl-0.5 pr-1 text-xs">{selectedOption?.length} Labels</div>
</div>
</Tooltip>
)}
</>
) : (
<Tooltip tooltipHeading={`Labels`} tooltipContent={``}>
<div className="text-xs">Select Labels</div>
</Tooltip>
)}
{dropdownArrow && !disabled && (
<div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
<ChevronDown width={14} strokeWidth={2} />
</div>
)}
</Combobox.Button>
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Combobox.Options
ref={dropdownOptions}
className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
>
{options && options.length > 0 ? (
<>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
<div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
<Search width={12} strokeWidth={2} />
</div>
<div>
<Combobox.Input
className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
{search && search.length > 0 && (
<div
onClick={() => setSearch("")}
className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
>
<X width={12} strokeWidth={2} />
</div>
)}
</div>
<div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.id}
value={option.id}
className={({ active }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || (value && value.length > 0 && value.includes(option?.id))
? "bg-custom-background-80"
: ""
} ${
value && value.length > 0 && value.includes(option?.id)
? "text-custom-text-100"
: "text-custom-text-200"
}`
}
>
<div className="flex items-center gap-1 w-full px-1">
<div
className="flex-shrink-0 w-[10px] h-[10px] rounded-full"
style={{
backgroundColor: option.color || "#444",
}}
/>
<div className="line-clamp-1">{option.title}</div>
{value && value.length > 0 && value.includes(option?.id) && (
<div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
<Check width={13} strokeWidth={2} />
</div>
)}
</div>
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</>
) : (
<p className="text-center text-custom-text-200">No options available.</p>
)}
</Combobox.Options>
</div>
</>
);
}}
</Combobox>
hideDropdownArrow={hideDropdownArrow}
/>
);
});

226
web/components/issues/issue-layouts/properties/priority.tsx
View File

@ -1,223 +1,25 @@
import { FC, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { ChevronDown, Search, X, Check, AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban } from "lucide-react";
import { PrioritySelect } from "components/project";
import { observer } from "mobx-react-lite";
// components
import { Tooltip } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
interface IFiltersOption {
id: string;
title: string;
}
// types
import { TIssuePriorities } from "types";
export interface IIssuePropertyPriority {
value?: any;
onChange?: (id: any, data: IFiltersOption) => void;
value: TIssuePriorities;
onChange: (value: TIssuePriorities) => void;
disabled?: boolean;
list?: any;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
dropdownArrow?: boolean;
hideDropdownArrow?: boolean;
}
const Icon = ({ priority }: any) => (
<div className="w-full h-full">
{priority === "urgent" ? (
<div className="border border-red-500 bg-red-500 text-white w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<AlertCircle size={12} strokeWidth={2} />
</div>
) : priority === "high" ? (
<div className="border border-red-500/20 bg-red-500/10 text-red-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<SignalHigh size={12} strokeWidth={2} className="pl-[3px]" />
</div>
) : priority === "medium" ? (
<div className="border border-orange-500/20 bg-orange-500/10 text-orange-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<SignalMedium size={12} strokeWidth={2} className="pl-[3px]" />
</div>
) : priority === "low" ? (
<div className="border border-green-500/20 bg-green-500/10 text-green-500 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<SignalLow size={12} strokeWidth={2} className="pl-[3px]" />
</div>
) : (
<div className="border border-custom-border-400/20 bg-custom-text-400/10 text-custom-text-400 w-full h-full overflow-hidden flex justify-center items-center rounded-sm">
<Ban size={12} strokeWidth={2} />
</div>
)}
</div>
);
export const IssuePropertyPriority: FC<IIssuePropertyPriority> = observer((props) => {
const {
value,
onChange,
disabled,
list,
className,
buttonClassName,
optionsClassName,
dropdownArrow = true,
} = props;
const dropdownBtn = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [search, setSearch] = useState<string>("");
const options: IFiltersOption[] | [] =
(list &&
list?.length > 0 &&
list.map((_priority: any) => ({
id: _priority?.key,
title: _priority?.title,
}))) ||
[];
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const selectedOption: IFiltersOption | null | undefined =
(value && options.find((_priority: IFiltersOption) => _priority.id === value)) || null;
const filteredOptions: IFiltersOption[] =
search === ""
? options && options.length > 0
? options
: []
: options && options.length > 0
? options.filter((_priority: IFiltersOption) =>
_priority.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
)
: [];
export const IssuePropertyPriority: React.FC<IIssuePropertyPriority> = observer((props) => {
const { value, onChange, disabled, hideDropdownArrow = false } = props;
return (
<Combobox
as="div"
className={`${className}`}
value={selectedOption && selectedOption.id}
onChange={(data: string) => {
if (onChange && selectedOption) onChange(data, selectedOption);
}}
<PrioritySelect
value={value}
onChange={onChange}
buttonClassName="!h-5 p-1.5"
disabled={disabled}
>
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Combobox.Button
ref={dropdownBtn}
type="button"
className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{selectedOption ? (
<Tooltip tooltipHeading={`Priority`} tooltipContent={selectedOption?.title}>
<div className="flex-shrink-0 flex justify-center items-center gap-1">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Icon priority={selectedOption?.id} />
</div>
<div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
</div>
</Tooltip>
) : (
<Tooltip tooltipHeading={`Priority`} tooltipContent={``}>
<div className="text-xs">Select Priority</div>
</Tooltip>
)}
{dropdownArrow && !disabled && (
<div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
<ChevronDown width={14} strokeWidth={2} />
</div>
)}
</Combobox.Button>
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Combobox.Options
ref={dropdownOptions}
className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
>
{options && options.length > 0 ? (
<>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
<div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
<Search width={12} strokeWidth={2} />
</div>
<div>
<Combobox.Input
className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
{search && search.length > 0 && (
<div
onClick={() => setSearch("")}
className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
>
<X width={12} strokeWidth={2} />
</div>
)}
</div>
<div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.id}
value={option.id}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center gap-1 w-full px-1">
<div className="flex-shrink-0 w-[16px] h-[16px] flex justify-center items-center">
<Icon priority={option?.id} />
</div>
<div className="line-clamp-1">{option.title}</div>
{selected && (
<div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
<Check width={13} strokeWidth={2} />
</div>
)}
</div>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</>
) : (
<p className="text-center text-custom-text-200">No options available.</p>
)}
</Combobox.Options>
</div>
</>
);
}}
</Combobox>
hideDropdownArrow={hideDropdownArrow}
/>
);
});

214
web/components/issues/issue-layouts/properties/state.tsx
View File

@ -1,214 +1,28 @@
import { FC, useRef, useState } from "react";
import { Combobox } from "@headlessui/react";
import { ChevronDown, Search, X, Check } from "lucide-react";
import { observer } from "mobx-react-lite";
// components
import { Tooltip, StateGroupIcon } from "@plane/ui";
// hooks
import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
import { StateSelect } from "components/states";
// types
import { IState } from "types";
interface IFiltersOption {
id: string;
title: string;
group: string;
color: string | null;
}
export interface IIssuePropertyState {
value?: any;
onChange?: (id: any, data: IFiltersOption) => void;
value: IState;
onChange: (state: IState) => void;
states: IState[] | null;
disabled?: boolean;
list?: any;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
dropdownArrow?: boolean;
hideDropdownArrow?: boolean;
}
export const IssuePropertyState: FC<IIssuePropertyState> = observer((props) => {
const {
value,
onChange,
disabled,
list,
className,
buttonClassName,
optionsClassName,
dropdownArrow = true,
} = props;
const dropdownBtn = useRef<any>(null);
const dropdownOptions = useRef<any>(null);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [search, setSearch] = useState<string>("");
const options: IFiltersOption[] | [] =
(list &&
list?.length > 0 &&
list.map((_state: IState) => ({
id: _state?.id,
title: _state?.name,
group: _state?.group,
color: _state?.color || null,
}))) ||
[];
useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownBtn, dropdownOptions);
const selectedOption: IFiltersOption | null | undefined =
(value && options.find((_state: IFiltersOption) => _state.id === value)) || null;
const filteredOptions: IFiltersOption[] =
search === ""
? options && options.length > 0
? options
: []
: options && options.length > 0
? options.filter((_state: IFiltersOption) =>
_state.title.toLowerCase().replace(/\s+/g, "").includes(search.toLowerCase().replace(/\s+/g, ""))
)
: [];
export const IssuePropertyState: React.FC<IIssuePropertyState> = observer((props) => {
const { value, onChange, states, disabled, hideDropdownArrow = false } = props;
return (
<Combobox
as="div"
className={`${className}`}
value={selectedOption && selectedOption.id}
onChange={(data: string) => {
if (onChange && selectedOption) onChange(data, selectedOption);
}}
<StateSelect
value={value}
onChange={onChange}
states={states ?? undefined}
buttonClassName="h-5"
disabled={disabled}
>
{({ open }: { open: boolean }) => {
if (open) {
if (!isOpen) setIsOpen(true);
} else if (isOpen) setIsOpen(false);
return (
<>
<Combobox.Button
ref={dropdownBtn}
type="button"
className={`flex items-center justify-between gap-1 px-1 py-0.5 rounded-sm shadow-sm border border-custom-border-300 duration-300 outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{selectedOption ? (
<Tooltip tooltipHeading={`State`} tooltipContent={selectedOption?.title}>
<div className="flex-shrink-0 flex justify-center items-center gap-1">
<div className="flex-shrink-0 w-[12px] h-[12px] flex justify-center items-center">
<StateGroupIcon
stateGroup={selectedOption?.group as any}
color={(selectedOption?.color || null) as any}
width="12"
height="12"
/>
</div>
<div className="pl-0.5 pr-1 text-xs">{selectedOption?.title}</div>
</div>
</Tooltip>
) : (
<Tooltip tooltipHeading={`State`} tooltipContent={``}>
<div className="text-xs">Select State</div>
</Tooltip>
)}
{dropdownArrow && !disabled && (
<div className="flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center">
<ChevronDown width={14} strokeWidth={2} />
</div>
)}
</Combobox.Button>
<div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
<Combobox.Options
ref={dropdownOptions}
className={`absolute z-10 border border-custom-border-300 p-2 rounded bg-custom-background-100 text-xs shadow-lg focus:outline-none whitespace-nowrap mt-1 space-y-1 ${optionsClassName}`}
>
{options && options.length > 0 ? (
<>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-1">
<div className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm">
<Search width={12} strokeWidth={2} />
</div>
<div>
<Combobox.Input
className="w-full bg-transparent p-1 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
{search && search.length > 0 && (
<div
onClick={() => setSearch("")}
className="flex-shrink-0 flex justify-center items-center w-[16px] h-[16px] rounded-sm cursor-pointer hover:bg-custom-background-80"
>
<X width={12} strokeWidth={2} />
</div>
)}
</div>
<div className={`space-y-0.5 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.id}
value={option.id}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<div className="flex items-center gap-1 w-full px-1">
<div className="flex-shrink-0 w-[13px] h-[13px] flex justify-center items-center">
<StateGroupIcon
stateGroup={option?.group as any}
color={(option?.color || null) as any}
width="13"
height="13"
/>
</div>
<div className="line-clamp-1">{option.title}</div>
{selected && (
<div className="flex-shrink-0 ml-auto w-[13px] h-[13px] flex justify-center items-center">
<Check width={13} strokeWidth={2} />
</div>
)}
</div>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</>
) : (
<p className="text-center text-custom-text-200">No options available.</p>
)}
</Combobox.Options>
</div>
</>
);
}}
</Combobox>
hideDropdownArrow={hideDropdownArrow}
/>
);
});

6
web/components/issues/issue-layouts/spreadsheet/columns/state-column.tsx
View File

@ -4,6 +4,8 @@ import React from "react";
import { StateSelect } from "components/states";
// hooks
import useSubIssue from "hooks/use-sub-issue";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { IIssue, IStateResponse } from "types";
@ -22,12 +24,14 @@ export const SpreadsheetStateColumn: React.FC<Props> = (props) => {
const { subIssues, isLoading } = useSubIssue(issue.project_detail.id, issue.id, isExpanded);
const statesList = getStatesList(states);
return (
<>
<StateSelect
value={issue.state_detail}
onChange={(data) => onChange({ state: data.id, state_detail: data })}
stateGroups={states}
states={statesList}
buttonClassName="!shadow-none !border-0"
hideDropdownArrow
disabled={disabled}

38
web/components/issues/issue-peek-overview/properties.tsx
View File

@ -8,38 +8,37 @@ import { IssuePropertyPriority } from "components/issues/issue-layouts/propertie
import { IssuePropertyAssignee } from "components/issues/issue-layouts/properties/assignee";
import { IssuePropertyDate } from "components/issues/issue-layouts/properties/date";
// types
import { IIssue } from "types";
import { IIssue, IState, IUserLite, TIssuePriorities } from "types";
interface IPeekOverviewProperties {
issue: IIssue;
issueUpdate: (issue: Partial<IIssue>) => void;
states: any;
members: any;
states: IState[] | null;
members: IUserLite[] | null;
priorities: any;
}
export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
const { issue, issueUpdate, states, members, priorities } = props;
const handleState = (_state: string) => {
if (issueUpdate) issueUpdate({ ...issue, state: _state });
const handleState = (_state: IState) => {
issueUpdate({ ...issue, state: _state.id });
};
const handlePriority = (_priority: any) => {
if (issueUpdate) issueUpdate({ ...issue, priority: _priority });
const handlePriority = (_priority: TIssuePriorities) => {
issueUpdate({ ...issue, priority: _priority });
};
const handleAssignee = (_assignees: string[]) => {
if (issueUpdate) issueUpdate({ ...issue, assignees: _assignees });
issueUpdate({ ...issue, assignees: _assignees });
};
const handleStartDate = (_startDate: string) => {
if (issueUpdate) issueUpdate({ ...issue, start_date: _startDate });
issueUpdate({ ...issue, start_date: _startDate });
};
const handleTargetDate = (_targetDate: string) => {
if (issueUpdate) issueUpdate({ ...issue, target_date: _targetDate });
issueUpdate({ ...issue, target_date: _targetDate });
};
return (
@ -54,11 +53,11 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
</div>
<div className="w-full">
<IssuePropertyState
value={issue?.state || null}
dropdownArrow={false}
onChange={(id: string) => handleState(id)}
value={issue?.state_detail || null}
onChange={handleState}
states={states}
disabled={false}
list={states}
hideDropdownArrow={true}
/>
</div>
</div>
@ -74,10 +73,10 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
<div className="w-full">
<IssuePropertyAssignee
value={issue?.assignees || null}
dropdownArrow={false}
onChange={(ids: string[]) => handleAssignee(ids)}
disabled={false}
list={members}
hideDropdownArrow={true}
members={members}
/>
</div>
</div>
@ -93,10 +92,9 @@ export const PeekOverviewProperties: FC<IPeekOverviewProperties> = (props) => {
<div className="w-full">
<IssuePropertyPriority
value={issue?.priority || null}
dropdownArrow={false}
onChange={(id: string) => handlePriority(id)}
onChange={handlePriority}
disabled={false}
list={priorities}
hideDropdownArrow={true}
/>
</div>
</div>

6
web/components/issues/sub-issues/properties.tsx
View File

@ -10,6 +10,8 @@ import { TrackEventService } from "services/track_event.service";
import { ViewDueDateSelect, ViewStartDateSelect } from "components/issues";
import { MembersSelect, PrioritySelect } from "components/project";
import { StateSelect } from "components/states";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { IUser, IIssue, IState } from "types";
// fetch-keys
@ -115,6 +117,8 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
);
};
const statesList = getStatesList(projectStore.states?.[issue.project]);
return (
<div className="relative flex items-center gap-1">
{displayProperties.priority && (
@ -132,7 +136,7 @@ export const IssueProperty: React.FC<IIssueProperty> = observer((props) => {
<div className="flex-shrink-0">
<StateSelect
value={issue.state_detail}
stateGroups={projectStore.states ? projectStore.states[issue.project] : undefined}
states={statesList}
onChange={(data) => handleStateChange(data)}
hideDropdownArrow
disabled={!editable}

270
web/components/project/label-select.tsx
View File

@ -3,9 +3,6 @@ import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, PlusIcon, Search } from "lucide-react";
// components
import { CreateLabelModal } from "components/labels";
// ui
import { Tooltip } from "components/ui";
// types
@ -14,7 +11,7 @@ import { IIssueLabels } from "types";
type Props = {
value: string[];
onChange: (data: string[]) => void;
labels: IIssueLabels[];
labels: IIssueLabels[] | undefined;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
@ -41,10 +38,16 @@ export const LabelSelect: React.FC<Props> = ({
const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
const [labelModal, setLabelModal] = useState(false);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
const options = labels?.map((label) => ({
@ -66,149 +69,126 @@ export const LabelSelect: React.FC<Props> = ({
const filteredOptions =
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const footerOption = (
<button
type="button"
className="flex w-full select-none items-center rounded py-2 px-1 hover:bg-custom-background-80"
onClick={() => setLabelModal(true)}
>
<span className="flex items-center justify-start gap-1 text-custom-text-200">
<PlusIcon className="h-4 w-4" aria-hidden="true" />
<span>Create New Label</span>
</span>
</button>
);
return (
<>
{/* TODO: update this logic */}
{/* {projectId && (
<CreateLabelModal
isOpen={labelModal}
handleClose={() => setLabelModal(false)}
projectId={projectId}
user={user}
/>
)} */}
<Combobox
as="div"
className={`flex-shrink-0 text-left ${className}`}
value={value}
onChange={onChange}
disabled={disabled}
multiple
>
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
: value.length <= maxRender
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
<div className={`flex items-center gap-2 text-custom-text-200`}>
{value.length > 0 ? (
value.length <= maxRender ? (
<>
{labels
.filter((l) => value.includes(l.id))
.map((label) => (
<div
key={label.id}
className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
>
<div className="flex items-center gap-1.5 text-custom-text-200">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
{label.name}
</div>
<Combobox
as="div"
className={`flex-shrink-0 text-left ${className}`}
value={value}
onChange={onChange}
disabled={disabled}
multiple
>
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
: value.length <= maxRender
? "cursor-pointer"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
<div className="flex items-center gap-2 text-custom-text-200 h-full">
{value.length > 0 ? (
value.length <= maxRender ? (
<>
{labels
?.filter((l) => value.includes(l.id))
.map((label) => (
<div
key={label.id}
className="flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs h-full"
>
<div className="flex items-center gap-1.5 text-custom-text-200">
<span
className="h-2 w-2 flex-shrink-0 rounded-full"
style={{
backgroundColor: label?.color ?? "#000000",
}}
/>
{label.name}
</div>
))}
</>
) : (
<div className="flex cursor-default items-center flex-shrink-0 rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm">
<Tooltip
position="top"
tooltipHeading="Labels"
tooltipContent={labels
.filter((l) => value.includes(l.id))
.map((l) => l.name)
.join(", ")}
>
<div className="flex items-center gap-1.5 text-custom-text-200">
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
{`${value.length} Labels`}
</div>
</Tooltip>
</div>
)
))}
</>
) : (
""
)}
</div>
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
</button>
</Combobox.Button>
<Combobox.Options>
<div
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
<Search className="h-3.5 w-3.5 text-custom-text-300" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className={`h-3.5 w-3.5`} />}
</>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
{footerOption}
<div className="h-full flex cursor-default items-center flex-shrink-0 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs">
<Tooltip
position="top"
tooltipHeading="Labels"
tooltipContent={labels
?.filter((l) => value.includes(l.id))
.map((l) => l.name)
.join(", ")}
>
<div className="h-full flex items-center gap-1.5 text-custom-text-200">
<span className="h-2 w-2 flex-shrink-0 rounded-full bg-custom-primary" />
{`${value.length} Labels`}
</div>
</Tooltip>
</div>
)
) : (
<div className="h-full flex items-center justify-center text-xs rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 hover:bg-custom-background-80">
Select labels
</div>
)}
</div>
</Combobox.Options>
</Combobox>
</>
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
</button>
</Combobox.Button>
<Combobox.Options>
<div
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded border border-custom-border-200 bg-custom-background-90 px-2">
<Search className="h-3.5 w-3.5 text-custom-text-300" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div className={`mt-2 space-y-1 max-h-48 overflow-y-scroll`}>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
{option.content}
{selected && <Check className={`h-3.5 w-3.5`} />}
</>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">No matching results</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">Loading...</p>
)}
</div>
</div>
</Combobox.Options>
</Combobox>
);
};

27
web/components/project/members-select.tsx
View File

@ -1,18 +1,15 @@
import React, { useState } from "react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
// headless ui
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search, User2 } from "lucide-react";
// components
import { AssigneesList, Avatar, Tooltip } from "components/ui";
// icons
import { Check, ChevronDown, Search, User2 } from "lucide-react";
// types
import { IUserLite } from "types";
type Props = {
members: IUserLite[];
members: IUserLite[] | undefined;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
@ -51,6 +48,14 @@ export const MembersSelect: React.FC<Props> = ({
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
const options = members?.map((member) => ({
@ -73,22 +78,22 @@ export const MembersSelect: React.FC<Props> = ({
tooltipContent={
value && value.length > 0
? members
.filter((m) => value.includes(m.display_name))
?.filter((m) => value.includes(m.display_name))
.map((m) => m.display_name)
.join(", ")
: "No Assignee"
}
position="top"
>
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
<div className="flex items-center cursor-pointer h-full w-full gap-2 text-custom-text-200">
{value && value.length > 0 && Array.isArray(value) ? (
<AssigneesList userIds={value} length={3} showLength={true} />
) : (
<span
className="flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none
className="flex items-center justify-between gap-1 h-full w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none
"
>
<User2 className="h-3.5 w-3.5" />
<User2 className="h-3 w-3" />
</span>
)}
</div>
@ -112,9 +117,9 @@ export const MembersSelect: React.FC<Props> = ({
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
</button>
</Combobox.Button>
<Combobox.Options>
<Combobox.Options className="fixed z-10">
<div
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}

80
web/components/project/priority-select.tsx
View File

@ -1,23 +1,21 @@
import React, { useState } from "react";
// react-popper
import { usePopper } from "react-popper";
// headless ui
import { Placement } from "@popperjs/core";
import { Combobox } from "@headlessui/react";
// icons
import { Check, ChevronDown, Search } from "lucide-react";
import { PriorityIcon } from "@plane/ui";
// components
import { Tooltip } from "components/ui";
// helpers
import { capitalizeFirstLetter } from "helpers/string.helper";
// types
import { TIssuePriorities } from "types";
import { Placement } from "@popperjs/core";
// constants
import { PRIORITIES } from "constants/project";
import { ISSUE_PRIORITIES } from "constants/issue";
type Props = {
value: TIssuePriorities;
onChange: (data: any) => void;
onChange: (data: TIssuePriorities) => void;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
@ -43,15 +41,23 @@ export const PrioritySelect: React.FC<Props> = ({
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
const options = PRIORITIES?.map((priority) => ({
value: priority,
query: priority,
const options = ISSUE_PRIORITIES?.map((priority) => ({
value: priority.key,
query: priority.key,
content: (
<div className="flex items-center gap-2">
<PriorityIcon priority={priority} className="h-3.5 w-3.5" />
{priority ?? "None"}
<PriorityIcon priority={priority.key} className="h-3.5 w-3.5" />
{priority.title}
</div>
),
}));
@ -59,32 +65,24 @@ export const PrioritySelect: React.FC<Props> = ({
const filteredOptions =
query === "" ? options : options?.filter((option) => option.query.toLowerCase().includes(query.toLowerCase()));
const selectedOption = value ?? "None";
const selectedOption = value ? capitalizeFirstLetter(value) : "None";
const label = (
<Tooltip tooltipHeading="Priority" tooltipContent={selectedOption} position="top">
<div
className={`grid place-items-center rounded "h-6 w-6 border shadow-sm ${
value === "urgent" ? "border-red-500/20 bg-red-500" : "border-custom-border-300 bg-custom-background-100"
} items-center`}
>
<span className="flex gap-1 items-center text-custom-text-200 ">
<PriorityIcon
priority={value}
className={`w-3.5 ${
value === "urgent"
? "text-white"
: value === "high"
? "text-orange-500"
: value === "medium"
? "text-yellow-500"
: value === "low"
? "text-green-500"
: "text-custom-text-200"
}`}
/>
</span>
</div>
<PriorityIcon
priority={value}
className={`h-3.5 w-3.5 ${
value === "urgent"
? "text-white"
: value === "high"
? "text-orange-500"
: value === "medium"
? "text-yellow-500"
: value === "low"
? "text-green-500"
: "text-custom-text-200"
}`}
/>
</Tooltip>
);
@ -100,17 +98,19 @@ export const PrioritySelect: React.FC<Props> = ({
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${
className={`flex items-center justify-between gap-1 h-full w-full text-xs rounded border-[0.5px] ${
value === "urgent" ? "border-red-500/20 bg-red-500" : "border-custom-border-300"
} ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{label}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
{!hideDropdownArrow && !disabled && <ChevronDown className="h-2.5 w-2.5" aria-hidden="true" />}
</button>
</Combobox.Button>
<Combobox.Options>
<Combobox.Options className="fixed z-10">
<div
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -134,7 +134,7 @@ export const PrioritySelect: React.FC<Props> = ({
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>

33
web/components/states/state-select.tsx
View File

@ -1,21 +1,18 @@
import React, { useState } from "react";
import { usePopper } from "react-popper";
import { Placement } from "@popperjs/core";
import { Combobox } from "@headlessui/react";
import { Check, ChevronDown, Search } from "lucide-react";
// ui
import { StateGroupIcon } from "@plane/ui";
// helpers
import { getStatesList } from "helpers/state.helper";
// types
import { Tooltip } from "components/ui";
import { Placement } from "@popperjs/core";
// constants
import { IState, IStateResponse } from "types";
// types
import { IState } from "types";
type Props = {
value: IState;
onChange: (state: IState) => void;
stateGroups: IStateResponse | undefined;
states: IState[] | undefined;
className?: string;
buttonClassName?: string;
optionsClassName?: string;
@ -27,7 +24,7 @@ type Props = {
export const StateSelect: React.FC<Props> = ({
value,
onChange,
stateGroups,
states,
className = "",
buttonClassName = "",
optionsClassName = "",
@ -42,10 +39,16 @@ export const StateSelect: React.FC<Props> = ({
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
modifiers: [
{
name: "preventOverflow",
options: {
padding: 12,
},
},
],
});
const states = getStatesList(stateGroups);
const options = states?.map((state) => ({
value: state.id,
query: state.name,
@ -63,7 +66,7 @@ export const StateSelect: React.FC<Props> = ({
const label = (
<Tooltip tooltipHeading="State" tooltipContent={value?.name ?? ""} position="top">
<div className="flex items-center cursor-pointer w-full gap-2 text-custom-text-200">
<span className="h-3.5 w-3.5">{value && <StateGroupIcon stateGroup={value.group} color={value.color} />}</span>
{value && <StateGroupIcon stateGroup={value.group} color={value.color} />}
<span className="truncate">{value?.name ?? "State"}</span>
</div>
</Tooltip>
@ -85,7 +88,7 @@ export const StateSelect: React.FC<Props> = ({
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded-md shadow-sm border border-custom-border-300 duration-300 focus:outline-none ${
className={`flex items-center justify-between gap-1 w-full text-xs px-2.5 py-1 rounded border-[0.5px] border-custom-border-300 duration-300 focus:outline-none ${
disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
@ -93,9 +96,9 @@ export const StateSelect: React.FC<Props> = ({
{!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
</button>
</Combobox.Button>
<Combobox.Options>
<Combobox.Options className="fixed z-10">
<div
className={`z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
className={`border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap my-1 ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
@ -119,7 +122,7 @@ export const StateSelect: React.FC<Props> = ({
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active && !selected ? "bg-custom-background-80" : ""
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>

8
web/layouts/auth-layout/project-wrapper.tsx
View File

@ -65,7 +65,13 @@ export const ProjectAuthWrapper: FC<IProjectAuthWrapper> = observer((props) => {
? () => projectStore.fetchProjectStates(workspaceSlug.toString(), projectId.toString())
: null
);
// TODO: fetch project estimates
// fetching project estimates
useSWR(
workspaceSlug && projectId ? `PROJECT_ESTIMATES_${workspaceSlug}_${projectId}` : null,
workspaceSlug && projectId
? () => projectStore.fetchProjectEstimates(workspaceSlug.toString(), projectId.toString())
: null
);
// fetching project cycles
useSWR(
workspaceSlug && projectId ? `PROJECT_ALL_CYCLES_${workspaceSlug}_${projectId}` : null,

4
web/pages/[workspaceSlug]/profile/[userId]/assigned.tsx
View File

@ -8,8 +8,8 @@ import { AppLayout } from "layouts/app-layout";
import { ProfileAuthWrapper } from "layouts/profile-layout";
// components
import { UserProfileHeader } from "components/headers";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/profile-issues-root";
import { ProfileIssuesListLayout } from "components/issues/issue-layouts/list/roots/profile-issues-root";
import { ProfileIssuesKanBanLayout } from "components/issues/issue-layouts/kanban/roots/profile-issues-root";
// hooks
import { useMobxStore } from "lib/mobx/store-provider";
import { RootStore } from "store/root";