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