mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
refactor: components folder structure
This commit is contained in:
Aaryan Khandelwal
parent
899d49b1f0
commit
83a1b0cf1f
@ -6,10 +6,10 @@ type Props = {
|
||||
};
|
||||
};
|
||||
|
||||
const ProjectIssuesLayout = async (props: Props) => {
|
||||
const IssuesLayout = async (props: Props) => {
|
||||
const { children } = props;
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
||||
export default ProjectIssuesLayout;
|
||||
export default IssuesLayout;
|
||||
|
||||
@ -17,15 +17,15 @@ type Props = {
|
||||
};
|
||||
};
|
||||
|
||||
const ProjectIssuesPage = (props: Props) => {
|
||||
const IssuesPage = (props: Props) => {
|
||||
const { params } = props;
|
||||
const { workspaceSlug, projectId } = params;
|
||||
// states
|
||||
const [error, setError] = useState(false);
|
||||
// params
|
||||
const searchParams = useSearchParams();
|
||||
const board = searchParams.get("board") || undefined;
|
||||
const peekId = searchParams.get("peekId") || undefined;
|
||||
const board = searchParams.get("board");
|
||||
const peekId = searchParams.get("peekId");
|
||||
|
||||
useEffect(() => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
@ -50,4 +50,4 @@ const ProjectIssuesPage = (props: Props) => {
|
||||
return <LogoSpinner />;
|
||||
};
|
||||
|
||||
export default ProjectIssuesPage;
|
||||
export default IssuesPage;
|
||||
|
||||
@ -1,38 +1,47 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// assets
|
||||
import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
|
||||
import InstanceFailureImage from "@/public/instance/instance-failure.svg";
|
||||
|
||||
export default function InstanceError() {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
|
||||
|
||||
const ErrorPage = () => {
|
||||
const handleRetry = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative h-screen overflow-x-hidden overflow-y-auto container px-5 mx-auto flex justify-center items-center">
|
||||
<div className="w-auto max-w-2xl relative space-y-8 py-10">
|
||||
<div className="relative flex flex-col justify-center items-center space-y-4">
|
||||
<Image src={instanceImage} alt="Plane instance failure image" />
|
||||
<h3 className="font-medium text-2xl text-white">Unable to fetch instance details.</h3>
|
||||
<p className="font-medium text-base text-center">
|
||||
We were unable to fetch the details of the instance. <br />
|
||||
Fret not, it might just be a connectivity issue.
|
||||
<div className="grid h-screen place-items-center p-4">
|
||||
<div className="space-y-8 text-center">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-semibold">Exception Detected!</h3>
|
||||
<p className="mx-auto w-1/2 text-sm text-custom-text-200">
|
||||
We{"'"}re Sorry! An exception has been detected, and our engineering team has been notified. We apologize
|
||||
for any inconvenience this may have caused. Please reach out to our engineering team at{" "}
|
||||
<a href="mailto:support@plane.so" className="text-custom-primary">
|
||||
support@plane.so
|
||||
</a>{" "}
|
||||
or on our{" "}
|
||||
<a
|
||||
href="https://discord.com/invite/A92xrEGCge"
|
||||
target="_blank"
|
||||
className="text-custom-primary"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Discord
|
||||
</a>{" "}
|
||||
server for further assistance.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Button size="md" onClick={handleRetry}>
|
||||
Retry
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<Button variant="primary" size="md" onClick={handleRetry}>
|
||||
Refresh
|
||||
</Button>
|
||||
{/* <Button variant="neutral-primary" size="md" onClick={() => {}}>
|
||||
Sign out
|
||||
</Button> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
||||
|
||||
@ -5,7 +5,7 @@ import Image from "next/image";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { LogoSpinner } from "@/components/common";
|
||||
import IssueNavbar from "@/components/issues/navbar";
|
||||
import { IssuesNavbarRoot } from "@/components/issues";
|
||||
// hooks
|
||||
import { usePublish, usePublishList } from "@/hooks/store";
|
||||
// assets
|
||||
@ -18,7 +18,7 @@ type Props = {
|
||||
};
|
||||
};
|
||||
|
||||
const ProjectIssuesLayout = observer((props: Props) => {
|
||||
const IssuesLayout = observer((props: Props) => {
|
||||
const { children, params } = props;
|
||||
// params
|
||||
const { anchor } = params;
|
||||
@ -33,7 +33,7 @@ const ProjectIssuesLayout = observer((props: Props) => {
|
||||
return (
|
||||
<div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">
|
||||
<div className="relative flex h-[60px] flex-shrink-0 select-none items-center border-b border-custom-border-300 bg-custom-sidebar-background-100">
|
||||
<IssueNavbar publishSettings={publishSettings} />
|
||||
<IssuesNavbarRoot publishSettings={publishSettings} />
|
||||
</div>
|
||||
<div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
|
||||
<a
|
||||
@ -53,4 +53,4 @@ const ProjectIssuesLayout = observer((props: Props) => {
|
||||
);
|
||||
});
|
||||
|
||||
export default ProjectIssuesLayout;
|
||||
export default IssuesLayout;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
// components
|
||||
import { ProjectDetailsView } from "@/components/views";
|
||||
import { IssuesLayoutsRoot } from "@/components/issues";
|
||||
// hooks
|
||||
import { usePublish } from "@/hooks/store";
|
||||
|
||||
@ -13,7 +13,7 @@ type Props = {
|
||||
};
|
||||
};
|
||||
|
||||
const ProjectIssuesPage =observer ((props: Props) => {
|
||||
const IssuesPage = observer((props: Props) => {
|
||||
const { params } = props;
|
||||
const { anchor } = params;
|
||||
// params
|
||||
@ -24,7 +24,7 @@ const ProjectIssuesPage =observer ((props: Props) => {
|
||||
|
||||
if (!publishSettings) return null;
|
||||
|
||||
return <ProjectDetailsView peekId={peekId} publishSettings={publishSettings} />;
|
||||
return <IssuesLayoutsRoot peekId={peekId} publishSettings={publishSettings} />;
|
||||
});
|
||||
|
||||
export default ProjectIssuesPage;
|
||||
export default IssuesPage;
|
||||
|
||||
@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
// components
|
||||
import { UserAvatar } from "@/components/issues/navbar/user-avatar";
|
||||
import { UserAvatar } from "@/components/issues";
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
// assets
|
||||
@ -25,7 +25,7 @@ export const UserLoggedIn = observer(() => {
|
||||
return (
|
||||
<div className="flex flex-col h-screen w-screen">
|
||||
<div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
|
||||
<div>
|
||||
<div className="h-[30px] w-[133px]">
|
||||
<Image src={logo} alt="Plane logo" />
|
||||
</div>
|
||||
<UserAvatar />
|
||||
|
||||
@ -1,3 +1,2 @@
|
||||
export * from "./latest-feature-block";
|
||||
export * from "./project-logo";
|
||||
export * from "./logo-spinner";
|
||||
|
||||
@ -1,40 +0,0 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useTheme } from "next-themes";
|
||||
// icons
|
||||
import { Lightbulb } from "lucide-react";
|
||||
// images
|
||||
import latestFeatures from "public/onboarding/onboarding-pages.svg";
|
||||
|
||||
export const LatestFeatureBlock = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto mt-16 flex rounded-[3.5px] border border-onboarding-border-200 bg-onboarding-background-100 py-2 sm:w-96">
|
||||
<Lightbulb className="mx-3 mr-2 h-7 w-7" />
|
||||
<p className="text-left text-sm text-onboarding-text-100">
|
||||
Pages gets a facelift! Write anything and use Galileo to help you start.{" "}
|
||||
<Link href="https://plane.so/changelog" target="_blank" rel="noopener noreferrer">
|
||||
<span className="text-sm font-medium underline hover:cursor-pointer">Learn more</span>
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={`mx-auto mt-8 overflow-hidden rounded-md border border-onboarding-border-200 object-cover sm:h-52 sm:w-96 ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
}`}
|
||||
>
|
||||
<div className="h-[90%]">
|
||||
<Image
|
||||
src={latestFeatures}
|
||||
alt="Plane Issues"
|
||||
className={`-mt-2 ml-10 h-full rounded-md ${
|
||||
resolvedTheme === "dark" ? "bg-onboarding-background-100" : "bg-custom-primary-70"
|
||||
} `}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,2 +1 @@
|
||||
export * from "./not-ready-view";
|
||||
export * from "./instance-failure-view";
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useTheme } from "next-themes";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// helper
|
||||
import { GOD_MODE_URL, SPACE_BASE_PATH } from "@/helpers/common.helper";
|
||||
// images
|
||||
import PlaneTakeOffImage from "@/public/instance/plane-takeoff.png";
|
||||
import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
|
||||
import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
|
||||
import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
|
||||
import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
|
||||
|
||||
export const InstanceNotReady: FC = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
const patternBackground = resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern;
|
||||
|
||||
const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
|
||||
<div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Link href={`${SPACE_BASE_PATH}/`} className="h-[30px] w-[133px]">
|
||||
<Image src={logo} alt="Plane logo" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mb-[110px] flex-grow">
|
||||
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
|
||||
<div className="w-auto max-w-2xl relative space-y-8 py-10">
|
||||
<div className="relative flex flex-col justify-center items-center space-y-4">
|
||||
<h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
|
||||
<Image src={PlaneTakeOffImage} alt="Plane Logo" />
|
||||
<p className="font-medium text-base text-onboarding-text-400">
|
||||
Get started by setting up your instance and workspace
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href={GOD_MODE_URL}>
|
||||
<Button size="lg" className="w-full">
|
||||
Get started
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export const IssueBlockDownVotes = ({ number }: { number: number }) => (
|
||||
<div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs text-custom-text-300">
|
||||
<span className="material-symbols-rounded !m-0 rotate-180 !p-0 text-base text-custom-text-300">
|
||||
arrow_upward_alt
|
||||
</span>
|
||||
{number}
|
||||
</div>
|
||||
);
|
||||
@ -1,19 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export const IssueBlockLabels = ({ labels }: any) => (
|
||||
<div className="relative flex flex-wrap items-center gap-1">
|
||||
{labels &&
|
||||
labels.length > 0 &&
|
||||
labels.map((_label: any) => (
|
||||
<div
|
||||
key={_label?.id}
|
||||
className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 text-custom-text-200">
|
||||
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
|
||||
<div className="text-xs">{_label?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
@ -1,18 +0,0 @@
|
||||
// ui
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
// constants
|
||||
import { issueGroupFilter } from "@/constants/issue";
|
||||
|
||||
export const IssueBlockState = ({ state }: any) => {
|
||||
const stateGroup = issueGroupFilter(state.group);
|
||||
|
||||
if (stateGroup === null) return <></>;
|
||||
return (
|
||||
<div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
|
||||
<div className="flex w-full items-center gap-1.5 text-custom-text-200">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} />
|
||||
<div className="text-xs">{state?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -1,8 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export const IssueBlockUpVotes = ({ number }: { number: number }) => (
|
||||
<div className="flex h-6 items-center rounded border-[0.5px] border-custom-border-300 px-1.5 py-1 pl-1 text-xs text-custom-text-300">
|
||||
<span className="material-symbols-rounded !m-0 !p-0 text-base text-custom-text-300">arrow_upward_alt</span>
|
||||
{number}
|
||||
</div>
|
||||
);
|
||||
@ -1 +0,0 @@
|
||||
export const IssueCalendarView = () => <div> </div>;
|
||||
@ -1 +0,0 @@
|
||||
export const IssueGanttView = () => <div> </div>;
|
||||
@ -1 +0,0 @@
|
||||
export const IssueSpreadsheetView = () => <div> </div>;
|
||||
2
space/components/issues/index.ts
Normal file
2
space/components/issues/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from "./issue-layouts";
|
||||
export * from "./navbar";
|
||||
4
space/components/issues/issue-layouts/index.ts
Normal file
4
space/components/issues/issue-layouts/index.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export * from "./kanban";
|
||||
export * from "./list";
|
||||
export * from "./properties";
|
||||
export * from "./root";
|
||||
@ -4,9 +4,7 @@ import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// components
|
||||
import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
|
||||
import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
|
||||
import { IssueBlockState } from "@/components/issues/board-views/block-state";
|
||||
import { IssueBlockDueDate, IssueBlockPriority, IssueBlockState } from "@/components/issues";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hooks
|
||||
@ -14,13 +12,13 @@ import { useIssueDetails, usePublish } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type IssueKanBanBlockProps = {
|
||||
type Props = {
|
||||
anchor: string;
|
||||
issue: IIssue;
|
||||
params: any;
|
||||
};
|
||||
|
||||
export const IssueKanBanBlock: FC<IssueKanBanBlockProps> = observer((props) => {
|
||||
export const IssueKanBanBlock: FC<Props> = observer((props) => {
|
||||
const { anchor, issue } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
@ -5,14 +5,13 @@ import { observer } from "mobx-react-lite";
|
||||
import { IStateLite } from "@plane/types";
|
||||
// ui
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
// constants
|
||||
import { issueGroupFilter } from "@/constants/issue";
|
||||
|
||||
export const IssueKanBanHeader = observer(({ state }: { state: IStateLite }) => {
|
||||
// const { getCountOfIssuesByState } = useIssue();
|
||||
const stateGroup = issueGroupFilter(state.group);
|
||||
type Props = {
|
||||
state: IStateLite;
|
||||
};
|
||||
|
||||
if (stateGroup === null) return <></>;
|
||||
export const IssueKanBanHeader: React.FC<Props> = observer((props) => {
|
||||
const { state } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-2 pb-2">
|
||||
3
space/components/issues/issue-layouts/kanban/index.ts
Normal file
3
space/components/issues/issue-layouts/kanban/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./block";
|
||||
export * from "./header";
|
||||
export * from "./root";
|
||||
@ -3,18 +3,17 @@
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { IssueKanBanBlock } from "@/components/issues/board-views/kanban/block";
|
||||
import { IssueKanBanHeader } from "@/components/issues/board-views/kanban/header";
|
||||
import { IssueKanBanBlock, IssueKanBanHeader } from "@/components/issues";
|
||||
// ui
|
||||
import { Icon } from "@/components/ui";
|
||||
// mobx hook
|
||||
import { useIssue } from "@/hooks/store";
|
||||
|
||||
type IssueKanbanViewProps = {
|
||||
type Props = {
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const IssueKanbanView: FC<IssueKanbanViewProps> = observer((props) => {
|
||||
export const IssueKanbanLayoutRoot: FC<Props> = observer((props) => {
|
||||
const { anchor } = props;
|
||||
// store hooks
|
||||
const { states, getFilteredIssuesByState } = useIssue();
|
||||
@ -3,10 +3,7 @@ import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// components
|
||||
import { IssueBlockDueDate } from "@/components/issues/board-views/block-due-date";
|
||||
import { IssueBlockLabels } from "@/components/issues/board-views/block-labels";
|
||||
import { IssueBlockPriority } from "@/components/issues/board-views/block-priority";
|
||||
import { IssueBlockState } from "@/components/issues/board-views/block-state";
|
||||
import { IssueBlockDueDate, IssueBlockLabels, IssueBlockPriority, IssueBlockState } from "@/components/issues";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hook
|
||||
@ -20,7 +17,7 @@ type IssueListBlockProps = {
|
||||
issue: IIssue;
|
||||
};
|
||||
|
||||
export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
|
||||
export const IssueListLayoutBlock: FC<IssueListBlockProps> = observer((props) => {
|
||||
const { anchor, issue } = props;
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
@ -1,19 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// types
|
||||
import { IStateLite } from "@plane/types";
|
||||
// ui
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
// constants
|
||||
import { issueGroupFilter } from "@/constants/issue";
|
||||
|
||||
export const IssueListHeader = observer(({ state }: { state: IStateLite }) => {
|
||||
// const { getCountOfIssuesByState } = useIssue();
|
||||
const stateGroup = issueGroupFilter(state.group);
|
||||
// const count = getCountOfIssuesByState(state.id);
|
||||
type Props = {
|
||||
state: IStateLite;
|
||||
};
|
||||
|
||||
if (stateGroup === null) return <></>;
|
||||
export const IssueListLayoutHeader: React.FC<Props> = observer((props) => {
|
||||
const { state } = props;
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-2 p-3">
|
||||
3
space/components/issues/issue-layouts/list/index.ts
Normal file
3
space/components/issues/issue-layouts/list/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from "./block";
|
||||
export * from "./header";
|
||||
export * from "./root";
|
||||
@ -2,16 +2,15 @@
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { IssueListBlock } from "@/components/issues/board-views/list/block";
|
||||
import { IssueListHeader } from "@/components/issues/board-views/list/header";
|
||||
import { IssueListLayoutBlock, IssueListLayoutHeader } from "@/components/issues";
|
||||
// mobx hook
|
||||
import { useIssue } from "@/hooks/store";
|
||||
|
||||
type IssueListViewProps = {
|
||||
type Props = {
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const IssueListView: FC<IssueListViewProps> = observer((props) => {
|
||||
export const IssuesListLayoutRoot: FC<Props> = observer((props) => {
|
||||
const { anchor } = props;
|
||||
// store hooks
|
||||
const { states, getFilteredIssuesByState } = useIssue();
|
||||
@ -23,11 +22,11 @@ export const IssueListView: FC<IssueListViewProps> = observer((props) => {
|
||||
|
||||
return (
|
||||
<div key={state.id} className="relative w-full">
|
||||
<IssueListHeader state={state} />
|
||||
<IssueListLayoutHeader state={state} />
|
||||
{issues && issues.length > 0 ? (
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{issues.map((issue) => (
|
||||
<IssueListBlock key={issue.id} anchor={anchor} issue={issue} />
|
||||
<IssueListLayoutBlock key={issue.id} anchor={anchor} issue={issue} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
@ -0,0 +1,4 @@
|
||||
export * from "./due-date";
|
||||
export * from "./labels";
|
||||
export * from "./priority";
|
||||
export * from "./state";
|
||||
17
space/components/issues/issue-layouts/properties/labels.tsx
Normal file
17
space/components/issues/issue-layouts/properties/labels.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
export const IssueBlockLabels = ({ labels }: any) => (
|
||||
<div className="relative flex flex-wrap items-center gap-1">
|
||||
{labels?.map((_label: any) => (
|
||||
<div
|
||||
key={_label?.id}
|
||||
className="flex flex-shrink-0 cursor-default items-center rounded-md border border-custom-border-300 px-2.5 py-1 text-xs shadow-sm"
|
||||
>
|
||||
<div className="flex items-center gap-1.5 text-custom-text-200">
|
||||
<div className="h-2 w-2 rounded-full" style={{ backgroundColor: `${_label?.color}` }} />
|
||||
<div className="text-xs">{_label?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
11
space/components/issues/issue-layouts/properties/state.tsx
Normal file
11
space/components/issues/issue-layouts/properties/state.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
// ui
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
|
||||
export const IssueBlockState = ({ state }: any) => (
|
||||
<div className="flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 px-2.5 py-1 text-xs shadow-sm duration-300 focus:outline-none">
|
||||
<div className="flex w-full items-center gap-1.5 text-custom-text-200">
|
||||
<StateGroupIcon stateGroup={state.group} color={state.color} />
|
||||
<div className="text-xs">{state?.name}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -6,11 +6,7 @@ import Image from "next/image";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { IssueCalendarView } from "@/components/issues/board-views/calendar";
|
||||
import { IssueGanttView } from "@/components/issues/board-views/gantt";
|
||||
import { IssueKanbanView } from "@/components/issues/board-views/kanban";
|
||||
import { IssueListView } from "@/components/issues/board-views/list";
|
||||
import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadsheet";
|
||||
import { IssueKanbanLayoutRoot, IssuesListLayoutRoot } from "@/components/issues";
|
||||
import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
|
||||
import { IssuePeekOverview } from "@/components/issues/peek-overview";
|
||||
// hooks
|
||||
@ -20,12 +16,12 @@ import { PublishStore } from "@/store/publish/publish.store";
|
||||
// assets
|
||||
import SomethingWentWrongImage from "public/something-went-wrong.svg";
|
||||
|
||||
type ProjectDetailsViewProps = {
|
||||
type Props = {
|
||||
peekId: string | undefined;
|
||||
publishSettings: PublishStore;
|
||||
};
|
||||
|
||||
export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props) => {
|
||||
export const IssuesLayoutsRoot: FC<Props> = observer((props) => {
|
||||
const { peekId, publishSettings } = props;
|
||||
// query params
|
||||
const searchParams = useSearchParams();
|
||||
@ -84,17 +80,14 @@ export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props)
|
||||
|
||||
{activeLayout === "list" && (
|
||||
<div className="relative h-full w-full overflow-y-auto">
|
||||
<IssueListView anchor={anchor} />
|
||||
<IssuesListLayoutRoot anchor={anchor} />
|
||||
</div>
|
||||
)}
|
||||
{activeLayout === "kanban" && (
|
||||
<div className="relative mx-auto h-full w-full p-5">
|
||||
<IssueKanbanView anchor={anchor} />
|
||||
<IssueKanbanLayoutRoot anchor={anchor} />
|
||||
</div>
|
||||
)}
|
||||
{activeLayout === "calendar" && <IssueCalendarView />}
|
||||
{activeLayout === "spreadsheet" && <IssueSpreadsheetView />}
|
||||
{activeLayout === "gantt" && <IssueGanttView />}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
@ -4,10 +4,8 @@ import { useEffect, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// components
|
||||
import { IssuesLayoutSelection, NavbarTheme, UserAvatar } from "@/components/issues";
|
||||
import { IssueFiltersDropdown } from "@/components/issues/filters";
|
||||
import { NavbarIssueBoardView } from "@/components/issues/navbar/issue-board-view";
|
||||
import { NavbarTheme } from "@/components/issues/navbar/theme";
|
||||
import { UserAvatar } from "@/components/issues/navbar/user-avatar";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hooks
|
||||
@ -105,7 +103,7 @@ export const NavbarControls: FC<NavbarControlsProps> = observer((props) => {
|
||||
<>
|
||||
{/* issue views */}
|
||||
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
|
||||
<NavbarIssueBoardView anchor={anchor} />
|
||||
<IssuesLayoutSelection anchor={anchor} />
|
||||
</div>
|
||||
|
||||
{/* issue filters */}
|
||||
|
||||
5
space/components/issues/navbar/index.ts
Normal file
5
space/components/issues/navbar/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export * from "./controls";
|
||||
export * from "./layout-selection";
|
||||
export * from "./root";
|
||||
export * from "./theme";
|
||||
export * from "./user-avatar";
|
||||
@ -1,70 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// constants
|
||||
import { issueLayoutViews } from "@/constants/issue";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hooks
|
||||
import { useIssueFilter } from "@/hooks/store";
|
||||
// mobx
|
||||
import { TIssueLayout } from "@/types/issue";
|
||||
|
||||
type NavbarIssueBoardViewProps = {
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const NavbarIssueBoardView: FC<NavbarIssueBoardViewProps> = observer((props) => {
|
||||
const { anchor } = props;
|
||||
// router
|
||||
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;
|
||||
// hooks
|
||||
const { layoutOptions, getIssueFilters, updateIssueFilters } = useIssueFilter();
|
||||
// derived values
|
||||
const issueFilters = getIssueFilters(anchor);
|
||||
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
||||
|
||||
const handleCurrentBoardView = (boardView: TIssueLayout) => {
|
||||
updateIssueFilters(anchor, "display_filters", "layout", boardView);
|
||||
const { queryParam } = queryParamGenerator({ board: boardView, peekId, priority, state, labels });
|
||||
router.push(`/issues/${anchor}?${queryParam}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(issueLayoutViews).map((key: string) => {
|
||||
const layoutKey = key as TIssueLayout;
|
||||
if (layoutOptions[layoutKey]) {
|
||||
return (
|
||||
<div
|
||||
key={layoutKey}
|
||||
className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
|
||||
layoutKey === activeLayout
|
||||
? `bg-custom-background-80 text-custom-text-200`
|
||||
: `text-custom-text-300 hover:bg-custom-background-80`
|
||||
}`}
|
||||
onClick={() => handleCurrentBoardView(layoutKey)}
|
||||
title={layoutKey}
|
||||
>
|
||||
<span
|
||||
className={`material-symbols-rounded text-[18px] ${
|
||||
issueLayoutViews[layoutKey]?.className ? issueLayoutViews[layoutKey]?.className : ``
|
||||
}`}
|
||||
>
|
||||
{issueLayoutViews[layoutKey]?.icon}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</>
|
||||
);
|
||||
});
|
||||
67
space/components/issues/navbar/layout-selection.tsx
Normal file
67
space/components/issues/navbar/layout-selection.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// ui
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// constants
|
||||
import { ISSUE_LAYOUTS } from "@/constants/issue";
|
||||
// helpers
|
||||
import { queryParamGenerator } from "@/helpers/query-param-generator";
|
||||
// hooks
|
||||
import { useIssueFilter } from "@/hooks/store";
|
||||
// mobx
|
||||
import { TIssueLayout } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
anchor: string;
|
||||
};
|
||||
|
||||
export const IssuesLayoutSelection: FC<Props> = observer((props) => {
|
||||
const { anchor } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
// query params
|
||||
const labels = searchParams.get("labels");
|
||||
const state = searchParams.get("state");
|
||||
const priority = searchParams.get("priority");
|
||||
const peekId = searchParams.get("peekId");
|
||||
// hooks
|
||||
const { layoutOptions, getIssueFilters, updateIssueFilters } = useIssueFilter();
|
||||
// derived values
|
||||
const issueFilters = getIssueFilters(anchor);
|
||||
const activeLayout = issueFilters?.display_filters?.layout || undefined;
|
||||
|
||||
const handleCurrentBoardView = (boardView: TIssueLayout) => {
|
||||
updateIssueFilters(anchor, "display_filters", "layout", boardView);
|
||||
const { queryParam } = queryParamGenerator({ board: boardView, peekId, priority, state, labels });
|
||||
router.push(`/issues/${anchor}?${queryParam}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-1 rounded bg-custom-background-80 p-1">
|
||||
{ISSUE_LAYOUTS.map((layout) => {
|
||||
if (!layoutOptions[layout.key]) return;
|
||||
|
||||
return (
|
||||
<Tooltip key={layout.key} tooltipContent={layout.title}>
|
||||
<button
|
||||
type="button"
|
||||
className={`group grid h-[22px] w-7 place-items-center overflow-hidden rounded transition-all hover:bg-custom-background-100 ${
|
||||
activeLayout == layout.key ? "bg-custom-background-100 shadow-custom-shadow-2xs" : ""
|
||||
}`}
|
||||
onClick={() => handleCurrentBoardView(layout.key)}
|
||||
>
|
||||
<layout.icon
|
||||
strokeWidth={2}
|
||||
className={`size-3.5 ${activeLayout == layout.key ? "text-custom-text-100" : "text-custom-text-200"}`}
|
||||
/>
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
@ -4,15 +4,15 @@ import { observer } from "mobx-react-lite";
|
||||
import { Briefcase } from "lucide-react";
|
||||
// components
|
||||
import { ProjectLogo } from "@/components/common";
|
||||
import { NavbarControls } from "@/components/issues/navbar/controls";
|
||||
import { NavbarControls } from "@/components/issues";
|
||||
// store
|
||||
import { PublishStore } from "@/store/publish/publish.store";
|
||||
|
||||
type IssueNavbarProps = {
|
||||
type Props = {
|
||||
publishSettings: PublishStore;
|
||||
};
|
||||
|
||||
const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
|
||||
export const IssuesNavbarRoot: FC<Props> = observer((props) => {
|
||||
const { publishSettings } = props;
|
||||
// hooks
|
||||
const { project_details } = publishSettings;
|
||||
@ -41,5 +41,3 @@ const IssueNavbar: FC<IssueNavbarProps> = observer((props) => {
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default IssueNavbar;
|
||||
@ -1,142 +0,0 @@
|
||||
import { Fragment, useState, useRef } from "react";
|
||||
import Link from "next/link";
|
||||
import { Check, ChevronLeft } from "lucide-react";
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
import useOutSideClick from "hooks/use-outside-click";
|
||||
|
||||
type ItemOptionType = {
|
||||
display: React.ReactNode;
|
||||
as?: "button" | "link" | "div";
|
||||
href?: string;
|
||||
isSelected?: boolean;
|
||||
onClick?: () => void;
|
||||
children?: ItemOptionType[] | null;
|
||||
};
|
||||
|
||||
type DropdownItemProps = {
|
||||
item: ItemOptionType;
|
||||
};
|
||||
|
||||
type DropDownListProps = {
|
||||
open: boolean;
|
||||
handleClose?: () => void;
|
||||
items: ItemOptionType[];
|
||||
};
|
||||
|
||||
type DropdownProps = {
|
||||
button: React.ReactNode | (() => React.ReactNode);
|
||||
items: ItemOptionType[];
|
||||
};
|
||||
|
||||
const DropdownList: React.FC<DropDownListProps> = (props) => {
|
||||
const { open, items, handleClose } = props;
|
||||
|
||||
const ref = useRef(null);
|
||||
|
||||
useOutSideClick(ref, () => {
|
||||
if (handleClose) handleClose();
|
||||
});
|
||||
|
||||
return (
|
||||
<Popover className="absolute -left-1">
|
||||
<Transition
|
||||
show={open}
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel
|
||||
ref={ref}
|
||||
className="absolute left-1/2 z-10 mt-1 max-w-[9rem] origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none"
|
||||
>
|
||||
<div className="w-full rounded-md text-sm shadow-lg">
|
||||
{items.map((item, index) => (
|
||||
<DropdownItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
const DropdownItem: React.FC<DropdownItemProps> = (props) => {
|
||||
const { item } = props;
|
||||
const { display, children, as: itemAs, href, onClick, isSelected } = item;
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="group relative flex w-full gap-x-6 rounded-lg p-1">
|
||||
{(!itemAs || itemAs === "button" || itemAs === "div") && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
if (!children) {
|
||||
if (onClick) onClick();
|
||||
return;
|
||||
}
|
||||
setOpen((prev) => !prev);
|
||||
}}
|
||||
className={`flex w-full items-center gap-1 rounded px-1 py-1.5 text-custom-text-200 hover:bg-custom-background-80 ${
|
||||
isSelected ? "bg-custom-background-80" : ""
|
||||
}`}
|
||||
>
|
||||
{children && <ChevronLeft className="h-4 w-4 transform transition-transform" strokeWidth={2} />}
|
||||
{!children && <span />}
|
||||
<span className="truncate text-xs">{display}</span>
|
||||
<Check className={`h-3 w-3 opacity-0 ${isSelected ? "opacity-100" : ""}`} strokeWidth={2} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{itemAs === "link" && <Link href={href || "#"}>{display}</Link>}
|
||||
|
||||
{children && <DropdownList open={open} handleClose={() => setOpen(false)} items={children} />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Dropdown: React.FC<DropdownProps> = (props) => {
|
||||
const { button, items } = props;
|
||||
|
||||
return (
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button
|
||||
className={`group flex items-center justify-between gap-2 rounded-md border border-custom-border-200 px-3 py-1.5 text-xs shadow-sm duration-300 hover:bg-custom-background-90 hover:text-custom-text-100 focus:outline-none ${
|
||||
open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
{typeof button === "function" ? button() : button}
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-full z-10 mt-1 w-36 origin-top-right -translate-x-full select-none rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
|
||||
<div className="w-full">
|
||||
{items.map((item, index) => (
|
||||
<DropdownItem key={index} item={item} />
|
||||
))}
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export { Dropdown };
|
||||
@ -1,3 +1,2 @@
|
||||
export * from "./dropdown";
|
||||
export * from "./icon";
|
||||
export * from "./reaction-selector";
|
||||
|
||||
@ -1,2 +1 @@
|
||||
export * from "./auth";
|
||||
export * from "./project-details";
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
import { Calendar, GanttChartSquare, Kanban, List, Sheet } from "lucide-react";
|
||||
// types
|
||||
import { TIssuePriorities } from "@plane/types";
|
||||
import {
|
||||
TIssueLayout,
|
||||
TIssueLayoutViews,
|
||||
TIssueFilterKeys,
|
||||
TIssueFilterPriorityObject,
|
||||
TIssueFilterState,
|
||||
TIssueFilterStateObject,
|
||||
} from "@/types/issue";
|
||||
import { TIssueLayout, TIssueFilterKeys, TIssueFilterPriorityObject } from "@/types/issue";
|
||||
|
||||
// issue filters
|
||||
export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: { [key in TIssueLayout]: Record<"filters", TIssueFilterKeys[]> } = {
|
||||
@ -28,20 +22,18 @@ export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: { [key in TIssueLayout]: Record<"f
|
||||
},
|
||||
};
|
||||
|
||||
export const issueLayoutViews: Partial<TIssueLayoutViews> = {
|
||||
list: {
|
||||
title: "List View",
|
||||
icon: "format_list_bulleted",
|
||||
className: "",
|
||||
},
|
||||
kanban: {
|
||||
title: "Board View",
|
||||
icon: "grid_view",
|
||||
className: "",
|
||||
},
|
||||
};
|
||||
export const ISSUE_LAYOUTS: {
|
||||
key: TIssueLayout;
|
||||
title: string;
|
||||
icon: any;
|
||||
}[] = [
|
||||
{ key: "list", title: "List", icon: List },
|
||||
{ key: "kanban", title: "Kanban", icon: Kanban },
|
||||
{ key: "calendar", title: "Calendar", icon: Calendar },
|
||||
{ key: "spreadsheet", title: "Spreadsheet", icon: Sheet },
|
||||
{ key: "gantt", title: "Gantt chart", icon: GanttChartSquare },
|
||||
];
|
||||
|
||||
// issue priority filters
|
||||
export const issuePriorityFilters: TIssueFilterPriorityObject[] = [
|
||||
{
|
||||
key: "urgent",
|
||||
@ -84,55 +76,3 @@ export const issuePriorityFilter = (priorityKey: TIssuePriorities): TIssueFilter
|
||||
if (currentIssuePriority) return currentIssuePriority;
|
||||
return undefined;
|
||||
};
|
||||
|
||||
// issue group filters
|
||||
export const issueGroupColors: {
|
||||
[key in TIssueFilterState]: string;
|
||||
} = {
|
||||
backlog: "#d9d9d9",
|
||||
unstarted: "#3f76ff",
|
||||
started: "#f59e0b",
|
||||
completed: "#16a34a",
|
||||
cancelled: "#dc2626",
|
||||
};
|
||||
|
||||
export const issueGroups: TIssueFilterStateObject[] = [
|
||||
{
|
||||
key: "backlog",
|
||||
title: "Backlog",
|
||||
color: "#d9d9d9",
|
||||
className: `text-[#d9d9d9] bg-[#d9d9d9]/10`,
|
||||
},
|
||||
{
|
||||
key: "unstarted",
|
||||
title: "Unstarted",
|
||||
color: "#3f76ff",
|
||||
className: `text-[#3f76ff] bg-[#3f76ff]/10`,
|
||||
},
|
||||
{
|
||||
key: "started",
|
||||
title: "Started",
|
||||
color: "#f59e0b",
|
||||
className: `text-[#f59e0b] bg-[#f59e0b]/10`,
|
||||
},
|
||||
{
|
||||
key: "completed",
|
||||
title: "Completed",
|
||||
color: "#16a34a",
|
||||
className: `text-[#16a34a] bg-[#16a34a]/10`,
|
||||
},
|
||||
{
|
||||
key: "cancelled",
|
||||
title: "Cancelled",
|
||||
color: "#dc2626",
|
||||
className: `text-[#dc2626] bg-[#dc2626]/10`,
|
||||
},
|
||||
];
|
||||
|
||||
export const issueGroupFilter = (issueKey: TIssueFilterState): TIssueFilterStateObject | undefined => {
|
||||
const currentIssueStateGroup: TIssueFilterStateObject | undefined =
|
||||
issueGroups && issueGroups.length > 0 ? issueGroups.find((group) => group.key === issueKey) : undefined;
|
||||
|
||||
if (currentIssueStateGroup) return currentIssueStateGroup;
|
||||
return undefined;
|
||||
};
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
export const USER_ROLES = [
|
||||
{ value: "Product / Project Manager", label: "Product / Project Manager" },
|
||||
{ value: "Development / Engineering", label: "Development / Engineering" },
|
||||
{ value: "Founder / Executive", label: "Founder / Executive" },
|
||||
{ value: "Freelancer / Consultant", label: "Freelancer / Consultant" },
|
||||
{ value: "Marketing / Growth", label: "Marketing / Growth" },
|
||||
{ value: "Sales / Business Development", label: "Sales / Business Development" },
|
||||
{ value: "Support / Operations", label: "Support / Operations" },
|
||||
{ value: "Student / Professor", label: "Student / Professor" },
|
||||
{ value: "Human Resources", label: "Human Resources" },
|
||||
{ value: "Other", label: "Other" },
|
||||
];
|
||||
@ -1,23 +1,3 @@
|
||||
export const getRandomEmoji = () => {
|
||||
const emojis = [
|
||||
"8986",
|
||||
"9200",
|
||||
"128204",
|
||||
"127773",
|
||||
"127891",
|
||||
"127947",
|
||||
"128076",
|
||||
"128077",
|
||||
"128187",
|
||||
"128188",
|
||||
"128512",
|
||||
"128522",
|
||||
"128578",
|
||||
];
|
||||
|
||||
return emojis[Math.floor(Math.random() * emojis.length)];
|
||||
};
|
||||
|
||||
export const renderEmoji = (
|
||||
emoji:
|
||||
| string
|
||||
|
||||
@ -3,7 +3,7 @@ import DOMPurify from "dompurify";
|
||||
export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2");
|
||||
|
||||
const fallbackCopyTextToClipboard = (text: string) => {
|
||||
var textArea = document.createElement("textarea");
|
||||
const textArea = document.createElement("textarea");
|
||||
textArea.value = text;
|
||||
|
||||
// Avoid scrolling to bottom
|
||||
@ -18,7 +18,7 @@ const fallbackCopyTextToClipboard = (text: string) => {
|
||||
try {
|
||||
// FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
|
||||
var successful = document.execCommand("copy");
|
||||
document.execCommand("copy");
|
||||
} catch (err) {}
|
||||
|
||||
document.body.removeChild(textArea);
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { useRef, useEffect } from "react";
|
||||
import useSWR from "swr";
|
||||
// types
|
||||
import { IUser } from "@plane/types";
|
||||
import { UserService } from "services/user.service";
|
||||
// services
|
||||
import { UserService } from "@/services/user.service";
|
||||
|
||||
export const useMention = () => {
|
||||
const userService = new UserService();
|
||||
|
||||
14
space/types/app.d.ts
vendored
14
space/types/app.d.ts
vendored
@ -1,14 +0,0 @@
|
||||
export interface IAppConfig {
|
||||
email_password_login: boolean;
|
||||
file_size_limit: number;
|
||||
google_client_id: string | null;
|
||||
github_app_name: string | null;
|
||||
github_client_id: string | null;
|
||||
magic_login: boolean;
|
||||
slack_client_id: string | null;
|
||||
posthog_api_key: string | null;
|
||||
posthog_host: string | null;
|
||||
has_openai_configured: boolean;
|
||||
has_unsplash_configured: boolean;
|
||||
is_self_managed: boolean;
|
||||
}
|
||||
19
space/types/issue.d.ts
vendored
19
space/types/issue.d.ts
vendored
@ -1,16 +1,9 @@
|
||||
import { IStateLite, IWorkspaceLite, TIssuePriorities } from "@plane/types";
|
||||
import { IStateLite, IWorkspaceLite, TIssuePriorities, TStateGroups } from "@plane/types";
|
||||
|
||||
export type TIssueLayout = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
|
||||
export type TIssueLayoutOptions = {
|
||||
[key in TIssueLayout]: boolean;
|
||||
};
|
||||
export type TIssueLayoutViews = {
|
||||
[key in TIssueLayout]: {
|
||||
title: string;
|
||||
icon: string;
|
||||
className: string;
|
||||
};
|
||||
};
|
||||
|
||||
export type TIssueFilterPriorityObject = {
|
||||
key: TIssuePriorities;
|
||||
@ -19,14 +12,6 @@ export type TIssueFilterPriorityObject = {
|
||||
icon: string;
|
||||
};
|
||||
|
||||
export type TIssueFilterState = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
|
||||
export type TIssueFilterStateObject = {
|
||||
key: TIssueFilterState;
|
||||
title: string;
|
||||
color: string;
|
||||
className: string;
|
||||
};
|
||||
|
||||
export type TIssueFilterKeys = "priority" | "state" | "labels";
|
||||
|
||||
export type TDisplayFilters = {
|
||||
@ -34,7 +19,7 @@ export type TDisplayFilters = {
|
||||
};
|
||||
|
||||
export type TFilters = {
|
||||
state: TIssueFilterState[];
|
||||
state: TStateGroups[];
|
||||
priority: TIssuePriorities[];
|
||||
labels: string[];
|
||||
};
|
||||
|
||||
2
space/types/publish.d.ts
vendored
2
space/types/publish.d.ts
vendored
@ -1,5 +1,5 @@
|
||||
import { IWorkspaceLite } from "@plane/types";
|
||||
import { TProjectDetails, TViewDetails } from "./project";
|
||||
import { TProjectDetails, TViewDetails } from "@/types/project";
|
||||
|
||||
export type TPublishEntityType = "project";
|
||||
|
||||
|
||||
4
space/types/theme.d.ts
vendored
4
space/types/theme.d.ts
vendored
@ -1,4 +0,0 @@
|
||||
export interface IThemeStore {
|
||||
theme: string;
|
||||
setTheme: (theme: "light" | "dark" | string) => void;
|
||||
}
|
||||
30
space/types/user.d.ts
vendored
30
space/types/user.d.ts
vendored
@ -1,30 +0,0 @@
|
||||
export interface IUser {
|
||||
avatar: string;
|
||||
cover_image: string | null;
|
||||
created_at: Date;
|
||||
created_location: string;
|
||||
date_joined: Date;
|
||||
email: string;
|
||||
display_name: string;
|
||||
first_name: string;
|
||||
id: string;
|
||||
is_email_verified: boolean;
|
||||
is_onboarded: boolean;
|
||||
is_tour_completed: boolean;
|
||||
last_location: string;
|
||||
last_login: Date;
|
||||
last_name: string;
|
||||
mobile_number: string;
|
||||
role: string;
|
||||
is_password_autoset: boolean;
|
||||
onboarding_step: {
|
||||
workspace_join?: boolean;
|
||||
profile_complete?: boolean;
|
||||
workspace_create?: boolean;
|
||||
workspace_invite?: boolean;
|
||||
};
|
||||
token: string;
|
||||
updated_at: Date;
|
||||
username: string;
|
||||
user_timezone: string;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user