binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: publish boards

Browse source
This commit is contained in:
sriram veeraghanta 2024-05-15 02:25:38 +05:30
parent 2b196ba1f1
commit a2fbd6132b
13 changed files with 187 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

7
space/components/issues/board-views/kanban/header.tsx
View file

@ -1,3 +1,4 @@
"use client";
// mobx react lite
import { observer } from "mobx-react-lite";
// ui
@ -5,12 +6,12 @@ import { StateGroupIcon } from "@plane/ui";
// constants
import { issueGroupFilter } from "@/constants/data";
// mobx hook
import { useIssue } from "@/hooks/store";
// import { useIssue } from "@/hooks/store";
// interfaces
import { IIssueState } from "@/types/issue";
export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
const { getCountOfIssuesByState } = useIssue();
// const { getCountOfIssuesByState } = useIssue();
const stateGroup = issueGroupFilter(state.group);
if (stateGroup === null) return <></>;
@ -21,7 +22,7 @@ export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) =>
<StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
</div>
<div className="mr-1 truncate font-semibold capitalize text-custom-text-200">{state?.name}</div>
<span className="flex-shrink-0 rounded-full text-custom-text-300">{getCountOfIssuesByState(state.id)}</span>
{/* <span className="flex-shrink-0 rounded-full text-custom-text-300">{getCountOfIssuesByState(state.id)}</span> */}
</div>
);
});

1
space/components/issues/board-views/list/block.tsx
View file

@ -1,3 +1,4 @@
"use client";
import { FC } from "react";
import { observer } from "mobx-react-lite";
import { useParams, useRouter, useSearchParams } from "next/navigation";

8
space/components/issues/board-views/list/header.tsx
View file

@ -1,16 +1,18 @@
"use client";
import { observer } from "mobx-react-lite";
// ui
import { StateGroupIcon } from "@plane/ui";
// constants
import { issueGroupFilter } from "@/constants/data";
// mobx hook
import { useIssue } from "@/hooks/store";
// import { useIssue } from "@/hooks/store";
// types
import { IIssueState } from "@/types/issue";
export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
const { getCountOfIssuesByState } = useIssue();
// const { getCountOfIssuesByState } = useIssue();
const stateGroup = issueGroupFilter(state.group);
// const count = getCountOfIssuesByState(state.id);
if (stateGroup === null) return <></>;
@ -20,7 +22,7 @@ export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
<StateGroupIcon stateGroup={state.group} color={state.color} height="14" width="14" />
</div>
<div className="mr-1 font-medium capitalize">{state?.name}</div>
<div className="text-sm font-medium text-custom-text-200">{getCountOfIssuesByState(state.id)}</div>
{/* <div className="text-sm font-medium text-custom-text-200">{count}</div> */}
</div>
);
});

1
space/components/issues/board-views/list/index.tsx
View file

@ -1,3 +1,4 @@
"use client";
import { FC } from "react";
import { observer } from "mobx-react-lite";
// components

129
space/components/issues/navbar/controls.tsx Normal file
View file

@ -0,0 +1,129 @@
"use client";
import { useEffect, FC } from "react";
import Link from "next/link";
import { useRouter, useParams, useSearchParams, usePathname } from "next/navigation";
// ui
import { Avatar, Button } from "@plane/ui";
// components
import { IssueFiltersDropdown } from "@/components/issues/filters";
// hooks
import { useProject, useUser, useIssueFilter } from "@/hooks/store";
// types
import { TIssueBoardKeys } from "@/types/issue";
// components
import { NavbarIssueBoardView } from "./issue-board-view";
import { NavbarTheme } from "./theme";
export type NavbarControlsProps = {
workspaceSlug: string;
projectId: string;
projectSettings: any;
};
export const NavbarControls: FC<NavbarControlsProps> = (props) => {
const { workspaceSlug, projectId, projectSettings } = props;
const { views } = projectSettings;
// 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 } = useUser();
useEffect(() => {
if (workspaceSlug && projectId && settings) {
const viewsAcceptable: string[] = [];
const currentBoard: TIssueBoardKeys | null = null;
if (settings?.views?.list) viewsAcceptable.push("list");
if (settings?.views?.kanban) viewsAcceptable.push("kanban");
if (settings?.views?.calendar) viewsAcceptable.push("calendar");
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 (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 (storeParams) updateFilters(projectId, storeParams);
setActiveLayout(currentBoard);
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
}
}
}
}, [
board,
workspaceSlug,
projectId,
router,
updateFilters,
labels,
states,
priorities,
peekId,
settings,
activeLayout,
setActiveLayout,
searchParams,
]);
return (
<>
{/* issue views */}
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
<NavbarIssueBoardView layouts={views} />
</div>
{/* issue filters */}
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
<IssueFiltersDropdown workspaceSlug={workspaceSlug} projectId={projectId} />
</div>
{/* theming */}
<div className="relative flex-shrink-0">
<NavbarTheme />
</div>
{user?.id ? (
<div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
<Avatar name={user?.display_name} src={user?.avatar ?? undefined} shape="square" size="sm" />
<h6 className="text-xs font-medium">{user.display_name}</h6>
</div>
) : (
<div className="flex-shrink-0">
<Link href={`/?next_path=${pathName}`}>
<Button variant="outline-primary">Sign in</Button>
</Link>
</div>
)}
</>
);
};

