From 1f9f8215439f5c1ef026d4fc5ad90628899bf904 Mon Sep 17 00:00:00 2001 From: rahulramesha <71900764+rahulramesha@users.noreply.github.com> Date: Thu, 27 Jun 2024 18:42:07 +0530 Subject: [PATCH] [WEB-1255] chore: necessary changes for advanced views (#4955) * make necessary changes for advanced views * fix update view access methods --- packages/types/src/views.d.ts | 2 +- .../[projectId]/views/(list)/header.tsx | 5 +- .../views/applied-filters/access.tsx | 46 +++++++++++++++++++ .../views/applied-filters/index.tsx | 1 + .../root.tsx} | 13 +++++- web/core/store/global-view.store.ts | 1 - web/core/store/project-view.store.ts | 1 - web/helpers/project-views.helpers.ts | 4 +- 8 files changed, 65 insertions(+), 8 deletions(-) create mode 100644 web/core/components/views/applied-filters/access.tsx create mode 100644 web/core/components/views/applied-filters/index.tsx rename web/core/components/views/{filters/applied-filters.tsx => applied-filters/root.tsx} (85%) diff --git a/packages/types/src/views.d.ts b/packages/types/src/views.d.ts index 29db479ed..1c61ab69c 100644 --- a/packages/types/src/views.d.ts +++ b/packages/types/src/views.d.ts @@ -36,7 +36,7 @@ export type TViewFilterProps = { created_at?: string[] | null; owned_by?: string[] | null; favorites?: boolean; - accessTypes?: EViewAccess[]; + view_type?: EViewAccess[]; }; export type TViewFilters = { diff --git a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx index fd192cc60..fae58221a 100644 --- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx +++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx @@ -9,9 +9,10 @@ import { Breadcrumbs, PhotoFilterIcon, Button } from "@plane/ui"; // components import { BreadcrumbLink, Logo } from "@/components/common"; import { ViewListHeader } from "@/components/views"; -import { ViewAppliedFiltersList } from "@/components/views/filters/applied-filters"; +import { ViewAppliedFiltersList } from "@/components/views/applied-filters"; // constants import { EUserProjectRoles } from "@/constants/project"; +import { EViewAccess } from "@/constants/views"; // helpers import { calculateTotalFilters } from "@/helpers/filter.helper"; // hooks @@ -29,7 +30,7 @@ export const ProjectViewsHeader = observer(() => { const { filters, updateFilters, clearAllFilters } = useProjectView(); const handleRemoveFilter = useCallback( - (key: keyof TViewFilterProps, value: string | null) => { + (key: keyof TViewFilterProps, value: string | EViewAccess | null) => { let newValues = filters.filters?.[key]; if (key === "favorites") { diff --git a/web/core/components/views/applied-filters/access.tsx b/web/core/components/views/applied-filters/access.tsx new file mode 100644 index 000000000..6587e76f5 --- /dev/null +++ b/web/core/components/views/applied-filters/access.tsx @@ -0,0 +1,46 @@ +import { observer } from "mobx-react"; +// icons +import { X } from "lucide-react"; +// constants +import { EViewAccess, VIEW_ACCESS_SPECIFIERS } from "@/constants/views"; +// helpers + +type Props = { + editable: boolean | undefined; + handleRemove: (val: EViewAccess) => void; + values: EViewAccess[]; +}; + +export const AppliedAccessFilters: React.FC = observer((props) => { + const { editable, handleRemove, values } = props; + + const getAccessLabel = (val: EViewAccess) => { + const value = VIEW_ACCESS_SPECIFIERS.find((option) => option.key === val); + return value?.label; + }; + + return ( + <> + {values.map((access) => { + const label = getAccessLabel(access); + + if (!label) return null; + + return ( +
+ {label} + {editable && ( + + )} +
+ ); + })} + + ); +}); diff --git a/web/core/components/views/applied-filters/index.tsx b/web/core/components/views/applied-filters/index.tsx new file mode 100644 index 000000000..1efe34c51 --- /dev/null +++ b/web/core/components/views/applied-filters/index.tsx @@ -0,0 +1 @@ +export * from "./root"; diff --git a/web/core/components/views/filters/applied-filters.tsx b/web/core/components/views/applied-filters/root.tsx similarity index 85% rename from web/core/components/views/filters/applied-filters.tsx rename to web/core/components/views/applied-filters/root.tsx index d532ff61d..aeb8db96b 100644 --- a/web/core/components/views/filters/applied-filters.tsx +++ b/web/core/components/views/applied-filters/root.tsx @@ -2,19 +2,23 @@ import { X } from "lucide-react"; import { TViewFilterProps } from "@plane/types"; // components import { AppliedDateFilters, AppliedMembersFilters } from "@/components/common/applied-filters"; +// constants +import { EViewAccess } from "@/constants/views"; // helpers import { replaceUnderscoreIfSnakeCase } from "@/helpers/string.helper"; +import { AppliedAccessFilters } from "./access"; // types type Props = { appliedFilters: TViewFilterProps; handleClearAllFilters: () => void; - handleRemoveFilter: (key: keyof TViewFilterProps, value: string | null) => void; + handleRemoveFilter: (key: keyof TViewFilterProps, value: string | EViewAccess | null) => void; alwaysAllowEditing?: boolean; }; const MEMBERS_FILTERS = ["owned_by"]; const DATE_FILTERS = ["created_at"]; +const VIEW_ACCESS_FILTERS = ["view_type"]; export const ViewAppliedFiltersList: React.FC = (props) => { const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props; @@ -39,6 +43,13 @@ export const ViewAppliedFiltersList: React.FC = (props) => { >
{replaceUnderscoreIfSnakeCase(filterKey)} + {VIEW_ACCESS_FILTERS.includes(filterKey) && ( + handleRemoveFilter(filterKey, val)} + values={Array.isArray(value) ? (value as EViewAccess[]) : []} + /> + )} {DATE_FILTERS.includes(filterKey) && ( { set(this.globalViewMap, [viewId, "access"], access); }); diff --git a/web/core/store/project-view.store.ts b/web/core/store/project-view.store.ts index 13c366a14..f006e5908 100644 --- a/web/core/store/project-view.store.ts +++ b/web/core/store/project-view.store.ts @@ -313,7 +313,6 @@ export class ProjectViewStore implements IProjectViewStore { const currentView = this.getViewById(viewId); const currentAccess = currentView?.access; try { - if (currentAccess === access) return; runInAction(() => { set(this.viewMap, [viewId, "access"], access); }); diff --git a/web/helpers/project-views.helpers.ts b/web/helpers/project-views.helpers.ts index a8fe269be..51ff4d63b 100644 --- a/web/helpers/project-views.helpers.ts +++ b/web/helpers/project-views.helpers.ts @@ -54,8 +54,8 @@ export const shouldFilterView = (view: IProjectView, filters: TViewFilterProps | }); } - if (filterKey === "accessTypes" && filters?.accessTypes && filters?.accessTypes?.length > 0) { - fallsInFilters = filters.accessTypes.includes(view.access); + if (filterKey === "view_type" && filters?.view_type && filters?.view_type?.length > 0) { + fallsInFilters = filters.view_type.includes(view.access); } });