From 0d70960e4eb81e9a15d8cbb199101d893164beae Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Wed, 17 Apr 2024 20:32:25 +0530 Subject: [PATCH] [WEB-1026] chore: clear search query on project change (#4225) * chore: clear search query on project change * fix: project query search --- web/components/cycles/quick-actions.tsx | 15 ++- web/components/headers/projects.tsx | 87 +++++++------- .../inbox/inbox-filter/sorting/order-by.tsx | 2 +- web/components/modules/dropdowns/order-by.tsx | 2 +- web/components/modules/modules-list-view.tsx | 109 +++++++++--------- web/components/modules/quick-actions.tsx | 15 ++- web/components/pages/list/order-by.tsx | 2 +- web/components/project/dropdowns/order-by.tsx | 2 +- web/store/cycle_filter.store.ts | 1 + web/store/module_filter.store.ts | 1 + web/store/pages/project-page.store.ts | 12 +- web/store/project/project_filter.store.ts | 1 + 12 files changed, 125 insertions(+), 124 deletions(-) diff --git a/web/components/cycles/quick-actions.tsx b/web/components/cycles/quick-actions.tsx index 33a7df836..9ba012cc4 100644 --- a/web/components/cycles/quick-actions.tsx +++ b/web/components/cycles/quick-actions.tsx @@ -168,15 +168,14 @@ export const CycleQuickActions: React.FC = observer((props) => { )} +
{!isCompleted && isEditingAllowed && ( -
- - - - Delete cycle - - -
+ + + + Delete cycle + + )} diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx index 64c370d17..267dad581 100644 --- a/web/components/headers/projects.tsx +++ b/web/components/headers/projects.tsx @@ -13,7 +13,7 @@ import { FiltersDropdown } from "@/components/issues"; import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project"; import { EUserWorkspaceRoles } from "@/constants/workspace"; import { cn } from "@/helpers/common.helper"; -import { useApplication, useEventTracker, useMember, useProject, useProjectFilter, useUser } from "@/hooks/store"; +import { useApplication, useEventTracker, useMember, useProjectFilter, useUser } from "@/hooks/store"; import useOutsideClickDetector from "@/hooks/use-outside-click-detector"; export const ProjectsHeader = observer(() => { @@ -30,7 +30,6 @@ export const ProjectsHeader = observer(() => { const { membership: { currentWorkspaceRole }, } = useUser(); - const { workspaceProjectIds } = useProject(); const { currentWorkspaceDisplayFilters: displayFilters, currentWorkspaceFilters: filters, @@ -89,52 +88,50 @@ export const ProjectsHeader = observer(() => {
- {workspaceProjectIds && workspaceProjectIds?.length > 0 && ( -
- {!isSearchOpen && ( - - )} -
+ {!isSearchOpen && ( + - )} -
+ + )} +
+ + updateSearchQuery(e.target.value)} + onKeyDown={handleInputKeyDown} + /> + {isSearchOpen && ( + + )}
- )} +
{ diff --git a/web/components/inbox/inbox-filter/sorting/order-by.tsx b/web/components/inbox/inbox-filter/sorting/order-by.tsx index c01c9977e..4eb9dde22 100644 --- a/web/components/inbox/inbox-filter/sorting/order-by.tsx +++ b/web/components/inbox/inbox-filter/sorting/order-by.tsx @@ -42,7 +42,7 @@ export const InboxIssueOrderByDropdown: FC = observer(() => { {inboxSorting?.order_by?.includes(option.key) && } ))} -
+
{INBOX_ISSUE_SORT_BY_OPTIONS.map((option) => ( = (props) => { {value?.includes(option.key) && } ))} -
+
{ diff --git a/web/components/modules/modules-list-view.tsx b/web/components/modules/modules-list-view.tsx index b0ff67609..82d63fdcc 100644 --- a/web/components/modules/modules-list-view.tsx +++ b/web/components/modules/modules-list-view.tsx @@ -1,16 +1,13 @@ import { observer } from "mobx-react-lite"; import Image from "next/image"; import { useRouter } from "next/router"; -// hooks // components import { EmptyState } from "@/components/empty-state"; import { ModuleCardItem, ModuleListItem, ModulePeekOverview, ModulesListGanttChartView } from "@/components/modules"; -// ui import { CycleModuleBoardLayout, CycleModuleListLayout, GanttLayoutLoader } from "@/components/ui"; -// assets // constants import { EmptyStateType } from "@/constants/empty-state"; -import { calculateTotalFilters } from "@/helpers/filter.helper"; +// hooks import { useApplication, useEventTracker, useModule, useModuleFilter } from "@/hooks/store"; import AllFiltersImage from "public/empty-state/module/all-filters.svg"; import NameFilterImage from "public/empty-state/module/name-filter.svg"; @@ -22,14 +19,13 @@ export const ModulesListView: React.FC = observer(() => { // store hooks const { commandPalette: commandPaletteStore } = useApplication(); const { setTrackElement } = useEventTracker(); - const { getFilteredModuleIds, loader } = useModule(); - const { currentProjectDisplayFilters: displayFilters, searchQuery, currentProjectFilters } = useModuleFilter(); + const { getProjectModuleIds, getFilteredModuleIds, loader } = useModule(); + const { currentProjectDisplayFilters: displayFilters, searchQuery } = useModuleFilter(); // derived values + const projectModuleIds = projectId ? getProjectModuleIds(projectId.toString()) : undefined; const filteredModuleIds = projectId ? getFilteredModuleIds(projectId.toString()) : undefined; - const totalFilters = calculateTotalFilters(currentProjectFilters ?? {}); - - if (loader || !filteredModuleIds) + if (loader || !projectModuleIds || !filteredModuleIds) return ( <> {displayFilters?.layout === "list" && } @@ -38,7 +34,18 @@ export const ModulesListView: React.FC = observer(() => { ); - if (totalFilters > 0 && filteredModuleIds.length === 0) + if (projectModuleIds.length === 0) + return ( + { + setTrackElement("Module empty state"); + commandPaletteStore.toggleCreateModuleModal(true); + }} + /> + ); + + if (filteredModuleIds.length === 0) return (
@@ -59,55 +66,43 @@ export const ModulesListView: React.FC = observer(() => { return ( <> - {filteredModuleIds.length > 0 ? ( - <> - {displayFilters?.layout === "list" && ( -
-
-
- {filteredModuleIds.map((moduleId) => ( - - ))} -
- -
+ {displayFilters?.layout === "list" && ( +
+
+
+ {filteredModuleIds.map((moduleId) => ( + + ))}
- )} - {displayFilters?.layout === "board" && ( -
-
-
- {filteredModuleIds.map((moduleId) => ( - - ))} -
- -
-
- )} - {displayFilters?.layout === "gantt" && } - - ) : ( - { - setTrackElement("Module empty state"); - commandPaletteStore.toggleCreateModuleModal(true); - }} - /> + +
+
)} + {displayFilters?.layout === "board" && ( +
+
+
+ {filteredModuleIds.map((moduleId) => ( + + ))} +
+ +
+
+ )} + {displayFilters?.layout === "gantt" && } ); }); diff --git a/web/components/modules/quick-actions.tsx b/web/components/modules/quick-actions.tsx index a6938c10a..a1805937e 100644 --- a/web/components/modules/quick-actions.tsx +++ b/web/components/modules/quick-actions.tsx @@ -163,15 +163,14 @@ export const ModuleQuickActions: React.FC = observer((props) => { )} +
{isEditingAllowed && ( -
- - - - Delete module - - -
+ + + + Delete module + + )} diff --git a/web/components/pages/list/order-by.tsx b/web/components/pages/list/order-by.tsx index 5055b68e8..493e5c06e 100644 --- a/web/components/pages/list/order-by.tsx +++ b/web/components/pages/list/order-by.tsx @@ -47,7 +47,7 @@ export const PageOrderByDropdown: React.FC = (props) => { {sortKey === option.key && } ))} -
+
{ diff --git a/web/components/project/dropdowns/order-by.tsx b/web/components/project/dropdowns/order-by.tsx index 048513d08..c2bf1a87b 100644 --- a/web/components/project/dropdowns/order-by.tsx +++ b/web/components/project/dropdowns/order-by.tsx @@ -49,7 +49,7 @@ export const ProjectOrderByDropdown: React.FC = (props) => { {value?.includes(option.key) && } ))} -
+
{ diff --git a/web/store/cycle_filter.store.ts b/web/store/cycle_filter.store.ts index 182ab0251..ce899cbf3 100644 --- a/web/store/cycle_filter.store.ts +++ b/web/store/cycle_filter.store.ts @@ -63,6 +63,7 @@ export class CycleFilterStore implements ICycleFilterStore { (projectId) => { if (!projectId) return; this.initProjectCycleFilters(projectId); + this.searchQuery = ""; } ); } diff --git a/web/store/module_filter.store.ts b/web/store/module_filter.store.ts index 5b46e1732..8d9315671 100644 --- a/web/store/module_filter.store.ts +++ b/web/store/module_filter.store.ts @@ -63,6 +63,7 @@ export class ModuleFilterStore implements IModuleFilterStore { (projectId) => { if (!projectId) return; this.initProjectModuleFilters(projectId); + this.searchQuery = ""; } ); } diff --git a/web/store/pages/project-page.store.ts b/web/store/pages/project-page.store.ts index a9572e7d8..628b931c4 100644 --- a/web/store/pages/project-page.store.ts +++ b/web/store/pages/project-page.store.ts @@ -1,6 +1,6 @@ import set from "lodash/set"; import unset from "lodash/unset"; -import { makeObservable, observable, runInAction, action } from "mobx"; +import { makeObservable, observable, runInAction, action, reaction } from "mobx"; import { computedFn } from "mobx-utils"; // types import { TPage, TPageFilters, TPageNavigationTabs } from "@plane/types"; @@ -64,8 +64,16 @@ export class ProjectPageStore implements IProjectPageStore { createPage: action, removePage: action, }); - + // service this.service = new PageService(); + // initialize display filters of the current project + reaction( + () => this.store.app.router.projectId, + (projectId) => { + if (!projectId) return; + this.filters.searchQuery = ""; + } + ); } /** diff --git a/web/store/project/project_filter.store.ts b/web/store/project/project_filter.store.ts index 94d5f7073..297c31cad 100644 --- a/web/store/project/project_filter.store.ts +++ b/web/store/project/project_filter.store.ts @@ -59,6 +59,7 @@ export class ProjectFilterStore implements IProjectFilterStore { (workspaceSlug) => { if (!workspaceSlug) return; this.initWorkspaceFilters(workspaceSlug); + this.searchQuery = ""; } ); }