chore: refactor apply/ clear filter implementation in All Issues.

makeplane · Dec 27, 2023 · 024822d · 024822d
1 parent 03f90be
commit 024822d
Show file tree

Hide file tree

Showing 10 changed files with 140 additions and 77 deletions.
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/date.tsx b/web/components/issues/issue-layouts/filters/applied-filters/date.tsx
@@ -11,10 +11,11 @@ import { DATE_FILTER_OPTIONS } from "constants/filters";
 type Props = {
   handleRemove: (val: string) => void;
   values: string[];
+  disableClearOption?: boolean;
 };
 
 export const AppliedDateFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, values } = props;
+  const { handleRemove, values, disableClearOption } = props;
 
   const getDateLabel = (value: string): string => {
     let dateLabel = "";
@@ -40,13 +41,15 @@ export const AppliedDateFilters: React.FC<Props> = observer((props) => {
       {values.map((date) => (
         <div key={date} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
           <span className="normal-case">{getDateLabel(date)}</span>
-          <button
-            type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-            onClick={() => handleRemove(date)}
-          >
-            <X size={10} strokeWidth={2} />
-          </button>
+          {!disableClearOption && (
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(date)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          )}
         </div>
       ))}
     </>

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
@@ -24,13 +24,23 @@ type Props = {
   members?: IUserLite[] | undefined;
   projects?: IProject[] | undefined;
   states?: IState[] | undefined;
+  disableClearFilterOptions?: (keyof IIssueFilterOptions)[];
 };
 
 const membersFilters = ["assignees", "mentions", "created_by", "subscriber"];
 const dateFilters = ["start_date", "target_date"];
 
 export const AppliedFiltersList: React.FC<Props> = observer((props) => {
-  const { appliedFilters, handleClearAllFilters, handleRemoveFilter, labels, members, projects, states } = props;
+  const {
+    appliedFilters,
+    handleClearAllFilters,
+    handleRemoveFilter,
+    labels,
+    members,
+    projects,
+    states,
+    disableClearFilterOptions,
+  } = props;
 
   if (!appliedFilters) return null;
 
@@ -52,66 +62,80 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
             <div className="flex flex-wrap items-center gap-1">
               {membersFilters.includes(filterKey) && (
                 <AppliedMembersFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
                   handleRemove={(val) => handleRemoveFilter(filterKey, val)}
                   members={members}
                   values={value}
                 />
               )}
               {dateFilters.includes(filterKey) && (
-                <AppliedDateFilters handleRemove={(val) => handleRemoveFilter(filterKey, val)} values={value} />
+                <AppliedDateFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
+                  handleRemove={(val) => handleRemoveFilter(filterKey, val)}
+                  values={value}
+                />
               )}
               {filterKey === "labels" && (
                 <AppliedLabelsFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
                   handleRemove={(val) => handleRemoveFilter("labels", val)}
                   labels={labels}
                   values={value}
                 />
               )}
               {filterKey === "priority" && (
                 <AppliedPriorityFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
                   handleRemove={(val) => handleRemoveFilter("priority", val)}
                   values={value}
                 />
               )}
               {filterKey === "state" && states && (
                 <AppliedStateFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
                   handleRemove={(val) => handleRemoveFilter("state", val)}
                   states={states}
                   values={value}
                 />
               )}
               {filterKey === "state_group" && (
                 <AppliedStateGroupFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
                   handleRemove={(val) => handleRemoveFilter("state_group", val)}
                   values={value}
                 />
               )}
               {filterKey === "project" && (
                 <AppliedProjectFilters
+                  disableClearOption={disableClearFilterOptions?.includes(filterKey)}
                   handleRemove={(val) => handleRemoveFilter("project", val)}
                   projects={projects}
                   values={value}
                 />
               )}
-              <button
-                type="button"
-                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-                onClick={() => handleRemoveFilter(filterKey, null)}
-              >
-                <X size={12} strokeWidth={2} />
-              </button>
+              {!disableClearFilterOptions?.includes(filterKey) && (
+                <button
+                  type="button"
+                  className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                  onClick={() => handleRemoveFilter(filterKey, null)}
+                >
+                  <X size={12} strokeWidth={2} />
+                </button>
+              )}
             </div>
           </div>
         );
       })}
-      <button
-        type="button"
-        onClick={handleClearAllFilters}
-        className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
-      >
-        Clear all
-        <X size={12} strokeWidth={2} />
-      </button>
-      </div>
+      {(!disableClearFilterOptions || disableClearFilterOptions.length === 0) && (
+        <button
+          type="button"
+          onClick={handleClearAllFilters}
+          className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1 text-xs text-custom-text-300 hover:text-custom-text-200"
+        >
+          Clear all
+          <X size={12} strokeWidth={2} />
+        </button>
+      )}
+    </div>
   );
 });
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@@ -9,10 +9,11 @@ type Props = {
   handleRemove: (val: string) => void;
   labels: IIssueLabel[] | undefined;
   values: string[];
+  disableClearOption?: boolean;
 };
 
 export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, labels, values } = props;
