diff --git a/web/components/workspace/views/form.tsx b/web/components/workspace/views/form.tsx index ce04b2f2d..71627c08a 100644 --- a/web/components/workspace/views/form.tsx +++ b/web/components/workspace/views/form.tsx @@ -8,7 +8,7 @@ import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components // ui import { Button, Input, TextArea } from "@plane/ui"; // types -import { IWorkspaceView } from "@plane/types"; +import { IIssueFilterOptions, IWorkspaceView } from "@plane/types"; // constants import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "constants/issue"; @@ -39,7 +39,7 @@ export const WorkspaceViewForm: React.FC = observer((props) => { reset, setValue, watch, - } = useForm({ + } = useForm({ defaultValues, }); @@ -59,7 +59,35 @@ export const WorkspaceViewForm: React.FC = observer((props) => { }); }, [data, preLoadedData, reset]); - const selectedFilters = watch("filters"); + const selectedFilters: IIssueFilterOptions = watch("filters"); + + // filters whose value not null or empty array + let appliedFilters: IIssueFilterOptions | undefined = undefined; + Object.entries(selectedFilters ?? {}).forEach(([key, value]) => { + if (!value) return; + if (Array.isArray(value) && value.length === 0) return; + if (!appliedFilters) appliedFilters = {}; + appliedFilters[key as keyof IIssueFilterOptions] = value; + }); + + const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => { + // To clear all filters of any particular filter key. + if (!value) { + setValue("filters", { + ...selectedFilters, + [key]: [], + }); + return; + } + + let newValues = selectedFilters?.[key] ?? []; + newValues = newValues.filter((val) => val !== value); + + setValue("filters", { + ...selectedFilters, + [key]: newValues, + }); + }; const clearAllFilters = () => { if (!selectedFilters) return; @@ -151,11 +179,12 @@ export const WorkspaceViewForm: React.FC = observer((props) => { {selectedFilters && Object.keys(selectedFilters).length > 0 && (
{}} + handleRemoveFilter={handleRemoveFilter} labels={workspaceLabels ?? undefined} states={undefined} + alwaysAllowEditing />
)}