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 {
await issueOperations.update(workspaceSlug, projectId, issueId, { parent_id: _issueId });
await issueOperations.fetch(workspaceSlug, projectId, issueId);
toggleParentIssueModal(false);
toggleParentIssueModal(issueId);
} catch (error) {
console.error("something went wrong while fetching the issue");
}
@ -79,8 +79,8 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
<ParentIssuesListModal
projectId={projectId}
issueId={issueId}
isOpen={isParentIssueModalOpen}
handleClose={() => toggleParentIssueModal(false)}
isOpen={isParentIssueModalOpen === issueId}
handleClose={() => toggleParentIssueModal(null)}
onChange={(issue: any) => handleParentIssue(issue?.id)}
/>
<button
@ -94,7 +94,7 @@ export const IssueParentSelect: React.FC<TIssueParentSelect> = observer((props)
},
className
)}
onClick={() => toggleParentIssueModal(true)}
onClick={() => toggleParentIssueModal(issue.id)}
disabled={disabled}
>
{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)
);
toggleRelationModal(null);
toggleRelationModal(null, null);
};
if (!relationIssueIds) return null;
const isRelationKeyModalActive =
isRelationModalOpen?.relationType === relationKey && isRelationModalOpen?.issueId === issueId;
return (
<>
<ExistingIssuesListModal
workspaceSlug={workspaceSlug}
projectId={projectId}
isOpen={isRelationModalOpen === relationKey}
handleClose={() => toggleRelationModal(null)}
isOpen={isRelationKeyModalActive}
handleClose={() => toggleRelationModal(null, null)}
searchParams={{ issue_relation: true, issue_id: issueId }}
handleOnSubmit={onSubmit}
workspaceLevelToggle
/>
<button
type="button"
className={cn(
@ -104,11 +108,11 @@ export const IssueRelationSelect: React.FC<TIssueRelationSelect> = observer((pro
{
"cursor-not-allowed": disabled,
"hover:bg-custom-background-80": !disabled,
"bg-custom-background-80": isRelationModalOpen === relationKey,
"bg-custom-background-80": isRelationKeyModalActive,
},
className
)}
onClick={() => toggleRelationModal(relationKey)}
onClick={() => toggleRelationModal(issueId, relationKey)}
disabled={disabled}
>
<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;
disabled: boolean;
toggleDeleteIssueModal: (issueId: string | null) => void;
toggleArchiveIssueModal: (value: boolean) => void;
toggleArchiveIssueModal: (issueId: string | null) => void;
handleRestoreIssue: () => void;
isSubmitting: "submitting" | "submitted" | "saved";
};
@ -178,7 +178,7 @@ export const IssuePeekOverviewHeader: FC<PeekOverviewHeaderProps> = observer((pr
})}
onClick={() => {
if (!isInArchivableGroup) return;
toggleArchiveIssueModal(true);
toggleArchiveIssueModal(issueId);
}}
>
<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 && (
<ArchiveIssueModal
isOpen={isArchiveIssueModalOpen}
handleClose={() => toggleArchiveIssueModal(false)}
isOpen={isArchiveIssueModalOpen === issueId}
handleClose={() => toggleArchiveIssueModal(null)}
data={issue}
onSubmit={async () => {
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={() => {
setTrackElement("Issue detail nested sub-issue");
handleIssueCrudState("existing", parentIssueId, null);
toggleSubIssuesModal(true);
toggleSubIssuesModal(issue.id);
}}
>
<div className="flex items-center gap-2">
@ -439,7 +439,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
onClick={() => {
setTrackElement("Issue detail nested sub-issue");
handleIssueCrudState("existing", parentIssueId, null);
toggleSubIssuesModal(true);
toggleSubIssuesModal(issue.id);
}}
>
<div className="flex items-center gap-2">
@ -476,7 +476,7 @@ export const SubIssuesRoot: FC<ISubIssuesRoot> = observer((props) => {
isOpen={issueCrudState?.existing?.toggle}
handleClose={() => {
handleIssueCrudState("existing", null, null);
toggleSubIssuesModal(false);
toggleSubIssuesModal(null);
}}
searchParams={{ sub_issue: true, issue_id: issueCrudState?.existing?.parentIssueId }}
handleOnSubmit={(_issue) =>

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

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