From deaa63488b00e4729e083aadd13036bdc4e3a5af Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Wed, 24 Apr 2024 15:18:13 +0530 Subject: [PATCH] chore: project date filter updated (#4273) --- web/components/headers/projects.tsx | 13 ++++++++----- .../project/applied-filters/date.tsx | 4 ++-- .../project/dropdowns/filters/created-at.tsx | 18 +++++++++++------- web/constants/filters.ts | 19 +++++++++++++++++++ web/helpers/filter.helper.ts | 8 ++++++++ 5 files changed, 48 insertions(+), 14 deletions(-) diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx index 267dad581..4b01c21c1 100644 --- a/web/components/headers/projects.tsx +++ b/web/components/headers/projects.tsx @@ -51,16 +51,19 @@ export const ProjectsHeader = observer(() => { const handleFilters = useCallback( (key: keyof TProjectFilters, value: string | string[]) => { if (!workspaceSlug) return; - const newValues = filters?.[key] ?? []; - - if (Array.isArray(value)) + let newValues = filters?.[key] ?? []; + if (Array.isArray(value)) { + if (key === "created_at" && newValues.find((v) => v.includes("custom"))) newValues = []; value.forEach((val) => { if (!newValues.includes(val)) newValues.push(val); else newValues.splice(newValues.indexOf(val), 1); }); - else { + } else { if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1); - else newValues.push(value); + else { + if (key === "created_at") newValues = [value]; + else newValues.push(value); + } } updateFilters(workspaceSlug, { [key]: newValues }); diff --git a/web/components/project/applied-filters/date.tsx b/web/components/project/applied-filters/date.tsx index d3930a52c..54fea5864 100644 --- a/web/components/project/applied-filters/date.tsx +++ b/web/components/project/applied-filters/date.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react-lite"; import { X } from "lucide-react"; // helpers -import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters"; +import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@/constants/filters"; import { renderFormattedDate } from "@/helpers/date-time.helper"; import { capitalizeFirstLetter } from "@/helpers/string.helper"; // constants @@ -18,7 +18,7 @@ export const AppliedDateFilters: React.FC = observer((props) => { const getDateLabel = (value: string): string => { let dateLabel = ""; - const dateDetails = DATE_BEFORE_FILTER_OPTIONS.find((d) => d.value === value); + const dateDetails = PROJECT_CREATED_AT_FILTER_OPTIONS.find((d) => d.value === value); if (dateDetails) dateLabel = dateDetails.name; else { diff --git a/web/components/project/dropdowns/filters/created-at.tsx b/web/components/project/dropdowns/filters/created-at.tsx index 731bfa844..c82d17496 100644 --- a/web/components/project/dropdowns/filters/created-at.tsx +++ b/web/components/project/dropdowns/filters/created-at.tsx @@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite"; import { DateFilterModal } from "@/components/core"; import { FilterHeader, FilterOption } from "@/components/issues"; // constants -import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters"; +import { PROJECT_CREATED_AT_FILTER_OPTIONS } from "@/constants/filters"; // helpers import { isInDateFormat } from "@/helpers/date-time.helper"; @@ -16,13 +16,12 @@ type Props = { export const FilterCreatedDate: React.FC = observer((props) => { const { appliedFilters, handleUpdate, searchQuery } = props; - + // state const [previewEnabled, setPreviewEnabled] = useState(true); const [isDateFilterModalOpen, setIsDateFilterModalOpen] = useState(false); - + // derived values const appliedFiltersCount = appliedFilters?.length ?? 0; - - const filteredOptions = DATE_BEFORE_FILTER_OPTIONS.filter((d) => + const filteredOptions = PROJECT_CREATED_AT_FILTER_OPTIONS.filter((d) => d.name.toLowerCase().includes(searchQuery.toLowerCase()) ); @@ -62,10 +61,15 @@ export const FilterCreatedDate: React.FC = observer((props) => { isChecked={appliedFilters?.includes(option.value) ? true : false} onClick={() => handleUpdate(option.value)} title={option.name} - multiple + multiple={false} /> ))} - + ) : (

No matches found

diff --git a/web/constants/filters.ts b/web/constants/filters.ts index 6ac961bb9..98189bc78 100644 --- a/web/constants/filters.ts +++ b/web/constants/filters.ts @@ -31,3 +31,22 @@ export const DATE_BEFORE_FILTER_OPTIONS = [ value: "1_months;before;fromnow", }, ]; + +export const PROJECT_CREATED_AT_FILTER_OPTIONS = [ + { + name: "Today", + value: "today;custom;custom", + }, + { + name: "Yesterday", + value: "yesterday;custom;custom", + }, + { + name: "Last 7 days", + value: "last_7_days;custom;custom", + }, + { + name: "Last 30 days", + value: "last_30_days;custom;custom", + }, +]; diff --git a/web/helpers/filter.helper.ts b/web/helpers/filter.helper.ts index 433a69085..c204f00be 100644 --- a/web/helpers/filter.helper.ts +++ b/web/helpers/filter.helper.ts @@ -36,6 +36,14 @@ export const satisfiesDateFilter = (date: Date, filter: string): boolean => { const [value, operator, from] = filter.split(";"); const dateValue = getDate(value); + + if (operator === "custom" && from === "custom") { + if (value === "today") return differenceInCalendarDays(date, new Date()) === 0; + if (value === "yesterday") return differenceInCalendarDays(date, new Date()) === -1; + if (value === "last_7_days") return differenceInCalendarDays(date, new Date()) >= -7; + if (value === "last_30_days") return differenceInCalendarDays(date, new Date()) >= -30; + } + if (!from && dateValue) { if (operator === "after") return date >= dateValue; if (operator === "before") return date <= dateValue;