116
space/components/issues/navbar/index.tsx
View file

@ -1,21 +1,11 @@
"use client";
import { useEffect, FC } from "react";
import { FC } from "react";
import { observer } from "mobx-react-lite";
import Link from "next/link";
import { useRouter, useParams, useSearchParams, usePathname } from "next/navigation";
import { Briefcase } from "lucide-react";
import { Avatar, Button } from "@plane/ui";
// components
import { ProjectLogo } from "@/components/common";
import { IssueFiltersDropdown } from "@/components/issues/filters";
// hooks
import { useProject, useUser, useIssueFilter } from "@/hooks/store";
// types
import { TIssueBoardKeys } from "@/types/issue";
// components
import { NavbarIssueBoardView } from "./issue-board-view";
import { NavbarTheme } from "./theme";
import { NavbarControls } from "./controls";
type IssueNavbarProps = {
projectSettings: any;
@ -25,80 +15,10 @@ type IssueNavbarProps = {
const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
const { projectSettings, workspaceSlug, projectId } = props;
const { project_details, views } = projectSettings;
const { board, labels, states, priorities, peekId } = useParams<any>();
const searchParams = useSearchParams();
const pathName = usePathname();
// hooks
const router = useRouter();
// store
const { settings, activeLayout, hydrate, setActiveLayout } = useProject();
const { data: user } = useUser();
const { updateFilters } = useIssueFilter();
hydrate(projectSettings);
useEffect(() => {
if (workspaceSlug && projectId && settings) {
const viewsAcceptable: string[] = [];
const currentBoard: TIssueBoardKeys | null = null;
if (settings?.views?.list) viewsAcceptable.push("list");
if (settings?.views?.kanban) viewsAcceptable.push("kanban");
if (settings?.views?.calendar) viewsAcceptable.push("calendar");
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 (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 (storeParams) updateFilters(projectId, storeParams);
setActiveLayout(currentBoard);
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
}
}
}
}, [
board,
workspaceSlug,
projectId,
router,
updateFilters,
labels,
states,
priorities,
peekId,
settings,
activeLayout,
setActiveLayout,
searchParams,
]);
const { project_details } = projectSettings;
return (
<div className="relative flex w-full items-center gap-4 px-5">
<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 ? (
@ -115,33 +35,9 @@ const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
</div>
</div>
{/* issue views */}
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
<NavbarIssueBoardView layouts={views} />
<div className="flex flex-shrink-0 items-center gap-2">
<NavbarControls workspaceSlug={workspaceSlug} projectId={projectId} projectSettings={projectSettings} />
</div>
{/* issue filters */}
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
<IssueFiltersDropdown workspaceSlug={workspaceSlug} projectId={projectId} />
</div>
{/* theming */}
<div className="relative flex-shrink-0">
<NavbarTheme />
</div>
{user?.id ? (
<div className="flex items-center gap-2 rounded border border-custom-border-200 p-2">
<Avatar name={user?.display_name} src={user?.avatar ?? undefined} shape="square" size="sm" />
<h6 className="text-xs font-medium">{user.display_name}</h6>
</div>
) : (
<div className="flex-shrink-0">
<Link href={`/?next_path=${pathName}`}>
<Button variant="outline-primary">Sign in</Button>
</Link>
</div>
)}
</div>
);
});