From b3393f5c486a3670b5d19d7b015312f4e79e7cf5 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Mon, 29 Jan 2024 15:27:14 +0530 Subject: [PATCH] fix: Filters in all issues and enable dnd in kanban based on roles (#3493) * fix filters mutation issue * fix all issue filters for state group * disable drag in Kanban for non members * remove unused imports --- .../filters/header/filters/labels.tsx | 6 +- .../filters/header/filters/project.tsx | 6 +- .../issues/issue-layouts/kanban/block.tsx | 61 +++++++++++-------- .../issue-layouts/kanban/blocks-list.tsx | 29 ++++----- .../helpers/issue-filter-helper.store.ts | 40 +++++++----- web/store/issue/workspace/filter.store.ts | 4 +- 6 files changed, 80 insertions(+), 66 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx index 3e23ae07b..b226f42b3 100644 --- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx +++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; - +import { observer } from "mobx-react"; // components import { FilterHeader, FilterOption } from "components/issues"; // ui @@ -18,7 +18,7 @@ type Props = { searchQuery: string; }; -export const FilterLabels: React.FC = (props) => { +export const FilterLabels: React.FC = observer((props) => { const { appliedFilters, handleUpdate, labels, searchQuery } = props; const [itemsToRender, setItemsToRender] = useState(5); @@ -80,4 +80,4 @@ export const FilterLabels: React.FC = (props) => { )} ); -}; +}); diff --git a/web/components/issues/issue-layouts/filters/header/filters/project.tsx b/web/components/issues/issue-layouts/filters/header/filters/project.tsx index 70242d199..61b7d50c1 100644 --- a/web/components/issues/issue-layouts/filters/header/filters/project.tsx +++ b/web/components/issues/issue-layouts/filters/header/filters/project.tsx @@ -1,5 +1,5 @@ import React, { useState } from "react"; - +import { observer } from "mobx-react"; // components import { FilterHeader, FilterOption } from "components/issues"; // hooks @@ -15,7 +15,7 @@ type Props = { searchQuery: string; }; -export const FilterProjects: React.FC = (props) => { +export const FilterProjects: React.FC = observer((props) => { const { appliedFilters, handleUpdate, searchQuery } = props; // states const [itemsToRender, setItemsToRender] = useState(5); @@ -93,4 +93,4 @@ export const FilterProjects: React.FC = (props) => { )} ); -}; +}); diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index 40bd19cf1..d1ab82404 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -1,5 +1,5 @@ import { memo } from "react"; -import { DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd"; +import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd"; import { observer } from "mobx-react-lite"; // components import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; @@ -16,11 +16,11 @@ interface IssueBlockProps { issuesMap: IIssueMap; displayProperties: IIssueDisplayProperties | undefined; isDragDisabled: boolean; + draggableId: string; + index: number; handleIssues: (issue: TIssue, action: EIssueActions) => void; quickActions: (issue: TIssue) => React.ReactNode; canEditProperties: (projectId: string | undefined) => boolean; - provided: DraggableProvided; - snapshot: DraggableStateSnapshot; } interface IssueDetailsBlockProps { @@ -90,11 +90,11 @@ export const KanbanIssueBlock: React.FC = memo((props) => { issuesMap, displayProperties, isDragDisabled, + draggableId, + index, handleIssues, quickActions, canEditProperties, - provided, - snapshot, } = props; const issue = issuesMap[issueId]; @@ -104,29 +104,38 @@ export const KanbanIssueBlock: React.FC = memo((props) => { const canEditIssueProperties = canEditProperties(issue.project_id); return ( -
- {issue.tempId !== undefined && ( -
+ {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( +
+ {issue.tempId !== undefined && ( +
+ )} +
+ +
+
)} -
- -
-
+ ); }); diff --git a/web/components/issues/issue-layouts/kanban/blocks-list.tsx b/web/components/issues/issue-layouts/kanban/blocks-list.tsx index ce34b1fef..239a25425 100644 --- a/web/components/issues/issue-layouts/kanban/blocks-list.tsx +++ b/web/components/issues/issue-layouts/kanban/blocks-list.tsx @@ -4,7 +4,6 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types"; import { EIssueActions } from "../types"; // components import { KanbanIssueBlock } from "components/issues"; -import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd"; interface IssueBlocksListProps { sub_group_id: string; @@ -43,22 +42,18 @@ const KanbanIssueBlocksListMemo: React.FC = (props) => { if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`; return ( - - {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( - - )} - + ); })} diff --git a/web/store/issue/helpers/issue-filter-helper.store.ts b/web/store/issue/helpers/issue-filter-helper.store.ts index 03bb1bc30..f3a4456fb 100644 --- a/web/store/issue/helpers/issue-filter-helper.store.ts +++ b/web/store/issue/helpers/issue-filter-helper.store.ts @@ -31,7 +31,10 @@ export interface IIssueFilterHelperStore { filteredParams: TIssueParams[] ): Partial>; computedFilters(filters: IIssueFilterOptions): IIssueFilterOptions; - computedDisplayFilters(displayFilters: IIssueDisplayFilterOptions): IIssueDisplayFilterOptions; + computedDisplayFilters( + displayFilters: IIssueDisplayFilterOptions, + defaultValues?: IIssueDisplayFilterOptions + ): IIssueDisplayFilterOptions; computedDisplayProperties(filters: IIssueDisplayProperties): IIssueDisplayProperties; } @@ -147,20 +150,27 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore { * @param {IIssueDisplayFilterOptions} displayFilters * @returns {IIssueDisplayFilterOptions} */ - computedDisplayFilters = (displayFilters: IIssueDisplayFilterOptions): IIssueDisplayFilterOptions => ({ - calendar: { - show_weekends: displayFilters?.calendar?.show_weekends || false, - layout: displayFilters?.calendar?.layout || "month", - }, - layout: displayFilters?.layout || "list", - order_by: displayFilters?.order_by || "sort_order", - group_by: displayFilters?.group_by || null, - sub_group_by: displayFilters?.sub_group_by || null, - type: displayFilters?.type || null, - sub_issue: displayFilters?.sub_issue || false, - show_empty_groups: displayFilters?.show_empty_groups || false, - start_target_date: displayFilters?.start_target_date || false, - }); + computedDisplayFilters = ( + displayFilters: IIssueDisplayFilterOptions, + defaultValues?: IIssueDisplayFilterOptions + ): IIssueDisplayFilterOptions => { + const filters = displayFilters || defaultValues; + + return { + calendar: { + show_weekends: filters?.calendar?.show_weekends || false, + layout: filters?.calendar?.layout || "month", + }, + layout: filters?.layout || "list", + order_by: filters?.order_by || "sort_order", + group_by: filters?.group_by || null, + sub_group_by: filters?.sub_group_by || null, + type: filters?.type || null, + sub_issue: filters?.sub_issue || false, + show_empty_groups: filters?.show_empty_groups || false, + start_target_date: filters?.start_target_date || false, + }; + }; /** * @description This method is used to apply the display properties on the issues diff --git a/web/store/issue/workspace/filter.store.ts b/web/store/issue/workspace/filter.store.ts index 34907bd9b..82fb75ce2 100644 --- a/web/store/issue/workspace/filter.store.ts +++ b/web/store/issue/workspace/filter.store.ts @@ -90,7 +90,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo const userFilters = this.getIssueFilters(viewId); if (!userFilters) return undefined; - const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues"); + const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "my_issues"); if (!filteredParams) return undefined; const filteredRouteParams: Partial> = this.computedFilteredParams( @@ -126,7 +126,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo }; const _filters = this.handleIssuesLocalFilters.get(EIssuesStoreType.GLOBAL, workspaceSlug, undefined, viewId); - displayFilters = this.computedDisplayFilters(_filters?.display_filters); + displayFilters = this.computedDisplayFilters(_filters?.display_filters, { layout: "spreadsheet" }); displayProperties = this.computedDisplayProperties(_filters?.display_properties); kanbanFilters = { group_by: _filters?.kanban_filters?.group_by || [],