From af51992eba84765d82d102ae0d63006263995903 Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 3 Jul 2024 15:43:22 +0530 Subject: [PATCH] [WEB-1715] chore: issue filters indicator enhancement (#5027) * chore: isIssueFilterActive helper function added * chore: isIssueFilterActive implementation * chore: code refactor --- .../(projects)/profile/[userId]/mobile-header.tsx | 6 ++---- .../[projectId]/cycles/(detail)/header.tsx | 9 ++++++--- .../[projectId]/cycles/(detail)/mobile-header.tsx | 14 +++++++++----- .../(detail)/[projectId]/draft-issues/header.tsx | 6 ++---- .../(detail)/[projectId]/issues/(list)/header.tsx | 5 ++--- .../[projectId]/issues/(list)/mobile-header.tsx | 14 +++++++++----- .../[projectId]/modules/(detail)/header.tsx | 9 ++++++--- .../modules/(detail)/mobile-header.tsx | 14 +++++++++----- .../views/(detail)/[viewId]/header.tsx | 6 ++---- .../(projects)/workspace-views/header.tsx | 9 ++++++--- .../components/issues/archived-issues-header.tsx | 6 ++---- .../components/profile/profile-issues-filter.tsx | 13 ++++++++----- web/helpers/filter.helper.ts | 15 +++++++++++++++ 13 files changed, 78 insertions(+), 48 deletions(-) diff --git a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx index 2855cc129..f29e6ff28 100644 --- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx +++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx @@ -20,7 +20,7 @@ import { ISSUE_LAYOUTS, } from "@/constants/issue"; // helpers -import { calculateTotalFilters } from "@/helpers/filter.helper"; +import { isIssueFilterActive } from "@/helpers/filter.helper"; // hooks import { useIssues, useLabel } from "@/hooks/store"; @@ -108,8 +108,6 @@ export const ProfileIssuesMobileHeader = observer(() => { [workspaceSlug, updateFilters, userId] ); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return (
{ } - isFiltersApplied={isFiltersApplied} + isFiltersApplied={isIssueFilterActive(issueFilters)} > { const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; const issuesCount = getGroupIssueCount(undefined, undefined, false); return ( @@ -248,7 +247,11 @@ export const CycleIssuesHeader: React.FC = observer(() => { onChange={(layout) => handleLayoutChange(layout)} selectedLayout={activeLayout} /> - + { [workspaceSlug, projectId, cycleId, updateFilters] ); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return ( <> { } - isFiltersApplied={isFiltersApplied} + isFiltersApplied={isIssueFilterActive(issueFilters)} > { : currentProjectDetails.draft_issues : undefined; - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return (
@@ -140,7 +138,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => { onChange={(layout) => handleLayoutChange(layout)} selectedLayout={activeLayout} /> - + { const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; const issuesCount = getGroupIssueCount(undefined, undefined, false); return ( @@ -193,7 +192,7 @@ export const ProjectIssuesHeader = observer(() => { onChange={(layout) => handleLayoutChange(layout)} selectedLayout={activeLayout} /> - + { [workspaceSlug, projectId, updateFilters] ); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return ( <> { } - isFiltersApplied={isFiltersApplied} + isFiltersApplied={isIssueFilterActive(issueFilters)} > { const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; const issuesCount = getGroupIssueCount(undefined, undefined, false); return ( @@ -249,7 +248,11 @@ export const ModuleIssuesHeader: React.FC = observer(() => { onChange={(layout) => handleLayoutChange(layout)} selectedLayout={activeLayout} /> - + { [workspaceSlug, projectId, moduleId, updateFilters] ); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return (
{ } - isFiltersApplied={isFiltersApplied} + isFiltersApplied={isIssueFilterActive(issueFilters)} > { const canUserCreateIssue = currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return (
@@ -233,7 +231,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => { title="Filters" placement="bottom-end" disabled={!canUserCreateIssue} - isFiltersApplied={isFiltersApplied} + isFiltersApplied={isIssueFilterActive(issueFilters)} > { const isAuthorizedUser = !!currentWorkspaceRole && currentWorkspaceRole >= EUserWorkspaceRoles.MEMBER; - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; const isLocked = viewDetails?.is_locked; return ( @@ -118,7 +117,11 @@ export const GlobalIssuesHeader = observer(() => {
{!isLocked && ( <> - + { updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property); }; - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return (
@@ -72,7 +70,7 @@ export const ArchivedIssuesHeader: FC = observer(() => {
{/* filter options */}
- + { [workspaceSlug, updateFilters, userId] ); - const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0; - return (
{ selectedLayout={activeLayout} /> - + { return false; }; + +/** + * @description checks if the issue filter is active + * @param {IIssueFilters} issueFilters + * @returns {boolean} + */ +export const isIssueFilterActive = (issueFilters: IIssueFilters | undefined): boolean => { + if (!issueFilters) return false; + + const issueType = issueFilters?.displayFilters?.type; + const isFiltersApplied = calculateTotalFilters(issueFilters?.filters ?? {}) !== 0 || !!issueType; + + return isFiltersApplied; +};