From 5c7886d7f3e98261072aa75c1eede2507decf663 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 22 Mar 2024 18:38:39 +0530
Subject: [PATCH] [WEB-811] chore: filter dropdown custom date select
 improvement (#4043)

* fix: handled custom start_date and target_date custom filter in project-issues

* chore: filter dropdown improvement

---------

Co-authored-by: gurusainath <gurusainath007@gmail.com>
---
 web/components/headers/cycle-issues.tsx             |  6 +++++-
 web/components/headers/global-issues.tsx            |  2 ++
 web/components/headers/module-issues.tsx            |  6 +++++-
 web/components/headers/project-draft-issues.tsx     |  2 ++
 web/components/headers/project-issues.tsx           |  2 ++
 web/components/headers/project-view-issues.tsx      |  2 ++
 .../filters/header/filters/start-date.tsx           | 13 ++++++++++++-
 .../filters/header/filters/target-date.tsx          | 13 ++++++++++++-
 web/components/issues/issues-mobile-header.tsx      |  2 ++
 web/components/modules/module-mobile-header.tsx     |  2 ++
 web/components/profile/profile-issues-filter.tsx    |  2 ++
 11 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 4c66aabc7..35a646c1c 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -109,8 +109,10 @@ export const CycleIssuesHeader: React.FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -224,7 +226,9 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                     className="ml-1.5 flex-shrink-0 truncate"
                     placement="bottom-start"
                   >
-                    {currentProjectCycleIds?.map((cycleId) => <CycleDropdownOption key={cycleId} cycleId={cycleId} />)}
+                    {currentProjectCycleIds?.map((cycleId) => (
+                      <CycleDropdownOption key={cycleId} cycleId={cycleId} />
+                    ))}
                   </CustomMenu>
                 }
               />
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 3fe24804b..2d58d9b16 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -56,8 +56,10 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 7cbaf1efc..59cc2a429 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -110,8 +110,10 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
@@ -225,7 +227,9 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                     className="ml-1.5 flex-shrink-0"
                     placement="bottom-start"
                   >
-                    {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
+                    {projectModuleIds?.map((moduleId) => (
+                      <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
+                    ))}
                   </CustomMenu>
                 }
               />
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index ab79b3b1f..bdfaebc8d 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -38,8 +38,10 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index b3dd77826..7c018d5c2 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -60,8 +60,10 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index deab59796..6f545f25b 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -74,8 +74,10 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
index 2b55ada35..b1c68aaed 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/start-date.tsx
@@ -25,6 +25,17 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isCustomFateApplied = appliedFilters?.filter((f) => f.includes("-")) || [];
+    return isCustomFateApplied.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -53,7 +64,7 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
index e46e52a41..f696e66cf 100644
--- a/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/target-date.tsx
@@ -25,6 +25,17 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
     d.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  const isCustomDateSelected = () => {
+    const isCustomFateApplied = appliedFilters?.filter((f) => f.includes("-")) || [];
+    return isCustomFateApplied.length > 0 ? true : false;
+  };
+  const handleCustomDate = () => {
+    if (isCustomDateSelected()) {
+      const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
+      handleUpdate(updateAppliedFilters);
+    } else setIsDateFilterModalOpen(true);
+  };
+
   return (
     <>
       {isDateFilterModalOpen && (
@@ -53,7 +64,7 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
                   multiple
                 />
               ))}
-              <FilterOption isChecked={false} onClick={() => setIsDateFilterModalOpen(true)} title="Custom" multiple />
+              <FilterOption isChecked={isCustomDateSelected()} onClick={handleCustomDate} title="Custom" multiple />
             </>
           ) : (
             <p className="text-xs italic text-custom-text-400">No matches found</p>
diff --git a/web/components/issues/issues-mobile-header.tsx b/web/components/issues/issues-mobile-header.tsx
index 0293380ce..4bc90b686 100644
--- a/web/components/issues/issues-mobile-header.tsx
+++ b/web/components/issues/issues-mobile-header.tsx
@@ -52,8 +52,10 @@ export const IssuesMobileHeader = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/modules/module-mobile-header.tsx b/web/components/modules/module-mobile-header.tsx
index 8e632dac8..6419b13b0 100644
--- a/web/components/modules/module-mobile-header.tsx
+++ b/web/components/modules/module-mobile-header.tsx
@@ -54,8 +54,10 @@ export const ModuleMobileHeader = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);
diff --git a/web/components/profile/profile-issues-filter.tsx b/web/components/profile/profile-issues-filter.tsx
index fe2c004ba..1a7d8cfb0 100644
--- a/web/components/profile/profile-issues-filter.tsx
+++ b/web/components/profile/profile-issues-filter.tsx
@@ -44,8 +44,10 @@ export const ProfileIssuesFilter = observer(() => {
       const newValues = issueFilters?.filters?.[key] ?? [];
 
       if (Array.isArray(value)) {
+        // this validation is majorly for the filter start_date, target_date custom
         value.forEach((val) => {
           if (!newValues.includes(val)) newValues.push(val);
+          else newValues.splice(newValues.indexOf(val), 1);
         });
       } else {
         if (issueFilters?.filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);