[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

@@ -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 = {

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") {

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<Props> = 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 (
+          <div key={access} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
+            <span className="normal-case">{label}</span>
+            {editable && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(access)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+});

web/core/components/views/applied-filters/index.tsx

@@ -0,0 +1 @@
+export * from "./root";

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> = (props) => {
   const { appliedFilters, handleClearAllFilters, handleRemoveFilter, alwaysAllowEditing } = props;
@@ -39,6 +43,13 @@ export const ViewAppliedFiltersList: React.FC<Props> = (props) => {
           >
             <div className="flex flex-wrap items-center gap-1.5">
               <span className="text-xs text-custom-text-300">{replaceUnderscoreIfSnakeCase(filterKey)}</span>
+              {VIEW_ACCESS_FILTERS.includes(filterKey) && (
+                <AppliedAccessFilters
+                  editable={isEditingAllowed}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={Array.isArray(value) ? (value as EViewAccess[]) : []}
+                />
+              )}
               {DATE_FILTERS.includes(filterKey) && (
                 <AppliedDateFilters
                   editable={isEditingAllowed}

web/core/store/global-view.store.ts

@@ -277,7 +277,6 @@ export class GlobalViewStore implements IGlobalViewStore {
     const currentView = this.getViewDetailsById(viewId);
     const currentAccess = currentView?.access;
     try {
-      if (currentAccess === access) return;
       runInAction(() => {
         set(this.globalViewMap, [viewId, "access"], access);
       });

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);
       });

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);
     }
   });