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: updated context menu component

Browse Source
This commit is contained in:
Aaryan Khandelwal 2023-03-05 20:22:01 +05:30
parent a4da4bf889
commit 6d99557de5
16 changed files with 385 additions and 221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/app/components/core/board-view/single-issue.tsx
View File

@ -101,6 +101,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...formData,
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
}, },
}; };
} }
@ -122,6 +123,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...formData,
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
}, },
}; };
} }
@ -136,7 +138,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string), PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (prevData ?? []).map((p) => {
if (p.id === issue.id) return { ...p, ...formData }; if (p.id === issue.id)
return { ...p, ...formData, assignees: formData.assignees_list ?? p.assignees_list };
return p; return p;
}), }),
@ -159,10 +162,10 @@ export const SingleBoardIssue: React.FC<Props> = ({
[workspaceSlug, projectId, cycleId, moduleId, issue] [workspaceSlug, projectId, cycleId, moduleId, issue]
); );
function getStyle( const getStyle = (
style: DraggingStyle | NotDraggingStyle | undefined, style: DraggingStyle | NotDraggingStyle | undefined,
snapshot: DraggableStateSnapshot snapshot: DraggableStateSnapshot
) { ) => {
if (orderBy === "sort_order") return style; if (orderBy === "sort_order") return style;
if (!snapshot.isDragging) return {}; if (!snapshot.isDragging) return {};
if (!snapshot.isDropAnimating) { if (!snapshot.isDropAnimating) {
@ -173,7 +176,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
...style, ...style,
transitionDuration: `0.001s`, transitionDuration: `0.001s`,
}; };
} };
const handleCopyText = () => { const handleCopyText = () => {
const originURL = const originURL =
@ -295,7 +298,7 @@ export const SingleBoardIssue: React.FC<Props> = ({
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
</div> </div>
)} )}
{properties.labels && ( {properties.labels && issue.label_details.length > 0 && (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => ( {issue.label_details.map((label) => (
<span <span

1
apps/app/components/core/issues-view.tsx
View File

@ -398,6 +398,7 @@ export const IssuesView: React.FC<Props> = ({
states={states} states={states}
members={members} members={members}
addIssueToState={addIssueToState} addIssueToState={addIssueToState}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue} handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null} openIssuesListModal={type !== "issue" ? openIssuesListModal : null}

3
apps/app/components/core/list-view/all-lists.tsx
View File

@ -12,6 +12,7 @@ type Props = {
states: IState[] | undefined; states: IState[] | undefined;
members: IProjectMember[] | undefined; members: IProjectMember[] | undefined;
addIssueToState: (groupTitle: string, stateId: string | null) => void; addIssueToState: (groupTitle: string, stateId: string | null) => void;
makeIssueCopy: (issue: IIssue) => void;
handleEditIssue: (issue: IIssue) => void; handleEditIssue: (issue: IIssue) => void;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null; openIssuesListModal?: (() => void) | null;
@ -25,6 +26,7 @@ export const AllLists: React.FC<Props> = ({
states, states,
members, members,
addIssueToState, addIssueToState,
makeIssueCopy,
openIssuesListModal, openIssuesListModal,
handleEditIssue, handleEditIssue,
handleDeleteIssue, handleDeleteIssue,
@ -50,6 +52,7 @@ export const AllLists: React.FC<Props> = ({
selectedGroup={selectedGroup} selectedGroup={selectedGroup}
members={members} members={members}
addIssueToState={() => addIssueToState(singleGroup, stateId)} addIssueToState={() => addIssueToState(singleGroup, stateId)}
makeIssueCopy={makeIssueCopy}
handleEditIssue={handleEditIssue} handleEditIssue={handleEditIssue}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
openIssuesListModal={type !== "issue" ? openIssuesListModal : null} openIssuesListModal={type !== "issue" ? openIssuesListModal : null}

238
apps/app/components/core/list-view/single-issue.tsx
View File

@ -1,4 +1,4 @@
import React, { useCallback } from "react"; import React, { useCallback, useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
@ -18,7 +18,14 @@ import {
} from "components/issues/view-select"; } from "components/issues/view-select";
// ui // ui
import { Tooltip, CustomMenu } from "components/ui"; import { Tooltip, CustomMenu, ContextMenu } from "components/ui";
// icons
import {
ClipboardDocumentCheckIcon,
LinkIcon,
PencilIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";
// types // types
@ -31,6 +38,7 @@ type Props = {
issue: IIssue; issue: IIssue;
properties: Properties; properties: Properties;
editIssue: () => void; editIssue: () => void;
makeIssueCopy: () => void;
removeIssue?: (() => void) | null; removeIssue?: (() => void) | null;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
userAuth: UserAuth; userAuth: UserAuth;
@ -41,13 +49,20 @@ export const SingleListIssue: React.FC<Props> = ({
issue, issue,
properties, properties,
editIssue, editIssue,
makeIssueCopy,
removeIssue, removeIssue,
handleDeleteIssue, handleDeleteIssue,
userAuth, userAuth,
}) => { }) => {
// context menu
const [contextMenu, setContextMenu] = useState(false);
const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId, cycleId, moduleId } = router.query; const { workspaceSlug, projectId, cycleId, moduleId } = router.query;
const { setToastAlert } = useToast(); const { setToastAlert } = useToast();
const partialUpdateIssue = useCallback( const partialUpdateIssue = useCallback(
(formData: Partial<IIssue>) => { (formData: Partial<IIssue>) => {
if (!workspaceSlug || !projectId) return; if (!workspaceSlug || !projectId) return;
@ -63,6 +78,7 @@ export const SingleListIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...formData,
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
}, },
}; };
} }
@ -84,6 +100,7 @@ export const SingleListIssue: React.FC<Props> = ({
issue_detail: { issue_detail: {
...p.issue_detail, ...p.issue_detail,
...formData, ...formData,
assignees: formData.assignees_list ?? p.issue_detail.assignees_list,
}, },
}; };
} }
@ -98,7 +115,8 @@ export const SingleListIssue: React.FC<Props> = ({
PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string), PROJECT_ISSUES_LIST(workspaceSlug as string, projectId as string),
(prevData) => (prevData) =>
(prevData ?? []).map((p) => { (prevData ?? []).map((p) => {
if (p.id === issue.id) return { ...p, ...formData }; if (p.id === issue.id)
return { ...p, ...formData, assignees: formData.assignees_list ?? p.assignees_list };
return p; return p;
}), }),
@ -134,104 +152,136 @@ export const SingleListIssue: React.FC<Props> = ({
}); });
}); });
}; };
const isNotAllowed = userAuth.isGuest || userAuth.isViewer; const isNotAllowed = userAuth.isGuest || userAuth.isViewer;
return ( return (
<div className="flex items-center justify-between gap-2 px-4 py-3 text-sm"> <>
<div className="flex items-center gap-2"> <ContextMenu
<span position={contextMenuPosition}
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full" title="Quick actions"
style={{ isOpen={contextMenu}
backgroundColor: issue.state_detail.color, setIsOpen={setContextMenu}
}} >
/> <ContextMenu.Item Icon={PencilIcon} onClick={editIssue}>
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}> Edit issue
<a className="group relative flex items-center gap-2"> </ContextMenu.Item>
{properties.key && ( <ContextMenu.Item Icon={ClipboardDocumentCheckIcon} onClick={makeIssueCopy}>
<Tooltip Make a copy...
tooltipHeading="ID" </ContextMenu.Item>
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`} <ContextMenu.Item Icon={TrashIcon} onClick={() => handleDeleteIssue(issue)}>
> Delete issue
<span className="flex-shrink-0 text-xs text-gray-500"> </ContextMenu.Item>
{issue.project_detail?.identifier}-{issue.sequence_id} <ContextMenu.Item Icon={LinkIcon} onClick={handleCopyText}>
Copy issue link
</ContextMenu.Item>
</ContextMenu>
<div
className="flex items-center justify-between gap-2 px-4 py-3 text-sm"
onContextMenu={(e) => {
e.preventDefault();
setContextMenu(true);
setContextMenuPosition({ x: e.pageX, y: e.pageY });
}}
>
<div className="flex items-center gap-2">
<span
className="block h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: issue.state_detail.color,
}}
/>
<Link href={`/${workspaceSlug}/projects/${issue?.project_detail?.id}/issues/${issue.id}`}>
<a className="group relative flex items-center gap-2">
{properties.key && (
<Tooltip
tooltipHeading="ID"
tooltipContent={`${issue.project_detail?.identifier}-${issue.sequence_id}`}
>
<span className="flex-shrink-0 text-xs text-gray-500">
{issue.project_detail?.identifier}-{issue.sequence_id}
</span>
</Tooltip>
)}
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}>
<span className="w-auto max-w-lg overflow-hidden text-ellipsis whitespace-nowrap">
{issue.name}
</span> </span>
</Tooltip> </Tooltip>
)} </a>
<Tooltip tooltipHeading="Title" tooltipContent={issue.name}> </Link>
<span className="w-auto max-w-lg text-ellipsis overflow-hidden whitespace-nowrap"> </div>
{issue.name} <div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs">
</span> {properties.priority && (
</Tooltip> <ViewPrioritySelect
</a> issue={issue}
</Link> partialUpdateIssue={partialUpdateIssue}
</div> position="right"
<div className="flex flex-shrink-0 flex-wrap items-center gap-x-1 gap-y-2 text-xs"> isNotAllowed={isNotAllowed}
{properties.priority && ( />
<ViewPrioritySelect )}
issue={issue} {properties.state && (
partialUpdateIssue={partialUpdateIssue} <ViewStateSelect
isNotAllowed={isNotAllowed} issue={issue}
/> partialUpdateIssue={partialUpdateIssue}
)} position="right"
{properties.state && ( isNotAllowed={isNotAllowed}
<ViewStateSelect />
issue={issue} )}
partialUpdateIssue={partialUpdateIssue} {properties.due_date && (
isNotAllowed={isNotAllowed} <ViewDueDateSelect
/> issue={issue}
)} partialUpdateIssue={partialUpdateIssue}
{properties.due_date && ( isNotAllowed={isNotAllowed}
<ViewDueDateSelect />
issue={issue} )}
partialUpdateIssue={partialUpdateIssue} {properties.sub_issue_count && (
isNotAllowed={isNotAllowed} <div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm">
/> {issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"}
)} </div>
{properties.sub_issue_count && ( )}
<div className="flex flex-shrink-0 items-center gap-1 rounded border px-2 py-1 text-xs shadow-sm"> {properties.labels && (
{issue.sub_issues_count} {issue.sub_issues_count === 1 ? "sub-issue" : "sub-issues"} <div className="flex flex-wrap gap-1">
</div> {issue.label_details.map((label) => (
)}
{properties.labels && (
<div className="flex flex-wrap gap-1">
{issue.label_details.map((label) => (
<span
key={label.id}
className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
>
<span <span
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" key={label.id}
style={{ className="group flex items-center gap-1 rounded-2xl border px-2 py-0.5 text-xs"
backgroundColor: label?.color && label.color !== "" ? label.color : "#000", >
}} <span
/> className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
{label.name} style={{
</span> backgroundColor: label?.color && label.color !== "" ? label.color : "#000",
))} }}
</div> />
)} {label.name}
{properties.assignee && ( </span>
<ViewAssigneeSelect ))}
issue={issue} </div>
partialUpdateIssue={partialUpdateIssue} )}
isNotAllowed={isNotAllowed} {properties.assignee && (
/> <ViewAssigneeSelect
)} issue={issue}
{type && !isNotAllowed && ( partialUpdateIssue={partialUpdateIssue}
<CustomMenu width="auto" ellipsis> position="right"
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem> isNotAllowed={isNotAllowed}
{type !== "issue" && removeIssue && ( />
<CustomMenu.MenuItem onClick={removeIssue}> )}
<>Remove from {type}</> {type && !isNotAllowed && (
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={editIssue}>Edit issue</CustomMenu.MenuItem>
{type !== "issue" && removeIssue && (
<CustomMenu.MenuItem onClick={removeIssue}>
<>Remove from {type}</>
</CustomMenu.MenuItem>
)}
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}>
Delete issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} <CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => handleDeleteIssue(issue)}> </CustomMenu>
Delete issue )}
</CustomMenu.MenuItem> </div>
<CustomMenu.MenuItem onClick={handleCopyText}>Copy issue link</CustomMenu.MenuItem>
</CustomMenu>
)}
</div> </div>
</div> </>
); );
}; };

3
apps/app/components/core/list-view/single-list.tsx
View File

@ -23,6 +23,7 @@ type Props = {
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
members: IProjectMember[] | undefined; members: IProjectMember[] | undefined;
addIssueToState: () => void; addIssueToState: () => void;
makeIssueCopy: (issue: IIssue) => void;
handleEditIssue: (issue: IIssue) => void; handleEditIssue: (issue: IIssue) => void;
handleDeleteIssue: (issue: IIssue) => void; handleDeleteIssue: (issue: IIssue) => void;
openIssuesListModal?: (() => void) | null; openIssuesListModal?: (() => void) | null;
@ -37,6 +38,7 @@ export const SingleList: React.FC<Props> = ({
selectedGroup, selectedGroup,
members, members,
addIssueToState, addIssueToState,
makeIssueCopy,
handleEditIssue, handleEditIssue,
handleDeleteIssue, handleDeleteIssue,
openIssuesListModal, openIssuesListModal,
@ -113,6 +115,7 @@ export const SingleList: React.FC<Props> = ({
issue={issue} issue={issue}
properties={properties} properties={properties}
editIssue={() => handleEditIssue(issue)} editIssue={() => handleEditIssue(issue)}
makeIssueCopy={() => makeIssueCopy(issue)}
handleDeleteIssue={handleDeleteIssue} handleDeleteIssue={handleDeleteIssue}
removeIssue={() => { removeIssue={() => {
removeIssue && removeIssue(issue.bridge); removeIssue && removeIssue(issue.bridge);

37
apps/app/components/issues/select/assignee.tsx
View File

@ -22,7 +22,7 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
// fetching project members // fetching project members
const { data: people } = useSWR( const { data: members } = useSWR(
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null, workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
workspaceSlug && projectId workspaceSlug && projectId
? () => projectServices.projectMembers(workspaceSlug as string, projectId as string) ? () => projectServices.projectMembers(workspaceSlug as string, projectId as string)
@ -30,18 +30,20 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
); );
const options = const options =
people?.map((person) => ({ members?.map((member) => ({
value: person.member.id, value: member.member.id,
query: query:
person.member.first_name && person.member.first_name !== "" (member.member.first_name && member.member.first_name !== ""
? person.member.first_name ? member.member.first_name
: person.member.email, : member.member.email) +
" " +
member.member.last_name ?? "",
content: ( content: (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Avatar user={person.member} /> <Avatar user={member.member} />
{person.member.first_name && person.member.first_name !== "" {member.member.first_name && member.member.first_name !== ""
? person.member.first_name ? member.member.first_name
: person.member.email} : member.member.email}
</div> </div>
), ),
})) ?? []; })) ?? [];
@ -54,19 +56,20 @@ export const IssueAssigneeSelect: React.FC<Props> = ({ projectId, value = [], on
label={ label={
<div className="flex items-center gap-2 text-gray-500"> <div className="flex items-center gap-2 text-gray-500">
{value && value.length > 0 && Array.isArray(value) ? ( {value && value.length > 0 && Array.isArray(value) ? (
<span className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<AssigneesList userIds={value} length={3} showLength={false} /> <AssigneesList userIds={value} length={3} showLength={false} />
<span className=" text-gray-500">{value.length} Assignees</span> <span className="text-gray-500">{value.length} Assignees</span>
</span> </div>
) : ( ) : (
<span className="flex items-center justify-center gap-2"> <div className="flex items-center justify-center gap-2">
<UserGroupIcon className="h-4 w-4 text-gray-500 " /> <UserGroupIcon className="h-4 w-4 text-gray-500" />
<span className=" text-gray-500">Assignee</span> <span className="text-gray-500">Assignee</span>
</span> </div>
)} )}
</div> </div>
} }
multiple multiple
noChevron
/> />
); );
}; };

1
apps/app/components/issues/select/priority.tsx
View File

@ -26,6 +26,7 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
</div> </div>
} }
onChange={onChange} onChange={onChange}
noChevron
> >
{PRIORITIES.map((priority) => ( {PRIORITIES.map((priority) => (
<CustomSelect.Option key={priority} value={priority}> <CustomSelect.Option key={priority} value={priority}>

1
apps/app/components/issues/select/project.tsx
View File

@ -46,6 +46,7 @@ export const IssueProjectSelect: React.FC<IssueProjectSelectProps> = ({
onChange(val); onChange(val);
setActiveProject(val); setActiveProject(val);
}} }}
noChevron
> >
{projects ? ( {projects ? (
projects.length > 0 ? ( projects.length > 0 ? (

1
apps/app/components/issues/select/state.tsx
View File

@ -72,6 +72,7 @@ export const IssueStateSelect: React.FC<Props> = ({ setIsOpen, value, onChange,
Create New State Create New State
</button> </button>
} }
noChevron
/> />
); );
}; };

201
apps/app/components/issues/view-select/assignee.tsx
View File

@ -9,15 +9,17 @@ import { Listbox, Transition } from "@headlessui/react";
// services // services
import projectService from "services/project.service"; import projectService from "services/project.service";
// ui // ui
import { AssigneesList, Avatar, Tooltip } from "components/ui"; import { AssigneesList, Avatar, CustomSearchSelect, Tooltip } from "components/ui";
// types // types
import { IIssue } from "types"; import { IIssue } from "types";
// fetch-keys // fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
import { UserGroupIcon } from "@heroicons/react/24/outline";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>) => void; partialUpdateIssue: (formData: Partial<IIssue>) => void;
position?: "left" | "right";
selfPositioned?: boolean; selfPositioned?: boolean;
tooltipPosition?: "left" | "right"; tooltipPosition?: "left" | "right";
isNotAllowed: boolean; isNotAllowed: boolean;
@ -26,6 +28,7 @@ type Props = {
export const ViewAssigneeSelect: React.FC<Props> = ({ export const ViewAssigneeSelect: React.FC<Props> = ({
issue, issue,
partialUpdateIssue, partialUpdateIssue,
position = "left",
selfPositioned = false, selfPositioned = false,
tooltipPosition = "right", tooltipPosition = "right",
isNotAllowed, isNotAllowed,
@ -40,9 +43,27 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
: null : null
); );
const options =
members?.map((member) => ({
value: member.member.id,
query:
(member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email) +
" " +
member.member.last_name ?? "",
content: (
<div className="flex items-center gap-2">
<Avatar user={member.member} />
{member.member.first_name && member.member.first_name !== ""
? member.member.first_name
: member.member.email}
</div>
),
})) ?? [];
return ( return (
<Listbox <CustomSearchSelect
as="div"
value={issue.assignees} value={issue.assignees}
onChange={(data: any) => { onChange={(data: any) => {
const newData = issue.assignees ?? []; const newData = issue.assignees ?? [];
@ -50,69 +71,119 @@ export const ViewAssigneeSelect: React.FC<Props> = ({
if (newData.includes(data)) newData.splice(newData.indexOf(data), 1); if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
else newData.push(data); else newData.push(data);
partialUpdateIssue({ assignees_list: newData }); partialUpdateIssue({ assignees_list: data });
}} }}
className={`group ${!selfPositioned ? "relative" : ""} flex-shrink-0`} options={options}
disabled={isNotAllowed} label={
> <Tooltip
{({ open }) => ( position={`top-${tooltipPosition}`}
<div> tooltipHeading="Assignees"
<Listbox.Button> tooltipContent={
<Tooltip issue.assignee_details.length > 0
position={`top-${tooltipPosition}`} ? issue.assignee_details
tooltipHeading="Assignees" .map((assignee) =>
tooltipContent={ assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
issue.assignee_details.length > 0 )
? issue.assignee_details .join(", ")
.map((assignee) => : "No Assignee"
assignee?.first_name !== "" ? assignee?.first_name : assignee?.email }
) >
.join(", ") <div
: "No Assignee" className={`flex ${
} isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
> } items-center gap-2 text-gray-500`}
<div
className={`flex ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center gap-1 text-xs`}
>
<AssigneesList userIds={issue.assignees ?? []} />
</div>
</Tooltip>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
> >
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg min-w-full ring-1 ring-black ring-opacity-5 focus:outline-none"> {issue.assignees && issue.assignees.length > 0 && Array.isArray(issue.assignees) ? (
{members?.map((member) => ( <div className="flex items-center justify-center gap-2">
<Listbox.Option <AssigneesList userIds={issue.assignees} length={3} showLength={false} />
key={member.member.id} <span className="text-gray-500">{issue.assignees.length} Assignees</span>
className={({ active, selected }) => </div>
`flex items-center gap-x-1 cursor-pointer select-none p-2 whitespace-nowrap ${ ) : (
active ? "bg-indigo-50" : "" <div className="flex items-center justify-center gap-2">
} ${ <UserGroupIcon className="h-4 w-4 text-gray-500" />
selected || issue.assignees?.includes(member.member.id) <span className="text-gray-500">Assignee</span>
? "bg-indigo-50 font-medium" </div>
: "font-normal" )}
}` </div>
} </Tooltip>
value={member.member.id} }
> multiple
<Avatar user={member.member} /> noChevron
{member.member.first_name && member.member.first_name !== "" position={position}
? member.member.first_name disabled={isNotAllowed}
: member.member.email} />
</Listbox.Option> // <Listbox
))} // as="div"
</Listbox.Options> // value={issue.assignees}
</Transition> // onChange={(data: any) => {
</div> // const newData = issue.assignees ?? [];
)}
</Listbox> // if (newData.includes(data)) newData.splice(newData.indexOf(data), 1);
// else newData.push(data);
// partialUpdateIssue({ assignees_list: newData });
// }}
// className={`group ${!selfPositioned ? "relative" : ""} flex-shrink-0`}
// disabled={isNotAllowed}
// >
// {({ open }) => (
// <div>
// <Listbox.Button>
// <Tooltip
// position={`top-${tooltipPosition}`}
// tooltipHeading="Assignees"
// tooltipContent={
// issue.assignee_details.length > 0
// ? issue.assignee_details
// .map((assignee) =>
// assignee?.first_name !== "" ? assignee?.first_name : assignee?.email
// )
// .join(", ")
// : "No Assignee"
// }
// >
// <div
// className={`flex ${
// isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
// } items-center gap-1 text-xs`}
// >
// <AssigneesList userIds={issue.assignees ?? []} />
// </div>
// </Tooltip>
// </Listbox.Button>
// <Transition
// show={open}
// as={React.Fragment}
// leave="transition ease-in duration-100"
// leaveFrom="opacity-100"
// leaveTo="opacity-0"
// >
// <Listbox.Options className="absolute right-0 z-10 mt-1 max-h-48 min-w-full overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
// {members?.map((member) => (
// <Listbox.Option
// key={member.member.id}
// className={({ active, selected }) =>
// `flex cursor-pointer select-none items-center gap-x-1 whitespace-nowrap p-2 ${
// active ? "bg-indigo-50" : ""
// } ${
// selected || issue.assignees?.includes(member.member.id)
// ? "bg-indigo-50 font-medium"
// : "font-normal"
// }`
// }
// value={member.member.id}
// >
// <Avatar user={member.member} />
// {member.member.first_name && member.member.first_name !== ""
// ? member.member.first_name
// : member.member.email}
// </Listbox.Option>
// ))}
// </Listbox.Options>
// </Transition>
// </div>
// )}
// </Listbox>
); );
}; };

