From f1d10ae9adf57275773e25d188930922409cc37f Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Tue, 10 Sep 2024 18:48:31 +0530 Subject: [PATCH 1/8] fix kanban view localStorage --- web/core/store/issue/archived/filter.store.ts | 2 +- web/core/store/issue/cycle/filter.store.ts | 2 +- web/core/store/issue/draft/filter.store.ts | 2 +- web/core/store/issue/module/filter.store.ts | 2 +- web/core/store/issue/profile/filter.store.ts | 2 +- web/core/store/issue/project-views/filter.store.ts | 2 +- web/core/store/issue/workspace/filter.store.ts | 2 +- 7 files changed, 7 insertions(+), 7 deletions(-) diff --git a/web/core/store/issue/archived/filter.store.ts b/web/core/store/issue/archived/filter.store.ts index fb6c19247b1..31f5f4496af 100644 --- a/web/core/store/issue/archived/filter.store.ts +++ b/web/core/store/issue/archived/filter.store.ts @@ -254,7 +254,7 @@ export class ArchivedIssuesFilter extends IssueFilterHelperStore implements IArc const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, projectId, undefined, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.ARCHIVED, type, workspaceSlug, projectId, undefined, { kanban_filters: _filters.kanbanFilters, }); diff --git a/web/core/store/issue/cycle/filter.store.ts b/web/core/store/issue/cycle/filter.store.ts index b2045704974..270d234f3af 100644 --- a/web/core/store/issue/cycle/filter.store.ts +++ b/web/core/store/issue/cycle/filter.store.ts @@ -273,7 +273,7 @@ export class CycleIssuesFilter extends IssueFilterHelperStore implements ICycleI const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, cycleId, currentUserId, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.CYCLE, type, workspaceSlug, cycleId, currentUserId, { kanban_filters: _filters.kanbanFilters, }); diff --git a/web/core/store/issue/draft/filter.store.ts b/web/core/store/issue/draft/filter.store.ts index 9ab480b6cff..0c657543838 100644 --- a/web/core/store/issue/draft/filter.store.ts +++ b/web/core/store/issue/draft/filter.store.ts @@ -250,7 +250,7 @@ export class DraftIssuesFilter extends IssueFilterHelperStore implements IDraftI const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, projectId, undefined, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.DRAFT, type, workspaceSlug, projectId, undefined, { kanban_filters: _filters.kanbanFilters, }); diff --git a/web/core/store/issue/module/filter.store.ts b/web/core/store/issue/module/filter.store.ts index 1e02ba13adf..dd3dce95ec1 100644 --- a/web/core/store/issue/module/filter.store.ts +++ b/web/core/store/issue/module/filter.store.ts @@ -276,7 +276,7 @@ export class ModuleIssuesFilter extends IssueFilterHelperStore implements IModul const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, moduleId, currentUserId, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.MODULE, type, workspaceSlug, moduleId, currentUserId, { kanban_filters: _filters.kanbanFilters, }); diff --git a/web/core/store/issue/profile/filter.store.ts b/web/core/store/issue/profile/filter.store.ts index 8e27a108167..28a309ceff2 100644 --- a/web/core/store/issue/profile/filter.store.ts +++ b/web/core/store/issue/profile/filter.store.ts @@ -260,7 +260,7 @@ export class ProfileIssuesFilter extends IssueFilterHelperStore implements IProf const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, userId, undefined, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.PROFILE, type, workspaceSlug, userId, undefined, { kanban_filters: _filters.kanbanFilters, }); diff --git a/web/core/store/issue/project-views/filter.store.ts b/web/core/store/issue/project-views/filter.store.ts index 511ce850824..b939b2b40f3 100644 --- a/web/core/store/issue/project-views/filter.store.ts +++ b/web/core/store/issue/project-views/filter.store.ts @@ -264,7 +264,7 @@ export class ProjectViewIssuesFilter extends IssueFilterHelperStore implements I const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, viewId, currentUserId, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT_VIEW, type, workspaceSlug, viewId, currentUserId, { kanban_filters: _filters.kanbanFilters, }); diff --git a/web/core/store/issue/workspace/filter.store.ts b/web/core/store/issue/workspace/filter.store.ts index 3fd5da1b6cf..e062147c610 100644 --- a/web/core/store/issue/workspace/filter.store.ts +++ b/web/core/store/issue/workspace/filter.store.ts @@ -285,7 +285,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo const currentUserId = this.rootIssueStore.currentUserId; if (currentUserId) - this.handleIssuesLocalFilters.set(EIssuesStoreType.PROJECT, type, workspaceSlug, undefined, viewId, { + this.handleIssuesLocalFilters.set(EIssuesStoreType.GLOBAL, type, workspaceSlug, undefined, viewId, { kanban_filters: _filters.kanbanFilters, }); From bebf238942549b4065223c19842f0a7eccdf7ee0 Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Thu, 12 Sep 2024 14:03:32 +0530 Subject: [PATCH 2/8] add functionality for list view and add type for kanban function --- .../issues/issue-layouts/kanban/default.tsx | 2 +- .../kanban/headers/group-by-card.tsx | 2 +- .../issue-layouts/list/base-list-root.tsx | 23 ++++++++++++++++++- .../issues/issue-layouts/list/default.tsx | 9 +++++++- .../list/headers/group-by-card.tsx | 6 ++--- .../issues/issue-layouts/list/list-group.tsx | 17 +++++++++----- 6 files changed, 46 insertions(+), 13 deletions(-) diff --git a/web/core/components/issues/issue-layouts/kanban/default.tsx b/web/core/components/issues/issue-layouts/kanban/default.tsx index 128f637fd65..c7973a12a6a 100644 --- a/web/core/components/issues/issue-layouts/kanban/default.tsx +++ b/web/core/components/issues/issue-layouts/kanban/default.tsx @@ -43,7 +43,7 @@ export interface IKanBan { updateIssue: ((projectId: string | null, issueId: string, data: Partial) => Promise) | undefined; quickActions: TRenderQuickActions; kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: any; + handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; loadMoreIssues: (groupId?: string, subGroupId?: string) => void; enableQuickIssueCreate?: boolean; quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise; diff --git a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx index 60d7bcd5e1f..5590565ac6a 100644 --- a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx @@ -25,7 +25,7 @@ interface IHeaderGroupByCard { title: string; count: number; kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: any; + handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; issuePayload: Partial; disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx index 1d1098ac56c..b6bc9a3135c 100644 --- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx @@ -3,7 +3,7 @@ import { observer } from "mobx-react"; // types import { GroupByColumnTypes, TGroupedIssues } from "@plane/types"; // constants -import { EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue"; +import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue"; // hooks import { useIssues, useUserPermissions } from "@/hooks/store"; // hooks @@ -16,6 +16,7 @@ import { IssueLayoutHOC } from "../issue-layout-HOC"; import { List } from "./default"; // types import { IQuickActionProps, TRenderQuickActions } from "./list-view-types"; +import { useParams } from "next/navigation"; type ListStoreType = | EIssuesStoreType.PROJECT @@ -59,6 +60,10 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { const group_by = (displayFilters?.group_by || null) as GroupByColumnTypes | null; const showEmptyGroup = displayFilters?.show_empty_groups ?? false; + const { workspaceSlug, projectId } = useParams(); + const {updateFilters} = useIssuesActions(storeType); + const stateGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; + useEffect(() => { fetchIssues("init-loader", { canGroup: true, perPageCount: group_by ? 50 : 100 }, viewId); }, [fetchIssues, storeType, group_by, viewId]); @@ -107,6 +112,20 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { [fetchNextIssues] ); + const handleStateGroups = (toggle: "group_by" | "sub_group_by", value: string) => { + if (workspaceSlug) { + let stateGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; + if (stateGroups.includes(value)) { + stateGroups = stateGroups.filter((_value) => _value != value); + } else { + stateGroups.push(value); + } + updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { + [toggle]: stateGroups, + }); + } + }; + return (
@@ -127,6 +146,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { addIssuesToView={addIssuesToView} isCompletedCycle={isCompletedCycle} handleOnDrop={handleOnDrop} + handleStateGroups={handleStateGroups} + stateGroups={stateGroups} />
diff --git a/web/core/components/issues/issue-layouts/list/default.tsx b/web/core/components/issues/issue-layouts/list/default.tsx index a8fd66a862a..44ef8a2dd35 100644 --- a/web/core/components/issues/issue-layouts/list/default.tsx +++ b/web/core/components/issues/issue-layouts/list/default.tsx @@ -14,6 +14,7 @@ import { TIssueGroupByOptions, TIssueOrderByOptions, IGroupByColumn, + TIssueKanbanFilters, } from "@plane/types"; // components import { MultipleSelectGroup } from "@/components/core"; @@ -47,6 +48,8 @@ export interface IList { addIssuesToView?: (issueIds: string[]) => Promise; isCompletedCycle?: boolean; loadMoreIssues: (groupId?: string) => void; + handleStateGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + stateGroups : TIssueKanbanFilters; } export const List: React.FC = observer((props) => { @@ -67,6 +70,8 @@ export const List: React.FC = observer((props) => { addIssuesToView, isCompletedCycle = false, loadMoreIssues, + handleStateGroups, + stateGroups } = props; const storeType = useIssueStoreType(); @@ -128,7 +133,7 @@ export const List: React.FC = observer((props) => { } else { entities = orderedGroups; } - + return (
{groups && ( @@ -162,6 +167,8 @@ export const List: React.FC = observer((props) => { loadMoreIssues={loadMoreIssues} containerRef={containerRef} selectionHelpers={helpers} + handleStateGroups={handleStateGroups} + stateGroups={stateGroups} /> ))}
diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx index 03a768e4131..66a8a0845a4 100644 --- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx @@ -26,10 +26,10 @@ interface IHeaderGroupByCard { count: number; issuePayload: Partial; canEditProperties: (projectId: string | undefined) => boolean; - toggleListGroup: () => void; disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; selectionHelpers: TSelectionHelper; + handleStateGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; } export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { @@ -43,7 +43,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { disableIssueCreation, addIssuesToView, selectionHelpers, - toggleListGroup, + handleStateGroups } = props; // states const [isOpen, setIsOpen] = useState(false); @@ -108,7 +108,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
handleStateGroups("group_by", groupID)} >
{title}
{count || 0}
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index ca0753bef9a..57b02e2287f 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -13,6 +13,7 @@ import { TIssueOrderByOptions, TIssue, IIssueDisplayProperties, + TIssueKanbanFilters, } from "@plane/types"; import { Row, setToast, TOAST_TYPE } from "@plane/ui"; // components @@ -59,6 +60,8 @@ interface Props { showEmptyGroup?: boolean; loadMoreIssues: (groupId?: string) => void; selectionHelpers: TSelectionHelper; + handleStateGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + stateGroups: TIssueKanbanFilters; } export const ListGroup = observer((props: Props) => { @@ -83,11 +86,13 @@ export const ListGroup = observer((props: Props) => { showEmptyGroup, loadMoreIssues, selectionHelpers, + handleStateGroups, + stateGroups } = props; const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false); const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start"); - const [isExpanded, setIsExpanded] = useState(true); + const isExpanded = !(stateGroups?.group_by.includes(group.id)) const groupRef = useRef(null); const projectState = useProjectState(); @@ -127,10 +132,6 @@ export const ListGroup = observer((props: Props) => { return true; }; - const toggleListGroup = () => { - setIsExpanded((prevState) => !prevState); - }; - const prePopulateQuickAddData = (groupByKey: string | null, value: any) => { const defaultState = projectState.projectStates?.find((state) => state.default); let preloadedData: object = { state_id: defaultState?.id }; @@ -211,6 +212,10 @@ export const ListGroup = observer((props: Props) => { handleOnDrop(source, destination); highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order"); + + if(!isExpanded){ + handleStateGroups("group_by", group.id) + } }, }) ); @@ -241,7 +246,7 @@ export const ListGroup = observer((props: Props) => { disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle} addIssuesToView={addIssuesToView} selectionHelpers={selectionHelpers} - toggleListGroup={toggleListGroup} + handleStateGroups={handleStateGroups} /> {shouldExpand && ( From 36b503c7c3f0e89f46f487338a86df0e41caf36c Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Thu, 12 Sep 2024 14:32:54 +0530 Subject: [PATCH 3/8] add comment in issue-filter-helper store --- web/core/store/issue/helpers/issue-filter-helper.store.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/core/store/issue/helpers/issue-filter-helper.store.ts b/web/core/store/issue/helpers/issue-filter-helper.store.ts index b3b066ad2d9..d08645c4132 100644 --- a/web/core/store/issue/helpers/issue-filter-helper.store.ts +++ b/web/core/store/issue/helpers/issue-filter-helper.store.ts @@ -248,7 +248,7 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore { [filterType]: filters[filterType], }, }; - + // All group_by "filters" are stored in a single array, will cause inconsistency in case of duplicated values storage.set("issue_local_filters", JSON.stringify(storageFilters)); }, }; From 71094a6d54828dc51b44b666dc2e70fce268a0da Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Thu, 12 Sep 2024 15:18:56 +0530 Subject: [PATCH 4/8] improved code quality --- .../issue-layouts/list/base-list-root.tsx | 18 +++++++++--------- .../issues/issue-layouts/list/default.tsx | 12 ++++++------ .../list/headers/group-by-card.tsx | 6 +++--- .../issues/issue-layouts/list/list-group.tsx | 14 +++++++------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx index b6bc9a3135c..32972117857 100644 --- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx @@ -62,7 +62,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { const { workspaceSlug, projectId } = useParams(); const {updateFilters} = useIssuesActions(storeType); - const stateGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; + const listGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; useEffect(() => { fetchIssues("init-loader", { canGroup: true, perPageCount: group_by ? 50 : 100 }, viewId); @@ -112,16 +112,16 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { [fetchNextIssues] ); - const handleStateGroups = (toggle: "group_by" | "sub_group_by", value: string) => { + const handleListGroups = (toggle: "group_by" | "sub_group_by", value: string) => { if (workspaceSlug) { - let stateGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; - if (stateGroups.includes(value)) { - stateGroups = stateGroups.filter((_value) => _value != value); + let listGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; + if (listGroups.includes(value)) { + listGroups = listGroups.filter((_value) => _value != value); } else { - stateGroups.push(value); + listGroups.push(value); } updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { - [toggle]: stateGroups, + [toggle]: listGroups, }); } }; @@ -146,8 +146,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { addIssuesToView={addIssuesToView} isCompletedCycle={isCompletedCycle} handleOnDrop={handleOnDrop} - handleStateGroups={handleStateGroups} - stateGroups={stateGroups} + handleListGroups={handleListGroups} + listGroups={listGroups} />
diff --git a/web/core/components/issues/issue-layouts/list/default.tsx b/web/core/components/issues/issue-layouts/list/default.tsx index 44ef8a2dd35..9e1a0fbb38b 100644 --- a/web/core/components/issues/issue-layouts/list/default.tsx +++ b/web/core/components/issues/issue-layouts/list/default.tsx @@ -48,8 +48,8 @@ export interface IList { addIssuesToView?: (issueIds: string[]) => Promise; isCompletedCycle?: boolean; loadMoreIssues: (groupId?: string) => void; - handleStateGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; - stateGroups : TIssueKanbanFilters; + handleListGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + listGroups : TIssueKanbanFilters; } export const List: React.FC = observer((props) => { @@ -70,8 +70,8 @@ export const List: React.FC = observer((props) => { addIssuesToView, isCompletedCycle = false, loadMoreIssues, - handleStateGroups, - stateGroups + handleListGroups, + listGroups } = props; const storeType = useIssueStoreType(); @@ -167,8 +167,8 @@ export const List: React.FC = observer((props) => { loadMoreIssues={loadMoreIssues} containerRef={containerRef} selectionHelpers={helpers} - handleStateGroups={handleStateGroups} - stateGroups={stateGroups} + handleListGroups={handleListGroups} + listGroups={listGroups} /> ))} diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx index 66a8a0845a4..80a004c2528 100644 --- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx @@ -29,7 +29,7 @@ interface IHeaderGroupByCard { disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; selectionHelpers: TSelectionHelper; - handleStateGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + handleListGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; } export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { @@ -43,7 +43,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { disableIssueCreation, addIssuesToView, selectionHelpers, - handleStateGroups + handleListGroups } = props; // states const [isOpen, setIsOpen] = useState(false); @@ -108,7 +108,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
handleStateGroups("group_by", groupID)} + onClick={() => handleListGroups("group_by", groupID)} >
{title}
{count || 0}
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index 57b02e2287f..8b7332bd884 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -60,8 +60,8 @@ interface Props { showEmptyGroup?: boolean; loadMoreIssues: (groupId?: string) => void; selectionHelpers: TSelectionHelper; - handleStateGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; - stateGroups: TIssueKanbanFilters; + handleListGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + listGroups: TIssueKanbanFilters; } export const ListGroup = observer((props: Props) => { @@ -86,13 +86,13 @@ export const ListGroup = observer((props: Props) => { showEmptyGroup, loadMoreIssues, selectionHelpers, - handleStateGroups, - stateGroups + handleListGroups, + listGroups, } = props; const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false); const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start"); - const isExpanded = !(stateGroups?.group_by.includes(group.id)) + const isExpanded = !(listGroups?.group_by.includes(group.id)) const groupRef = useRef(null); const projectState = useProjectState(); @@ -214,7 +214,7 @@ export const ListGroup = observer((props: Props) => { highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order"); if(!isExpanded){ - handleStateGroups("group_by", group.id) + handleListGroups("group_by", group.id) } }, }) @@ -246,7 +246,7 @@ export const ListGroup = observer((props: Props) => { disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle} addIssuesToView={addIssuesToView} selectionHelpers={selectionHelpers} - handleStateGroups={handleStateGroups} + handleListGroups={handleListGroups} /> {shouldExpand && ( From d176b8375a25d4f96e7bd99316476288759068cb Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Thu, 12 Sep 2024 15:36:30 +0530 Subject: [PATCH 5/8] add comment for clarity --- web/core/components/issues/issue-layouts/list/base-list-root.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx index 32972117857..62c99e19dbe 100644 --- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx @@ -112,6 +112,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { [fetchNextIssues] ); + //kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used becuase the state is shared between kanban view and list view const handleListGroups = (toggle: "group_by" | "sub_group_by", value: string) => { if (workspaceSlug) { let listGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; From 9c5a4d2683999ef48bed479515abade0c6560d7e Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Tue, 17 Sep 2024 16:37:55 +0530 Subject: [PATCH 6/8] use better variable names --- .../issue-layouts/list/base-list-root.tsx | 18 +++++++++--------- .../issues/issue-layouts/list/default.tsx | 12 ++++++------ .../list/headers/group-by-card.tsx | 6 +++--- .../issues/issue-layouts/list/list-group.tsx | 14 +++++++------- 4 files changed, 25 insertions(+), 25 deletions(-) diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx index 62c99e19dbe..4e61c332176 100644 --- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx @@ -62,7 +62,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { const { workspaceSlug, projectId } = useParams(); const {updateFilters} = useIssuesActions(storeType); - const listGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; + const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; useEffect(() => { fetchIssues("init-loader", { canGroup: true, perPageCount: group_by ? 50 : 100 }, viewId); @@ -113,16 +113,16 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { ); //kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used becuase the state is shared between kanban view and list view - const handleListGroups = (toggle: "group_by" | "sub_group_by", value: string) => { + const handleCollapsedGroups = (toggle: "group_by" | "sub_group_by", value: string) => { if (workspaceSlug) { - let listGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; - if (listGroups.includes(value)) { - listGroups = listGroups.filter((_value) => _value != value); + let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; + if (collapsedGroups.includes(value)) { + collapsedGroups = collapsedGroups.filter((_value) => _value != value); } else { - listGroups.push(value); + collapsedGroups.push(value); } updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { - [toggle]: listGroups, + [toggle]: collapsedGroups, }); } }; @@ -147,8 +147,8 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { addIssuesToView={addIssuesToView} isCompletedCycle={isCompletedCycle} handleOnDrop={handleOnDrop} - handleListGroups={handleListGroups} - listGroups={listGroups} + handleCollapsedGroups={handleCollapsedGroups} + collapsedGroups={collapsedGroups} />
diff --git a/web/core/components/issues/issue-layouts/list/default.tsx b/web/core/components/issues/issue-layouts/list/default.tsx index 9e1a0fbb38b..e3cc83df943 100644 --- a/web/core/components/issues/issue-layouts/list/default.tsx +++ b/web/core/components/issues/issue-layouts/list/default.tsx @@ -48,8 +48,8 @@ export interface IList { addIssuesToView?: (issueIds: string[]) => Promise; isCompletedCycle?: boolean; loadMoreIssues: (groupId?: string) => void; - handleListGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; - listGroups : TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups : TIssueKanbanFilters; } export const List: React.FC = observer((props) => { @@ -70,8 +70,8 @@ export const List: React.FC = observer((props) => { addIssuesToView, isCompletedCycle = false, loadMoreIssues, - handleListGroups, - listGroups + handleCollapsedGroups, + collapsedGroups } = props; const storeType = useIssueStoreType(); @@ -167,8 +167,8 @@ export const List: React.FC = observer((props) => { loadMoreIssues={loadMoreIssues} containerRef={containerRef} selectionHelpers={helpers} - handleListGroups={handleListGroups} - listGroups={listGroups} + handleCollapsedGroups={handleCollapsedGroups} + collapsedGroups={collapsedGroups} /> ))} diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx index 80a004c2528..8d95aff7d26 100644 --- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx @@ -29,7 +29,7 @@ interface IHeaderGroupByCard { disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; selectionHelpers: TSelectionHelper; - handleListGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; } export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { @@ -43,7 +43,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { disableIssueCreation, addIssuesToView, selectionHelpers, - handleListGroups + handleCollapsedGroups } = props; // states const [isOpen, setIsOpen] = useState(false); @@ -108,7 +108,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
handleListGroups("group_by", groupID)} + onClick={() => handleCollapsedGroups("group_by", groupID)} >
{title}
{count || 0}
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index 8b7332bd884..2e2103eca63 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -60,8 +60,8 @@ interface Props { showEmptyGroup?: boolean; loadMoreIssues: (groupId?: string) => void; selectionHelpers: TSelectionHelper; - handleListGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; - listGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; } export const ListGroup = observer((props: Props) => { @@ -86,13 +86,13 @@ export const ListGroup = observer((props: Props) => { showEmptyGroup, loadMoreIssues, selectionHelpers, - handleListGroups, - listGroups, + handleCollapsedGroups, + collapsedGroups, } = props; const [isDraggingOverColumn, setIsDraggingOverColumn] = useState(false); const [dragColumnOrientation, setDragColumnOrientation] = useState<"justify-start" | "justify-end">("justify-start"); - const isExpanded = !(listGroups?.group_by.includes(group.id)) + const isExpanded = !(collapsedGroups?.group_by.includes(group.id)) const groupRef = useRef(null); const projectState = useProjectState(); @@ -214,7 +214,7 @@ export const ListGroup = observer((props: Props) => { highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order"); if(!isExpanded){ - handleListGroups("group_by", group.id) + handleCollapsedGroups("group_by", group.id) } }, }) @@ -246,7 +246,7 @@ export const ListGroup = observer((props: Props) => { disableIssueCreation={disableIssueCreation || isGroupByCreatedBy || isCompletedCycle} addIssuesToView={addIssuesToView} selectionHelpers={selectionHelpers} - handleListGroups={handleListGroups} + handleCollapsedGroups={handleCollapsedGroups} /> {shouldExpand && ( From df3d6bb7c9defd3850889dffa87862b093ad134f Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Sat, 28 Sep 2024 15:41:46 +0530 Subject: [PATCH 7/8] use useCallback hook and change variable name --- .../issue-layouts/kanban/base-kanban-root.tsx | 33 +++++++------- .../issues/issue-layouts/kanban/default.tsx | 14 +++--- .../kanban/headers/group-by-card.tsx | 12 ++--- .../kanban/headers/sub-group-by-card.tsx | 10 ++--- .../issues/issue-layouts/kanban/swimlanes.tsx | 44 +++++++++---------- .../issue-layouts/list/base-list-root.tsx | 34 +++++++------- .../issues/issue-layouts/list/default.tsx | 2 +- .../list/headers/group-by-card.tsx | 2 +- .../issues/issue-layouts/list/list-group.tsx | 2 +- 9 files changed, 80 insertions(+), 73 deletions(-) diff --git a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx index 0578348a4ee..3cfb59af889 100644 --- a/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx +++ b/web/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx @@ -206,21 +206,24 @@ export const BaseKanBanRoot: React.FC = observer((props: IBas }); }; - const handleKanbanFilters = (toggle: "group_by" | "sub_group_by", value: string) => { - if (workspaceSlug) { - let kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; - if (kanbanFilters.includes(value)) { - kanbanFilters = kanbanFilters.filter((_value) => _value != value); - } else { - kanbanFilters.push(value); + const handleCollapsedGroups = useCallback( + (toggle: "group_by" | "sub_group_by", value: string) => { + if (workspaceSlug) { + let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; + if (collapsedGroups.includes(value)) { + collapsedGroups = collapsedGroups.filter((_value) => _value != value); + } else { + collapsedGroups.push(value); + } + updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { + [toggle]: collapsedGroups, + }); } - updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { - [toggle]: kanbanFilters, - }); - } - }; + }, + [workspaceSlug, issuesFilter, projectId, updateFilters] + ); - const kanbanFilters = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; + const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; return ( @@ -265,8 +268,8 @@ export const BaseKanBanRoot: React.FC = observer((props: IBas orderBy={orderBy} updateIssue={updateIssue} quickActions={renderQuickActions} - handleKanbanFilters={handleKanbanFilters} - kanbanFilters={kanbanFilters} + handleCollapsedGroups={handleCollapsedGroups} + collapsedGroups={collapsedGroups} enableQuickIssueCreate={enableQuickAdd} showEmptyGroup={userDisplayFilters?.show_empty_groups ?? true} quickAddCallback={quickAddIssue} diff --git a/web/core/components/issues/issue-layouts/kanban/default.tsx b/web/core/components/issues/issue-layouts/kanban/default.tsx index c7973a12a6a..b3454ce5493 100644 --- a/web/core/components/issues/issue-layouts/kanban/default.tsx +++ b/web/core/components/issues/issue-layouts/kanban/default.tsx @@ -42,8 +42,8 @@ export interface IKanBan { sub_group_id?: string; updateIssue: ((projectId: string | null, issueId: string, data: Partial) => Promise) | undefined; quickActions: TRenderQuickActions; - kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; loadMoreIssues: (groupId?: string, subGroupId?: string) => void; enableQuickIssueCreate?: boolean; quickAddCallback?: (projectId: string | null | undefined, data: TIssue) => Promise; @@ -66,8 +66,8 @@ export const KanBan: React.FC = observer((props) => { sub_group_id = "null", updateIssue, quickActions, - kanbanFilters, - handleKanbanFilters, + collapsedGroups, + handleCollapsedGroups, enableQuickIssueCreate, quickAddCallback, loadMoreIssues, @@ -127,7 +127,7 @@ export const KanBan: React.FC = observer((props) => { if ((getGroupIssueCount(_list.id, undefined, false) ?? 0) > 0) groupVisibility.showGroup = true; else groupVisibility.showGroup = false; } - if (kanbanFilters?.group_by.includes(_list.id)) groupVisibility.showIssues = false; + if (collapsedGroups?.group_by.includes(_list.id)) groupVisibility.showIssues = false; return groupVisibility; } }; @@ -161,8 +161,8 @@ export const KanBan: React.FC = observer((props) => { issuePayload={subList.payload} disableIssueCreation={disableIssueCreation || isGroupByCreatedBy} addIssuesToView={addIssuesToView} - kanbanFilters={kanbanFilters} - handleKanbanFilters={handleKanbanFilters} + collapsedGroups={collapsedGroups} + handleCollapsedGroups={handleCollapsedGroups} />
)} diff --git a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx index 5590565ac6a..cfd9b15da31 100644 --- a/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx @@ -24,8 +24,8 @@ interface IHeaderGroupByCard { icon?: React.ReactNode; title: string; count: number; - kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; issuePayload: Partial; disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; @@ -38,13 +38,13 @@ export const HeaderGroupByCard: FC = observer((props) => { icon, title, count, - kanbanFilters, - handleKanbanFilters, + collapsedGroups, + handleCollapsedGroups, issuePayload, disableIssueCreation, addIssuesToView, } = props; - const verticalAlignPosition = sub_group_by ? false : kanbanFilters?.group_by.includes(column_id); + const verticalAlignPosition = sub_group_by ? false : collapsedGroups?.group_by.includes(column_id); // states const [isOpen, setIsOpen] = React.useState(false); const [openExistingIssueListModal, setOpenExistingIssueListModal] = React.useState(false); @@ -133,7 +133,7 @@ export const HeaderGroupByCard: FC = observer((props) => { {sub_group_by === null && (
handleKanbanFilters("group_by", column_id)} + onClick={() => handleCollapsedGroups("group_by", column_id)} > {verticalAlignPosition ? ( diff --git a/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx b/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx index d3f7405cb0e..2c558ba5e53 100644 --- a/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx @@ -9,19 +9,19 @@ interface IHeaderSubGroupByCard { title: string; count: number; column_id: string; - kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; } export const HeaderSubGroupByCard: FC = observer((props) => { - const { icon, title, count, column_id, kanbanFilters, handleKanbanFilters } = props; + const { icon, title, count, column_id, collapsedGroups, handleCollapsedGroups } = props; return (
handleKanbanFilters("sub_group_by", column_id)} + onClick={() => handleCollapsedGroups("sub_group_by", column_id)} >
- {kanbanFilters?.sub_group_by.includes(column_id) ? ( + {collapsedGroups?.sub_group_by.includes(column_id) ? ( ) : ( diff --git a/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx b/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx index 373bb8ef8e6..da1e3de44d3 100644 --- a/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx +++ b/web/core/components/issues/issue-layouts/kanban/swimlanes.tsx @@ -35,8 +35,8 @@ interface ISubGroupSwimlaneHeader { sub_group_by: TIssueGroupByOptions | undefined; group_by: TIssueGroupByOptions | undefined; list: IGroupByColumn[]; - kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; showEmptyGroup: boolean; } @@ -53,7 +53,7 @@ const visibilitySubGroupByGroupCount = (subGroupIssueCount: number, showEmptyGro }; const SubGroupSwimlaneHeader: React.FC = observer( - ({ getGroupIssueCount, sub_group_by, group_by, list, kanbanFilters, handleKanbanFilters, showEmptyGroup }) => ( + ({ getGroupIssueCount, sub_group_by, group_by, list, collapsedGroups, handleCollapsedGroups, showEmptyGroup }) => (
{list && list.length > 0 && @@ -73,8 +73,8 @@ const SubGroupSwimlaneHeader: React.FC = observer( icon={_list.icon} title={_list.name} count={groupCount} - kanbanFilters={kanbanFilters} - handleKanbanFilters={handleKanbanFilters} + collapsedGroups={collapsedGroups} + handleCollapsedGroups={handleCollapsedGroups} issuePayload={_list.payload} />
@@ -96,8 +96,8 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader { displayProperties: IIssueDisplayProperties | undefined; updateIssue: ((projectId: string | null, issueId: string, data: Partial) => Promise) | undefined; quickActions: TRenderQuickActions; - kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise; disableIssueCreation?: boolean; enableQuickIssueCreate: boolean; @@ -120,8 +120,8 @@ const SubGroupSwimlane: React.FC = observer((props) => { updateIssue, quickActions, displayProperties, - kanbanFilters, - handleKanbanFilters, + collapsedGroups, + handleCollapsedGroups, loadMoreIssues, showEmptyGroup, enableQuickIssueCreate, @@ -147,7 +147,7 @@ const SubGroupSwimlane: React.FC = observer((props) => { if (subGroupCount > 0) subGroupVisibility.showGroup = true; else subGroupVisibility.showGroup = false; } - if (kanbanFilters?.sub_group_by.includes(_list.id)) subGroupVisibility.showIssues = false; + if (collapsedGroups?.sub_group_by.includes(_list.id)) subGroupVisibility.showIssues = false; return subGroupVisibility; }; @@ -168,8 +168,8 @@ const SubGroupSwimlane: React.FC = observer((props) => { icon={_list.icon} title={_list.name || ""} count={issueCount} - kanbanFilters={kanbanFilters} - handleKanbanFilters={handleKanbanFilters} + collapsedGroups={collapsedGroups} + handleCollapsedGroups={handleCollapsedGroups} />
@@ -186,8 +186,8 @@ const SubGroupSwimlane: React.FC = observer((props) => { sub_group_id={_list.id} updateIssue={updateIssue} quickActions={quickActions} - kanbanFilters={kanbanFilters} - handleKanbanFilters={handleKanbanFilters} + collapsedGroups={collapsedGroups} + handleCollapsedGroups={handleCollapsedGroups} showEmptyGroup={showEmptyGroup} enableQuickIssueCreate={enableQuickIssueCreate} disableIssueCreation={disableIssueCreation} @@ -223,8 +223,8 @@ export interface IKanBanSwimLanes { group_by: TIssueGroupByOptions | undefined; updateIssue: ((projectId: string | null, issueId: string, data: Partial) => Promise) | undefined; quickActions: TRenderQuickActions; - kanbanFilters: TIssueKanbanFilters; - handleKanbanFilters: (toggle: "group_by" | "sub_group_by", value: string) => void; + collapsedGroups: TIssueKanbanFilters; + handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; loadMoreIssues: (groupId?: string, subGroupId?: string) => void; showEmptyGroup: boolean; handleOnDrop: (source: GroupDropLocation, destination: GroupDropLocation) => Promise; @@ -248,8 +248,8 @@ export const KanBanSwimLanes: React.FC = observer((props) => { orderBy, updateIssue, quickActions, - kanbanFilters, - handleKanbanFilters, + collapsedGroups, + handleCollapsedGroups, loadMoreIssues, showEmptyGroup, handleOnDrop, @@ -302,8 +302,8 @@ export const KanBanSwimLanes: React.FC = observer((props) => { getGroupIssueCount={getGroupIssueCount} group_by={group_by} sub_group_by={sub_group_by} - kanbanFilters={kanbanFilters} - handleKanbanFilters={handleKanbanFilters} + collapsedGroups={collapsedGroups} + handleCollapsedGroups={handleCollapsedGroups} list={groupByList} showEmptyGroup={showEmptyGroup} /> @@ -321,8 +321,8 @@ export const KanBanSwimLanes: React.FC = observer((props) => { orderBy={orderBy} updateIssue={updateIssue} quickActions={quickActions} - kanbanFilters={kanbanFilters} - handleKanbanFilters={handleKanbanFilters} + collapsedGroups={collapsedGroups} + handleCollapsedGroups={handleCollapsedGroups} loadMoreIssues={loadMoreIssues} showEmptyGroup={showEmptyGroup} handleOnDrop={handleOnDrop} diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx index 4e61c332176..18ef116c0de 100644 --- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx @@ -1,7 +1,7 @@ import { FC, useCallback, useEffect } from "react"; import { observer } from "mobx-react"; // types -import { GroupByColumnTypes, TGroupedIssues } from "@plane/types"; +import { GroupByColumnTypes, TGroupedIssues, TIssueKanbanFilters } from "@plane/types"; // constants import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue"; // hooks @@ -62,7 +62,7 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { const { workspaceSlug, projectId } = useParams(); const {updateFilters} = useIssuesActions(storeType); - const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] }; + const collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters || { group_by: [], sub_group_by: [] } as TIssueKanbanFilters; useEffect(() => { fetchIssues("init-loader", { canGroup: true, perPageCount: group_by ? 50 : 100 }, viewId); @@ -112,20 +112,24 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { [fetchNextIssues] ); - //kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used becuase the state is shared between kanban view and list view - const handleCollapsedGroups = (toggle: "group_by" | "sub_group_by", value: string) => { - if (workspaceSlug) { - let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; - if (collapsedGroups.includes(value)) { - collapsedGroups = collapsedGroups.filter((_value) => _value != value); - } else { - collapsedGroups.push(value); + // kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used becuase the state is shared between kanban view and list view + const handleCollapsedGroups = useCallback( + (toggle: "group_by", value: string) => { + if (workspaceSlug) { + let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; + if (collapsedGroups.includes(value)) { + collapsedGroups = collapsedGroups.filter((_value) => _value != value); + } else { + collapsedGroups.push(value); + } + updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, + { group_by: collapsedGroups } as TIssueKanbanFilters + ); } - updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { - [toggle]: collapsedGroups, - }); - } - }; + }, + [workspaceSlug, issuesFilter, projectId, updateFilters] + ); + return ( diff --git a/web/core/components/issues/issue-layouts/list/default.tsx b/web/core/components/issues/issue-layouts/list/default.tsx index e3cc83df943..44f3ec25fea 100644 --- a/web/core/components/issues/issue-layouts/list/default.tsx +++ b/web/core/components/issues/issue-layouts/list/default.tsx @@ -48,7 +48,7 @@ export interface IList { addIssuesToView?: (issueIds: string[]) => Promise; isCompletedCycle?: boolean; loadMoreIssues: (groupId?: string) => void; - handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + handleCollapsedGroups: (toggle: "group_by" , value: string) => void; collapsedGroups : TIssueKanbanFilters; } diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx index 8d95aff7d26..427ec6798db 100644 --- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx @@ -29,7 +29,7 @@ interface IHeaderGroupByCard { disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; selectionHelpers: TSelectionHelper; - handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + handleCollapsedGroups: (toggle: "group_by", value: string) => void; } export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index 2e2103eca63..a32ddee3ac7 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -60,7 +60,7 @@ interface Props { showEmptyGroup?: boolean; loadMoreIssues: (groupId?: string) => void; selectionHelpers: TSelectionHelper; - handleCollapsedGroups: (toggle: "group_by" | "sub_group_by", value: string) => void; + handleCollapsedGroups: (toggle: "group_by", value: string) => void; collapsedGroups: TIssueKanbanFilters; } From 5a92bca9f8fbe2bdb08c55ebe4ee8563b6ae5ef1 Mon Sep 17 00:00:00 2001 From: sharma01ketan Date: Mon, 30 Sep 2024 18:35:11 +0530 Subject: [PATCH 8/8] made suggested changes --- .../issues/issue-layouts/list/base-list-root.tsx | 8 ++++---- web/core/components/issues/issue-layouts/list/default.tsx | 4 ++-- .../issues/issue-layouts/list/headers/group-by-card.tsx | 4 ++-- .../components/issues/issue-layouts/list/list-group.tsx | 4 ++-- 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/web/core/components/issues/issue-layouts/list/base-list-root.tsx b/web/core/components/issues/issue-layouts/list/base-list-root.tsx index 18ef116c0de..a97ad0a8e05 100644 --- a/web/core/components/issues/issue-layouts/list/base-list-root.tsx +++ b/web/core/components/issues/issue-layouts/list/base-list-root.tsx @@ -1,6 +1,7 @@ import { FC, useCallback, useEffect } from "react"; import { observer } from "mobx-react"; // types +import { useParams } from "next/navigation"; import { GroupByColumnTypes, TGroupedIssues, TIssueKanbanFilters } from "@plane/types"; // constants import { EIssueFilterType, EIssueLayoutTypes, EIssuesStoreType } from "@/constants/issue"; @@ -16,7 +17,6 @@ import { IssueLayoutHOC } from "../issue-layout-HOC"; import { List } from "./default"; // types import { IQuickActionProps, TRenderQuickActions } from "./list-view-types"; -import { useParams } from "next/navigation"; type ListStoreType = | EIssuesStoreType.PROJECT @@ -114,15 +114,15 @@ export const BaseListRoot = observer((props: IBaseListRoot) => { // kanbanFilters and EIssueFilterType.KANBAN_FILTERS are used becuase the state is shared between kanban view and list view const handleCollapsedGroups = useCallback( - (toggle: "group_by", value: string) => { + (value: string) => { if (workspaceSlug) { - let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.[toggle] || []; + let collapsedGroups = issuesFilter?.issueFilters?.kanbanFilters?.group_by || []; if (collapsedGroups.includes(value)) { collapsedGroups = collapsedGroups.filter((_value) => _value != value); } else { collapsedGroups.push(value); } - updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, + updateFilters(projectId?.toString() ?? "", EIssueFilterType.KANBAN_FILTERS, { group_by: collapsedGroups } as TIssueKanbanFilters ); } diff --git a/web/core/components/issues/issue-layouts/list/default.tsx b/web/core/components/issues/issue-layouts/list/default.tsx index 44f3ec25fea..befa1f8fdbc 100644 --- a/web/core/components/issues/issue-layouts/list/default.tsx +++ b/web/core/components/issues/issue-layouts/list/default.tsx @@ -48,7 +48,7 @@ export interface IList { addIssuesToView?: (issueIds: string[]) => Promise; isCompletedCycle?: boolean; loadMoreIssues: (groupId?: string) => void; - handleCollapsedGroups: (toggle: "group_by" , value: string) => void; + handleCollapsedGroups: (value: string) => void; collapsedGroups : TIssueKanbanFilters; } @@ -133,7 +133,7 @@ export const List: React.FC = observer((props) => { } else { entities = orderedGroups; } - + return (
{groups && ( diff --git a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx index 427ec6798db..83e428fbedb 100644 --- a/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx +++ b/web/core/components/issues/issue-layouts/list/headers/group-by-card.tsx @@ -29,7 +29,7 @@ interface IHeaderGroupByCard { disableIssueCreation?: boolean; addIssuesToView?: (issueIds: string[]) => Promise; selectionHelpers: TSelectionHelper; - handleCollapsedGroups: (toggle: "group_by", value: string) => void; + handleCollapsedGroups: (value: string) => void; } export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => { @@ -108,7 +108,7 @@ export const HeaderGroupByCard = observer((props: IHeaderGroupByCard) => {
handleCollapsedGroups("group_by", groupID)} + onClick={() => handleCollapsedGroups(groupID)} >
{title}
{count || 0}
diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index 5d0832fca25..7bf0dc553c7 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -61,7 +61,7 @@ interface Props { showEmptyGroup?: boolean; loadMoreIssues: (groupId?: string) => void; selectionHelpers: TSelectionHelper; - handleCollapsedGroups: (toggle: "group_by", value: string) => void; + handleCollapsedGroups: (value: string) => void; collapsedGroups: TIssueKanbanFilters; } @@ -216,7 +216,7 @@ export const ListGroup = observer((props: Props) => { highlightIssueOnDrop(getIssueBlockId(source.id, destination?.groupId), orderBy !== "sort_order"); if(!isExpanded){ - handleCollapsedGroups("group_by", group.id) + handleCollapsedGroups(group.id) } }, })