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

[WEB-1175] fix: modal context (#4352)

Browse Source 
* fix: modal context

* chore: code refactor
This commit is contained in:
Anmol Singh Bhatia 2024-05-03 17:58:15 +05:30 committed by GitHub
parent 89f2f87b97
commit f4cc103238
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 46 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/components/issues/issue-detail/parent-select.tsx
View File

@ -47,7 +47,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
try { try {
await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId }); await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
await issueOperations.fetch(workspaceSlug, projectId, issueId); await issueOperations.fetch(workspaceSlug, projectId, issueId);
toggleParentIssueModal(false); toggleParentIssueModal(issueId);
} catch (error) { } catch (error) {
console.error("something went wrong while fetching the issue"); console.error("something went wrong while fetching the issue");
} }
@ -79,8 +79,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
<ParentIssuesListModal <ParentIssuesListModal
projectId={projectId} projectId={projectId}
issueId={issueId} issueId={issueId}
isOpen={isParentIssueModalOpen} isOpen={isParentIssueModalOpen === issueId}
handleClose={() => toggleParentIssueModal(false)} handleClose={() => toggleParentIssueModal(null)}
onChange={(issue: any) => handleParentIssue(issue?.id)} onChange={(issue: any) => handleParentIssue(issue?.id)}
/> />
<button <button
@ -94,7 +94,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
}, },
className className
)} )}
onClick={() => toggleParentIssueModal(true)} onClick={() => toggleParentIssueModal(issue.id)}
disabled={disabled} disabled={disabled}
> >
{issue.parent_id && parentIssue ? ( {issue.parent_id && parentIssue ? (

14
web/components/issues/issue-detail/relation-select.tsx
View File

@ -81,22 +81,26 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
data.map((i) => i.id) data.map((i) => i.id)
); );
toggleRelationModal(null); toggleRelationModal(null, null);
}; };
if (!relationIssueIds) return null; if (!relationIssueIds) return null;
const isRelationKeyModalActive =
isRelationModalOpen?.relationType === relationKey && isRelationModalOpen?.issueId === issueId;
return ( return (
<> <>
<ExistingIssuesListModal <ExistingIssuesListModal
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
isOpen={isRelationModalOpen === relationKey} isOpen={isRelationKeyModalActive}
handleClose={() => toggleRelationModal(null)} handleClose={() => toggleRelationModal(null, null)}
searchParams={{ issue_relation: true, issue_id: issueId }} searchParams={{ issue_relation: true, issue_id: issueId }}
handleOnSubmit={onSubmit} handleOnSubmit={onSubmit}
workspaceLevelToggle workspaceLevelToggle
/> />
<button <button
type="button" type="button"
className={cn( className={cn(
@ -104,11 +108,11 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
{ {
"cursor-not-allowed": disabled, "cursor-not-allowed": disabled,
"hover:bg-custom-background-80": !disabled, "hover:bg-custom-background-80": !disabled,
"bg-custom-background-80": isRelationModalOpen === relationKey, "bg-custom-background-80": isRelationKeyModalActive,
}, },
className className
)} )}
onClick={() => toggleRelationModal(relationKey)} onClick={() => toggleRelationModal(issueId, relationKey)}
disabled={disabled} disabled={disabled}
> >
<div className="flex w-full items-start justify-between"> <div className="flex w-full items-start justify-between">

4
web/components/issues/peek-overview/header.tsx
View File

@ -54,7 +54,7 @@ export type PeekOverviewHeaderProps = {
isArchived: boolean; isArchived: boolean;
disabled: boolean; disabled: boolean;
toggleDeleteIssueModal: (issueId: string | null) => void; toggleDeleteIssueModal: (issueId: string | null) => void;
toggleArchiveIssueModal: (value: boolean) => void; toggleArchiveIssueModal: (issueId: string | null) => void;
handleRestoreIssue: () => void; handleRestoreIssue: () => void;
isSubmitting: "submitting" | "submitted" | "saved"; isSubmitting: "submitting" | "submitted" | "saved";
}; };
@ -178,7 +178,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
})} })}
onClick={() => { onClick={() => {
if (!isInArchivableGroup) return; if (!isInArchivableGroup) return;
toggleArchiveIssueModal(true); toggleArchiveIssueModal(issueId);
}} }}
> >
<ArchiveIcon className="h-4 w-4" /> <ArchiveIcon className="h-4 w-4" />

