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

fix: Filters in all issues and enable dnd in kanban based on roles (#3493)

Browse Source 
* fix filters mutation issue

* fix all issue filters for state group

* disable drag in Kanban for non members

* remove unused imports
This commit is contained in:
rahulramesha 2024-01-29 15:27:14 +05:30 committed by GitHub
parent f7f1f2bea4
commit b3393f5c48
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 80 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/issues/issue-layouts/filters/header/filters/labels.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { observer } from "mobx-react";
// components // components
import { FilterHeader, FilterOption } from "components/issues"; import { FilterHeader, FilterOption } from "components/issues";
// ui // ui
@ -18,7 +18,7 @@ type Props = {
searchQuery: string; searchQuery: string;
}; };
export const FilterLabels: React.FC<Props> = (props) => { export const FilterLabels: React.FC<Props> = observer((props) => {
const { appliedFilters, handleUpdate, labels, searchQuery } = props; const { appliedFilters, handleUpdate, labels, searchQuery } = props;
const [itemsToRender, setItemsToRender] = useState(5); const [itemsToRender, setItemsToRender] = useState(5);
@ -80,4 +80,4 @@ export const FilterLabels: React.FC<Props> = (props) => {
)} )}
</> </>
); );
}; });

6
web/components/issues/issue-layouts/filters/header/filters/project.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { observer } from "mobx-react";
// components // components
import { FilterHeader, FilterOption } from "components/issues"; import { FilterHeader, FilterOption } from "components/issues";
// hooks // hooks
@ -15,7 +15,7 @@ type Props = {
searchQuery: string; searchQuery: string;
}; };
export const FilterProjects: React.FC<Props> = (props) => { export const FilterProjects: React.FC<Props> = observer((props) => {
const { appliedFilters, handleUpdate, searchQuery } = props; const { appliedFilters, handleUpdate, searchQuery } = props;
// states // states
const [itemsToRender, setItemsToRender] = useState(5); const [itemsToRender, setItemsToRender] = useState(5);
@ -93,4 +93,4 @@ export const FilterProjects: React.FC<Props> = (props) => {
)} )}
</> </>
); );
}; });

61
web/components/issues/issue-layouts/kanban/block.tsx
View File

@ -1,5 +1,5 @@
import { memo } from "react"; 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"; import { observer } from "mobx-react-lite";
// components // components
import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC"; import { WithDisplayPropertiesHOC } from "../properties/with-display-properties-HOC";
@ -16,11 +16,11 @@ interface IssueBlockProps {
issuesMap: IIssueMap; issuesMap: IIssueMap;
displayProperties: IIssueDisplayProperties | undefined; displayProperties: IIssueDisplayProperties | undefined;
isDragDisabled: boolean; isDragDisabled: boolean;
draggableId: string;
index: number;
handleIssues: (issue: TIssue, action: EIssueActions) => void; handleIssues: (issue: TIssue, action: EIssueActions) => void;
quickActions: (issue: TIssue) => React.ReactNode; quickActions: (issue: TIssue) => React.ReactNode;
canEditProperties: (projectId: string | undefined) => boolean; canEditProperties: (projectId: string | undefined) => boolean;
provided: DraggableProvided;
snapshot: DraggableStateSnapshot;
} }
interface IssueDetailsBlockProps { interface IssueDetailsBlockProps {
@ -90,11 +90,11 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
issuesMap, issuesMap,
displayProperties, displayProperties,
isDragDisabled, isDragDisabled,
draggableId,
index,
handleIssues, handleIssues,
quickActions, quickActions,
canEditProperties, canEditProperties,
provided,
snapshot,
} = props; } = props;
const issue = issuesMap[issueId]; const issue = issuesMap[issueId];
@ -104,29 +104,38 @@ export const KanbanIssueBlock: React.FC<IssueBlockProps> = memo((props) => {
const canEditIssueProperties = canEditProperties(issue.project_id); const canEditIssueProperties = canEditProperties(issue.project_id);
return ( return (
<div <Draggable
className="group/kanban-block relative p-1.5 hover:cursor-default" key={draggableId}
{...provided.draggableProps} draggableId={draggableId}
{...provided.dragHandleProps} index={index}
ref={provided.innerRef} isDragDisabled={!canEditIssueProperties || isDragDisabled}
> >
{issue.tempId !== undefined && ( {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" /> <div
className="group/kanban-block relative p-1.5 hover:cursor-default"
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
>
{issue.tempId !== undefined && (
<div className="absolute left-0 top-0 z-[99999] h-full w-full animate-pulse bg-custom-background-100/20" />
)}
<div
className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
isDragDisabled ? "" : "hover:cursor-grab"
} ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
>
<KanbanIssueDetailsBlock
issue={issue}
displayProperties={displayProperties}
handleIssues={handleIssues}
quickActions={quickActions}
isReadOnly={!canEditIssueProperties}
/>
</div>
</div>
)} )}
<div </Draggable>
className={`space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs transition-all ${
isDragDisabled ? "" : "hover:cursor-grab"
} ${snapshot.isDragging ? `border-custom-primary-100` : `border-transparent`}`}
>
<KanbanIssueDetailsBlock
issue={issue}
displayProperties={displayProperties}
handleIssues={handleIssues}
quickActions={quickActions}
isReadOnly={!canEditIssueProperties}
/>
</div>
</div>
); );
}); });

29
web/components/issues/issue-layouts/kanban/blocks-list.tsx
View File

@ -4,7 +4,6 @@ import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
import { EIssueActions } from "../types"; import { EIssueActions } from "../types";
// components // components
import { KanbanIssueBlock } from "components/issues"; import { KanbanIssueBlock } from "components/issues";
import { Draggable, DraggableProvided, DraggableStateSnapshot } from "@hello-pangea/dnd";
interface IssueBlocksListProps { interface IssueBlocksListProps {
sub_group_id: string; sub_group_id: string;
@ -43,22 +42,18 @@ const KanbanIssueBlocksListMemo: React.FC<IssueBlocksListProps> = (props) => {
if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`; if (sub_group_id) draggableId = `${draggableId}__${sub_group_id}`;
return ( return (
<Draggable key={draggableId} draggableId={draggableId} index={index} isDragDisabled={isDragDisabled}> <KanbanIssueBlock
{(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( key={draggableId}
<KanbanIssueBlock issueId={issueId}
key={`kanban-issue-block-${issueId}`} issuesMap={issuesMap}
issueId={issueId} displayProperties={displayProperties}
issuesMap={issuesMap} handleIssues={handleIssues}
displayProperties={displayProperties} quickActions={quickActions}
handleIssues={handleIssues} draggableId={draggableId}
quickActions={quickActions} index={index}
provided={provided} isDragDisabled={isDragDisabled}
snapshot={snapshot} canEditProperties={canEditProperties}
isDragDisabled={isDragDisabled} />
canEditProperties={canEditProperties}
/>
)}
</Draggable>
); );
})} })}
</> </>

40
web/store/issue/helpers/issue-filter-helper.store.ts
View File

@ -31,7 +31,10 @@ export interface IIssueFilterHelperStore {
filteredParams: TIssueParams[] filteredParams: TIssueParams[]
): Partial<Record<TIssueParams, string | boolean>>; ): Partial<Record<TIssueParams, string | boolean>>;
computedFilters(filters: IIssueFilterOptions): IIssueFilterOptions; computedFilters(filters: IIssueFilterOptions): IIssueFilterOptions;
computedDisplayFilters(displayFilters: IIssueDisplayFilterOptions): IIssueDisplayFilterOptions; computedDisplayFilters(
displayFilters: IIssueDisplayFilterOptions,
defaultValues?: IIssueDisplayFilterOptions
): IIssueDisplayFilterOptions;
computedDisplayProperties(filters: IIssueDisplayProperties): IIssueDisplayProperties; computedDisplayProperties(filters: IIssueDisplayProperties): IIssueDisplayProperties;
} }
@ -147,20 +150,27 @@ export class IssueFilterHelperStore implements IIssueFilterHelperStore {
* @param {IIssueDisplayFilterOptions} displayFilters * @param {IIssueDisplayFilterOptions} displayFilters
* @returns {IIssueDisplayFilterOptions} * @returns {IIssueDisplayFilterOptions}
*/ */
computedDisplayFilters = (displayFilters: IIssueDisplayFilterOptions): IIssueDisplayFilterOptions => ({ computedDisplayFilters = (
calendar: { displayFilters: IIssueDisplayFilterOptions,
show_weekends: displayFilters?.calendar?.show_weekends || false, defaultValues?: IIssueDisplayFilterOptions
layout: displayFilters?.calendar?.layout || "month", ): IIssueDisplayFilterOptions => {
}, const filters = displayFilters || defaultValues;
layout: displayFilters?.layout || "list",
order_by: displayFilters?.order_by || "sort_order", return {
group_by: displayFilters?.group_by || null, calendar: {
sub_group_by: displayFilters?.sub_group_by || null, show_weekends: filters?.calendar?.show_weekends || false,
type: displayFilters?.type || null, layout: filters?.calendar?.layout || "month",
sub_issue: displayFilters?.sub_issue || false, },
show_empty_groups: displayFilters?.show_empty_groups || false, layout: filters?.layout || "list",
start_target_date: displayFilters?.start_target_date || false, 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 * @description This method is used to apply the display properties on the issues

4
web/store/issue/workspace/filter.store.ts
View File

@ -90,7 +90,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
const userFilters = this.getIssueFilters(viewId); const userFilters = this.getIssueFilters(viewId);
if (!userFilters) return undefined; if (!userFilters) return undefined;
const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "issues"); const filteredParams = handleIssueQueryParamsByLayout(userFilters?.displayFilters?.layout, "my_issues");
if (!filteredParams) return undefined; if (!filteredParams) return undefined;
const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams( const filteredRouteParams: Partial<Record<TIssueParams, string | boolean>> = this.computedFilteredParams(
@ -126,7 +126,7 @@ export class WorkspaceIssuesFilter extends IssueFilterHelperStore implements IWo
}; };
const _filters = this.handleIssuesLocalFilters.get(EIssuesStoreType.GLOBAL, workspaceSlug, undefined, viewId); 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); displayProperties = this.computedDisplayProperties(_filters?.display_properties);
kanbanFilters = { kanbanFilters = {
group_by: _filters?.kanban_filters?.group_by || [], group_by: _filters?.kanban_filters?.group_by || [],