github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: filter custom date select toggle (#4244)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-04-23 12:56:21 +05:30 committed by GitHub
parent 5d8c5b22e8
commit beff8536c9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 79 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/cycles/archived-cycles/header.tsx
View File

@ -34,12 +34,12 @@ export const ArchivedCyclesHeader: FC = observer(() => {
const handleFilters = useCallback(
(key: keyof TCycleFilters, value: string | string[]) => {
if (!projectId) return;
const newValues = currentProjectArchivedFilters?.[key] ?? [];
if (Array.isArray(value))
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
else {
if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);

2
web/components/cycles/cycles-view-header.tsx
View File

@ -47,11 +47,13 @@ export const CyclesViewHeader: React.FC<Props> = observer((props) => {
const handleFilters = useCallback(
(key: keyof TCycleFilters, value: string | string[]) => {
if (!projectId) return;
const newValues = currentProjectFilters?.[key] ?? [];
if (Array.isArray(value))
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
else {
if (currentProjectFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);

15
web/components/cycles/dropdowns/filters/end-date.tsx
View File

@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
import { FilterHeader, FilterOption } from "@/components/issues";
// constants
import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
// helpers
import { isInDateFormat } from "@/helpers/date-time.helper";
type Props = {
appliedFilters: string[] | null;
@ -25,6 +27,17 @@ export const FilterEndDate: React.FC<Props> = observer((props) => {
d.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const isCustomDateSelected = () => {
const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
return isValidDateSelected.length > 0 ? true : false;
};
const handleCustomDate = () => {
if (isCustomDateSelected()) {
const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
handleUpdate(updateAppliedFilters);
} else setIsDateFilterModalOpen(true);
};
return (
<>
{isDateFilterModalOpen && (
@ -53,7 +66,7 @@ export const FilterEndDate: 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>

15
web/components/cycles/dropdowns/filters/start-date.tsx
View File

@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
import { FilterHeader, FilterOption } from "@/components/issues";
// constants
import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
// helpers
import { isInDateFormat } from "@/helpers/date-time.helper";
type Props = {
appliedFilters: string[] | null;
@ -25,6 +27,17 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
d.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const isCustomDateSelected = () => {
const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
return isValidDateSelected.length > 0 ? true : false;
};
const handleCustomDate = () => {
if (isCustomDateSelected()) {
const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
handleUpdate(updateAppliedFilters);
} else setIsDateFilterModalOpen(true);
};
return (
<>
{isDateFilterModalOpen && (
@ -53,7 +66,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>

1
web/components/headers/modules-list.tsx
View File

@ -62,6 +62,7 @@ export const ModulesListHeader: React.FC = observer(() => {
if (Array.isArray(value))
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
else {
if (filters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);

2
web/components/modules/archived-modules/header.tsx
View File

@ -43,12 +43,12 @@ export const ArchivedModulesHeader: FC = observer(() => {
const handleFilters = useCallback(
(key: keyof TModuleFilters, value: string | string[]) => {
if (!projectId) return;
const newValues = currentProjectArchivedFilters?.[key] ?? [];
if (Array.isArray(value))
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
else {
if (currentProjectArchivedFilters?.[key]?.includes(value)) newValues.splice(newValues.indexOf(value), 1);

15
web/components/modules/dropdowns/filters/start-date.tsx
View File

@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
import { FilterHeader, FilterOption } from "@/components/issues";
// constants
import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
// helpers
import { isInDateFormat } from "@/helpers/date-time.helper";
type Props = {
appliedFilters: string[] | null;
@ -25,6 +27,17 @@ export const FilterStartDate: React.FC<Props> = observer((props) => {
d.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const isCustomDateSelected = () => {
const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
return isValidDateSelected.length > 0 ? true : false;
};
const handleCustomDate = () => {
if (isCustomDateSelected()) {
const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
handleUpdate(updateAppliedFilters);
} else setIsDateFilterModalOpen(true);
};
return (
<>
{isDateFilterModalOpen && (
@ -53,7 +66,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>

15
web/components/modules/dropdowns/filters/target-date.tsx
View File

@ -6,6 +6,8 @@ import { DateFilterModal } from "@/components/core";
import { FilterHeader, FilterOption } from "@/components/issues";
// constants
import { DATE_AFTER_FILTER_OPTIONS } from "@/constants/filters";
// helpers
import { isInDateFormat } from "@/helpers/date-time.helper";
type Props = {
appliedFilters: string[] | null;
@ -25,6 +27,17 @@ export const FilterTargetDate: React.FC<Props> = observer((props) => {
d.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const isCustomDateSelected = () => {
const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
return isValidDateSelected.length > 0 ? true : false;
};
const handleCustomDate = () => {
if (isCustomDateSelected()) {
const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
handleUpdate(updateAppliedFilters);
} else setIsDateFilterModalOpen(true);
};
return (
<>
{isDateFilterModalOpen && (
@ -53,7 +66,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>

15
web/components/pages/list/filters/created-at.tsx
View File

@ -5,6 +5,8 @@ import { DateFilterModal } from "@/components/core";
import { FilterHeader, FilterOption } from "@/components/issues";
// constants
import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
// helpers
import { isInDateFormat } from "@/helpers/date-time.helper";
type Props = {
appliedFilters: string[] | null;
@ -24,6 +26,17 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
d.name.toLowerCase().includes(searchQuery.toLowerCase())
);
const isCustomDateSelected = () => {
const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
return isValidDateSelected.length > 0 ? true : false;
};
const handleCustomDate = () => {
if (isCustomDateSelected()) {
const updateAppliedFilters = appliedFilters?.filter((f) => f.includes("-")) || [];
handleUpdate(updateAppliedFilters);
} else setIsDateFilterModalOpen(true);
};
return (
<>
{isDateFilterModalOpen && (
@ -52,7 +65,7 @@ export const FilterCreatedDate: 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>

1
web/components/pages/list/filters/root.tsx
View File

@ -27,6 +27,7 @@ export const PageFiltersSelection: React.FC<Props> = observer((props) => {
if (Array.isArray(value))
value.forEach((val) => {
if (!newValues.includes(val)) newValues.push(val);
else newValues.splice(newValues.indexOf(val), 1);
});
else if (typeof value === "string") {
if (newValues?.includes(value)) newValues.splice(newValues.indexOf(value), 1);

4
web/components/project/dropdowns/filters/created-at.tsx
View File

@ -6,7 +6,7 @@ import { FilterHeader, FilterOption } from "@/components/issues";
// constants
import { DATE_BEFORE_FILTER_OPTIONS } from "@/constants/filters";
// helpers
import { isDate } from "@/helpers/date-time.helper";
import { isInDateFormat } from "@/helpers/date-time.helper";
type Props = {
appliedFilters: string[] | null;
@ -27,7 +27,7 @@ export const FilterCreatedDate: React.FC<Props> = observer((props) => {
);
const isCustomDateSelected = () => {
const isValidDateSelected = appliedFilters?.filter((f) => isDate(f.split(";")[0])) || [];
const isValidDateSelected = appliedFilters?.filter((f) => isInDateFormat(f.split(";")[0])) || [];
return isValidDateSelected.length > 0 ? true : false;
};
const handleCustomDate = () => {

2
web/helpers/date-time.helper.ts
View File

@ -224,7 +224,7 @@ export const getDate = (date: string | Date | undefined | null): Date | undefine
return undefined;
}
};
export const isDate = (date: string) => {
export const isInDateFormat = (date: string) => {
const datePattern = /^\d{4}-\d{2}-\d{2}$/;
return datePattern.test(date);
};