thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1111] chore: added a helper function to check if issue is peeked (#4305)

Browse Source 
* chore: added a helper function to check if issue is peeked

* chore: make the kanban block observer

* chore: rename isIssuePeekd helper function
This commit is contained in:
Aaryan Khandelwal 2024-04-30 17:20:02 +05:30 committed by GitHub
parent e5681534d7
commit 1b79517f07
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 39 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/components/gantt-chart/blocks/block.tsx
View File

@ -36,7 +36,7 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
} = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
const { peekIssue } = useIssueDetail();
const { getIsIssuePeeked } = useIssueDetail();
const isBlockVisibleOnChart = block.start_date && block.target_date;
@ -81,8 +81,9 @@ export const GanttChartBlock: React.FC<Props> = observer((props) => {
<div
className={cn("relative h-full", {
"bg-custom-background-80": isBlockActive(block.id),
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
peekIssue?.issueId === block.data.id,
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(
block.data.id
),
})}
onMouseEnter={() => updateActiveBlockId(block.id)}
onMouseLeave={() => updateActiveBlockId(null)}

7
web/components/gantt-chart/sidebar/issues/block.tsx
View File

@ -25,7 +25,7 @@ export const IssuesSidebarBlock: React.FC<Props> = observer((props) => {
const { block, enableReorder, provided, snapshot } = props;
// store hooks
const { updateActiveBlockId, isBlockActive } = useGanttChart();
const { peekIssue } = useIssueDetail();
const { getIsIssuePeeked } = useIssueDetail();
const duration = findTotalDaysInRange(block.start_date, block.target_date);
@ -33,8 +33,9 @@ export const IssuesSidebarBlock: React.FC<Props> = observer((props) => {
<div
className={cn({
"rounded bg-custom-background-80": snapshot.isDragging,
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70":
peekIssue?.issueId === block.data.id,
"rounded-l border border-r-0 border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(
block.data.id
),
})}
onMouseEnter={() => updateActiveBlockId(block.id)}
onMouseLeave={() => updateActiveBlockId(null)}

10
web/components/issues/issue-layouts/calendar/issue-block.tsx
View File

@ -27,7 +27,7 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
} = useApplication();
const { getProjectIdentifierById } = useProject();
const { getProjectStates } = useProjectState();
const { peekIssue, setPeekIssue } = useIssueDetail();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
const { isMobile } = usePlatformOS();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
@ -41,7 +41,7 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
issue &&
issue.project_id &&
issue.id &&
peekIssue?.issueId !== issue.id &&
!getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
useOutsideClickDetector(menuActionRef, () => setIsMenuActive(false));
@ -82,10 +82,8 @@ export const CalendarIssueBlock: React.FC<Props> = observer((props) => {
"group/calendar-block flex h-10 md:h-8 w-full items-center justify-between gap-1.5 rounded border-b md:border-[0.5px] border-custom-border-200 hover:border-custom-border-400 md:px-1 px-4 py-1.5 ",
{
"bg-custom-background-90 shadow-custom-shadow-rg border-custom-primary-100": isDragging,
},
{ "bg-custom-background-100 hover:bg-custom-background-90": !isDragging },
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issue.id,
"bg-custom-background-100 hover:bg-custom-background-90": !isDragging,
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
}
)}
>

4
web/components/issues/issue-layouts/gantt/blocks.tsx
View File

@ -20,7 +20,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
const { getProjectStates } = useProjectState();
const {
issue: { getIssueById },
peekIssue,
getIsIssuePeeked,
setPeekIssue,
} = useIssueDetail();
// derived values
@ -32,7 +32,7 @@ export const IssueGanttBlock: React.FC<Props> = observer((props) => {
workspaceSlug &&
issueDetails &&
!issueDetails.tempId &&
peekIssue?.issueId !== issueDetails.id &&
!getIsIssuePeeked(issueDetails.id) &&
setPeekIssue({ workspaceSlug, projectId: issueDetails.project_id, issueId: issueDetails.id });
const { isMobile } = usePlatformOS();

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

@ -1,4 +1,4 @@
import { MutableRefObject, memo, useEffect, useRef, useState } from "react";
import { MutableRefObject, useEffect, useRef, useState } from "react";
import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
import { observer } from "mobx-react-lite";
@ -17,7 +17,6 @@ import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-
// helper
interface IssueBlockProps {
peekIssueId?: string;
issueId: string;
issuesMap: IIssueMap;
displayProperties: IIssueDisplayProperties | undefined;
@ -89,9 +88,8 @@ const KanbanIssueDetailsBlock: React.FC<IssueDetailsBlockProps> = observer((prop
);
});
export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
export const KanbanIssueBlock: React.FC<IssueBlockProps> = observer((props) => {
const {
peekIssueId,
issueId,
issuesMap,
displayProperties,
@ -107,14 +105,14 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
const {
router: { workspaceSlug },
} = useApplication();
const { peekIssue, setPeekIssue } = useIssueDetail();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug &&
issue &&
issue.project_id &&
issue.id &&
peekIssue?.issueId !== issue.id &&
!getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
const issue = issuesMap[issueId];
@ -184,9 +182,11 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
ref={cardRef}
className={cn(
"block rounded border-[0.5px] outline-[0.5px] outline-transparent w-full border-custom-border-200 bg-custom-background-100 text-sm transition-all hover:border-custom-border-400",
{ "hover:cursor-pointer": isDragAllowed },
{ "border border-custom-primary-70 hover:border-custom-primary-70": peekIssueId === issue.id },
{ "bg-custom-background-80 z-[100]": isCurrentBlockDragging }
{
"hover:cursor-pointer": isDragAllowed,
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
"bg-custom-background-80 z-[100]": isCurrentBlockDragging,
}
)}
target="_blank"
onClick={() => handleIssuePeekOverview(issue)}

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

@ -8,7 +8,6 @@ interface IssueBlocksListProps {
sub_group_id: string;
columnId: string;
issuesMap: IIssueMap;
peekIssueId?: string;
issueIds: string[];
displayProperties: IIssueDisplayProperties | undefined;
isDragDisabled: boolean;
@ -23,7 +22,6 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
sub_group_id,
columnId,
issuesMap,
peekIssueId,
issueIds,
displayProperties,
isDragDisabled,
@ -47,7 +45,6 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
return (
<KanbanIssueBlock
key={draggableId}
peekIssueId={peekIssueId}
issueId={issueId}
issuesMap={issuesMap}
displayProperties={displayProperties}

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

@ -14,16 +14,7 @@ import {
} from "@plane/types";
// constants
// hooks
import {
useCycle,
useIssueDetail,
useKanbanView,
useLabel,
useMember,
useModule,
useProject,
useProjectState,
} from "@/hooks/store";
import { useCycle, useKanbanView, useLabel, useMember, useModule, useProject, useProjectState } from "@/hooks/store";
// types
// parent components
import { getGroupByColumns, isWorkspaceLevel } from "../utils";
@ -95,7 +86,6 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
const cycle = useCycle();
const moduleInfo = useModule();
const projectState = useProjectState();
const { peekIssue } = useIssueDetail();
const list = getGroupByColumns(
group_by as GroupByColumnTypes,
@ -176,7 +166,6 @@ const GroupByKanBan: React.FC<IGroupByKanBan> = observer((props) => {
groupId={subList.id}
issuesMap={issuesMap}
issueIds={issueIds}
peekIssueId={peekIssue?.issueId ?? ""}
displayProperties={displayProperties}
sub_group_by={sub_group_by}
group_by={group_by}

3
web/components/issues/issue-layouts/kanban/kanban-group.tsx
View File

@ -23,7 +23,6 @@ import { KanbanIssueBlocksList, KanBanQuickAddIssueForm } from ".";
interface IKanbanGroup {
groupId: string;
issuesMap: IIssueMap;
peekIssueId?: string;
issueIds: TGroupedIssues | TSubGroupedIssues | TUnGroupedIssues;
displayProperties: IIssueDisplayProperties | undefined;
sub_group_by: TIssueGroupByOptions | undefined;
@ -56,7 +55,6 @@ export const KanbanGroup = (props: IKanbanGroup) => {
issuesMap,
displayProperties,
issueIds,
peekIssueId,
isDragDisabled,
updateIssue,
quickActions,
@ -176,7 +174,6 @@ export const KanbanGroup = (props: IKanbanGroup) => {
sub_group_id={sub_group_id}
columnId={groupId}
issuesMap={issuesMap}
peekIssueId={peekIssueId}
issueIds={(issueIds as TGroupedIssues)?.[groupId] || []}
displayProperties={displayProperties}
isDragDisabled={isDragDisabled}

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

@ -27,14 +27,14 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
router: { workspaceSlug },
} = useApplication();
const { getProjectIdentifierById } = useProject();
const { peekIssue, setPeekIssue } = useIssueDetail();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
const handleIssuePeekOverview = (issue: TIssue) =>
workspaceSlug &&
issue &&
issue.project_id &&
issue.id &&
peekIssue?.issueId !== issue.id &&
!getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
const issue = issuesMap[issueId];
@ -49,8 +49,8 @@ export const IssueBlock: React.FC<IssueBlockProps> = observer((props: IssueBlock
className={cn(
"min-h-12 relative flex flex-col md:flex-row md:items-center gap-3 bg-custom-background-100 p-3 text-sm",
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue && peekIssue.issueId === issue.id,
"last:border-b-transparent": peekIssue?.issueId !== issue.id,
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issue.id),
"last:border-b-transparent": !getIsIssuePeeked(issue.id),
}
)}
>

12
web/components/issues/issue-layouts/spreadsheet/issue-row.tsx
View File

@ -148,7 +148,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
const { workspaceSlug } = router.query;
//hooks
const { getProjectIdentifierById } = useProject();
const { peekIssue, setPeekIssue } = useIssueDetail();
const { getIsIssuePeeked, setPeekIssue } = useIssueDetail();
const { isMobile } = usePlatformOS();
// states
const [isMenuActive, setIsMenuActive] = useState(false);
@ -159,7 +159,7 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
issue &&
issue.project_id &&
issue.id &&
peekIssue?.issueId !== issue.id &&
!getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug: workspaceSlug.toString(), projectId: issue.project_id, issueId: issue.id });
const { subIssues: subIssuesStore, issue } = useIssueDetail();
@ -200,12 +200,8 @@ const IssueRowDetails = observer((props: IssueRowDetailsProps) => {
className={cn(
"sticky group left-0 h-11 w-[28rem] flex items-center bg-custom-background-100 text-sm after:absolute border-r-[0.5px] z-10 border-custom-border-200",
{
"border-b-[0.5px]": peekIssue?.issueId !== issueDetail.id,
},
{
"border border-custom-primary-70 hover:border-custom-primary-70": peekIssue?.issueId === issueDetail.id,
},
{
"border-b-[0.5px]": !getIsIssuePeeked(issueDetail.id),
"border border-custom-primary-70 hover:border-custom-primary-70": getIsIssuePeeked(issueDetail.id),
"shadow-[8px_22px_22px_10px_rgba(0,0,0,0.05)]": isScrolled.current,
}
)}

4
web/components/issues/sub-issues/issue-list-item.tsx
View File

@ -42,7 +42,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
} = props;
const {
peekIssue,
getIsIssuePeeked,
setPeekIssue,
issue: { getIssueById },
subIssues: { subIssueHelpersByIssueId, setSubIssueHelpers },
@ -65,7 +65,7 @@ export const IssueListItem: React.FC<ISubIssues> = observer((props) => {
issue &&
issue.project_id &&
issue.id &&
peekIssue?.issueId !== issue.id &&
!getIsIssuePeeked(issue.id) &&
setPeekIssue({ workspaceSlug, projectId: issue.project_id, issueId: issue.id });
if (!issue) return <></>;

5
web/store/issue/issue-details/root.store.ts
View File

@ -54,6 +54,8 @@ export interface IIssueDetail
isDeleteAttachmentModalOpen: boolean;
// computed
isAnyModalOpen: boolean;
// helper actions
getIsIssuePeeked: (issueId: string) => boolean;
// actions
setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
toggleCreateIssueModal: (value: boolean) => void;
@ -156,6 +158,9 @@ export class IssueDetail implements IIssueDetail {
);
}
// helper actions
getIsIssuePeeked = (issueId: string) => this.peekIssue?.issueId === issueId;
// actions
setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue);
toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);