[WEB-1319] fix: handled issue filters mutation and updated the useParams with useSearchParams (#4473)
* chore: updated issue filters in space * chore: persisting the query params even when we switch layouts --------- Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
This commit is contained in:
guru_sainath
GitHub
parent
8ecc461fb1
commit
2bf2e98b00
37 changed files with 594 additions and 493 deletions
|
|
@ -3,49 +3,48 @@
|
|||
import { useEffect, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useParams, useSearchParams, usePathname } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
import { useRouter, useSearchParams, usePathname } from "next/navigation";
|
||||
// ui
|
||||
import { Avatar, Button } from "@plane/ui";
|
||||
// components
|
||||
import { IssueFiltersDropdown } from "@/components/issues/filters";
|
||||
import { NavbarIssueBoardView } from "@/components/issues/navbar/issue-board-view";
|
||||
import { NavbarTheme } from "@/components/issues/navbar/theme";
|
||||
// hooks
|
||||
import { useProject, useUser, useIssueFilter } from "@/hooks/store";
|
||||
import { useProject, useUser, useIssueFilter, useIssueDetails } from "@/hooks/store";
|
||||
// types
|
||||
import { TIssueBoardKeys } from "@/types/issue";
|
||||
// components
|
||||
import { NavbarIssueBoardView } from "./issue-board-view";
|
||||
import { NavbarTheme } from "./theme";
|
||||
import { TIssueLayout } from "@/types/issue";
|
||||
|
||||
export type NavbarControlsProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
projectSettings: any;
|
||||
};
|
||||
|
||||
export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, projectSettings } = props;
|
||||
const { views } = projectSettings;
|
||||
// props
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { board, labels, states, priorities, peekId } = useParams<any>();
|
||||
const searchParams = useSearchParams();
|
||||
const pathName = usePathname();
|
||||
// store
|
||||
const { updateFilters } = useIssueFilter();
|
||||
const { settings, activeLayout, hydrate, setActiveLayout } = useProject();
|
||||
hydrate(projectSettings);
|
||||
|
||||
const { data: user, fetchCurrentUser } = useUser();
|
||||
|
||||
useSWR("CURRENT_USER", () => fetchCurrentUser(), { errorRetryCount: 2 });
|
||||
|
||||
console.log("user", user);
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
const board = searchParams.get("board") || undefined;
|
||||
const labels = searchParams.get("labels") || undefined;
|
||||
const state = searchParams.get("state") || undefined;
|
||||
const priority = searchParams.get("priority") || undefined;
|
||||
const peekId = searchParams.get("peekId") || undefined;
|
||||
// hooks
|
||||
const { issueFilters, isIssueFiltersUpdated, initIssueFilters } = useIssueFilter();
|
||||
const { settings } = useProject();
|
||||
const { data: user } = useUser();
|
||||
const { setPeekId } = useIssueDetails();
|
||||
// derived values
|
||||
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (workspaceSlug && projectId && settings) {
|
||||
const viewsAcceptable: string[] = [];
|
||||
const currentBoard: TIssueBoardKeys | null = null;
|
||||
let currentBoard: TIssueLayout | null = null;
|
||||
|
||||
if (settings?.views?.list) viewsAcceptable.push("list");
|
||||
if (settings?.views?.kanban) viewsAcceptable.push("kanban");
|
||||
|
|
@ -53,59 +52,66 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
|
|||
if (settings?.views?.gantt) viewsAcceptable.push("gantt");
|
||||
if (settings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
|
||||
|
||||
// if (board) {
|
||||
// if (viewsAcceptable.includes(board.toString())) {
|
||||
// currentBoard = board.toString() as TIssueBoardKeys;
|
||||
// } else {
|
||||
// if (viewsAcceptable && viewsAcceptable.length > 0) {
|
||||
// currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
// if (viewsAcceptable && viewsAcceptable.length > 0) {
|
||||
// currentBoard = viewsAcceptable[0] as TIssueBoardKeys;
|
||||
// }
|
||||
// }
|
||||
if (board) {
|
||||
if (viewsAcceptable.includes(board.toString())) currentBoard = board.toString() as TIssueLayout;
|
||||
else {
|
||||
if (viewsAcceptable && viewsAcceptable.length > 0) currentBoard = viewsAcceptable[0] as TIssueLayout;
|
||||
}
|
||||
} else {
|
||||
if (viewsAcceptable && viewsAcceptable.length > 0) currentBoard = viewsAcceptable[0] as TIssueLayout;
|
||||
}
|
||||
|
||||
if (currentBoard) {
|
||||
if (activeLayout === null || activeLayout !== currentBoard) {
|
||||
let params: any = { board: currentBoard };
|
||||
if (peekId && peekId.length > 0) params = { ...params, peekId: peekId };
|
||||
if (priorities && priorities.length > 0) params = { ...params, priorities: priorities };
|
||||
if (states && states.length > 0) params = { ...params, states: states };
|
||||
if (labels && labels.length > 0) params = { ...params, labels: labels };
|
||||
console.log("params", params);
|
||||
let storeParams: any = {};
|
||||
if (priorities && priorities.length > 0) storeParams = { ...storeParams, priority: priorities.split(",") };
|
||||
if (states && states.length > 0) storeParams = { ...storeParams, state: states.split(",") };
|
||||
if (labels && labels.length > 0) storeParams = { ...storeParams, labels: labels.split(",") };
|
||||
if (activeLayout === undefined || activeLayout !== currentBoard) {
|
||||
let queryParams: any = { board: currentBoard };
|
||||
const params: any = { display_filters: { layout: currentBoard }, filters: {} };
|
||||
|
||||
if (storeParams) updateFilters(projectId, storeParams);
|
||||
setActiveLayout(currentBoard);
|
||||
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
|
||||
if (peekId && peekId.length > 0) {
|
||||
queryParams = { ...queryParams, peekId: peekId };
|
||||
setPeekId(peekId);
|
||||
}
|
||||
if (priority && priority.length > 0) {
|
||||
queryParams = { ...queryParams, priority: priority };
|
||||
params.filters = { ...params.filters, priority: priority.split(",") };
|
||||
}
|
||||
if (state && state.length > 0) {
|
||||
queryParams = { ...queryParams, state: state };
|
||||
params.filters = { ...params.filters, state: state.split(",") };
|
||||
}
|
||||
if (labels && labels.length > 0) {
|
||||
queryParams = { ...queryParams, labels: labels };
|
||||
params.filters = { ...params.filters, labels: labels.split(",") };
|
||||
}
|
||||
|
||||
if (!isIssueFiltersUpdated(params)) {
|
||||
initIssueFilters(projectId, params);
|
||||
queryParams = new URLSearchParams(queryParams).toString();
|
||||
router.push(`/${workspaceSlug}/${projectId}?${queryParams}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [
|
||||
board,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
router,
|
||||
updateFilters,
|
||||
board,
|
||||
labels,
|
||||
states,
|
||||
priorities,
|
||||
state,
|
||||
priority,
|
||||
peekId,
|
||||
settings,
|
||||
activeLayout,
|
||||
setActiveLayout,
|
||||
searchParams,
|
||||
router,
|
||||
initIssueFilters,
|
||||
setPeekId,
|
||||
isIssueFiltersUpdated,
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* issue views */}
|
||||
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
|
||||
<NavbarIssueBoardView layouts={views} />
|
||||
<NavbarIssueBoardView workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
|
||||
{/* issue filters */}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
"use client";
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Briefcase } from "lucide-react";
|
||||
// components
|
||||
import { ProjectLogo } from "@/components/common";
|
||||
import { NavbarControls } from "./controls";
|
||||
import { NavbarControls } from "@/components/issues/navbar/controls";
|
||||
// hooks
|
||||
import { useProject } from "@/hooks/store";
|
||||
|
||||
type IssueNavbarProps = {
|
||||
projectSettings: any;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
const IssueNavbar: FC<IssueNavbarProps> = (props) => {
|
||||
const { projectSettings, workspaceSlug, projectId } = props;
|
||||
const { project_details } = projectSettings;
|
||||
const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// hooks
|
||||
const { project } = useProject();
|
||||
|
||||
return (
|
||||
<div className="relative flex justify-between w-full gap-4 px-5">
|
||||
{/* project detail */}
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
{project_details ? (
|
||||
{project ? (
|
||||
<span className="h-7 w-7 flex-shrink-0 grid place-items-center">
|
||||
<ProjectLogo logo={project_details.logo_props} className="text-lg" />
|
||||
<ProjectLogo logo={project.logo_props} className="text-lg" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
<Briefcase className="h-4 w-4" />
|
||||
</span>
|
||||
)}
|
||||
<div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
|
||||
{project_details?.name || `...`}
|
||||
</div>
|
||||
<div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">{project?.name || `...`}</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
<NavbarControls workspaceSlug={workspaceSlug} projectId={projectId} projectSettings={projectSettings} />
|
||||
<NavbarControls workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default IssueNavbar;
|
||||
|
|
|
|||
|
|
@ -2,31 +2,53 @@
|
|||
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// constants
|
||||
import { issueViews } from "@/constants/data";
|
||||
import { issueLayoutViews } from "@/constants/issue";
|
||||
// hooks
|
||||
import { useProject } from "@/hooks/store";
|
||||
import { useIssueFilter } from "@/hooks/store";
|
||||
// mobx
|
||||
import { TIssueBoardKeys } from "@/types/issue";
|
||||
import { TIssueLayout } from "@/types/issue";
|
||||
|
||||
type NavbarIssueBoardViewProps = {
|
||||
layouts: Record<TIssueBoardKeys, boolean>;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const NavbarIssueBoardView: FC<NavbarIssueBoardViewProps> = observer((props) => {
|
||||
const { layouts } = props;
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
const labels = searchParams.get("labels") || undefined;
|
||||
const state = searchParams.get("state") || undefined;
|
||||
const priority = searchParams.get("priority") || undefined;
|
||||
const peekId = searchParams.get("peekId") || undefined;
|
||||
// props
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// hooks
|
||||
const { layoutOptions, issueFilters, updateIssueFilters } = useIssueFilter();
|
||||
|
||||
const { activeLayout, setActiveLayout } = useProject();
|
||||
// derived values
|
||||
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
||||
|
||||
const handleCurrentBoardView = (boardView: string) => {
|
||||
setActiveLayout(boardView as TIssueBoardKeys);
|
||||
const handleCurrentBoardView = (boardView: TIssueLayout) => {
|
||||
updateIssueFilters(projectId, "display_filters", "layout", boardView);
|
||||
|
||||
let queryParams: any = { board: boardView };
|
||||
if (peekId && peekId.length > 0) queryParams = { ...queryParams, peekId: peekId };
|
||||
if (priority && priority.length > 0) queryParams = { ...queryParams, priority: priority };
|
||||
if (state && state.length > 0) queryParams = { ...queryParams, state: state };
|
||||
if (labels && labels.length > 0) queryParams = { ...queryParams, labels: labels };
|
||||
queryParams = new URLSearchParams(queryParams).toString();
|
||||
router.push(`/${workspaceSlug}/${projectId}?${queryParams}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{layouts &&
|
||||
Object.keys(layouts).map((layoutKey: string) => {
|
||||
if (layouts[layoutKey as TIssueBoardKeys]) {
|
||||
{issueLayoutViews &&
|
||||
Object.keys(issueLayoutViews).map((key: string) => {
|
||||
const layoutKey = key as TIssueLayout;
|
||||
if (layoutOptions[layoutKey]) {
|
||||
return (
|
||||
<div
|
||||
key={layoutKey}
|
||||
|
|
@ -40,10 +62,10 @@ export const NavbarIssueBoardView: FC<NavbarIssueBoardViewProps> = observer((pro
|
|||
>
|
||||
<span
|
||||
className={`material-symbols-rounded text-[18px] ${
|
||||
issueViews[layoutKey]?.className ? issueViews[layoutKey]?.className : ``
|
||||
issueLayoutViews[layoutKey]?.className ? issueLayoutViews[layoutKey]?.className : ``
|
||||
}`}
|
||||
>
|
||||
{issueViews[layoutKey]?.icon}
|
||||
{issueLayoutViews[layoutKey]?.icon}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue