From fb2b4ae3035e6156bcf230c0322d10083bb8eaf7 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Fri, 7 Jun 2024 19:43:27 +0530 Subject: [PATCH] save all filters and properties for views (#4728) --- .../filters/applied-filters/filters-list.tsx | 7 +++---- .../applied-filters/roots/archived-issue.tsx | 4 +--- .../applied-filters/roots/cycle-root.tsx | 8 ++++++-- .../applied-filters/roots/draft-issue.tsx | 4 +--- .../applied-filters/roots/module-root.tsx | 8 ++++++-- .../applied-filters/roots/project-root.tsx | 10 +++++++++- .../roots/project-view-root.tsx | 10 ++++++++-- .../issues/issue-layouts/save-filter-view.tsx | 9 +++++++-- web/components/issues/issue-layouts/utils.tsx | 20 +++++++++++++++++++ web/components/views/form.tsx | 2 ++ 10 files changed, 63 insertions(+), 19 deletions(-) diff --git a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx index ac3535a83..1d53921bb 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx @@ -19,7 +19,7 @@ import { EUserProjectRoles } from "@/constants/project"; // helpers import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper"; // hooks -import { useAppRouter, useUser } from "@/hooks/store"; +import { useUser } from "@/hooks/store"; type Props = { appliedFilters: IIssueFilterOptions; @@ -36,7 +36,6 @@ const dateFilters = ["start_date", "target_date"]; export const AppliedFiltersList: React.FC = observer((props) => { const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, states, alwaysAllowEditing } = props; // store hooks - const { moduleId, cycleId } = useAppRouter(); const { membership: { currentProjectRole }, } = useUser(); @@ -108,14 +107,14 @@ export const AppliedFiltersList: React.FC = observer((props) => { values={value} /> )} - {filterKey === "cycle" && !cycleId && ( + {filterKey === "cycle" && ( handleRemoveFilter("cycle", val)} values={value} /> )} - {filterKey === "module" && !moduleId && ( + {filterKey === "module" && ( handleRemoveFilter("module", val)} diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx index fa8975721..d5c6bc701 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { IIssueFilterOptions } from "@plane/types"; // hooks -import { AppliedFiltersList, SaveFilterView } from "@/components/issues"; +import { AppliedFiltersList } from "@/components/issues"; import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue"; import { useIssues, useLabel, useProjectState } from "@/hooks/store"; // components @@ -76,8 +76,6 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => { labels={projectLabels ?? []} states={projectStates} /> - - ); }); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx index ae96de484..b555c1cfe 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx @@ -74,7 +74,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => { }; // return if no filters are applied - if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId) return null; + if (Object.keys(appliedFilters).length === 0 || !workspaceSlug || !projectId || !cycleId) return null; return (
@@ -89,7 +89,11 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx index 505893175..f45e56888 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/draft-issue.tsx @@ -2,7 +2,7 @@ import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { IIssueFilterOptions } from "@plane/types"; // hooks -import { AppliedFiltersList, SaveFilterView } from "@/components/issues"; +import { AppliedFiltersList } from "@/components/issues"; import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue"; import { useIssues, useLabel, useProjectState } from "@/hooks/store"; // components @@ -71,8 +71,6 @@ export const DraftIssueAppliedFiltersRoot: React.FC = observer(() => { labels={projectLabels ?? []} states={projectStates} /> - - ); }); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx index 220e6e9dc..a6841ab06 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx @@ -73,7 +73,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => { }; // return if no filters are applied - if (!workspaceSlug || !projectId || Object.keys(appliedFilters).length === 0) return null; + if (!workspaceSlug || !projectId || !moduleId || Object.keys(appliedFilters).length === 0) return null; return (
@@ -88,7 +88,11 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx index 0b8b8758a..ac0d1dd72 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx @@ -77,7 +77,15 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => { states={projectStates} /> {isEditingAllowed && ( - + )} ); diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx index 049867f84..1423fc393 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx @@ -1,5 +1,4 @@ import isEmpty from "lodash/isEmpty"; -import isEqual from "lodash/isEqual"; import { observer } from "mobx-react"; import { useRouter } from "next/router"; import { IIssueFilterOptions } from "@plane/types"; @@ -8,6 +7,7 @@ import { Button } from "@plane/ui"; import { AppliedFiltersList } from "@/components/issues"; import { EIssueFilterType, EIssuesStoreType } from "@/constants/issue"; import { useIssues, useLabel, useProjectState, useProjectView } from "@/hooks/store"; +import { getAreFiltersEqual } from "../../../utils"; // components // ui // types @@ -79,7 +79,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => { ); }; - const areFiltersEqual = isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {}); + const areFiltersEqual = getAreFiltersEqual(appliedFilters, issueFilters, viewDetails); // return if no filters are applied if (isEmpty(appliedFilters) && areFiltersEqual) return null; @@ -91,6 +91,12 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => { filters: { ...(appliedFilters ?? {}), }, + display_filters: { + ...issueFilters?.displayFilters, + }, + display_properties: { + ...issueFilters?.displayProperties, + }, }); }; diff --git a/web/components/issues/issue-layouts/save-filter-view.tsx b/web/components/issues/issue-layouts/save-filter-view.tsx index 036d537d8..98ef5a414 100644 --- a/web/components/issues/issue-layouts/save-filter-view.tsx +++ b/web/components/issues/issue-layouts/save-filter-view.tsx @@ -1,4 +1,5 @@ import { FC, useState } from "react"; +import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types"; import { Button } from "@plane/ui"; // components import { CreateUpdateProjectViewModal } from "@/components/views"; @@ -6,7 +7,11 @@ import { CreateUpdateProjectViewModal } from "@/components/views"; interface ISaveFilterView { workspaceSlug: string; projectId: string; - filterParams: any; + filterParams: { + filters: IIssueFilterOptions; + display_filters?: IIssueDisplayFilterOptions; + display_properties?: IIssueDisplayProperties; + }; } export const SaveFilterView: FC = (props) => { @@ -19,7 +24,7 @@ export const SaveFilterView: FC = (props) => { setViewModal(false)} /> diff --git a/web/components/issues/issue-layouts/utils.tsx b/web/components/issues/issue-layouts/utils.tsx index 78048b4b4..c95ea748e 100644 --- a/web/components/issues/issue-layouts/utils.tsx +++ b/web/components/issues/issue-layouts/utils.tsx @@ -1,6 +1,7 @@ import { extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item"; import clone from "lodash/clone"; import concat from "lodash/concat"; +import isEqual from "lodash/isEqual"; import pull from "lodash/pull"; import uniq from "lodash/uniq"; import scrollIntoView from "smooth-scroll-into-view-if-needed"; @@ -13,6 +14,9 @@ import { IPragmaticDropPayload, TIssue, TIssueGroupByOptions, + IIssueFilterOptions, + IIssueFilters, + IProjectView, } from "@plane/types"; // ui import { Avatar, CycleGroupIcon, DiceIcon, PriorityIcon, StateGroupIcon } from "@plane/ui"; @@ -535,3 +539,19 @@ export const handleGroupDragDrop = async ( return await updateIssueOnDrop(sourceIssue.project_id, sourceIssue.id, updatedIssue, issueUpdates); } }; + +/** + * This Method compares filters and returns a boolean based on which and updateView button is shown + * @param appliedFilters + * @param issueFilters + * @param viewDetails + * @returns + */ +export const getAreFiltersEqual = ( + appliedFilters: IIssueFilterOptions | undefined, + issueFilters: IIssueFilters | undefined, + viewDetails: IProjectView | null +) => + isEqual(appliedFilters ?? {}, viewDetails?.filters ?? {}) && + isEqual(issueFilters?.displayFilters ?? {}, viewDetails?.display_filters ?? {}) && + isEqual(issueFilters?.displayProperties ?? {}, viewDetails?.display_properties ?? {}); diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx index b0786ec1b..295354c6b 100644 --- a/web/components/views/form.tsx +++ b/web/components/views/form.tsx @@ -94,6 +94,8 @@ export const ProjectViewForm: React.FC = observer((props) => { description: formData.description, logo_props: formData.logo_props, filters: formData.filters, + display_filters: formData.display_filters, + display_properties: formData.display_properties, } as IProjectView); reset({