+  const { handleRemove, labels, values, disableClearOption } = props;
 
   return (
     <>
@@ -30,13 +31,15 @@ export const AppliedLabelsFilters: React.FC<Props> = observer((props) => {
               }}
             />
             <span className="normal-case">{labelDetails.name}</span>
-            <button
-              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-              onClick={() => handleRemove(labelId)}
-            >
-              <X size={10} strokeWidth={2} />
-            </button>
+            {!disableClearOption && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(labelId)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
           </div>
         );
       })}

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/members.tsx b/web/components/issues/issue-layouts/filters/applied-filters/members.tsx
@@ -9,10 +9,11 @@ type Props = {
   handleRemove: (val: string) => void;
   members: IUserLite[] | undefined;
   values: string[];
+  disableClearOption?: boolean;
 };
 
 export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, members, values } = props;
+  const { handleRemove, members, values, disableClearOption } = props;
 
   return (
     <>
@@ -25,13 +26,15 @@ export const AppliedMembersFilters: React.FC<Props> = observer((props) => {
           <div key={memberId} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
             <Avatar name={memberDetails.display_name} src={memberDetails.avatar} showTooltip={false} />
             <span className="normal-case">{memberDetails.display_name}</span>
-            <button
-              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-              onClick={() => handleRemove(memberId)}
-            >
-              <X size={10} strokeWidth={2} />
-            </button>
+            {!disableClearOption && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(memberId)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
           </div>
         );
       })}

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx b/web/components/issues/issue-layouts/filters/applied-filters/priority.tsx
@@ -9,24 +9,27 @@ import { TIssuePriorities } from "types";
 type Props = {
   handleRemove: (val: string) => void;
   values: string[];
+  disableClearOption?: boolean;
 };
 
 export const AppliedPriorityFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, values } = props;
+  const { handleRemove, values, disableClearOption } = props;
 
   return (
     <>
       {values.map((priority) => (
         <div key={priority} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
           <PriorityIcon priority={priority as TIssuePriorities} className={`h-3 w-3`} />
           {priority}
-          <button
-            type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-            onClick={() => handleRemove(priority)}
-          >
-            <X size={10} strokeWidth={2} />
-          </button>
+          {!disableClearOption && (
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(priority)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          )}
         </div>
       ))}
     </>

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/project.tsx b/web/components/issues/issue-layouts/filters/applied-filters/project.tsx
@@ -10,10 +10,11 @@ type Props = {
   handleRemove: (val: string) => void;
   projects: IProject[] | undefined;
   values: string[];
+  disableClearOption?: boolean;
 };
 
 export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, projects, values } = props;
+  const { handleRemove, projects, values, disableClearOption } = props;
 
   return (
     <>
@@ -34,13 +35,15 @@ export const AppliedProjectFilters: React.FC<Props> = observer((props) => {
               </span>
             )}
             <span className="normal-case">{projectDetails.name}</span>
-            <button
-              type="button"
-              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-              onClick={() => handleRemove(projectId)}
-            >
-              <X size={10} strokeWidth={2} />
-            </button>
+            {!disableClearOption && (
+              <button
+                type="button"
+                className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+                onClick={() => handleRemove(projectId)}
+              >
+                <X size={10} strokeWidth={2} />
+              </button>
+            )}
           </div>
         );
       })}

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/global-view-root.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
 
@@ -9,10 +10,16 @@ import { AppliedFiltersList } from "components/issues";
 import { IIssueFilterOptions } from "types";
 import { EFilterType } from "store/issues/types";
 
-export const GlobalViewsAppliedFiltersRoot = observer(() => {
+type Props = {
+  disableClearFilterOptions?: (keyof IIssueFilterOptions)[];
+};
+
+export const GlobalViewsAppliedFiltersRoot: React.FC<Props> = observer((props) => {
+  const { disableClearFilterOptions } = props;
+  // router
   const router = useRouter();
   const { workspaceSlug } = router.query as { workspaceSlug: string; globalViewId: string };
-
+  // mobx store
   const {
     project: { workspaceProjects },
     workspace: { workspaceLabels },
@@ -83,6 +90,7 @@ export const GlobalViewsAppliedFiltersRoot = observer(() => {
         appliedFilters={appliedFilters ?? {}}
         handleClearAllFilters={handleClearAllFilters}
         handleRemoveFilter={handleRemoveFilter}
+        disableClearFilterOptions={disableClearFilterOptions}
       />
 
       {/* {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data.filters ?? {}) && (

diff --git a/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx b/web/components/issues/issue-layouts/filters/applied-filters/state-group.tsx
@@ -8,24 +8,27 @@ import { TStateGroups } from "types";
 type Props = {
   handleRemove: (val: string) => void;
   values: string[];
+  disableClearOption?: boolean;
 };
 
 export const AppliedStateGroupFilters: React.FC<Props> = observer((props) => {
-  const { handleRemove, values } = props;
+  const { handleRemove, values, disableClearOption } = props;
 
   return (
     <>
       {values.map((stateGroup) => (
         <div key={stateGroup} className="flex items-center gap-1 rounded bg-custom-background-80 p-1 text-xs">
           <StateGroupIcon stateGroup={stateGroup as TStateGroups} height="12px" width="12px" />
           {stateGroup}
-          <button
-            type="button"
-            className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
-            onClick={() => handleRemove(stateGroup)}
-          >
-            <X size={10} strokeWidth={2} />
-          </button>
+          {!disableClearOption && (
+            <button
+              type="button"
+              className="grid place-items-center text-custom-text-300 hover:text-custom-text-200"
+              onClick={() => handleRemove(stateGroup)}
+            >
+              <X size={10} strokeWidth={2} />
+            </button>
+          )}
         </div>
       ))}
     </>