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

[WEB-1481] fix: inbox issue list update after changing issue status. (#4715)

Browse Source
This commit is contained in:
Prateek Shourya 2024-06-07 17:02:30 +05:30 committed by GitHub
parent 2331404d46
commit 9a4971efa4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 27 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/components/inbox/content/inbox-issue-header.tsx
View File

@ -52,7 +52,7 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
const [declineIssueModal, setDeclineIssueModal] = useState(false); const [declineIssueModal, setDeclineIssueModal] = useState(false);
const [deleteIssueModal, setDeleteIssueModal] = useState(false); const [deleteIssueModal, setDeleteIssueModal] = useState(false);
// store // store
const { currentTab, deleteInboxIssue, inboxIssueIds } = useProjectInbox(); const { currentTab, deleteInboxIssue, filteredInboxIssueIds } = useProjectInbox();
const { data: currentUser } = useUser(); const { data: currentUser } = useUser();
const { const {
membership: { currentProjectRole }, membership: { currentProjectRole },
@ -76,11 +76,11 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
const redirectIssue = (): string | undefined => { const redirectIssue = (): string | undefined => {
let nextOrPreviousIssueId: string | undefined = undefined; let nextOrPreviousIssueId: string | undefined = undefined;
const currentIssueIndex = inboxIssueIds.findIndex((id) => id === currentInboxIssueId); const currentIssueIndex = filteredInboxIssueIds.findIndex((id) => id === currentInboxIssueId);
if (inboxIssueIds[currentIssueIndex + 1]) if (filteredInboxIssueIds[currentIssueIndex + 1])
nextOrPreviousIssueId = inboxIssueIds[currentIssueIndex + 1]; nextOrPreviousIssueId = filteredInboxIssueIds[currentIssueIndex + 1];
else if (inboxIssueIds[currentIssueIndex - 1]) else if (filteredInboxIssueIds[currentIssueIndex - 1])
nextOrPreviousIssueId = inboxIssueIds[currentIssueIndex - 1]; nextOrPreviousIssueId = filteredInboxIssueIds[currentIssueIndex - 1];
else nextOrPreviousIssueId = undefined; else nextOrPreviousIssueId = undefined;
return nextOrPreviousIssueId; return nextOrPreviousIssueId;
}; };
@ -134,22 +134,22 @@ export const InboxIssueActionsHeader: FC<TInboxIssueActionsHeader> = observer((p
}) })
); );
const currentIssueIndex = inboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId) ?? 0; const currentIssueIndex = filteredInboxIssueIds.findIndex((issueId) => issueId === currentInboxIssueId) ?? 0;
const handleInboxIssueNavigation = useCallback( const handleInboxIssueNavigation = useCallback(
(direction: "next" | "prev") => { (direction: "next" | "prev") => {
if (!inboxIssueIds || !currentInboxIssueId) return; if (!filteredInboxIssueIds || !currentInboxIssueId) return;
const activeElement = document.activeElement as HTMLElement; const activeElement = document.activeElement as HTMLElement;
if (activeElement && (activeElement.classList.contains("tiptap") || activeElement.id === "title-input")) return; if (activeElement && (activeElement.classList.contains("tiptap") || activeElement.id === "title-input")) return;
const nextIssueIndex = const nextIssueIndex =
direction === "next" direction === "next"
? (currentIssueIndex + 1) % inboxIssueIds.length ? (currentIssueIndex + 1) % filteredInboxIssueIds.length
: (currentIssueIndex - 1 + inboxIssueIds.length) % inboxIssueIds.length; : (currentIssueIndex - 1 + filteredInboxIssueIds.length) % filteredInboxIssueIds.length;
const nextIssueId = inboxIssueIds[nextIssueIndex]; const nextIssueId = filteredInboxIssueIds[nextIssueIndex];
if (!nextIssueId) return; if (!nextIssueId) return;
router.push(`/${workspaceSlug}/projects/${projectId}/inbox?inboxIssueId=${nextIssueId}`); router.push(`/${workspaceSlug}/projects/${projectId}/inbox?inboxIssueId=${nextIssueId}`);
}, },
[currentInboxIssueId, currentIssueIndex, inboxIssueIds, projectId, router, workspaceSlug] [currentInboxIssueId, currentIssueIndex, filteredInboxIssueIds, projectId, router, workspaceSlug]
); );
const onKeyDown = useCallback( const onKeyDown = useCallback(

6
web/components/inbox/sidebar/root.tsx
View File

@ -44,7 +44,7 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
currentTab, currentTab,
handleCurrentTab, handleCurrentTab,
loader, loader,
inboxIssueIds, filteredInboxIssueIds,
inboxIssuePaginationInfo, inboxIssuePaginationInfo,
fetchInboxPaginationIssues, fetchInboxPaginationIssues,
getAppliedFiltersCount, getAppliedFiltersCount,
@ -106,13 +106,13 @@ export const InboxSidebar: FC<IInboxSidebarProps> = observer((props) => {
className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md" className="w-full h-full overflow-hidden overflow-y-auto vertical-scrollbar scrollbar-md"
ref={containerRef} ref={containerRef}
> >
{inboxIssueIds.length > 0 ? ( {filteredInboxIssueIds.length > 0 ? (
<InboxIssueList <InboxIssueList
setIsMobileSidebar={setIsMobileSidebar} setIsMobileSidebar={setIsMobileSidebar}
workspaceSlug={workspaceSlug} workspaceSlug={workspaceSlug}
projectId={projectId} projectId={projectId}
projectIdentifier={currentProjectDetails?.identifier} projectIdentifier={currentProjectDetails?.identifier}
inboxIssueIds={inboxIssueIds} inboxIssueIds={filteredInboxIssueIds}
/> />
) : ( ) : (
<div className="flex items-center justify-center h-full w-full"> <div className="flex items-center justify-center h-full w-full">

36
web/store/inbox/project-inbox.store.ts
View File

@ -1,7 +1,6 @@
import { uniq, update } from "lodash"; import { uniq, update } from "lodash";
import isEmpty from "lodash/isEmpty"; import isEmpty from "lodash/isEmpty";
import omit from "lodash/omit"; import omit from "lodash/omit";
import orderBy from "lodash/orderBy";
import set from "lodash/set"; import set from "lodash/set";
import { action, computed, makeObservable, observable, runInAction } from "mobx"; import { action, computed, makeObservable, observable, runInAction } from "mobx";
import { computedFn } from "mobx-utils"; import { computedFn } from "mobx-utils";
@ -42,11 +41,11 @@ export interface IProjectInboxStore {
inboxIssueIds: string[]; inboxIssueIds: string[];
// computed // computed
getAppliedFiltersCount: number; getAppliedFiltersCount: number;
filteredInboxIssueIds: string[];
// computed functions // computed functions
getIssueInboxByIssueId: (issueId: string) => IInboxIssueStore; getIssueInboxByIssueId: (issueId: string) => IInboxIssueStore;
getIsIssueAvailable: (inboxIssueId: string) => boolean; getIsIssueAvailable: (inboxIssueId: string) => boolean;
// helper actions // helper actions
inboxIssueSorting: (issues: IInboxIssueStore[]) => IInboxIssueStore[];
inboxIssueQueryParams: ( inboxIssueQueryParams: (
inboxFilters: Partial<TInboxIssueFilter>, inboxFilters: Partial<TInboxIssueFilter>,
inboxSorting: Partial<TInboxIssueSorting>, inboxSorting: Partial<TInboxIssueSorting>,
@ -103,6 +102,7 @@ export class ProjectInboxStore implements IProjectInboxStore {
inboxIssueIds: observable, inboxIssueIds: observable,
// computed // computed
getAppliedFiltersCount: computed, getAppliedFiltersCount: computed,
filteredInboxIssueIds: computed,
// actions // actions
handleInboxIssueFilters: action, handleInboxIssueFilters: action,
handleInboxIssueSorting: action, handleInboxIssueSorting: action,
@ -127,6 +127,16 @@ export class ProjectInboxStore implements IProjectInboxStore {
return count; return count;
} }
get filteredInboxIssueIds() {
let appliedFilters =
this.currentTab === EInboxIssueCurrentTab.OPEN
? [EInboxIssueStatus.PENDING, EInboxIssueStatus.SNOOZED]
: [EInboxIssueStatus.ACCEPTED, EInboxIssueStatus.DECLINED, EInboxIssueStatus.DUPLICATE];
appliedFilters = appliedFilters.filter((filter) => this.inboxFilters?.status?.includes(filter));
return this.inboxIssueIds.filter((id) => appliedFilters.includes(this.inboxIssues[id].status));
}
getIssueInboxByIssueId = computedFn((issueId: string) => this.inboxIssues?.[issueId]); getIssueInboxByIssueId = computedFn((issueId: string) => this.inboxIssues?.[issueId]);
getIsIssueAvailable = computedFn((inboxIssueId: string) => { getIsIssueAvailable = computedFn((inboxIssueId: string) => {
@ -134,28 +144,6 @@ export class ProjectInboxStore implements IProjectInboxStore {
return this.inboxIssueIds.includes(inboxIssueId); return this.inboxIssueIds.includes(inboxIssueId);
}); });
// helpers
inboxIssueSorting = (issues: IInboxIssueStore[]) => {
let inboxIssues: IInboxIssueStore[] = issues;
inboxIssues = orderBy(inboxIssues, "issue.sequence_id", "desc");
if (this.inboxSorting?.order_by && this.inboxSorting?.sort_by) {
switch (this.inboxSorting.order_by) {
case "issue__created_at":
if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(inboxIssues, "issue.created_at", "desc");
else inboxIssues = orderBy(inboxIssues, "issue.created_at", "asc");
case "issue__updated_at":
if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(inboxIssues, "issue.updated_at", "desc");
else inboxIssues = orderBy(inboxIssues, "issue.updated_at", "asc");
case "issue__sequence_id":
if (this.inboxSorting.sort_by === "desc") inboxIssues = orderBy(inboxIssues, "issue.sequence_id", "desc");
else inboxIssues = orderBy(inboxIssues, "issue.sequence_id", "asc");
default:
inboxIssues = inboxIssues;
}
}
return inboxIssues;
};
inboxIssueQueryParams = ( inboxIssueQueryParams = (
inboxFilters: Partial<TInboxIssueFilter>, inboxFilters: Partial<TInboxIssueFilter>,
inboxSorting: Partial<TInboxIssueSorting>, inboxSorting: Partial<TInboxIssueSorting>,