4
web/components/issues/peek-overview/view.tsx
View File

@ -87,8 +87,8 @@ export const IssueView: FC<IIssueView> = observer((props) => {
<> <>
{issue && !is_archived && ( {issue && !is_archived && (
<ArchiveIssueModal <ArchiveIssueModal
isOpen={isArchiveIssueModalOpen} isOpen={isArchiveIssueModalOpen === issueId}
handleClose={() => toggleArchiveIssueModal(false)} handleClose={() => toggleArchiveIssueModal(null)}
data={issue} data={issue}
onSubmit={async () => { onSubmit={async () => {
if (issueOperations.archive) await issueOperations.archive(workspaceSlug, projectId, issueId); if (issueOperations.archive) await issueOperations.archive(workspaceSlug, projectId, issueId);

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

@ -381,7 +381,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
onClick={() => { onClick={() => {
setTrackElement("Issue detail nested sub-issue"); setTrackElement("Issue detail nested sub-issue");
handleIssueCrudState("existing", parentIssueId, null); handleIssueCrudState("existing", parentIssueId, null);
toggleSubIssuesModal(true); toggleSubIssuesModal(issue.id);
}} }}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -439,7 +439,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
onClick={() => { onClick={() => {
setTrackElement("Issue detail nested sub-issue"); setTrackElement("Issue detail nested sub-issue");
handleIssueCrudState("existing", parentIssueId, null); handleIssueCrudState("existing", parentIssueId, null);
toggleSubIssuesModal(true); toggleSubIssuesModal(issue.id);
}} }}
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@ -476,7 +476,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
isOpen={issueCrudState?.existing?.toggle} isOpen={issueCrudState?.existing?.toggle}
handleClose={() => { handleClose={() => {
handleIssueCrudState("existing", null, null); handleIssueCrudState("existing", null, null);
toggleSubIssuesModal(false); toggleSubIssuesModal(null);
}} }}
searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }} searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
handleOnSubmit={(_issue) => handleOnSubmit={(_issue) =>

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

@ -31,6 +31,11 @@ export type TPeekIssue = {
issueId: string; issueId: string;
}; };
export type TIssueRelationModal = {
issueId: string | null;
relationType: TIssueRelationTypes | null;
};
export interface IIssueDetail export interface IIssueDetail
extends IIssueStoreActions, extends IIssueStoreActions,
IIssueReactionStoreActions, IIssueReactionStoreActions,
@ -46,11 +51,11 @@ export interface IIssueDetail
peekIssue: TPeekIssue | undefined; peekIssue: TPeekIssue | undefined;
isCreateIssueModalOpen: boolean; isCreateIssueModalOpen: boolean;
isIssueLinkModalOpen: boolean; isIssueLinkModalOpen: boolean;
isParentIssueModalOpen: boolean; isParentIssueModalOpen: string | null;
isDeleteIssueModalOpen: string | null; isDeleteIssueModalOpen: string | null;
isArchiveIssueModalOpen: boolean; isArchiveIssueModalOpen: string | null;
isRelationModalOpen: TIssueRelationTypes | null; isRelationModalOpen: TIssueRelationModal | null;
isSubIssuesModalOpen: boolean; isSubIssuesModalOpen: string | null;
isDeleteAttachmentModalOpen: string | null; isDeleteAttachmentModalOpen: string | null;
// computed // computed
isAnyModalOpen: boolean; isAnyModalOpen: boolean;
@ -60,11 +65,11 @@ export interface IIssueDetail
setPeekIssue: (peekIssue: TPeekIssue | undefined) => void; setPeekIssue: (peekIssue: TPeekIssue | undefined) => void;
toggleCreateIssueModal: (value: boolean) => void; toggleCreateIssueModal: (value: boolean) => void;
toggleIssueLinkModal: (value: boolean) => void; toggleIssueLinkModal: (value: boolean) => void;
toggleParentIssueModal: (value: boolean) => void; toggleParentIssueModal: (issueId: string | null) => void;
toggleDeleteIssueModal: (issueId: string | null) => void; toggleDeleteIssueModal: (issueId: string | null) => void;
toggleArchiveIssueModal: (value: boolean) => void; toggleArchiveIssueModal: (value: string | null) => void;
toggleRelationModal: (relationType: TIssueRelationTypes | null) => void; toggleRelationModal: (issueId: string | null, relationType: TIssueRelationTypes | null) => void;
toggleSubIssuesModal: (value: boolean) => void; toggleSubIssuesModal: (value: string | null) => void;
toggleDeleteAttachmentModal: (attachmentId: string | null) => void; toggleDeleteAttachmentModal: (attachmentId: string | null) => void;
// store // store
rootIssueStore: IIssueRootStore; rootIssueStore: IIssueRootStore;
@ -85,11 +90,11 @@ export class IssueDetail implements IIssueDetail {
peekIssue: TPeekIssue | undefined = undefined; peekIssue: TPeekIssue | undefined = undefined;
isCreateIssueModalOpen: boolean = false; isCreateIssueModalOpen: boolean = false;
isIssueLinkModalOpen: boolean = false; isIssueLinkModalOpen: boolean = false;
isParentIssueModalOpen: boolean = false; isParentIssueModalOpen: string | null = null;
isDeleteIssueModalOpen: string | null = null; isDeleteIssueModalOpen: string | null = null;
isArchiveIssueModalOpen: boolean = false; isArchiveIssueModalOpen: string | null = null;
isRelationModalOpen: TIssueRelationTypes | null = null; isRelationModalOpen: TIssueRelationModal | null = null;
isSubIssuesModalOpen: boolean = false; isSubIssuesModalOpen: string | null = null;
isDeleteAttachmentModalOpen: string | null = null; isDeleteAttachmentModalOpen: string | null = null;
// store // store
rootIssueStore: IIssueRootStore; rootIssueStore: IIssueRootStore;
@ -149,11 +154,11 @@ export class IssueDetail implements IIssueDetail {
return ( return (
this.isCreateIssueModalOpen || this.isCreateIssueModalOpen ||
this.isIssueLinkModalOpen || this.isIssueLinkModalOpen ||
this.isParentIssueModalOpen || !!this.isParentIssueModalOpen ||
!!this.isDeleteIssueModalOpen || !!this.isDeleteIssueModalOpen ||
this.isArchiveIssueModalOpen || !!this.isArchiveIssueModalOpen ||
!!this.isRelationModalOpen || !!this.isRelationModalOpen?.issueId ||
this.isSubIssuesModalOpen || !!this.isSubIssuesModalOpen ||
!!this.isDeleteAttachmentModalOpen !!this.isDeleteAttachmentModalOpen
); );
} }
@ -165,11 +170,12 @@ export class IssueDetail implements IIssueDetail {
setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue); setPeekIssue = (peekIssue: TPeekIssue | undefined) => (this.peekIssue = peekIssue);
toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value); toggleCreateIssueModal = (value: boolean) => (this.isCreateIssueModalOpen = value);
toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value); toggleIssueLinkModal = (value: boolean) => (this.isIssueLinkModalOpen = value);
toggleParentIssueModal = (value: boolean) => (this.isParentIssueModalOpen = value); toggleParentIssueModal = (issueId: string | null) => (this.isParentIssueModalOpen = issueId);
toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId); toggleDeleteIssueModal = (issueId: string | null) => (this.isDeleteIssueModalOpen = issueId);
toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value); toggleArchiveIssueModal = (issueId: string | null) => (this.isArchiveIssueModalOpen = issueId);
toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType); toggleRelationModal = (issueId: string | null, relationType: TIssueRelationTypes | null) =>
toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value); (this.isRelationModalOpen = { issueId, relationType });
toggleSubIssuesModal = (issueId: string | null) => (this.isSubIssuesModalOpen = issueId);
toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId); toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId);
// issue // issue