9
apps/app/components/issues/view-select/priority.tsx
View File

@ -12,6 +12,7 @@ import { PRIORITIES } from "constants/project";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>) => void; partialUpdateIssue: (formData: Partial<IIssue>) => void;
position?: "left" | "right";
selfPositioned?: boolean; selfPositioned?: boolean;
isNotAllowed: boolean; isNotAllowed: boolean;
}; };
@ -19,19 +20,18 @@ type Props = {
export const ViewPrioritySelect: React.FC<Props> = ({ export const ViewPrioritySelect: React.FC<Props> = ({
issue, issue,
partialUpdateIssue, partialUpdateIssue,
position = "left",
selfPositioned = false, selfPositioned = false,
isNotAllowed, isNotAllowed,
}) => ( }) => (
<CustomSelect <CustomSelect
value={issue.state} value={issue.state}
onChange={(data: string) => { onChange={(data: string) => partialUpdateIssue({ priority: data })}
partialUpdateIssue({ priority: data });
}}
maxHeight="md" maxHeight="md"
customButton={ customButton={
<button <button
type="button" type="button"
className={`grid place-items-center rounded w-6 h-6 ${ className={`grid h-6 w-6 place-items-center rounded ${
isNotAllowed ? "cursor-not-allowed" : "cursor-pointer" isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
} items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${ } items-center shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
issue.priority === "urgent" issue.priority === "urgent"
@ -57,6 +57,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
} }
noChevron noChevron
disabled={isNotAllowed} disabled={isNotAllowed}
position={position}
selfPositioned={selfPositioned} selfPositioned={selfPositioned}
> >
{PRIORITIES?.map((priority) => ( {PRIORITIES?.map((priority) => (

37
apps/app/components/issues/view-select/state.tsx
View File

@ -13,10 +13,12 @@ import { getStatesList } from "helpers/state.helper";
import { IIssue } from "types"; import { IIssue } from "types";
// fetch-keys // fetch-keys
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
import { getStateGroupIcon } from "components/icons";
type Props = { type Props = {
issue: IIssue; issue: IIssue;
partialUpdateIssue: (formData: Partial<IIssue>) => void; partialUpdateIssue: (formData: Partial<IIssue>) => void;
position?: "left" | "right";
selfPositioned?: boolean; selfPositioned?: boolean;
isNotAllowed: boolean; isNotAllowed: boolean;
}; };
@ -24,6 +26,7 @@ type Props = {
export const ViewStateSelect: React.FC<Props> = ({ export const ViewStateSelect: React.FC<Props> = ({
issue, issue,
partialUpdateIssue, partialUpdateIssue,
position = "left",
selfPositioned = false, selfPositioned = false,
isNotAllowed, isNotAllowed,
}) => { }) => {
@ -38,46 +41,38 @@ export const ViewStateSelect: React.FC<Props> = ({
); );
const states = getStatesList(stateGroups ?? {}); const states = getStatesList(stateGroups ?? {});
const currentState = states?.find((s) => s.id === issue.state);
return ( return (
<CustomSelect <CustomSelect
label={ label={
<> <>
<span {getStateGroupIcon(
className="h-1.5 w-1.5 flex-shrink-0 rounded-full" currentState?.group ?? "backlog",
style={{ "16",
backgroundColor: states?.find((s) => s.id === issue.state)?.color, "16",
}} currentState?.color ?? ""
/> )}
<Tooltip <Tooltip
tooltipHeading="State" tooltipHeading="State"
tooltipContent={addSpaceIfCamelCase( tooltipContent={addSpaceIfCamelCase(currentState?.name ?? "")}
states?.find((s) => s.id === issue.state)?.name ?? ""
)}
> >
<span> <span>{addSpaceIfCamelCase(currentState?.name ?? "")}</span>
{addSpaceIfCamelCase(states?.find((s) => s.id === issue.state)?.name ?? "")}
</span>
</Tooltip> </Tooltip>
</> </>
} }
value={issue.state} value={issue.state}
onChange={(data: string) => { onChange={(data: string) => partialUpdateIssue({ state: data })}
partialUpdateIssue({ state: data });
}}
maxHeight="md" maxHeight="md"
noChevron noChevron
disabled={isNotAllowed} disabled={isNotAllowed}
position={position}
selfPositioned={selfPositioned} selfPositioned={selfPositioned}
> >
{states?.map((state) => ( {states?.map((state) => (
<CustomSelect.Option key={state.id} value={state.id}> <CustomSelect.Option key={state.id} value={state.id}>
<> <>
<span {getStateGroupIcon(state.group, "16", "16", state.color)}
className="h-1.5 w-1.5 flex-shrink-0 rounded-full"
style={{
backgroundColor: state.color,
}}
/>
{addSpaceIfCamelCase(state.name)} {addSpaceIfCamelCase(state.name)}
</> </>
</CustomSelect.Option> </CustomSelect.Option>

32
apps/app/components/ui/context-menu.tsx
View File

@ -15,14 +15,28 @@ type Props = {
const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) => { const ContextMenu = ({ position, children, title, isOpen, setIsOpen }: Props) => {
useEffect(() => { useEffect(() => {
const hideContextMenu = () => setIsOpen(false); const hideContextMenu = () => {
if (isOpen) setIsOpen(false);
};
window.addEventListener("click", hideContextMenu); window.addEventListener("click", hideContextMenu);
return () => { return () => {
window.removeEventListener("click", hideContextMenu); window.removeEventListener("click", hideContextMenu);
}; };
}, [setIsOpen]); }, [isOpen, setIsOpen]);
useEffect(() => {
const hideContextMenu = (e: KeyboardEvent) => {
if (e.key === "Escape" && isOpen) setIsOpen(false);
};
window.addEventListener("keydown", hideContextMenu);
return () => {
window.removeEventListener("keydown", hideContextMenu);
};
}, [isOpen, setIsOpen]);
return ( return (
<div <div
@ -61,10 +75,12 @@ const MenuItem: React.FC<MenuItemProps> = ({
className = "", className = "",
Icon, Icon,
}) => ( }) => (
<div className={`${className} w-full rounded px-1 py-1.5 text-left hover:bg-hover-gray`}> <>
{renderAs === "a" ? ( {renderAs === "a" ? (
<Link href={href}> <Link href={href}>
<a className="flex items-center gap-2"> <a
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
>
<> <>
{Icon && <Icon />} {Icon && <Icon />}
{children} {children}
@ -72,14 +88,18 @@ const MenuItem: React.FC<MenuItemProps> = ({
</a> </a>
</Link> </Link>
) : ( ) : (
<button type="button" className="flex items-center gap-2" onClick={onClick}> <button
type="button"
className={`${className} flex w-full items-center gap-2 rounded px-1 py-1.5 text-left hover:bg-hover-gray`}
onClick={onClick}
>
<> <>
{Icon && <Icon height={12} width={12} />} {Icon && <Icon height={12} width={12} />}
{children} {children}
</> </>
</button> </button>
)} )}
</div> </>
); );
ContextMenu.Item = MenuItem; ContextMenu.Item = MenuItem;

16
apps/app/components/ui/custom-search-select.tsx
View File

@ -58,6 +58,7 @@ export const CustomSearchSelect = ({
value={value} value={value}
onChange={onChange} onChange={onChange}
className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`} className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
disabled={disabled}
multiple multiple
> >
{({ open }: any) => ( {({ open }: any) => (
@ -111,7 +112,7 @@ export const CustomSearchSelect = ({
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
</div> </div>
<div className="mt-2"> <div className="mt-2 space-y-1">
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( filteredOptions.map((option) => (
@ -124,10 +125,18 @@ export const CustomSearchSelect = ({
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500` } flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500`
} }
> >
{({ selected }) => ( {({ active, selected }) => (
<> <>
{option.content} {option.content}
{selected && <CheckIcon className="h-4 w-4" />} <div
className={`flex items-center justify-center rounded border border-gray-500 p-0.5 ${
active || selected ? "opacity-100" : "opacity-0"
}`}
>
<CheckIcon
className={`h-3 w-3 ${selected ? "opacity-100" : "opacity-0"}`}
/>
</div>
</> </>
)} )}
</Combobox.Option> </Combobox.Option>
@ -151,6 +160,7 @@ export const CustomSearchSelect = ({
value={value} value={value}
onChange={onChange} onChange={onChange}
className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`} className={`${!selfPositioned ? "relative" : ""} flex-shrink-0 text-left`}
disabled={disabled}
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>

11
apps/app/components/ui/custom-select.tsx
View File

@ -94,7 +94,7 @@ const CustomSelect = ({
: "" : ""
}`} }`}
> >
<div className="p-2">{children}</div> <div className="space-y-1 p-2">{children}</div>
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>
</Listbox> </Listbox>
@ -112,13 +112,14 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
className={({ active, selected }) => className={({ active, selected }) =>
`${className} ${active || selected ? "bg-hover-gray" : ""} ${ `${className} ${active || selected ? "bg-hover-gray" : ""} ${
selected ? "font-medium" : "" selected ? "font-medium" : ""
} flex cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 text-gray-500` } cursor-pointer select-none truncate rounded px-1 py-1.5 text-gray-500`
} }
> >
{({ selected }) => ( {({ selected }) => (
<> <div className="flex items-center justify-between gap-2">
{children} {selected && <CheckIcon className="h-4 w-4" />} <div className="flex items-center gap-2">{children}</div>
</> {selected && <CheckIcon className="h-4 w-4 flex-shrink-0" />}
</div>
)} )}
</Listbox.Option> </Listbox.Option>
); );

2
apps/app/components/ui/labels-list.tsx
View File

@ -20,7 +20,7 @@ export const IssueLabelsList: React.FC<IssueLabelsListProps> = ({
className={`h-4 w-4 flex-shrink-0 rounded-full border border-white className={`h-4 w-4 flex-shrink-0 rounded-full border border-white
`} `}
style={{ style={{
backgroundColor: color, backgroundColor: color && color !== "" ? color : "#000000",
}} }}
/> />
</div> </div>