mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
feat: converting space app to use nextjs app dir (#4451)
* feat: changemod space * fix: space app dir fixes * fix: build errors
This commit is contained in:
sriram veeraghanta
GitHub
parent
087d54a261
commit
febf19ccc0
@ -13,7 +13,7 @@ module.exports = {
|
||||
plugins: ["react", "@typescript-eslint", "import"],
|
||||
settings: {
|
||||
next: {
|
||||
rootDir: ["web/", "space/", "packages/*/"],
|
||||
rootDir: ["web/", "space/", "admin/", "packages/*/"],
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
|
||||
5
space/app/[workspace_slug]/[project_id]/error.tsx
Normal file
5
space/app/[workspace_slug]/[project_id]/error.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
"use client";
|
||||
|
||||
export default function ProjectError() {
|
||||
return <>Project Error</>;
|
||||
}
|
||||
36
space/app/[workspace_slug]/[project_id]/layout.tsx
Normal file
36
space/app/[workspace_slug]/[project_id]/layout.tsx
Normal file
@ -0,0 +1,36 @@
|
||||
import Image from "next/image";
|
||||
// components
|
||||
import IssueNavbar from "@/components/issues/navbar";
|
||||
// services
|
||||
import ProjectService from "@/services/project.service";
|
||||
// assets
|
||||
import planeLogo from "public/plane-logo.svg";
|
||||
|
||||
const projectService = new ProjectService();
|
||||
|
||||
export default async function ProjectLayout({ children, params }: { children: React.ReactNode; params: any }) {
|
||||
const { workspace_slug, project_id } = params;
|
||||
const projectSettings = await projectService.getProjectSettings(workspace_slug, project_id);
|
||||
|
||||
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 projectSettings={projectSettings} workspaceSlug={workspace_slug} projectId={project_id} />
|
||||
</div>
|
||||
<div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
|
||||
<a
|
||||
href="https://plane.so"
|
||||
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<div className="relative grid h-6 w-6 place-items-center">
|
||||
<Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
Powered by <span className="font-semibold">Plane Deploy</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
3
space/app/[workspace_slug]/[project_id]/not-found.tsx
Normal file
3
space/app/[workspace_slug]/[project_id]/not-found.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function ProjectSettingsNotFound() {
|
||||
return <>Project Settings not found</>;
|
||||
}
|
||||
8
space/app/[workspace_slug]/[project_id]/page.tsx
Normal file
8
space/app/[workspace_slug]/[project_id]/page.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
// components
|
||||
import { ProjectDetailsView } from "@/components/views";
|
||||
|
||||
export default async function WorkspaceProjectPage({ params }: { params: any }) {
|
||||
const { workspace_slug, project_id, peekId } = params;
|
||||
|
||||
return <ProjectDetailsView workspaceSlug={workspace_slug} projectId={project_id} peekId={peekId} />;
|
||||
}
|
||||
40
space/app/error.tsx
Normal file
40
space/app/error.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
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 handleRetry = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
|
||||
<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 Logo" />
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Button size="md" onClick={handleRetry}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
space/app/layout.tsx
Normal file
35
space/app/layout.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { Metadata } from "next";
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
// helpers
|
||||
import { ASSET_PREFIX } from "@/helpers/common.helper";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Plane Deploy | Make your Plane boards public with one-click",
|
||||
description: "Plane Deploy is a customer feedback management tool built on top of plane.so",
|
||||
openGraph: {
|
||||
title: "Plane Deploy | Make your Plane boards public with one-click",
|
||||
description: "Plane Deploy is a customer feedback management tool built on top of plane.so",
|
||||
url: "https://sites.plane.so/",
|
||||
},
|
||||
keywords:
|
||||
"software development, customer feedback, software, accelerate, code management, release management, project management, issue tracking, agile, scrum, kanban, collaboration",
|
||||
twitter: {
|
||||
site: "@planepowers",
|
||||
},
|
||||
};
|
||||
|
||||
export default async function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={`${ASSET_PREFIX}favicon/apple-touch-icon.png`} />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href={`${ASSET_PREFIX}favicon/favicon-32x32.png`} />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href={`${ASSET_PREFIX}favicon/favicon-16x16.png`} />
|
||||
<link rel="manifest" href={`${ASSET_PREFIX}site.webmanifest.json`} />
|
||||
<link rel="shortcut icon" href={`${ASSET_PREFIX}favicon/favicon.ico`} />
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
39
space/app/not-found.tsx
Normal file
39
space/app/not-found.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
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 InstanceNotFound() {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
|
||||
|
||||
const handleRetry = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
|
||||
<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 Logo" />
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Button size="md" onClick={handleRetry}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
43
space/app/page.tsx
Normal file
43
space/app/page.tsx
Normal file
@ -0,0 +1,43 @@
|
||||
// components
|
||||
import { UserLoggedIn } from "@/components/accounts";
|
||||
import { InstanceNotReady, InstanceFailureView } from "@/components/instance";
|
||||
import { AuthView } from "@/components/views";
|
||||
// helpers
|
||||
// import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
// import { useInstance, useUser } from "@/hooks/store";
|
||||
// wrapper
|
||||
// import { AuthWrapper } from "@/lib/wrappers";
|
||||
// lib
|
||||
import { AppProvider } from "@/lib/app-providers";
|
||||
// services
|
||||
import { InstanceService } from "@/services/instance.service";
|
||||
import { UserService } from "@/services/user.service";
|
||||
|
||||
const userServices = new UserService();
|
||||
const instanceService = new InstanceService();
|
||||
|
||||
export default async function HomePage() {
|
||||
const instanceDetails = await instanceService.getInstanceInfo().catch(() => undefined);
|
||||
const user = await userServices
|
||||
.currentUser()
|
||||
.then((user) => ({ ...user, isAuthenticated: true }))
|
||||
.catch(() => ({ isAuthenticated: false }));
|
||||
|
||||
if (!instanceDetails) {
|
||||
return <InstanceFailureView />;
|
||||
}
|
||||
|
||||
if (!instanceDetails?.instance?.is_setup_done) {
|
||||
<InstanceNotReady />;
|
||||
}
|
||||
|
||||
if (user.isAuthenticated) {
|
||||
return <UserLoggedIn />;
|
||||
}
|
||||
|
||||
return (
|
||||
<AppProvider initialState={{ instance: instanceDetails.instance }}>
|
||||
<AuthView />
|
||||
</AppProvider>
|
||||
);
|
||||
}
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// icons
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
import { Fragment, useState } from "react";
|
||||
import { usePopper } from "react-popper";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
// icons
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useParams } from "next/navigation";
|
||||
import { Eye, EyeOff, XCircle } from "lucide-react";
|
||||
// ui
|
||||
import { Button, Input, Spinner } from "@plane/ui";
|
||||
@ -12,7 +14,7 @@ import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
import { getPasswordStrength } from "@/helpers/password.helper";
|
||||
// hooks
|
||||
import { useInstance } from "@/hooks/store";
|
||||
import { AuthService } from "@/services/authentication.service";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
|
||||
type Props = {
|
||||
email: string;
|
||||
@ -43,12 +45,11 @@ export const PasswordForm: React.FC<Props> = (props) => {
|
||||
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
// hooks
|
||||
const { instance } = useInstance();
|
||||
const { data: instance, config: instanceConfig } = useInstance();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { next_path } = router.query;
|
||||
const { next_path } = useParams<any>();
|
||||
// derived values
|
||||
const isSmtpConfigured = instance?.config?.is_smtp_configured;
|
||||
const isSmtpConfigured = instanceConfig?.is_smtp_configured;
|
||||
|
||||
const handleFormChange = (key: keyof TPasswordFormValues, value: string) =>
|
||||
setPasswordFormData((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
@ -7,7 +9,7 @@ import { EmailForm, UniqueCodeForm, PasswordForm, OAuthOptions, TermsAndConditio
|
||||
import { useInstance } from "@/hooks/store";
|
||||
import useToast from "@/hooks/use-toast";
|
||||
// services
|
||||
import { AuthService } from "@/services/authentication.service";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
|
||||
export enum EAuthSteps {
|
||||
EMAIL = "EMAIL",
|
||||
@ -60,9 +62,9 @@ export const AuthRoot = observer(() => {
|
||||
const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
|
||||
const [email, setEmail] = useState("");
|
||||
// hooks
|
||||
const { instance } = useInstance();
|
||||
const { config: instanceConfig } = useInstance();
|
||||
// derived values
|
||||
const isSmtpConfigured = instance?.config?.is_smtp_configured;
|
||||
const isSmtpConfigured = instanceConfig?.is_smtp_configured;
|
||||
|
||||
const { header, subHeader } = getHeaderSubHeader(authMode);
|
||||
|
||||
@ -112,8 +114,8 @@ export const AuthRoot = observer(() => {
|
||||
);
|
||||
};
|
||||
|
||||
const isOAuthEnabled =
|
||||
instance?.config && (instance?.config?.is_google_enabled || instance?.config?.is_github_enabled);
|
||||
const isOAuthEnabled = instanceConfig && (instanceConfig?.is_google_enabled || instanceConfig?.is_github_enabled);
|
||||
|
||||
return (
|
||||
<div className="relative flex flex-col space-y-6">
|
||||
<div className="space-y-1 text-center">
|
||||
@ -149,7 +151,7 @@ export const AuthRoot = observer(() => {
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{isOAuthEnabled && <OAuthOptions />}
|
||||
{isOAuthEnabled !== undefined && <OAuthOptions />}
|
||||
<TermsAndConditions mode={authMode} />
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useParams } from "next/navigation";
|
||||
// icons
|
||||
import { CircleCheck, XCircle } from "lucide-react";
|
||||
// ui
|
||||
@ -10,7 +12,7 @@ import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
import useTimer from "@/hooks/use-timer";
|
||||
import useToast from "@/hooks/use-toast";
|
||||
// services
|
||||
import { AuthService } from "@/services/authentication.service";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
// types
|
||||
import { IEmailCheckData } from "@/types/auth";
|
||||
import { EAuthModes } from "./root";
|
||||
@ -43,8 +45,7 @@ export const UniqueCodeForm: React.FC<Props> = (props) => {
|
||||
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { next_path } = router.query;
|
||||
const { next_path } = useParams<any>();
|
||||
// toast alert
|
||||
const { setToastAlert } = useToast();
|
||||
// timer
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { observer } from "mobx-react-lite";
|
||||
// components
|
||||
import { GithubOAuthButton, GoogleOAuthButton } from "@/components/accounts";
|
||||
@ -6,7 +8,7 @@ import { useInstance } from "@/hooks/store";
|
||||
|
||||
export const OAuthOptions: React.FC = observer(() => {
|
||||
// hooks
|
||||
const { instance } = useInstance();
|
||||
const { config: instanceConfig } = useInstance();
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -16,12 +18,12 @@ export const OAuthOptions: React.FC = observer(() => {
|
||||
<hr className="w-full border-onboarding-border-100" />
|
||||
</div>
|
||||
<div className={`mx-auto mt-7 grid gap-4 overflow-hidden sm:w-96`}>
|
||||
{instance?.config?.is_google_enabled && (
|
||||
{instanceConfig?.is_google_enabled && (
|
||||
<div className="flex h-[42px] items-center !overflow-hidden">
|
||||
<GoogleOAuthButton text="SignIn with Google" />
|
||||
</div>
|
||||
)}
|
||||
{instance?.config?.is_github_enabled && <GithubOAuthButton text="SignIn with Github" />}
|
||||
{instanceConfig?.is_github_enabled && <GithubOAuthButton text="SignIn with Github" />}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import React, { useMemo, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
@ -8,7 +10,7 @@ import { Button, Input, Spinner, TOAST_TYPE, setToast } from "@plane/ui";
|
||||
// components
|
||||
import { UserImageUploadModal } from "@/components/accounts";
|
||||
// hooks
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { useUser } from "@/hooks/store";
|
||||
// services
|
||||
import fileService from "@/services/file.service";
|
||||
|
||||
@ -35,9 +37,7 @@ export const OnBoardingForm: React.FC<Props> = observer((props) => {
|
||||
const [isRemoving, setIsRemoving] = useState(false);
|
||||
const [isImageUploadModalOpen, setIsImageUploadModalOpen] = useState(false);
|
||||
// store hooks
|
||||
const {
|
||||
user: { updateCurrentUser },
|
||||
} = useMobxStore();
|
||||
const { updateCurrentUser } = useUser();
|
||||
// form info
|
||||
const {
|
||||
getValues,
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
// icons
|
||||
import { CircleCheck } from "lucide-react";
|
||||
// helpers
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import React, { FC } from "react";
|
||||
import Link from "next/link";
|
||||
import { EAuthModes } from "./auth-forms";
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
@ -27,7 +28,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
|
||||
const [image, setImage] = useState<File | null>(null);
|
||||
const [isImageUploading, setIsImageUploading] = useState(false);
|
||||
// store hooks
|
||||
const { instance } = useInstance();
|
||||
const { config: instanceConfig } = useInstance();
|
||||
|
||||
const onDrop = (acceptedFiles: File[]) => setImage(acceptedFiles[0]);
|
||||
|
||||
@ -36,7 +37,7 @@ export const UserImageUploadModal: React.FC<Props> = observer((props) => {
|
||||
accept: {
|
||||
"image/*": [".png", ".jpg", ".jpeg", ".svg", ".webp"],
|
||||
},
|
||||
maxSize: instance?.config?.file_size_limit ?? MAX_FILE_SIZE,
|
||||
maxSize: (instanceConfig?.file_size_limit as number) ?? MAX_FILE_SIZE,
|
||||
multiple: false,
|
||||
});
|
||||
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
"use client";
|
||||
import { FC } from "react";
|
||||
import Image from "next/image";
|
||||
import { useTheme } from "next-themes";
|
||||
@ -7,15 +8,18 @@ import InstanceFailureDarkImage from "public/instance/instance-failure-dark.svg"
|
||||
import InstanceFailureImage from "public/instance/instance-failure.svg";
|
||||
|
||||
type InstanceFailureViewProps = {
|
||||
mutate: () => void;
|
||||
// mutate: () => void;
|
||||
};
|
||||
|
||||
export const InstanceFailureView: FC<InstanceFailureViewProps> = (props) => {
|
||||
const { mutate } = props;
|
||||
export const InstanceFailureView: FC<InstanceFailureViewProps> = () => {
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
|
||||
|
||||
const handleRetry = () => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
|
||||
<div className="w-auto max-w-2xl relative space-y-8 py-10">
|
||||
@ -28,7 +32,7 @@ export const InstanceFailureView: FC<InstanceFailureViewProps> = (props) => {
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<Button size="md" onClick={mutate}>
|
||||
<Button size="md" onClick={handleRetry}>
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,19 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
// ui
|
||||
import { Button } from "@plane/ui";
|
||||
// helpers
|
||||
// helper
|
||||
import { ADMIN_BASE_URL, ADMIN_BASE_PATH } from "@/helpers/common.helper";
|
||||
// images
|
||||
import PlaneTakeOffImage from "@/public/instance/plane-takeoff.png";
|
||||
|
||||
export const InstanceNotReady: FC = () => {
|
||||
const GOD_MODE_URL = encodeURI(ADMIN_BASE_URL + ADMIN_BASE_PATH + "/setup/?auth_enabled=0");
|
||||
const GOD_MODE_URL = encodeURI(ADMIN_BASE_URL + ADMIN_BASE_PATH);
|
||||
|
||||
return (
|
||||
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center mt-10">
|
||||
<div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center pt-12">
|
||||
<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>
|
||||
@ -21,13 +22,12 @@ export const InstanceNotReady: FC = () => {
|
||||
Get started by setting up your instance and workspace
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Link href={GOD_MODE_URL}>
|
||||
<a href={GOD_MODE_URL}>
|
||||
<Button size="lg" className="w-full">
|
||||
Get started
|
||||
</Button>
|
||||
</Link>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,53 +1,48 @@
|
||||
"use client";
|
||||
|
||||
// mobx react lite
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
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 { useMobxStore } from "@/hooks/store";
|
||||
|
||||
// components
|
||||
// hooks
|
||||
import { useIssueDetails, useProject } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssue } from "types/issue";
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
export const IssueKanBanBlock = observer(({ issue }: { issue: IIssue }) => {
|
||||
const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
|
||||
type IssueKanBanBlockProps = {
|
||||
issue: IIssue;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
params: any;
|
||||
};
|
||||
|
||||
export const IssueKanBanBlock: FC<IssueKanBanBlockProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, params, issue } = props;
|
||||
const { board, priorities, states, labels } = params;
|
||||
// store
|
||||
const { project } = useProject();
|
||||
const { setPeekId } = useIssueDetails();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, board, priorities, states, labels } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
board: string;
|
||||
priorities: string;
|
||||
states: string;
|
||||
labels: string;
|
||||
};
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const handleBlockClick = () => {
|
||||
issueDetailStore.setPeekId(issue.id);
|
||||
setPeekId(issue.id);
|
||||
const params: any = { board: board, peekId: issue.id };
|
||||
if (states && states.length > 0) params.states = states;
|
||||
if (priorities && priorities.length > 0) params.priorities = priorities;
|
||||
if (labels && labels.length > 0) params.labels = labels;
|
||||
router.push(
|
||||
{
|
||||
pathname: `/${workspace_slug}/${project_slug}`,
|
||||
query: { ...params },
|
||||
},
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
);
|
||||
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-1.5 space-y-2 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3 py-2 text-sm shadow-custom-shadow-2xs">
|
||||
{/* id */}
|
||||
<div className="break-words text-xs text-custom-text-300">
|
||||
{projectStore?.project?.identifier}-{issue?.sequence_id}
|
||||
{project?.identifier}-{issue?.sequence_id}
|
||||
</div>
|
||||
|
||||
{/* name */}
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// interfaces
|
||||
// constants
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
import { issueGroupFilter } from "@/constants/data";
|
||||
// ui
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
// constants
|
||||
import { issueGroupFilter } from "@/constants/data";
|
||||
// mobx hook
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssueState } from "types/issue";
|
||||
import { useIssue } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { IIssueState } from "@/types/issue";
|
||||
|
||||
export const IssueKanBanHeader = observer(({ state }: { state: IIssueState }) => {
|
||||
const store: RootStore = useMobxStore();
|
||||
|
||||
const { getCountOfIssuesByState } = useIssue();
|
||||
const stateGroup = issueGroupFilter(state.group);
|
||||
|
||||
if (stateGroup === null) return <></>;
|
||||
@ -23,9 +21,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">
|
||||
{store.issue.getCountOfIssuesByState(state.id)}
|
||||
</span>
|
||||
<span className="flex-shrink-0 rounded-full text-custom-text-300">{getCountOfIssuesByState(state.id)}</span>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,36 +1,47 @@
|
||||
"use client";
|
||||
|
||||
// mobx react lite
|
||||
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";
|
||||
// ui
|
||||
import { Icon } from "@/components/ui";
|
||||
// interfaces
|
||||
// mobx hook
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssueState, IIssue } from "types/issue";
|
||||
import { useIssue } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { IIssueState, IIssue } from "@/types/issue";
|
||||
|
||||
export const IssueKanbanView = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
type IssueKanbanViewProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const IssueKanbanView: FC<IssueKanbanViewProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// store hooks
|
||||
const { states, getFilteredIssuesByState } = useIssue();
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full w-full gap-3 overflow-hidden overflow-x-auto">
|
||||
{store?.issue?.states &&
|
||||
store?.issue?.states.length > 0 &&
|
||||
store?.issue?.states.map((_state: IIssueState) => (
|
||||
{states &&
|
||||
states.length > 0 &&
|
||||
states.map((_state: IIssueState) => (
|
||||
<div key={_state.id} className="relative flex h-full w-[340px] flex-shrink-0 flex-col">
|
||||
<div className="flex-shrink-0">
|
||||
<IssueKanBanHeader state={_state} />
|
||||
</div>
|
||||
<div className="hide-vertical-scrollbar h-full w-full overflow-hidden overflow-y-auto">
|
||||
{store.issue.getFilteredIssuesByState(_state.id) &&
|
||||
store.issue.getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
{getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
<div className="space-y-3 px-2 pb-2">
|
||||
{store.issue.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueKanBanBlock key={_issue.id} issue={_issue} />
|
||||
{getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueKanBanBlock
|
||||
key={_issue.id}
|
||||
issue={_issue}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
params={{}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -1,47 +1,40 @@
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { useParams, 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";
|
||||
// mobx hook
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { useIssueDetails, useProject } from "@/hooks/store";
|
||||
// interfaces
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssue } from "types/issue";
|
||||
import { IIssue } from "@/types/issue";
|
||||
// store
|
||||
|
||||
export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
|
||||
const { issue } = props;
|
||||
type IssueListBlockProps = {
|
||||
issue: IIssue;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const IssueListBlock: FC<IssueListBlockProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, issue } = props;
|
||||
const { board, states, priorities, labels } = useParams<any>();
|
||||
const searchParams = useSearchParams();
|
||||
// store
|
||||
const { project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
|
||||
const { project } = useProject();
|
||||
const { setPeekId } = useIssueDetails();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, board, priorities, states, labels } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
board: string;
|
||||
priorities: string;
|
||||
states: string;
|
||||
labels: string;
|
||||
};
|
||||
|
||||
const handleBlockClick = () => {
|
||||
issueDetailStore.setPeekId(issue.id);
|
||||
setPeekId(issue.id);
|
||||
const params: any = { board: board, peekId: issue.id };
|
||||
if (states && states.length > 0) params.states = states;
|
||||
if (priorities && priorities.length > 0) params.priorities = priorities;
|
||||
if (labels && labels.length > 0) params.labels = labels;
|
||||
router.push(
|
||||
{
|
||||
pathname: `/${workspace_slug}/${project_slug}`,
|
||||
query: { ...params },
|
||||
},
|
||||
undefined,
|
||||
{ shallow: true }
|
||||
);
|
||||
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
|
||||
// router.push(`/${workspace_slug?.toString()}/${project_slug}?board=${board?.toString()}&peekId=${issue.id}`);
|
||||
};
|
||||
|
||||
@ -50,7 +43,7 @@ export const IssueListBlock: FC<{ issue: IIssue }> = observer((props) => {
|
||||
<div className="relative flex w-full flex-grow items-center gap-3 overflow-hidden">
|
||||
{/* id */}
|
||||
<div className="flex-shrink-0 text-xs font-medium text-custom-text-300">
|
||||
{projectStore?.project?.identifier}-{issue?.sequence_id}
|
||||
{project?.identifier}-{issue?.sequence_id}
|
||||
</div>
|
||||
{/* name */}
|
||||
<div onClick={handleBlockClick} className="flex-grow cursor-pointer truncate text-sm font-medium">
|
||||
|
||||
@ -1,18 +1,15 @@
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// interfaces
|
||||
// ui
|
||||
import { StateGroupIcon } from "@plane/ui";
|
||||
// constants
|
||||
import { issueGroupFilter } from "@/constants/data";
|
||||
// mobx hook
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssueState } from "types/issue";
|
||||
import { useIssue } from "@/hooks/store";
|
||||
// types
|
||||
import { IIssueState } from "@/types/issue";
|
||||
|
||||
export const IssueListHeader = observer(({ state }: { state: IIssueState }) => {
|
||||
const store: RootStore = useMobxStore();
|
||||
|
||||
const { getCountOfIssuesByState } = useIssue();
|
||||
const stateGroup = issueGroupFilter(state.group);
|
||||
|
||||
if (stateGroup === null) return <></>;
|
||||
@ -23,7 +20,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">{store.issue.getCountOfIssuesByState(state.id)}</div>
|
||||
<div className="text-sm font-medium text-custom-text-200">{getCountOfIssuesByState(state.id)}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,29 +1,34 @@
|
||||
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";
|
||||
// interfaces
|
||||
// mobx hook
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
// store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssueState, IIssue } from "types/issue";
|
||||
import { useIssue } from "@/hooks/store";
|
||||
// types
|
||||
import { IIssueState, IIssue } from "@/types/issue";
|
||||
|
||||
export const IssueListView = observer(() => {
|
||||
const { issue: issueStore }: RootStore = useMobxStore();
|
||||
type IssueListViewProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const IssueListView: FC<IssueListViewProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// store hooks
|
||||
const { states, getFilteredIssuesByState } = useIssue();
|
||||
|
||||
return (
|
||||
<>
|
||||
{issueStore?.states &&
|
||||
issueStore?.states.length > 0 &&
|
||||
issueStore?.states.map((_state: IIssueState) => (
|
||||
{states &&
|
||||
states.length > 0 &&
|
||||
states.map((_state: IIssueState) => (
|
||||
<div key={_state.id} className="relative w-full">
|
||||
<IssueListHeader state={_state} />
|
||||
{issueStore.getFilteredIssuesByState(_state.id) &&
|
||||
issueStore.getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
{getFilteredIssuesByState(_state.id) && getFilteredIssuesByState(_state.id).length > 0 ? (
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{issueStore.getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueListBlock key={_issue.id} issue={_issue} />
|
||||
{getFilteredIssuesByState(_state.id).map((_issue: IIssue) => (
|
||||
<IssueListBlock key={_issue.id} issue={_issue} workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -1,12 +1,10 @@
|
||||
// components
|
||||
// icons
|
||||
import { X } from "lucide-react";
|
||||
// helpers
|
||||
import { IIssueFilterOptions } from "@/store/issues/types";
|
||||
import { IIssueLabel, IIssueState } from "types/issue";
|
||||
// types
|
||||
import { IIssueLabel, IIssueState, IIssueFilterOptions } from "@/types/issue";
|
||||
// components
|
||||
import { AppliedPriorityFilters } from "./priority";
|
||||
import { AppliedStateFilters } from "./state";
|
||||
// types
|
||||
|
||||
type Props = {
|
||||
appliedFilters: IIssueFilterOptions;
|
||||
|
||||
@ -1,33 +1,31 @@
|
||||
"use client";
|
||||
|
||||
import { FC, useCallback } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// components
|
||||
import { useRouter } from "next/navigation";
|
||||
// hooks
|
||||
import { useIssue, useProject, useIssueFilter } from "@/hooks/store";
|
||||
// store
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { IIssueFilterOptions } from "@/store/issues/types";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssueFilterOptions } from "@/types/issue";
|
||||
// components
|
||||
import { AppliedFiltersList } from "./filters-list";
|
||||
|
||||
export const IssueAppliedFilters: FC = observer(() => {
|
||||
// TODO: fix component types
|
||||
export const IssueAppliedFilters: FC = observer((props: any) => {
|
||||
const router = useRouter();
|
||||
const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
};
|
||||
|
||||
const {
|
||||
issuesFilter: { issueFilters, updateFilters },
|
||||
issue: { states, labels },
|
||||
project: { activeBoard },
|
||||
}: RootStore = useMobxStore();
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const { states, labels } = useIssue();
|
||||
const { activeLayout } = useProject();
|
||||
const { issueFilters, updateFilters } = useIssueFilter();
|
||||
|
||||
const userFilters = issueFilters?.filters || {};
|
||||
|
||||
const appliedFilters: IIssueFilterOptions = {};
|
||||
const appliedFilters: any = {};
|
||||
|
||||
Object.entries(userFilters).forEach(([key, value]) => {
|
||||
if (!value) return;
|
||||
if (Array.isArray(value) && value.length === 0) return;
|
||||
appliedFilters[key as keyof IIssueFilterOptions] = value;
|
||||
appliedFilters[key] = value;
|
||||
});
|
||||
|
||||
const updateRouteParams = useCallback(
|
||||
@ -36,16 +34,17 @@ export const IssueAppliedFilters: FC = observer(() => {
|
||||
const priority = key === "priority" ? value || [] : issueFilters?.filters?.priority ?? [];
|
||||
const labels = key === "labels" ? value || [] : issueFilters?.filters?.labels ?? [];
|
||||
|
||||
let params: any = { board: activeBoard || "list" };
|
||||
let params: any = { board: activeLayout || "list" };
|
||||
if (!clearFields) {
|
||||
if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
|
||||
if (state.length > 0) params = { ...params, states: state.join(",") };
|
||||
if (labels.length > 0) params = { ...params, labels: labels.join(",") };
|
||||
}
|
||||
|
||||
router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
|
||||
console.log("params", params);
|
||||
// TODO: fix this redirection
|
||||
// router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
|
||||
},
|
||||
[workspaceSlug, projectId, activeBoard, issueFilters, router]
|
||||
[workspaceSlug, projectId, activeLayout, issueFilters, router]
|
||||
);
|
||||
|
||||
const handleRemoveFilter = (key: keyof IIssueFilterOptions, value: string | null) => {
|
||||
@ -80,7 +79,7 @@ export const IssueAppliedFilters: FC = observer(() => {
|
||||
<div className="border-b border-custom-border-200 p-5 py-3">
|
||||
<AppliedFiltersList
|
||||
appliedFilters={appliedFilters || {}}
|
||||
handleRemoveFilter={handleRemoveFilter}
|
||||
handleRemoveFilter={handleRemoveFilter as any}
|
||||
handleRemoveAllFilters={handleRemoveAllFilters}
|
||||
labels={labels ?? []}
|
||||
states={states ?? []}
|
||||
|
||||
@ -1,29 +1,29 @@
|
||||
import { FC, useCallback } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
// constants
|
||||
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
|
||||
// hooks
|
||||
import { useIssue, useIssueFilter, useProject } from "@/hooks/store";
|
||||
// types
|
||||
import { IIssueFilterOptions } from "@/types/issue";
|
||||
// components
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/store/issues/helpers";
|
||||
import { IIssueFilterOptions } from "@/store/issues/types";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { FiltersDropdown } from "./helpers/dropdown";
|
||||
import { FilterSelection } from "./selection";
|
||||
// types
|
||||
// helpers
|
||||
// store
|
||||
|
||||
export const IssueFiltersDropdown: FC = observer(() => {
|
||||
type IssueFiltersDropdownProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const IssueFiltersDropdown: FC<IssueFiltersDropdownProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
const searchParams = useSearchParams();
|
||||
const router = useRouter();
|
||||
const { workspace_slug: workspaceSlug, project_slug: projectId } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
};
|
||||
|
||||
const {
|
||||
project: { activeBoard },
|
||||
issue: { states, labels },
|
||||
issuesFilter: { issueFilters, updateFilters },
|
||||
}: RootStore = useMobxStore();
|
||||
// store hooks
|
||||
const { activeLayout } = useProject();
|
||||
const { states, labels } = useIssue();
|
||||
const { issueFilters, updateFilters } = useIssueFilter();
|
||||
|
||||
const updateRouteParams = useCallback(
|
||||
(key: keyof IIssueFilterOptions, value: string[]) => {
|
||||
@ -31,14 +31,14 @@ export const IssueFiltersDropdown: FC = observer(() => {
|
||||
const priority = key === "priority" ? value : issueFilters?.filters?.priority ?? [];
|
||||
const labels = key === "labels" ? value : issueFilters?.filters?.labels ?? [];
|
||||
|
||||
let params: any = { board: activeBoard || "list" };
|
||||
let params: any = { board: activeLayout || "list" };
|
||||
if (priority.length > 0) params = { ...params, priorities: priority.join(",") };
|
||||
if (state.length > 0) params = { ...params, states: state.join(",") };
|
||||
if (labels.length > 0) params = { ...params, labels: labels.join(",") };
|
||||
|
||||
router.push({ pathname: `/${workspaceSlug}/${projectId}`, query: { ...params } }, undefined, { shallow: true });
|
||||
console.log("params", params);
|
||||
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
|
||||
},
|
||||
[workspaceSlug, projectId, activeBoard, issueFilters, router]
|
||||
[workspaceSlug, projectId, activeLayout, issueFilters, router]
|
||||
);
|
||||
|
||||
const handleFilters = useCallback(
|
||||
@ -66,8 +66,8 @@ export const IssueFiltersDropdown: FC = observer(() => {
|
||||
<FiltersDropdown title="Filters" placement="bottom-end">
|
||||
<FilterSelection
|
||||
filters={issueFilters?.filters ?? {}}
|
||||
handleFilters={handleFilters}
|
||||
layoutDisplayFiltersOptions={activeBoard ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeBoard] : undefined}
|
||||
handleFilters={handleFilters as any}
|
||||
layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined}
|
||||
states={states ?? undefined}
|
||||
labels={labels ?? undefined}
|
||||
/>
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import React, { useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { Search, X } from "lucide-react";
|
||||
// components
|
||||
// types
|
||||
|
||||
// filter helpers
|
||||
import { ILayoutDisplayFiltersOptions } from "@/store/issues/helpers";
|
||||
import { IIssueFilterOptions } from "@/store/issues/types";
|
||||
import { IIssueState, IIssueLabel } from "types/issue";
|
||||
import { IIssueState, IIssueLabel, IIssueFilterOptions } from "@/types/issue";
|
||||
import { ILayoutDisplayFiltersOptions } from "@/types/issue-filters";
|
||||
// components
|
||||
import { FilterPriority, FilterState } from "./";
|
||||
|
||||
type Props = {
|
||||
|
||||
@ -1,54 +1,52 @@
|
||||
import { useEffect } from "react";
|
||||
"use client";
|
||||
|
||||
import { useEffect, FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// components
|
||||
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 { useMobxStore, useUser } from "@/hooks/store";
|
||||
// store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { useProject, useUser, useIssueFilter } from "@/hooks/store";
|
||||
// types
|
||||
import { TIssueBoardKeys } from "@/types/issue";
|
||||
// components
|
||||
import { NavbarIssueBoardView } from "./issue-board-view";
|
||||
import { NavbarTheme } from "./theme";
|
||||
|
||||
const IssueNavbar = observer(() => {
|
||||
const {
|
||||
project: projectStore,
|
||||
issuesFilter: { updateFilters },
|
||||
}: RootStore = useMobxStore();
|
||||
const { data: user } = useUser();
|
||||
// router
|
||||
type IssueNavbarProps = {
|
||||
projectSettings: any;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
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();
|
||||
const { workspace_slug, project_slug, board, peekId, states, priorities, labels } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
peekId: string;
|
||||
board: string;
|
||||
states: string;
|
||||
priorities: string;
|
||||
labels: string;
|
||||
};
|
||||
// store
|
||||
const { settings, activeLayout, hydrate, setActiveLayout } = useProject();
|
||||
const { data: user } = useUser();
|
||||
const { updateFilters } = useIssueFilter();
|
||||
hydrate(projectSettings);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace_slug && project_slug) {
|
||||
projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
|
||||
}
|
||||
}, [projectStore, workspace_slug, project_slug]);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace_slug && project_slug && projectStore?.deploySettings) {
|
||||
if (workspaceSlug && projectId && settings) {
|
||||
const viewsAcceptable: string[] = [];
|
||||
let currentBoard: TIssueBoardKeys | null = null;
|
||||
|
||||
if (projectStore?.deploySettings?.views?.list) viewsAcceptable.push("list");
|
||||
if (projectStore?.deploySettings?.views?.kanban) viewsAcceptable.push("kanban");
|
||||
if (projectStore?.deploySettings?.views?.calendar) viewsAcceptable.push("calendar");
|
||||
if (projectStore?.deploySettings?.views?.gantt) viewsAcceptable.push("gantt");
|
||||
if (projectStore?.deploySettings?.views?.spreadsheet) viewsAcceptable.push("spreadsheet");
|
||||
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())) {
|
||||
@ -65,49 +63,47 @@ const IssueNavbar = observer(() => {
|
||||
}
|
||||
|
||||
if (currentBoard) {
|
||||
if (projectStore?.activeBoard === null || projectStore?.activeBoard !== 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(project_slug, storeParams);
|
||||
|
||||
projectStore.setActiveBoard(currentBoard);
|
||||
router.push({
|
||||
pathname: `/${workspace_slug}/${project_slug}`,
|
||||
query: { ...params },
|
||||
});
|
||||
if (storeParams) updateFilters(projectId, storeParams);
|
||||
setActiveLayout(currentBoard);
|
||||
router.push(`/${workspaceSlug}/${projectId}?${searchParams}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [
|
||||
board,
|
||||
workspace_slug,
|
||||
project_slug,
|
||||
workspaceSlug,
|
||||
projectId,
|
||||
router,
|
||||
projectStore,
|
||||
projectStore?.deploySettings,
|
||||
updateFilters,
|
||||
labels,
|
||||
states,
|
||||
priorities,
|
||||
peekId,
|
||||
settings,
|
||||
activeLayout,
|
||||
setActiveLayout,
|
||||
searchParams,
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="relative flex w-full items-center gap-4 px-5">
|
||||
{/* project detail */}
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
{projectStore.project ? (
|
||||
{project_details ? (
|
||||
<span className="h-7 w-7 flex-shrink-0 grid place-items-center">
|
||||
<ProjectLogo logo={projectStore.project.logo_props} className="text-lg" />
|
||||
<ProjectLogo logo={project_details.logo_props} className="text-lg" />
|
||||
</span>
|
||||
) : (
|
||||
<span className="grid h-7 w-7 flex-shrink-0 place-items-center rounded uppercase">
|
||||
@ -115,21 +111,18 @@ const IssueNavbar = observer(() => {
|
||||
</span>
|
||||
)}
|
||||
<div className="line-clamp-1 max-w-[300px] overflow-hidden text-lg font-medium">
|
||||
{projectStore?.project?.name || `...`}
|
||||
{project_details?.name || `...`}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* issue search bar */}
|
||||
<div className="w-full">{/* <NavbarSearch /> */}</div>
|
||||
|
||||
{/* issue views */}
|
||||
<div className="relative flex flex-shrink-0 items-center gap-1 transition-all delay-150 ease-in-out">
|
||||
<NavbarIssueBoardView />
|
||||
<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 />
|
||||
<IssueFiltersDropdown workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
|
||||
{/* theming */}
|
||||
@ -137,14 +130,14 @@ const IssueNavbar = observer(() => {
|
||||
<NavbarTheme />
|
||||
</div>
|
||||
|
||||
{user ? (
|
||||
{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=${router.asPath}`}>
|
||||
<Link href={`/?next_path=${pathName}`}>
|
||||
<Button variant="outline-primary">Sign in</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -1,47 +1,49 @@
|
||||
"use client";
|
||||
|
||||
import { FC } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// constants
|
||||
import { issueViews } from "@/constants/data";
|
||||
// hooks
|
||||
import { useProject } from "@/hooks/store";
|
||||
// mobx
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { TIssueBoardKeys } from "types/issue";
|
||||
import { TIssueBoardKeys } from "@/types/issue";
|
||||
|
||||
export const NavbarIssueBoardView = observer(() => {
|
||||
const {
|
||||
project: { viewOptions, setActiveBoard, activeBoard },
|
||||
}: RootStore = useMobxStore();
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug } = router.query as { workspace_slug: string; project_slug: string };
|
||||
type NavbarIssueBoardViewProps = {
|
||||
layouts: Record<TIssueBoardKeys, boolean>;
|
||||
};
|
||||
|
||||
export const NavbarIssueBoardView: FC<NavbarIssueBoardViewProps> = observer((props) => {
|
||||
const { layouts } = props;
|
||||
|
||||
const { activeLayout, setActiveLayout } = useProject();
|
||||
|
||||
const handleCurrentBoardView = (boardView: string) => {
|
||||
setActiveBoard(boardView as TIssueBoardKeys);
|
||||
router.push(`/${workspace_slug}/${project_slug}?board=${boardView}`);
|
||||
setActiveLayout(boardView as TIssueBoardKeys);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{viewOptions &&
|
||||
Object.keys(viewOptions).map((viewKey: string) => {
|
||||
if (viewOptions[viewKey]) {
|
||||
{layouts &&
|
||||
Object.keys(layouts).map((layoutKey: string) => {
|
||||
if (layouts[layoutKey as TIssueBoardKeys]) {
|
||||
return (
|
||||
<div
|
||||
key={viewKey}
|
||||
key={layoutKey}
|
||||
className={`flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-sm ${
|
||||
viewKey === activeBoard
|
||||
layoutKey === activeLayout
|
||||
? `bg-custom-background-80 text-custom-text-200`
|
||||
: `text-custom-text-300 hover:bg-custom-background-80`
|
||||
}`}
|
||||
onClick={() => handleCurrentBoardView(viewKey)}
|
||||
title={viewKey}
|
||||
onClick={() => handleCurrentBoardView(layoutKey)}
|
||||
title={layoutKey}
|
||||
>
|
||||
<span
|
||||
className={`material-symbols-rounded text-[18px] ${
|
||||
issueViews[viewKey]?.className ? issueViews[viewKey]?.className : ``
|
||||
issueViews[layoutKey]?.className ? issueViews[layoutKey]?.className : ``
|
||||
}`}
|
||||
>
|
||||
{issueViews[viewKey]?.icon}
|
||||
{issueViews[layoutKey]?.icon}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
// next theme
|
||||
import { useEffect, useState } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
@ -16,7 +18,6 @@ export const NavbarTheme = observer(() => {
|
||||
|
||||
useEffect(() => {
|
||||
if (!theme) return;
|
||||
|
||||
setAppTheme(theme);
|
||||
}, [theme]);
|
||||
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
import React, { useRef } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { useForm, Controller } from "react-hook-form";
|
||||
// components
|
||||
import { EditorRefApi } from "@plane/lite-text-editor";
|
||||
import { LiteTextEditor } from "@/components/editor/lite-text-editor";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, useProject, useUser } from "@/hooks/store";
|
||||
import useToast from "@/hooks/use-toast";
|
||||
// types
|
||||
import { Comment } from "@/types/issue";
|
||||
@ -17,22 +16,21 @@ const defaultValues: Partial<Comment> = {
|
||||
|
||||
type Props = {
|
||||
disabled?: boolean;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const AddComment: React.FC<Props> = observer(() => {
|
||||
export const AddComment: React.FC<Props> = observer((props) => {
|
||||
// const { disabled = false } = props;
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// refs
|
||||
const editorRef = useRef<EditorRefApi>(null);
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug } = router.query;
|
||||
// store hooks
|
||||
const { project } = useMobxStore();
|
||||
const { issueDetails: issueDetailStore } = useMobxStore();
|
||||
const { workspace } = useProject();
|
||||
const { peekId: issueId, addIssueComment } = useIssueDetails();
|
||||
const { data: currentUser } = useUser();
|
||||
// derived values
|
||||
const workspaceId = project.workspace?.id;
|
||||
const issueId = issueDetailStore.peekId;
|
||||
const workspaceId = workspace?.id;
|
||||
// form info
|
||||
const {
|
||||
handleSubmit,
|
||||
@ -45,10 +43,9 @@ export const AddComment: React.FC<Props> = observer(() => {
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const onSubmit = async (formData: Comment) => {
|
||||
if (!workspace_slug || !project_slug || !issueId || isSubmitting || !formData.comment_html) return;
|
||||
if (!workspaceSlug || !projectId || !issueId || isSubmitting || !formData.comment_html) return;
|
||||
|
||||
await issueDetailStore
|
||||
.addIssueComment(workspace_slug.toString(), project_slug.toString(), issueId, formData)
|
||||
await addIssueComment(workspaceSlug, projectId, issueId, formData)
|
||||
.then(() => {
|
||||
reset(defaultValues);
|
||||
editorRef.current?.clearEditor();
|
||||
@ -75,7 +72,7 @@ export const AddComment: React.FC<Props> = observer(() => {
|
||||
if (currentUser) handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
workspaceId={workspaceId as string}
|
||||
workspaceSlug={workspace_slug as string}
|
||||
workspaceSlug={workspaceSlug}
|
||||
ref={editorRef}
|
||||
initialValue={
|
||||
!value || value === "" || (typeof value === "object" && Object.keys(value).length === 0)
|
||||
|
||||
@ -10,9 +10,7 @@ import { CommentReactions } from "@/components/issues/peek-overview";
|
||||
// helpers
|
||||
import { timeAgo } from "@/helpers/date-time.helper";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
// store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { useIssueDetails, useProject, useUser } from "@/hooks/store";
|
||||
// types
|
||||
import { Comment } from "@/types/issue";
|
||||
|
||||
@ -23,12 +21,13 @@ type Props = {
|
||||
|
||||
export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
const { comment, workspaceSlug } = props;
|
||||
const { project }: RootStore = useMobxStore();
|
||||
const workspaceId = project.workspace?.id;
|
||||
|
||||
// store
|
||||
const { issueDetails: issueDetailStore } = useMobxStore();
|
||||
// store hooks
|
||||
const { workspace } = useProject();
|
||||
const { peekId, deleteIssueComment, updateIssueComment } = useIssueDetails();
|
||||
const { data: currentUser } = useUser();
|
||||
// derived values
|
||||
const workspaceId = workspace?.id;
|
||||
|
||||
// states
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
// refs
|
||||
@ -44,15 +43,14 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
});
|
||||
|
||||
const handleDelete = () => {
|
||||
if (!workspaceSlug || !issueDetailStore.peekId) return;
|
||||
issueDetailStore.deleteIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id);
|
||||
if (!workspaceSlug || !peekId) return;
|
||||
deleteIssueComment(workspaceSlug, comment.project, peekId, comment.id);
|
||||
};
|
||||
|
||||
const handleCommentUpdate = async (formData: Comment) => {
|
||||
if (!workspaceSlug || !issueDetailStore.peekId) return;
|
||||
issueDetailStore.updateIssueComment(workspaceSlug, comment.project, issueDetailStore.peekId, comment.id, formData);
|
||||
if (!workspaceSlug || !peekId) return;
|
||||
updateIssueComment(workspaceSlug, comment.project, peekId, comment.id, formData);
|
||||
setIsEditing(false);
|
||||
|
||||
editorRef.current?.setEditorValue(formData.comment_html);
|
||||
showEditorRef.current?.setEditorValue(formData.comment_html);
|
||||
};
|
||||
@ -135,7 +133,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
|
||||
</form>
|
||||
<div className={`${isEditing ? "hidden" : ""}`}>
|
||||
<LiteTextReadOnlyEditor ref={showEditorRef} initialValue={comment.comment_html} />
|
||||
<CommentReactions commentId={comment.id} projectId={comment.project} />
|
||||
<CommentReactions commentId={comment.id} projectId={comment.project} workspaceSlug={workspaceSlug} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,58 +1,38 @@
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// ui
|
||||
import { ReactionSelector } from "@/components/ui";
|
||||
// helpers
|
||||
import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, useUser } from "@/hooks/store";
|
||||
|
||||
type Props = {
|
||||
commentId: string;
|
||||
projectId: string;
|
||||
workspaceSlug: string;
|
||||
};
|
||||
|
||||
export const CommentReactions: React.FC<Props> = observer((props) => {
|
||||
const { commentId, projectId } = props;
|
||||
|
||||
const router = useRouter();
|
||||
const { workspace_slug } = router.query;
|
||||
const { commentId, projectId, workspaceSlug } = props;
|
||||
// hooks
|
||||
const { issueDetails: issueDetailsStore } = useMobxStore();
|
||||
const { addCommentReaction, removeCommentReaction, details, peekId } = useIssueDetails();
|
||||
const { data: user } = useUser();
|
||||
|
||||
const peekId = issueDetailsStore.peekId;
|
||||
const commentReactions = peekId
|
||||
? issueDetailsStore.details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions
|
||||
: [];
|
||||
const commentReactions = peekId ? details[peekId].comments.find((c) => c.id === commentId)?.comment_reactions : [];
|
||||
const groupedReactions = peekId ? groupReactions(commentReactions ?? [], "reaction") : {};
|
||||
|
||||
const userReactions = commentReactions?.filter((r) => r.actor_detail.id === user?.id);
|
||||
|
||||
const handleAddReaction = (reactionHex: string) => {
|
||||
if (!workspace_slug || !projectId || !peekId) return;
|
||||
|
||||
issueDetailsStore.addCommentReaction(
|
||||
workspace_slug.toString(),
|
||||
projectId.toString(),
|
||||
peekId,
|
||||
commentId,
|
||||
reactionHex
|
||||
);
|
||||
if (!workspaceSlug || !projectId || !peekId) return;
|
||||
addCommentReaction(workspaceSlug, projectId, peekId, commentId, reactionHex);
|
||||
};
|
||||
|
||||
const handleRemoveReaction = (reactionHex: string) => {
|
||||
if (!workspace_slug || !projectId || !peekId) return;
|
||||
|
||||
issueDetailsStore.removeCommentReaction(
|
||||
workspace_slug.toString(),
|
||||
projectId.toString(),
|
||||
peekId,
|
||||
commentId,
|
||||
reactionHex
|
||||
);
|
||||
if (!workspaceSlug || !projectId || !peekId) return;
|
||||
removeCommentReaction(workspaceSlug, projectId, peekId, commentId, reactionHex);
|
||||
};
|
||||
|
||||
const handleReactionClick = (reactionHex: string) => {
|
||||
|
||||
@ -13,11 +13,12 @@ import { IIssue } from "@/types/issue";
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
issueDetails: IIssue | undefined;
|
||||
workspace_slug: string;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
||||
const { handleClose, issueDetails } = props;
|
||||
const { handleClose, issueDetails, workspaceSlug, projectId } = props;
|
||||
|
||||
return (
|
||||
<div className="grid h-full w-full grid-cols-10 divide-x divide-custom-border-200 overflow-hidden">
|
||||
@ -35,7 +36,11 @@ export const FullScreenPeekView: React.FC<Props> = observer((props) => {
|
||||
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity issueDetails={issueDetails} />
|
||||
<PeekOverviewIssueActivity
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -2,19 +2,17 @@ import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { MoveRight } from "lucide-react";
|
||||
import { Listbox, Transition } from "@headlessui/react";
|
||||
// hooks
|
||||
// ui
|
||||
import { Icon } from "@/components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "@/helpers/string.helper";
|
||||
// hooks
|
||||
import { useIssueDetails } from "@/hooks/store";
|
||||
import useToast from "@/hooks/use-toast";
|
||||
// store
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { IPeekMode } from "@/store/issue_details";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
// lib
|
||||
import useToast from "hooks/use-toast";
|
||||
import { IPeekMode } from "@/store/issue-detail.store";
|
||||
// types
|
||||
import { IIssue } from "types/issue";
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
@ -42,7 +40,7 @@ const peekModes: {
|
||||
export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
||||
const { handleClose } = props;
|
||||
|
||||
const { issueDetails: issueDetailStore }: RootStore = useMobxStore();
|
||||
const { peekMode, setPeekMode } = useIssueDetails();
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
@ -62,21 +60,19 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
{issueDetailStore.peekMode === "side" && (
|
||||
{peekMode === "side" && (
|
||||
<button type="button" onClick={handleClose}>
|
||||
<MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
</button>
|
||||
)}
|
||||
<Listbox
|
||||
as="div"
|
||||
value={issueDetailStore.peekMode}
|
||||
onChange={(val) => issueDetailStore.setPeekMode(val)}
|
||||
value={peekMode}
|
||||
onChange={(val) => setPeekMode(val)}
|
||||
className="relative flex-shrink-0 text-left"
|
||||
>
|
||||
<Listbox.Button
|
||||
className={`grid place-items-center ${issueDetailStore.peekMode === "full" ? "rotate-45" : ""}`}
|
||||
>
|
||||
<Icon iconName={peekModes.find((m) => m.key === issueDetailStore.peekMode)?.icon ?? ""} />
|
||||
<Listbox.Button className={`grid place-items-center ${peekMode === "full" ? "rotate-45" : ""}`}>
|
||||
<Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} />
|
||||
</Listbox.Button>
|
||||
|
||||
<Transition
|
||||
@ -121,7 +117,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
|
||||
</Transition>
|
||||
</Listbox>
|
||||
</div>
|
||||
{(issueDetailStore.peekMode === "side" || issueDetailStore.peekMode === "modal") && (
|
||||
{(peekMode === "side" || peekMode === "modal") && (
|
||||
<div className="flex flex-shrink-0 items-center gap-2">
|
||||
<button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
|
||||
<Icon iconName="link" />
|
||||
|
||||
@ -1,44 +1,48 @@
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Button } from "@plane/ui";
|
||||
// components
|
||||
import { CommentCard, AddComment } from "@/components/issues/peek-overview";
|
||||
import { Icon } from "@/components/ui";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, useProject, useUser } from "@/hooks/store";
|
||||
// types
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
issueDetails: IIssue;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
|
||||
export const PeekOverviewIssueActivity: React.FC<Props> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug } = router.query;
|
||||
const pathname = usePathname();
|
||||
// store
|
||||
const { issueDetails: issueDetailStore, project: projectStore } = useMobxStore();
|
||||
const { canComment } = useProject();
|
||||
const { details, peekId } = useIssueDetails();
|
||||
const { data: currentUser } = useUser();
|
||||
const comments = issueDetailStore.details[issueDetailStore.peekId || ""]?.comments || [];
|
||||
|
||||
const comments = details[peekId || ""]?.comments || [];
|
||||
|
||||
return (
|
||||
<div className="pb-10">
|
||||
<h4 className="font-medium">Activity</h4>
|
||||
{workspace_slug && (
|
||||
{workspaceSlug && (
|
||||
<div className="mt-4">
|
||||
<div className="space-y-4">
|
||||
{comments.map((comment: any) => (
|
||||
<CommentCard key={comment.id} comment={comment} workspaceSlug={workspace_slug?.toString()} />
|
||||
<CommentCard key={comment.id} comment={comment} workspaceSlug={workspaceSlug?.toString()} />
|
||||
))}
|
||||
</div>
|
||||
{currentUser ? (
|
||||
<>
|
||||
{projectStore.deploySettings?.comments && (
|
||||
{canComment && (
|
||||
<div className="mt-4">
|
||||
<AddComment disabled={!currentUser} />
|
||||
<AddComment disabled={!currentUser} workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
@ -48,7 +52,7 @@ export const PeekOverviewIssueActivity: React.FC<Props> = observer(() => {
|
||||
<Icon iconName="lock" className="!text-sm" />
|
||||
Sign in to add your comment
|
||||
</p>
|
||||
<Link href={`/?next_path=${router.asPath}`}>
|
||||
<Link href={`/?next_path=${pathname}`}>
|
||||
<Button variant="primary">Sign in</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,22 @@
|
||||
import { useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
// lib
|
||||
import { Tooltip } from "@plane/ui";
|
||||
import { ReactionSelector } from "@/components/ui";
|
||||
// helpers
|
||||
import { groupReactions, renderEmoji } from "@/helpers/emoji.helper";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, useUser } from "@/hooks/store";
|
||||
|
||||
export const IssueEmojiReactions: React.FC = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug } = router.query;
|
||||
type IssueEmojiReactionsProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const IssueEmojiReactions: React.FC<IssueEmojiReactionsProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// store
|
||||
const { issueDetails: issueDetailsStore } = useMobxStore();
|
||||
const issueDetailsStore = useIssueDetails();
|
||||
const { data: user, fetchCurrentUser } = useUser();
|
||||
|
||||
const issueId = issueDetailsStore.peekId;
|
||||
@ -24,20 +26,17 @@ export const IssueEmojiReactions: React.FC = observer(() => {
|
||||
const userReactions = reactions?.filter((r) => r.actor_detail.id === user?.id);
|
||||
|
||||
const handleAddReaction = (reactionHex: string) => {
|
||||
if (!workspace_slug || !project_slug || !issueId) return;
|
||||
|
||||
issueDetailsStore.addIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
issueDetailsStore.addIssueReaction(workspaceSlug.toString(), projectId.toString(), issueId, reactionHex);
|
||||
};
|
||||
|
||||
const handleRemoveReaction = (reactionHex: string) => {
|
||||
if (!workspace_slug || !project_slug || !issueId) return;
|
||||
|
||||
issueDetailsStore.removeIssueReaction(workspace_slug.toString(), project_slug.toString(), issueId, reactionHex);
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
issueDetailsStore.removeIssueReaction(workspaceSlug.toString(), projectId.toString(), issueId, reactionHex);
|
||||
};
|
||||
|
||||
const handleReactionClick = (reactionHex: string) => {
|
||||
const userReaction = userReactions?.find((r) => r.actor_detail.id === user?.id && r.reaction === reactionHex);
|
||||
|
||||
if (userReaction) handleRemoveReaction(reactionHex);
|
||||
else handleAddReaction(reactionHex);
|
||||
};
|
||||
|
||||
@ -8,7 +8,7 @@ import { issueGroupFilter, issuePriorityFilter } from "@/constants/data";
|
||||
import { renderFullDate } from "@/helpers/date-time.helper";
|
||||
import { copyTextToClipboard, addSpaceIfCamelCase } from "@/helpers/string.helper";
|
||||
// types
|
||||
import { IPeekMode } from "@/store/issue_details";
|
||||
import { IPeekMode } from "@/store/issue-detail.store";
|
||||
// constants
|
||||
import useToast from "hooks/use-toast";
|
||||
import { IIssue } from "types/issue";
|
||||
|
||||
@ -1,12 +1,20 @@
|
||||
import { useParams } from "next/navigation";
|
||||
import { IssueEmojiReactions, IssueVotes } from "@/components/issues/peek-overview";
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { useProject } from "@/hooks/store";
|
||||
|
||||
// type IssueReactionsProps = {
|
||||
// workspaceSlug: string;
|
||||
// projectId: string;
|
||||
// };
|
||||
|
||||
export const IssueReactions: React.FC = () => {
|
||||
const { project: projectStore } = useMobxStore();
|
||||
const { workspace_slug: workspaceSlug, project_id: projectId } = useParams<any>();
|
||||
|
||||
const { canVote, canReact } = useProject();
|
||||
|
||||
return (
|
||||
<div className="mt-4 flex items-center gap-3">
|
||||
{projectStore?.deploySettings?.votes && (
|
||||
{canVote && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<IssueVotes />
|
||||
@ -14,9 +22,9 @@ export const IssueReactions: React.FC = () => {
|
||||
<div className="h-8 w-0.5 bg-custom-background-200" />
|
||||
</>
|
||||
)}
|
||||
{projectStore?.deploySettings?.reactions && (
|
||||
{canReact && (
|
||||
<div className="flex items-center gap-2">
|
||||
<IssueEmojiReactions />
|
||||
<IssueEmojiReactions workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { Tooltip } from "@plane/ui";
|
||||
// hooks
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
import { useIssueDetails, useUser } from "@/hooks/store";
|
||||
|
||||
export const IssueVotes: React.FC = observer(() => {
|
||||
export const IssueVotes: React.FC = observer((props: any) => {
|
||||
const { workspaceSlug, projectId } = props;
|
||||
// states
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { workspace_slug, project_slug } = router.query;
|
||||
|
||||
const { issueDetails: issueDetailsStore } = useMobxStore();
|
||||
const issueDetailsStore = useIssueDetails();
|
||||
const { data: user, fetchCurrentUser } = useUser();
|
||||
|
||||
const issueId = issueDetailsStore.peekId;
|
||||
@ -26,16 +25,16 @@ export const IssueVotes: React.FC = observer(() => {
|
||||
const isDownVotedByUser = allDownVotes?.some((vote) => vote.actor === user?.id);
|
||||
|
||||
const handleVote = async (e: any, voteValue: 1 | -1) => {
|
||||
if (!workspace_slug || !project_slug || !issueId) return;
|
||||
if (!workspaceSlug || !projectId || !issueId) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
const actionPerformed = votes?.find((vote) => vote.actor === user?.id && vote.vote === voteValue);
|
||||
|
||||
if (actionPerformed)
|
||||
await issueDetailsStore.removeIssueVote(workspace_slug.toString(), project_slug.toString(), issueId);
|
||||
await issueDetailsStore.removeIssueVote(workspaceSlug.toString(), projectId.toString(), issueId);
|
||||
else
|
||||
await issueDetailsStore.addIssueVote(workspace_slug.toString(), project_slug.toString(), issueId, {
|
||||
await issueDetailsStore.addIssueVote(workspaceSlug.toString(), projectId.toString(), issueId, {
|
||||
vote: voteValue,
|
||||
});
|
||||
|
||||
|
||||
@ -1,42 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// mobx
|
||||
// headless ui
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
// components
|
||||
import { FullScreenPeekView, SidePeekView } from "@/components/issues/peek-overview";
|
||||
// lib
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
// store
|
||||
import { useIssue, useIssueDetails } from "@/hooks/store";
|
||||
|
||||
export const IssuePeekOverview: React.FC = observer(() => {
|
||||
export const IssuePeekOverview: React.FC = observer((props: any) => {
|
||||
const { workspaceSlug, projectId, peekId, board, priorities, states, labels } = props;
|
||||
// states
|
||||
const [isSidePeekOpen, setIsSidePeekOpen] = useState(false);
|
||||
const [isModalPeekOpen, setIsModalPeekOpen] = useState(false);
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, peekId, board, priorities, states, labels } = router.query as {
|
||||
workspace_slug: string;
|
||||
project_slug: string;
|
||||
peekId: string;
|
||||
board: string;
|
||||
priorities: string;
|
||||
states: string;
|
||||
labels: string;
|
||||
};
|
||||
// store
|
||||
const { issueDetails: issueDetailStore, issue: issueStore } = useMobxStore();
|
||||
const issueDetailStore = useIssueDetails();
|
||||
const issueStore = useIssue();
|
||||
|
||||
const issueDetails = issueDetailStore.peekId && peekId ? issueDetailStore.details[peekId.toString()] : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace_slug && project_slug && peekId && issueStore.issues && issueStore.issues.length > 0) {
|
||||
if (workspaceSlug && projectId && peekId && issueStore.issues && issueStore.issues.length > 0) {
|
||||
if (!issueDetails) {
|
||||
issueDetailStore.fetchIssueDetails(workspace_slug.toString(), project_slug.toString(), peekId.toString());
|
||||
issueDetailStore.fetchIssueDetails(workspaceSlug.toString(), projectId.toString(), peekId.toString());
|
||||
}
|
||||
}
|
||||
}, [workspace_slug, project_slug, issueDetailStore, issueDetails, peekId, issueStore.issues]);
|
||||
}, [workspaceSlug, projectId, issueDetailStore, issueDetails, peekId, issueStore.issues]);
|
||||
|
||||
const handleClose = () => {
|
||||
issueDetailStore.setPeekId(null);
|
||||
@ -45,10 +35,8 @@ export const IssuePeekOverview: React.FC = observer(() => {
|
||||
if (states && states.length > 0) params.states = states;
|
||||
if (priorities && priorities.length > 0) params.priorities = priorities;
|
||||
if (labels && labels.length > 0) params.labels = labels;
|
||||
|
||||
router.replace({ pathname: `/${workspace_slug?.toString()}/${project_slug}`, query: { ...params } }, undefined, {
|
||||
shallow: true,
|
||||
});
|
||||
// TODO: fix this redirection
|
||||
// router.push( encodeURI(`/${workspaceSlug?.toString()}/${projectId}`, ) { pathname: `/${workspaceSlug?.toString()}/${projectId}`, query: { ...params } });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@ -80,7 +68,12 @@ export const IssuePeekOverview: React.FC = observer(() => {
|
||||
leaveTo="translate-x-full"
|
||||
>
|
||||
<Dialog.Panel className="fixed right-0 top-0 z-20 h-full w-1/2 bg-custom-background-100 shadow-custom-shadow-sm">
|
||||
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</Dialog>
|
||||
@ -114,13 +107,19 @@ export const IssuePeekOverview: React.FC = observer(() => {
|
||||
}`}
|
||||
>
|
||||
{issueDetailStore.peekMode === "modal" && (
|
||||
<SidePeekView handleClose={handleClose} issueDetails={issueDetails} />
|
||||
<SidePeekView
|
||||
handleClose={handleClose}
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
)}
|
||||
{issueDetailStore.peekMode === "full" && (
|
||||
<FullScreenPeekView
|
||||
workspace_slug={workspace_slug}
|
||||
handleClose={handleClose}
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -7,16 +7,18 @@ import {
|
||||
PeekOverviewIssueDetails,
|
||||
PeekOverviewIssueProperties,
|
||||
} from "@/components/issues/peek-overview";
|
||||
|
||||
import { IIssue } from "types/issue";
|
||||
// types
|
||||
import { IIssue } from "@/types/issue";
|
||||
|
||||
type Props = {
|
||||
handleClose: () => void;
|
||||
issueDetails: IIssue | undefined;
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
};
|
||||
|
||||
export const SidePeekView: React.FC<Props> = observer((props) => {
|
||||
const { handleClose, issueDetails } = props;
|
||||
const { handleClose, issueDetails, workspaceSlug, projectId } = props;
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col overflow-hidden">
|
||||
@ -37,7 +39,11 @@ export const SidePeekView: React.FC<Props> = observer((props) => {
|
||||
<div className="my-5 h-[1] w-full border-t border-custom-border-200" />
|
||||
{/* issue activity/comments */}
|
||||
<div className="w-full pb-5">
|
||||
<PeekOverviewIssueActivity issueDetails={issueDetails} />
|
||||
<PeekOverviewIssueActivity
|
||||
issueDetails={issueDetails}
|
||||
workspaceSlug={workspaceSlug}
|
||||
projectId={projectId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
"use client";
|
||||
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
// ui
|
||||
@ -5,7 +7,7 @@ import { useTheme } from "next-themes";
|
||||
import useSWR from "swr";
|
||||
import { Spinner } from "@plane/ui";
|
||||
// components
|
||||
import { AuthRoot, UserLoggedIn } from "@/components/accounts";
|
||||
import { AuthRoot } from "@/components/accounts";
|
||||
// hooks
|
||||
import { useUser } from "@/hooks/store";
|
||||
// images
|
||||
@ -17,12 +19,15 @@ export const AuthView = observer(() => {
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
// store
|
||||
const { data: currentUser, fetchCurrentUser, isLoading } = useUser();
|
||||
const { fetchCurrentUser, isLoading } = useUser();
|
||||
|
||||
// fetching user information
|
||||
const { isLoading: isSWRLoading } = useSWR("CURRENT_USER_DETAILS", () => fetchCurrentUser(), {
|
||||
shouldRetryOnError: false,
|
||||
revalidateOnFocus: false,
|
||||
revalidateIfStale: false,
|
||||
revalidateOnReconnect: true,
|
||||
errorRetryCount: 1,
|
||||
});
|
||||
|
||||
return (
|
||||
@ -33,30 +38,26 @@ export const AuthView = observer(() => {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{currentUser ? (
|
||||
<UserLoggedIn />
|
||||
) : (
|
||||
<div className="relative w-screen h-screen overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
|
||||
className="w-full h-full object-cover"
|
||||
alt="Plane background pattern"
|
||||
/>
|
||||
<div className="relative w-screen h-screen overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
|
||||
className="w-full h-full object-cover"
|
||||
alt="Plane background pattern"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
|
||||
<div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
|
||||
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
|
||||
<div className="container mx-auto px-10 lg:px-0 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" />
|
||||
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
|
||||
<AuthRoot />
|
||||
</div>
|
||||
<div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10">
|
||||
<AuthRoot />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import { useEffect } from "react";
|
||||
"use client";
|
||||
|
||||
import { FC, useEffect } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
import { useParams } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { IssueCalendarView } from "@/components/issues/board-views/calendar";
|
||||
import { IssueGanttView } from "@/components/issues/board-views/gantt";
|
||||
@ -11,16 +14,31 @@ import { IssueSpreadsheetView } from "@/components/issues/board-views/spreadshee
|
||||
import { IssueAppliedFilters } from "@/components/issues/filters/applied-filters/root";
|
||||
import { IssuePeekOverview } from "@/components/issues/peek-overview";
|
||||
// mobx store
|
||||
import { useMobxStore, useUser } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { useIssue, useUser, useProject, useIssueDetails } from "@/hooks/store";
|
||||
// assets
|
||||
import SomethingWentWrongImage from "public/something-went-wrong.svg";
|
||||
|
||||
export const ProjectDetailsView = observer(() => {
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, states, labels, priorities, peekId } = router.query;
|
||||
type ProjectDetailsViewProps = {
|
||||
workspaceSlug: string;
|
||||
projectId: string;
|
||||
peekId: string;
|
||||
};
|
||||
|
||||
const { issue: issueStore, project: projectStore, issueDetails: issueDetailStore }: RootStore = useMobxStore();
|
||||
export const ProjectDetailsView: FC<ProjectDetailsViewProps> = observer((props) => {
|
||||
const { workspaceSlug, projectId, peekId } = props;
|
||||
// router
|
||||
const params = useParams();
|
||||
// store hooks
|
||||
const { fetchPublicIssues } = useIssue();
|
||||
const { activeLayout } = useProject();
|
||||
// fetching public issues
|
||||
useSWR(
|
||||
workspaceSlug && projectId ? "PROJECT_PUBLIC_ISSUES" : null,
|
||||
workspaceSlug && projectId ? () => fetchPublicIssues(workspaceSlug, projectId, params) : null
|
||||
);
|
||||
// store hooks
|
||||
const issueStore = useIssue();
|
||||
const issueDetailStore = useIssueDetails();
|
||||
const { data: currentUser, fetchCurrentUser } = useUser();
|
||||
|
||||
useEffect(() => {
|
||||
@ -30,25 +48,14 @@ export const ProjectDetailsView = observer(() => {
|
||||
}, [currentUser, fetchCurrentUser]);
|
||||
|
||||
useEffect(() => {
|
||||
if (workspace_slug && project_slug) {
|
||||
const params = {
|
||||
state: states || null,
|
||||
labels: labels || null,
|
||||
priority: priorities || null,
|
||||
};
|
||||
issueStore.fetchPublicIssues(workspace_slug?.toString(), project_slug.toString(), params);
|
||||
}
|
||||
}, [workspace_slug, project_slug, issueStore, states, labels, priorities]);
|
||||
|
||||
useEffect(() => {
|
||||
if (peekId && workspace_slug && project_slug) {
|
||||
if (peekId && workspaceSlug && projectId) {
|
||||
issueDetailStore.setPeekId(peekId.toString());
|
||||
}
|
||||
}, [peekId, issueDetailStore, project_slug, workspace_slug]);
|
||||
}, [peekId, issueDetailStore, projectId, workspaceSlug]);
|
||||
|
||||
return (
|
||||
<div className="relative h-full w-full overflow-hidden">
|
||||
{workspace_slug && <IssuePeekOverview />}
|
||||
{workspaceSlug && <IssuePeekOverview />}
|
||||
|
||||
{issueStore?.loader && !issueStore.issues ? (
|
||||
<div className="py-10 text-center text-sm text-custom-text-100">Loading...</div>
|
||||
@ -67,24 +74,24 @@ export const ProjectDetailsView = observer(() => {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
projectStore?.activeBoard && (
|
||||
activeLayout && (
|
||||
<div className="relative flex h-full w-full flex-col overflow-hidden">
|
||||
{/* applied filters */}
|
||||
<IssueAppliedFilters />
|
||||
|
||||
{projectStore?.activeBoard === "list" && (
|
||||
{activeLayout === "list" && (
|
||||
<div className="relative h-full w-full overflow-y-auto">
|
||||
<IssueListView />
|
||||
<IssueListView workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
)}
|
||||
{projectStore?.activeBoard === "kanban" && (
|
||||
{activeLayout === "kanban" && (
|
||||
<div className="relative mx-auto h-full w-full p-5">
|
||||
<IssueKanbanView />
|
||||
<IssueKanbanView workspaceSlug={workspaceSlug} projectId={projectId} />
|
||||
</div>
|
||||
)}
|
||||
{projectStore?.activeBoard === "calendar" && <IssueCalendarView />}
|
||||
{projectStore?.activeBoard === "spreadsheet" && <IssueSpreadsheetView />}
|
||||
{projectStore?.activeBoard === "gantt" && <IssueGanttView />}
|
||||
{activeLayout === "calendar" && <IssueCalendarView />}
|
||||
{activeLayout === "spreadsheet" && <IssueSpreadsheetView />}
|
||||
{activeLayout === "gantt" && <IssueGanttView />}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
20
space/constants/issue.ts
Normal file
20
space/constants/issue.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import { ILayoutDisplayFiltersOptions } from "@/types/issue-filters";
|
||||
|
||||
export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
|
||||
[pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
|
||||
} = {
|
||||
issues: {
|
||||
list: {
|
||||
filters: ["priority", "state", "labels"],
|
||||
display_properties: null,
|
||||
display_filters: null,
|
||||
extra_options: null,
|
||||
},
|
||||
kanban: {
|
||||
filters: ["priority", "state", "labels"],
|
||||
display_properties: null,
|
||||
display_filters: null,
|
||||
extra_options: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,4 +1,7 @@
|
||||
export * from "./user-mobx-provider";
|
||||
|
||||
export * from "./use-instance";
|
||||
export * from "./user";
|
||||
export * from "./use-project";
|
||||
export * from "./use-issue";
|
||||
export * from "./use-user";
|
||||
export * from "./use-user-profile";
|
||||
export * from "./use-issue-details";
|
||||
export * from "./use-issue-filter";
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { StoreContext } from "@/lib/store-context";
|
||||
import { IInstanceStore } from "@/store/instance.store";
|
||||
|
||||
export const useInstance = (): IInstanceStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useInstance must be used within StoreProvider");
|
||||
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
|
||||
return context.instance;
|
||||
};
|
||||
|
||||
11
space/hooks/store/use-issue-details.tsx
Normal file
11
space/hooks/store/use-issue-details.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { IIssueDetailStore } from "@/store/issue-detail.store";
|
||||
|
||||
export const useIssueDetails = (): IIssueDetailStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
|
||||
return context.issueDetail;
|
||||
};
|
||||
11
space/hooks/store/use-issue-filter.ts
Normal file
11
space/hooks/store/use-issue-filter.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { IIssueFilterStore } from "@/store/issue-filters.store";
|
||||
|
||||
export const useIssueFilter = (): IIssueFilterStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
|
||||
return context.issueFilter;
|
||||
};
|
||||
11
space/hooks/store/use-issue.ts
Normal file
11
space/hooks/store/use-issue.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { IIssueStore } from "@/store/issue.store";
|
||||
|
||||
export const useIssue = (): IIssueStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
|
||||
return context.issue;
|
||||
};
|
||||
11
space/hooks/store/use-project.ts
Normal file
11
space/hooks/store/use-project.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { IProjectStore } from "@/store/project.store";
|
||||
|
||||
export const useProject = (): IProjectStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
|
||||
return context.project;
|
||||
};
|
||||
@ -1,10 +1,11 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { StoreContext } from "@/lib/store-context";
|
||||
import { IProfileStore } from "@/store/user/profile.store";
|
||||
import { IProfileStore } from "@/store/profile.store";
|
||||
|
||||
export const useUserProfile = (): IProfileStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useUserProfile must be used within StoreProvider");
|
||||
return context.user.userProfile;
|
||||
return context.user.profile;
|
||||
};
|
||||
@ -1,7 +1,8 @@
|
||||
import { useContext } from "react";
|
||||
// lib
|
||||
import { StoreContext } from "@/lib/app-providers";
|
||||
// store
|
||||
import { StoreContext } from "@/lib/store-context";
|
||||
import { IUserStore } from "@/store/user";
|
||||
import { IUserStore } from "@/store/user.store";
|
||||
|
||||
export const useUser = (): IUserStore => {
|
||||
const context = useContext(StoreContext);
|
||||
@ -1,10 +0,0 @@
|
||||
import { useContext } from "react";
|
||||
// store
|
||||
import { StoreContext } from "@/lib/store-context";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
|
||||
export const useMobxStore = (): RootStore => {
|
||||
const context = useContext(StoreContext);
|
||||
if (context === undefined) throw new Error("useMobxStore must be used within StoreProvider");
|
||||
return context;
|
||||
};
|
||||
@ -1,2 +0,0 @@
|
||||
export * from "./use-user";
|
||||
export * from "./use-user-profile";
|
||||
@ -1,13 +0,0 @@
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
import { RootStore } from "@/store/root.store";
|
||||
|
||||
const useEditorSuggestions = () => {
|
||||
const { mentionsStore }: RootStore = useMobxStore();
|
||||
|
||||
return {
|
||||
// mentionSuggestions: mentionsStore.mentionSuggestions,
|
||||
mentionHighlights: mentionsStore.mentionHighlights,
|
||||
};
|
||||
};
|
||||
|
||||
export default useEditorSuggestions;
|
||||
@ -1,30 +0,0 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
// components
|
||||
import IssueNavbar from "@/components/issues/navbar";
|
||||
// logo
|
||||
import planeLogo from "public/plane-logo.svg";
|
||||
|
||||
const ProjectLayout = ({ children }: { children: React.ReactNode }) => (
|
||||
<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 />
|
||||
</div>
|
||||
<div className="relative h-full w-full overflow-hidden bg-custom-background-90">{children}</div>
|
||||
<a
|
||||
href="https://plane.so"
|
||||
className="fixed bottom-2.5 right-5 !z-[999999] flex items-center gap-1 rounded border border-custom-border-200 bg-custom-background-100 px-2 py-1 shadow-custom-shadow-2xs"
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<div className="relative grid h-6 w-6 place-items-center">
|
||||
<Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
Powered by <span className="font-semibold">Plane Deploy</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default observer(ProjectLayout);
|
||||
38
space/lib/app-providers.tsx
Normal file
38
space/lib/app-providers.tsx
Normal file
@ -0,0 +1,38 @@
|
||||
"use client";
|
||||
|
||||
import { ReactNode, createContext } from "react";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
// store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
|
||||
let rootStore = new RootStore();
|
||||
|
||||
export const StoreContext = createContext(rootStore);
|
||||
|
||||
function initializeStore(initialData = {}) {
|
||||
const singletonRootStore = rootStore ?? new RootStore();
|
||||
// If your page has Next.js data fetching methods that use a Mobx store, it will
|
||||
// get hydrated here, check `pages/ssg.js` and `pages/ssr.js` for more details
|
||||
if (initialData) {
|
||||
singletonRootStore.hydrate(initialData);
|
||||
}
|
||||
// For SSG and SSR always create a new store
|
||||
if (typeof window === "undefined") return singletonRootStore;
|
||||
// Create the store once in the client
|
||||
if (!rootStore) rootStore = singletonRootStore;
|
||||
return singletonRootStore;
|
||||
}
|
||||
|
||||
export type AppProviderProps = {
|
||||
children: ReactNode;
|
||||
initialState: any;
|
||||
};
|
||||
|
||||
export const AppProvider = ({ children, initialState = {} }: AppProviderProps) => {
|
||||
const store = initializeStore(initialState);
|
||||
return (
|
||||
<ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
|
||||
<StoreContext.Provider value={store}>{children}</StoreContext.Provider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@ -1 +0,0 @@
|
||||
export const init = {};
|
||||
@ -1,19 +0,0 @@
|
||||
import { ReactElement, createContext } from "react";
|
||||
// mobx store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
|
||||
export let rootStore = new RootStore();
|
||||
|
||||
export const StoreContext = createContext<RootStore>(rootStore);
|
||||
|
||||
const initializeStore = () => {
|
||||
const singletonRootStore = rootStore ?? new RootStore();
|
||||
if (typeof window === "undefined") return singletonRootStore;
|
||||
if (!rootStore) rootStore = singletonRootStore;
|
||||
return singletonRootStore;
|
||||
};
|
||||
|
||||
export const StoreProvider = ({ children }: { children: ReactElement }) => {
|
||||
const store = initializeStore();
|
||||
return <StoreContext.Provider value={store}>{children}</StoreContext.Provider>;
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
import { FC, ReactNode } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { useRouter } from "next/router";
|
||||
import { useRouter } from "next/navigation";
|
||||
import useSWR from "swr";
|
||||
import { Spinner } from "@plane/ui";
|
||||
// helpers
|
||||
|
||||
@ -1,2 +1 @@
|
||||
export * from "./instance-wrapper";
|
||||
export * from "./auth-wrapper";
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
import { FC, ReactNode } from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import useSWR from "swr";
|
||||
// ui
|
||||
import { Spinner } from "@plane/ui";
|
||||
// components
|
||||
import { InstanceNotReady, InstanceFailureView } from "@/components/instance";
|
||||
// hooks
|
||||
import { useInstance } from "@/hooks/store";
|
||||
|
||||
type TInstanceWrapper = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export const InstanceWrapper: FC<TInstanceWrapper> = observer((props) => {
|
||||
const { children } = props;
|
||||
// hooks
|
||||
const { isLoading, instance, fetchInstanceInfo } = useInstance();
|
||||
|
||||
const { isLoading: isSWRLoading, mutate } = useSWR("INSTANCE_INFORMATION", () => fetchInstanceInfo(), {
|
||||
revalidateOnFocus: false,
|
||||
revalidateIfStale: false,
|
||||
revalidateOnReconnect: false,
|
||||
errorRetryCount: 0,
|
||||
});
|
||||
|
||||
if (isSWRLoading || isLoading)
|
||||
return (
|
||||
<div className="relative flex h-screen w-full items-center justify-center">
|
||||
<Spinner />
|
||||
</div>
|
||||
);
|
||||
|
||||
if (!instance) return <InstanceFailureView mutate={mutate} />;
|
||||
|
||||
if (instance?.instance?.is_setup_done === false) return <InstanceNotReady />;
|
||||
|
||||
return <>{children}</>;
|
||||
});
|
||||
@ -1,42 +0,0 @@
|
||||
// next imports
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
// hooks
|
||||
import { useInstance } from "@/hooks/store";
|
||||
// images
|
||||
import notFoundImage from "public/404.svg";
|
||||
|
||||
const Custom404Error = observer(() => {
|
||||
// hooks
|
||||
const { instance } = useInstance();
|
||||
|
||||
const redirectionUrl = instance?.config?.app_base_url || "/";
|
||||
|
||||
return (
|
||||
<div className="relative flex h-full min-h-screen w-screen items-center justify-center py-5">
|
||||
<div className="max-w-[700px] space-y-5">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<div className="relative h-[240px] w-[240px]">
|
||||
<Image src={notFoundImage} layout="fill" alt="404- Page not found" />
|
||||
</div>
|
||||
<div className="text-xl font-medium">Oops! Something went wrong.</div>
|
||||
<div className="text-sm text-custom-text-200">
|
||||
Sorry, the page you are looking for cannot be found. It may have been removed, had its name changed, or is
|
||||
temporarily unavailable.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center text-center">
|
||||
<a
|
||||
href={redirectionUrl}
|
||||
className="cursor-pointer select-none rounded-sm border border-gray-200 bg-gray-50 p-1.5 px-2.5 text-sm font-medium text-gray-700 transition-all hover:scale-105 hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
Go to your Workspace
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default Custom404Error;
|
||||
@ -1,47 +0,0 @@
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
// components
|
||||
import { ProjectDetailsView } from "@/components/views";
|
||||
// helpers
|
||||
import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
// hooks
|
||||
import { useMobxStore } from "@/hooks/store";
|
||||
// layouts
|
||||
import ProjectLayout from "@/layouts/project-layout";
|
||||
// wrappers
|
||||
import { AuthWrapper } from "@/lib/wrappers";
|
||||
|
||||
const WorkspaceProjectPage = (props: any) => {
|
||||
const SITE_TITLE = props?.project_settings?.project_details?.name || "Plane | Deploy";
|
||||
|
||||
const router = useRouter();
|
||||
const { workspace_slug, project_slug, states, labels, priorities } = router.query;
|
||||
|
||||
const { project: projectStore, issue: issueStore } = useMobxStore();
|
||||
|
||||
useSWR("REVALIDATE_ALL", () => {
|
||||
if (workspace_slug && project_slug) {
|
||||
projectStore.fetchProjectSettings(workspace_slug.toString(), project_slug.toString());
|
||||
const params = {
|
||||
state: states || null,
|
||||
labels: labels || null,
|
||||
priority: priorities || null,
|
||||
};
|
||||
issueStore.fetchPublicIssues(workspace_slug.toString(), project_slug.toString(), params);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<AuthWrapper pageType={EPageTypes.AUTHENTICATED}>
|
||||
<ProjectLayout>
|
||||
<Head>
|
||||
<title>{SITE_TITLE}</title>
|
||||
</Head>
|
||||
<ProjectDetailsView />
|
||||
</ProjectLayout>
|
||||
</AuthWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default WorkspaceProjectPage;
|
||||
@ -1,5 +0,0 @@
|
||||
const WorkspaceProjectPage = () => (
|
||||
<div className="relative flex h-screen w-screen items-center justify-center text-5xl">Plane Workspace Space</div>
|
||||
);
|
||||
|
||||
export default WorkspaceProjectPage;
|
||||
@ -1,47 +0,0 @@
|
||||
import type { AppProps } from "next/app";
|
||||
import Head from "next/head";
|
||||
import { ThemeProvider } from "next-themes";
|
||||
// styles
|
||||
import "@/styles/globals.css";
|
||||
// contexts
|
||||
import { SITE_NAME, SITE_DESCRIPTION, SITE_URL, TWITTER_USER_NAME, SITE_KEYWORDS, SITE_TITLE } from "@/constants/seo";
|
||||
import { ToastContextProvider } from "@/contexts/toast.context";
|
||||
// mobx store provider
|
||||
import { StoreProvider } from "@/lib/store-context";
|
||||
// wrappers
|
||||
import { InstanceWrapper } from "@/lib/wrappers";
|
||||
|
||||
const prefix = "/spaces/";
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>{SITE_TITLE}</title>
|
||||
<meta property="og:site_name" content={SITE_NAME} />
|
||||
<meta property="og:title" content={SITE_TITLE} />
|
||||
<meta property="og:url" content={SITE_URL} />
|
||||
<meta name="description" content={SITE_DESCRIPTION} />
|
||||
<meta property="og:description" content={SITE_DESCRIPTION} />
|
||||
<meta name="keywords" content={SITE_KEYWORDS} />
|
||||
<meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href={`${prefix}favicon/apple-touch-icon.png`} />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href={`${prefix}favicon/favicon-32x32.png`} />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href={`${prefix}favicon/favicon-16x16.png`} />
|
||||
<link rel="manifest" href={`${prefix}site.webmanifest.json`} />
|
||||
<link rel="shortcut icon" href={`${prefix}favicon/favicon.ico`} />
|
||||
</Head>
|
||||
<StoreProvider>
|
||||
<ThemeProvider themes={["light", "dark"]} defaultTheme="system" enableSystem>
|
||||
<ToastContextProvider>
|
||||
<InstanceWrapper>
|
||||
<Component {...pageProps} />
|
||||
</InstanceWrapper>
|
||||
</ToastContextProvider>
|
||||
</ThemeProvider>
|
||||
</StoreProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@ -1,18 +0,0 @@
|
||||
import Document, { Html, Head, Main, NextScript } from "next/document";
|
||||
|
||||
class MyDocument extends Document {
|
||||
render() {
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body className="w-100 bg-custom-background-100 antialiased">
|
||||
<div id="context-menu-portal" />
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MyDocument;
|
||||
@ -1,166 +0,0 @@
|
||||
import { NextPage } from "next";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useTheme } from "next-themes";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// icons
|
||||
import { CircleCheck } from "lucide-react";
|
||||
// ui
|
||||
import { Button, Input, TOAST_TYPE, getButtonStyling, setToast } from "@plane/ui";
|
||||
// helpers
|
||||
import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
import { cn } from "@/helpers/common.helper";
|
||||
import { checkEmailValidity } from "@/helpers/string.helper";
|
||||
// hooks
|
||||
import useTimer from "@/hooks/use-timer";
|
||||
// wrappers
|
||||
import { AuthWrapper } from "@/lib/wrappers";
|
||||
// services
|
||||
import { AuthService } from "@/services/authentication.service";
|
||||
// images
|
||||
import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
|
||||
import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
|
||||
type TForgotPasswordFormValues = {
|
||||
email: string;
|
||||
};
|
||||
|
||||
const defaultValues: TForgotPasswordFormValues = {
|
||||
email: "",
|
||||
};
|
||||
|
||||
// services
|
||||
const authService = new AuthService();
|
||||
|
||||
const ForgotPasswordPage: NextPage = () => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { email } = router.query;
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
// timer
|
||||
const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0);
|
||||
|
||||
// form info
|
||||
const {
|
||||
control,
|
||||
formState: { errors, isSubmitting, isValid },
|
||||
handleSubmit,
|
||||
} = useForm<TForgotPasswordFormValues>({
|
||||
defaultValues: {
|
||||
...defaultValues,
|
||||
email: email?.toString() ?? "",
|
||||
},
|
||||
});
|
||||
|
||||
const handleForgotPassword = async (formData: TForgotPasswordFormValues) => {
|
||||
await authService
|
||||
.sendResetPasswordLink({
|
||||
email: formData.email,
|
||||
})
|
||||
.then(() => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.SUCCESS,
|
||||
title: "Email sent",
|
||||
message:
|
||||
"Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.",
|
||||
});
|
||||
setResendCodeTimer(30);
|
||||
})
|
||||
.catch((err: any) => {
|
||||
setToast({
|
||||
type: TOAST_TYPE.ERROR,
|
||||
title: "Error!",
|
||||
message: err?.error ?? "Something went wrong. Please try again.",
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
|
||||
<div className="relative h-screen w-full overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
|
||||
className="w-full h-full object-cover"
|
||||
alt="Plane background pattern"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
|
||||
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto h-full">
|
||||
<div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
|
||||
<div className="mx-auto flex flex-col">
|
||||
<div className="text-center space-y-1 py-4 mx-auto sm:w-96">
|
||||
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
|
||||
Reset your password
|
||||
</h3>
|
||||
<p className="font-medium text-onboarding-text-400">
|
||||
Enter your user account{"'"}s verified email address and we will send you a password reset link.
|
||||
</p>
|
||||
</div>
|
||||
<form onSubmit={handleSubmit(handleForgotPassword)} className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96">
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="email"
|
||||
rules={{
|
||||
required: "Email is required",
|
||||
validate: (value) => checkEmailValidity(value) || "Email is invalid",
|
||||
}}
|
||||
render={({ field: { value, onChange, ref } }) => (
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
ref={ref}
|
||||
hasError={Boolean(errors.email)}
|
||||
placeholder="name@company.com"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
disabled={resendTimerCode > 0}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{resendTimerCode > 0 && (
|
||||
<p className="flex w-full items-start px-1 gap-1 text-xs font-medium text-green-700">
|
||||
<CircleCheck height={12} width={12} className="mt-0.5" />
|
||||
We sent the reset link to your email address
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
disabled={!isValid}
|
||||
loading={isSubmitting || resendTimerCode > 0}
|
||||
>
|
||||
{resendTimerCode > 0 ? `Resend in ${resendTimerCode} seconds` : "Send reset link"}
|
||||
</Button>
|
||||
<Link href="/" className={cn("w-full", getButtonStyling("link-neutral", "lg"))}>
|
||||
Back to sign in
|
||||
</Link>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ForgotPasswordPage;
|
||||
@ -1,205 +0,0 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { NextPage } from "next";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
// icons
|
||||
import { useTheme } from "next-themes";
|
||||
import { Eye, EyeOff } from "lucide-react";
|
||||
// ui
|
||||
import { Button, Input } from "@plane/ui";
|
||||
// components
|
||||
import { PasswordStrengthMeter } from "@/components/accounts";
|
||||
// helpers
|
||||
import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
import { getPasswordStrength } from "@/helpers/password.helper";
|
||||
// wrappers
|
||||
import { AuthWrapper } from "@/lib/wrappers";
|
||||
// services
|
||||
import { AuthService } from "@/services/authentication.service";
|
||||
// images
|
||||
import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
|
||||
import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
|
||||
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";
|
||||
|
||||
type TResetPasswordFormValues = {
|
||||
email: string;
|
||||
password: string;
|
||||
confirm_password?: string;
|
||||
};
|
||||
|
||||
const defaultValues: TResetPasswordFormValues = {
|
||||
email: "",
|
||||
password: "",
|
||||
};
|
||||
|
||||
// services
|
||||
const authService = new AuthService();
|
||||
|
||||
const ResetPasswordPage: NextPage = () => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { uidb64, token, email } = router.query;
|
||||
// states
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [resetFormData, setResetFormData] = useState<TResetPasswordFormValues>({
|
||||
...defaultValues,
|
||||
email: email ? email.toString() : "",
|
||||
});
|
||||
const [csrfToken, setCsrfToken] = useState<string | undefined>(undefined);
|
||||
const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
if (email && !resetFormData.email) {
|
||||
setResetFormData((prev) => ({ ...prev, email: email.toString() }));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [email]);
|
||||
|
||||
const handleFormChange = (key: keyof TResetPasswordFormValues, value: string) =>
|
||||
setResetFormData((prev) => ({ ...prev, [key]: value }));
|
||||
|
||||
useEffect(() => {
|
||||
if (csrfToken === undefined)
|
||||
authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
|
||||
}, [csrfToken]);
|
||||
|
||||
const isButtonDisabled = useMemo(
|
||||
() =>
|
||||
!!resetFormData.password &&
|
||||
getPasswordStrength(resetFormData.password) >= 3 &&
|
||||
resetFormData.password === resetFormData.confirm_password
|
||||
? false
|
||||
: true,
|
||||
[resetFormData]
|
||||
);
|
||||
|
||||
return (
|
||||
<AuthWrapper pageType={EPageTypes.NON_AUTHENTICATED}>
|
||||
<div className="relative h-screen w-full overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
|
||||
className="w-full h-full object-cover"
|
||||
alt="Plane background pattern"
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28">
|
||||
<div className="flex items-center gap-x-2 py-10">
|
||||
<Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
|
||||
<span className="text-2xl font-semibold sm:text-3xl">Plane</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto h-full">
|
||||
<div className="h-full overflow-auto px-7 pb-56 pt-4 sm:px-0">
|
||||
<div className="mx-auto flex flex-col">
|
||||
<div className="text-center space-y-1 py-4 mx-auto sm:w-96">
|
||||
<h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
|
||||
Set new password
|
||||
</h3>
|
||||
<p className="font-medium text-onboarding-text-400">Secure your account with a strong password</p>
|
||||
</div>
|
||||
<form
|
||||
className="mx-auto mt-5 space-y-4 w-5/6 sm:w-96"
|
||||
method="POST"
|
||||
action={`${API_BASE_URL}/auth/reset-password/${uidb64?.toString()}/${token?.toString()}/`}
|
||||
>
|
||||
<input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
|
||||
Email
|
||||
</label>
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
value={resetFormData.email}
|
||||
//hasError={Boolean(errors.email)}
|
||||
placeholder="name@company.com"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 text-onboarding-text-400 cursor-not-allowed"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
|
||||
Password
|
||||
</label>
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="password"
|
||||
value={resetFormData.password}
|
||||
onChange={(e) => handleFormChange("password", e.target.value)}
|
||||
//hasError={Boolean(errors.password)}
|
||||
placeholder="Enter password"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
minLength={8}
|
||||
onFocus={() => setIsPasswordInputFocused(true)}
|
||||
onBlur={() => setIsPasswordInputFocused(false)}
|
||||
autoFocus
|
||||
/>
|
||||
{showPassword ? (
|
||||
<EyeOff
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<Eye
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => setShowPassword(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{isPasswordInputFocused && <PasswordStrengthMeter password={resetFormData.password} />}
|
||||
</div>
|
||||
{getPasswordStrength(resetFormData.password) >= 3 && (
|
||||
<div className="space-y-1">
|
||||
<label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
|
||||
Confirm password
|
||||
</label>
|
||||
<div className="relative flex items-center rounded-md bg-onboarding-background-200">
|
||||
<Input
|
||||
type={showPassword ? "text" : "password"}
|
||||
name="confirm_password"
|
||||
value={resetFormData.confirm_password}
|
||||
onChange={(e) => handleFormChange("confirm_password", e.target.value)}
|
||||
placeholder="Confirm password"
|
||||
className="h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
|
||||
/>
|
||||
{showPassword ? (
|
||||
<EyeOff
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => setShowPassword(false)}
|
||||
/>
|
||||
) : (
|
||||
<Eye
|
||||
className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
|
||||
onClick={() => setShowPassword(true)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{!!resetFormData.confirm_password &&
|
||||
resetFormData.password !== resetFormData.confirm_password && (
|
||||
<span className="text-sm text-red-500">Passwords don{"'"}t match</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Button type="submit" variant="primary" className="w-full" size="lg" disabled={isButtonDisabled}>
|
||||
Set password
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ResetPasswordPage;
|
||||
@ -1,16 +0,0 @@
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { NextPage } from "next";
|
||||
// components
|
||||
import { AuthView } from "@/components/views";
|
||||
// helpers
|
||||
import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
// wrapper
|
||||
import { AuthWrapper } from "@/lib/wrappers";
|
||||
|
||||
const Index: NextPage = observer(() => (
|
||||
<AuthWrapper pageType={EPageTypes.INIT}>
|
||||
<AuthView />
|
||||
</AuthWrapper>
|
||||
));
|
||||
|
||||
export default Index;
|
||||
@ -1,130 +0,0 @@
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
import { useTheme } from "next-themes";
|
||||
// ui
|
||||
import { Avatar } from "@plane/ui";
|
||||
// components
|
||||
import { OnBoardingForm } from "@/components/accounts/onboarding-form";
|
||||
// helpers
|
||||
import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
import { ASSET_PREFIX } from "@/helpers/common.helper";
|
||||
// hooks
|
||||
import { useUser, useUserProfile } from "@/hooks/store";
|
||||
// wrappers
|
||||
import { AuthWrapper } from "@/lib/wrappers";
|
||||
// assets
|
||||
import ProfileSetupDark from "public/onboarding/profile-setup-dark.svg";
|
||||
import ProfileSetup from "public/onboarding/profile-setup-light.svg";
|
||||
|
||||
const OnBoardingPage = observer(() => {
|
||||
// router
|
||||
const router = useRouter();
|
||||
const { next_path } = router.query;
|
||||
|
||||
// hooks
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
const { data: user } = useUser();
|
||||
const { data: currentUserProfile, updateUserProfile } = useUserProfile();
|
||||
|
||||
if (!user) {
|
||||
router.push("/");
|
||||
return <></>;
|
||||
}
|
||||
|
||||
// complete onboarding
|
||||
const finishOnboarding = async () => {
|
||||
if (!user) return;
|
||||
|
||||
await updateUserProfile({
|
||||
onboarding_step: {
|
||||
...currentUserProfile?.onboarding_step,
|
||||
profile_complete: true,
|
||||
},
|
||||
}).catch(() => {
|
||||
console.log("Failed to update onboarding status");
|
||||
});
|
||||
|
||||
if (next_path) router.push(next_path.toString());
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
return (
|
||||
<AuthWrapper pageType={EPageTypes.ONBOARDING}>
|
||||
<div className="flex h-full w-full">
|
||||
<div className="w-full h-full overflow-auto px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex w-full items-center justify-between font-semibold ">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Image
|
||||
src={`${ASSET_PREFIX}/plane-logos/blue-without-text.png`}
|
||||
height={30}
|
||||
width={30}
|
||||
alt="Plane Logo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="shrink-0 lg:hidden">
|
||||
<div className="flex w-full shrink-0 justify-end">
|
||||
<div className="flex items-center gap-x-2 pr-4">
|
||||
{user?.avatar && (
|
||||
<Avatar
|
||||
name={user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
|
||||
src={user?.avatar}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
)}
|
||||
<span className="text-sm font-medium text-custom-text-200">
|
||||
{user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full items-center justify-center p-8 mt-14">
|
||||
<div className="text-center space-y-1 py-4 mx-auto">
|
||||
<h3 className="text-3xl font-bold text-onboarding-text-100">Welcome to Plane!</h3>
|
||||
<p className="font-medium text-onboarding-text-400">
|
||||
Let’s setup your profile, tell us a bit about yourself.
|
||||
</p>
|
||||
</div>
|
||||
<OnBoardingForm user={user} finishOnboarding={finishOnboarding} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden lg:block relative w-2/5 h-screen overflow-hidden px-6 py-10 sm:px-7 sm:py-14 md:px-14 lg:px-28">
|
||||
<div className="flex w-full shrink-0 justify-end">
|
||||
<div className="flex items-center gap-x-2 pr-4 z-10">
|
||||
{user?.avatar && (
|
||||
<Avatar
|
||||
name={user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
|
||||
src={user?.avatar}
|
||||
size={24}
|
||||
shape="square"
|
||||
fallbackBackgroundColor="#FCBE1D"
|
||||
className="!text-base capitalize"
|
||||
/>
|
||||
)}
|
||||
<span className="text-sm font-medium text-custom-text-200">
|
||||
{user?.first_name ? `${user?.first_name} ${user?.last_name ?? ""}` : user?.email}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={resolvedTheme === "dark" ? ProfileSetupDark : ProfileSetup}
|
||||
className="h-screen w-auto float-end object-cover"
|
||||
alt="Profile setup"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
);
|
||||
});
|
||||
|
||||
export default OnBoardingPage;
|
||||
@ -1,49 +0,0 @@
|
||||
// next imports
|
||||
import { observer } from "mobx-react-lite";
|
||||
import Image from "next/image";
|
||||
// helpers
|
||||
import { EPageTypes } from "@/helpers/authentication.helper";
|
||||
// hooks
|
||||
import { useInstance } from "@/hooks/store";
|
||||
// wrappers
|
||||
import { AuthWrapper } from "@/lib/wrappers";
|
||||
// images
|
||||
import projectNotPublishedImage from "@/public/project-not-published.svg";
|
||||
|
||||
const CustomProjectNotPublishedError = observer(() => {
|
||||
// hooks
|
||||
const { instance } = useInstance();
|
||||
|
||||
const redirectionUrl = instance?.config?.app_base_url || "/";
|
||||
|
||||
return (
|
||||
<AuthWrapper pageType={EPageTypes.PUBLIC}>
|
||||
<div className="relative flex h-full min-h-screen w-screen items-center justify-center py-5">
|
||||
<div className="max-w-[700px] space-y-5">
|
||||
<div className="flex flex-col items-center gap-3 text-center">
|
||||
<div className="relative h-[240px] w-[240px]">
|
||||
<Image src={projectNotPublishedImage} layout="fill" alt="404- Page not found" />
|
||||
</div>
|
||||
<div className="text-xl font-medium">
|
||||
Oops! The page you{`'`}re looking for isn{`'`}t live at the moment.
|
||||
</div>
|
||||
<div className="text-sm text-custom-text-200">
|
||||
If this is your project, login to your workspace to adjust its visibility settings and make it public.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-center text-center">
|
||||
<a
|
||||
href={redirectionUrl}
|
||||
className="cursor-pointer select-none rounded-sm border border-gray-200 bg-gray-50 p-1.5 px-2.5 text-sm font-medium text-gray-700 transition-all hover:scale-105 hover:bg-gray-100 hover:text-gray-800"
|
||||
>
|
||||
Go to your Workspace
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AuthWrapper>
|
||||
);
|
||||
});
|
||||
|
||||
export default CustomProjectNotPublishedError;
|
||||
@ -1,7 +1,7 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import axios, { AxiosInstance } from "axios";
|
||||
// store
|
||||
import { rootStore } from "@/lib/store-context";
|
||||
// import { rootStore } from "@/lib/store-context";
|
||||
|
||||
abstract class APIService {
|
||||
protected baseURL: string;
|
||||
@ -18,14 +18,14 @@ abstract class APIService {
|
||||
}
|
||||
|
||||
private setupInterceptors() {
|
||||
this.axiosInstance.interceptors.response.use(
|
||||
(response) => response,
|
||||
(error) => {
|
||||
const store = rootStore;
|
||||
if (error.response && error.response.status === 401 && store.user.data) store.user.reset();
|
||||
return Promise.reject(error);
|
||||
}
|
||||
);
|
||||
// this.axiosInstance.interceptors.response.use(
|
||||
// (response) => response,
|
||||
// (error) => {
|
||||
// const store = rootStore;
|
||||
// if (error.response && error.response.status === 401 && store.user.data) store.user.reset();
|
||||
// return Promise.reject(error);
|
||||
// }
|
||||
// );
|
||||
}
|
||||
|
||||
get(url: string, params = {}) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
// services
|
||||
import APIService from "@/services/api.service";
|
||||
import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
|
||||
class IssueService extends APIService {
|
||||
constructor() {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
// services
|
||||
import APIService from "@/services/api.service";
|
||||
import { API_BASE_URL } from "@/helpers/common.helper";
|
||||
|
||||
class ProjectService extends APIService {
|
||||
constructor() {
|
||||
|
||||
@ -18,15 +18,18 @@ type TError = {
|
||||
export interface IInstanceStore {
|
||||
// issues
|
||||
isLoading: boolean;
|
||||
instance: IInstance | undefined;
|
||||
data: IInstance | NonNullable<unknown>;
|
||||
config: Record<string, any>;
|
||||
error: TError | undefined;
|
||||
// action
|
||||
fetchInstanceInfo: () => Promise<void>;
|
||||
hydrate: (data: Record<string, unknown>, config: Record<string, unknown>) => void;
|
||||
}
|
||||
|
||||
export class InstanceStore implements IInstanceStore {
|
||||
isLoading: boolean = true;
|
||||
instance: IInstance | undefined = undefined;
|
||||
data: IInstance | Record<string, any> = {};
|
||||
config: Record<string, unknown> = {};
|
||||
error: TError | undefined = undefined;
|
||||
// services
|
||||
instanceService;
|
||||
@ -35,15 +38,22 @@ export class InstanceStore implements IInstanceStore {
|
||||
makeObservable(this, {
|
||||
// observable
|
||||
isLoading: observable.ref,
|
||||
instance: observable,
|
||||
data: observable,
|
||||
config: observable,
|
||||
error: observable,
|
||||
// actions
|
||||
fetchInstanceInfo: action,
|
||||
hydrate: action,
|
||||
});
|
||||
// services
|
||||
this.instanceService = new InstanceService();
|
||||
}
|
||||
|
||||
hydrate = (data: Record<string, unknown>, config: Record<string, unknown>) => {
|
||||
this.data = { ...this.data, ...data };
|
||||
this.config = { ...this.config, ...config };
|
||||
};
|
||||
|
||||
/**
|
||||
* @description fetching instance information
|
||||
*/
|
||||
@ -51,10 +61,11 @@ export class InstanceStore implements IInstanceStore {
|
||||
try {
|
||||
this.isLoading = true;
|
||||
this.error = undefined;
|
||||
const instance = await this.instanceService.getInstanceInfo();
|
||||
const instanceDetails = await this.instanceService.getInstanceInfo();
|
||||
runInAction(() => {
|
||||
this.isLoading = false;
|
||||
this.instance = instance;
|
||||
this.data = instanceDetails.instance;
|
||||
this.config = instanceDetails.config;
|
||||
});
|
||||
} catch (error) {
|
||||
runInAction(() => {
|
||||
|
||||
@ -55,7 +55,7 @@ export interface IIssueDetailStore {
|
||||
removeIssueVote: (workspaceId: string, projectId: string, issueId: string) => Promise<void>;
|
||||
}
|
||||
|
||||
class IssueDetailStore implements IIssueDetailStore {
|
||||
export class IssueDetailStore implements IIssueDetailStore {
|
||||
loader: boolean = false;
|
||||
error: any = null;
|
||||
peekId: string | null = null;
|
||||
@ -431,5 +431,3 @@ class IssueDetailStore implements IIssueDetailStore {
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default IssueDetailStore;
|
||||
@ -1,15 +1,16 @@
|
||||
import { action, makeObservable, observable, runInAction, computed } from "mobx";
|
||||
// types
|
||||
// constants
|
||||
import { ISSUE_DISPLAY_FILTERS_BY_LAYOUT } from "@/constants/issue";
|
||||
// store
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { IIssueFilterOptions, TIssueParams } from "./types";
|
||||
import { handleIssueQueryParamsByLayout } from "./helpers";
|
||||
import { IssueFilterBaseStore } from "./base-issue-filter.store";
|
||||
// types
|
||||
import { TIssueBoardKeys, IIssueFilterOptions, TIssueParams } from "@/types/issue";
|
||||
|
||||
interface IFiltersOptions {
|
||||
filters: IIssueFilterOptions;
|
||||
}
|
||||
|
||||
export interface IIssuesFilterStore {
|
||||
export interface IIssueFilterStore {
|
||||
// observables
|
||||
projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined;
|
||||
// computed
|
||||
@ -21,15 +22,13 @@ export interface IIssuesFilterStore {
|
||||
updateFilters: (projectId: string, filters: IIssueFilterOptions) => Promise<IFiltersOptions>;
|
||||
}
|
||||
|
||||
export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFilterStore {
|
||||
export class IssueFilterStore implements IIssueFilterStore {
|
||||
// observables
|
||||
projectIssueFilters: { [projectId: string]: IFiltersOptions } | undefined = undefined;
|
||||
// root store
|
||||
rootStore;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
super(_rootStore);
|
||||
|
||||
makeObservable(this, {
|
||||
// observables
|
||||
projectIssueFilters: observable.ref,
|
||||
@ -43,35 +42,61 @@ export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFi
|
||||
this.rootStore = _rootStore;
|
||||
}
|
||||
|
||||
// helper methods
|
||||
computedFilter = (filters: any, filteredParams: any) => {
|
||||
const computedFilters: any = {};
|
||||
Object.keys(filters).map((key) => {
|
||||
if (filters[key] != undefined && filteredParams.includes(key))
|
||||
computedFilters[key] =
|
||||
typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
|
||||
});
|
||||
|
||||
return computedFilters;
|
||||
};
|
||||
|
||||
// helpers
|
||||
issueDisplayFilters = (projectId: string) => {
|
||||
if (!projectId) return undefined;
|
||||
return this.projectIssueFilters?.[projectId] || undefined;
|
||||
};
|
||||
|
||||
// actions
|
||||
handleIssueQueryParamsByLayout = (layout: TIssueBoardKeys | undefined, viewType: "issues"): TIssueParams[] | null => {
|
||||
const queryParams: TIssueParams[] = [];
|
||||
|
||||
if (!layout) return null;
|
||||
|
||||
const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
|
||||
|
||||
// add filters query params
|
||||
layoutOptions.filters.forEach((option: any) => {
|
||||
queryParams.push(option);
|
||||
});
|
||||
|
||||
return queryParams;
|
||||
};
|
||||
|
||||
// actions
|
||||
updateFilters = async (projectId: string, filters: IIssueFilterOptions) => {
|
||||
try {
|
||||
let _projectIssueFilters = { ...this.projectIssueFilters };
|
||||
if (!_projectIssueFilters) _projectIssueFilters = {};
|
||||
if (!_projectIssueFilters[projectId]) _projectIssueFilters[projectId] = { filters: {} };
|
||||
let issueFilters = { ...this.projectIssueFilters };
|
||||
if (!issueFilters) issueFilters = {};
|
||||
if (!issueFilters[projectId]) issueFilters[projectId] = { filters: {} };
|
||||
|
||||
const _filters = {
|
||||
filters: { ..._projectIssueFilters[projectId].filters },
|
||||
const newFilters = {
|
||||
filters: { ...issueFilters[projectId].filters },
|
||||
};
|
||||
|
||||
_filters.filters = { ..._filters.filters, ...filters };
|
||||
newFilters.filters = { ...newFilters.filters, ...filters };
|
||||
|
||||
_projectIssueFilters[projectId] = {
|
||||
filters: _filters.filters,
|
||||
issueFilters[projectId] = {
|
||||
filters: newFilters.filters,
|
||||
};
|
||||
|
||||
runInAction(() => {
|
||||
this.projectIssueFilters = _projectIssueFilters;
|
||||
this.projectIssueFilters = issueFilters;
|
||||
});
|
||||
|
||||
return _filters;
|
||||
return newFilters;
|
||||
} catch (error) {
|
||||
throw error;
|
||||
}
|
||||
@ -89,7 +114,7 @@ export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFi
|
||||
|
||||
get appliedFilters() {
|
||||
const userFilters = this.issueFilters;
|
||||
const layout = this.rootStore.project?.activeBoard;
|
||||
const layout = this.rootStore.project?.activeLayout;
|
||||
if (!userFilters || !layout) return undefined;
|
||||
|
||||
let filteredRouteParams: any = {
|
||||
@ -98,7 +123,7 @@ export class IssuesFilterStore extends IssueFilterBaseStore implements IIssuesFi
|
||||
labels: userFilters?.filters?.labels || undefined,
|
||||
};
|
||||
|
||||
const filteredParams = handleIssueQueryParamsByLayout(layout, "issues");
|
||||
const filteredParams = this.handleIssueQueryParamsByLayout(layout, "issues");
|
||||
if (filteredParams) filteredRouteParams = this.computedFilter(filteredRouteParams, filteredParams);
|
||||
|
||||
return filteredRouteParams;
|
||||
@ -1,11 +1,11 @@
|
||||
import { observable, action, computed, makeObservable, runInAction } from "mobx";
|
||||
import { observable, action, makeObservable, runInAction } from "mobx";
|
||||
// services
|
||||
import IssueService from "@/services/issue.service";
|
||||
// types
|
||||
import { IIssue, IIssueState, IIssueLabel } from "@/types/issue";
|
||||
// store
|
||||
import { RootStore } from "./root.store";
|
||||
// types
|
||||
// import { IssueDetailType, TIssueBoardKeys } from "types/issue";
|
||||
import { IIssue, IIssueState, IIssueLabel } from "types/issue";
|
||||
|
||||
export interface IIssueStore {
|
||||
loader: boolean;
|
||||
@ -26,7 +26,7 @@ export interface IIssueStore {
|
||||
getFilteredIssuesByState: (state: string) => IIssue[];
|
||||
}
|
||||
|
||||
class IssueStore implements IIssueStore {
|
||||
export class IssueStore implements IIssueStore {
|
||||
loader: boolean = false;
|
||||
error: any | null = null;
|
||||
|
||||
@ -75,13 +75,13 @@ class IssueStore implements IIssueStore {
|
||||
const response = await this.issueService.getPublicIssues(workspaceSlug, projectId, params);
|
||||
|
||||
if (response) {
|
||||
const _states: IIssueState[] = [...response?.states];
|
||||
const _labels: IIssueLabel[] = [...response?.labels];
|
||||
const _issues: IIssue[] = [...response?.issues];
|
||||
const states: IIssueState[] = [...response?.states];
|
||||
const labels: IIssueLabel[] = [...response?.labels];
|
||||
const issues: IIssue[] = [...response?.issues];
|
||||
runInAction(() => {
|
||||
this.states = _states;
|
||||
this.labels = _labels;
|
||||
this.issues = _issues;
|
||||
this.states = states;
|
||||
this.labels = labels;
|
||||
this.issues = issues;
|
||||
this.loader = false;
|
||||
});
|
||||
}
|
||||
@ -99,5 +99,3 @@ class IssueStore implements IIssueStore {
|
||||
getFilteredIssuesByState = (state_id: string): IIssue[] | [] =>
|
||||
this.issues?.filter((issue) => issue.state == state_id) || [];
|
||||
}
|
||||
|
||||
export default IssueStore;
|
||||
@ -1,29 +0,0 @@
|
||||
// types
|
||||
import { RootStore } from "@/store/root.store";
|
||||
|
||||
export interface IIssueFilterBaseStore {
|
||||
// helper methods
|
||||
computedFilter(filters: any, filteredParams: any): any;
|
||||
}
|
||||
|
||||
export class IssueFilterBaseStore implements IIssueFilterBaseStore {
|
||||
// root store
|
||||
rootStore;
|
||||
|
||||
constructor(_rootStore: RootStore) {
|
||||
// root store
|
||||
this.rootStore = _rootStore;
|
||||
}
|
||||
|
||||
// helper methods
|
||||
computedFilter = (filters: any, filteredParams: any) => {
|
||||
const computedFilters: any = {};
|
||||
Object.keys(filters).map((key) => {
|
||||
if (filters[key] != undefined && filteredParams.includes(key))
|
||||
computedFilters[key] =
|
||||
typeof filters[key] === "string" || typeof filters[key] === "boolean" ? filters[key] : filters[key].join(",");
|
||||
});
|
||||
|
||||
return computedFilters;
|
||||
};
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
import { TIssueBoardKeys } from "types/issue";
|
||||
import { IIssueFilterOptions, TIssueParams } from "./types";
|
||||
|
||||
export const isNil = (value: any) => {
|
||||
if (value === undefined || value === null) return true;
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
export interface ILayoutDisplayFiltersOptions {
|
||||
filters: (keyof IIssueFilterOptions)[];
|
||||
display_properties: boolean | null;
|
||||
display_filters: null;
|
||||
extra_options: null;
|
||||
}
|
||||
|
||||
export const ISSUE_DISPLAY_FILTERS_BY_LAYOUT: {
|
||||
[pageType: string]: { [layoutType: string]: ILayoutDisplayFiltersOptions };
|
||||
} = {
|
||||
issues: {
|
||||
list: {
|
||||
filters: ["priority", "state", "labels"],
|
||||
display_properties: null,
|
||||
display_filters: null,
|
||||
extra_options: null,
|
||||
},
|
||||
kanban: {
|
||||
filters: ["priority", "state", "labels"],
|
||||
display_properties: null,
|
||||
display_filters: null,
|
||||
extra_options: null,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export const handleIssueQueryParamsByLayout = (
|
||||
layout: TIssueBoardKeys | undefined,
|
||||
viewType: "issues"
|
||||
): TIssueParams[] | null => {
|
||||
const queryParams: TIssueParams[] = [];
|
||||
|
||||
if (!layout) return null;
|
||||
|
||||
const layoutOptions = ISSUE_DISPLAY_FILTERS_BY_LAYOUT[viewType][layout];
|
||||
|
||||
// add filters query params
|
||||
layoutOptions.filters.forEach((option) => {
|
||||
queryParams.push(option);
|
||||
});
|
||||
|
||||
return queryParams;
|
||||
};
|
||||
@ -1,36 +0,0 @@
|
||||
import { IIssue } from "types/issue";
|
||||
|
||||
export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
|
||||
|
||||
export type TIssueParams = "priority" | "state" | "labels";
|
||||
|
||||
export interface IIssueFilterOptions {
|
||||
state?: string[] | null;
|
||||
labels?: string[] | null;
|
||||
priority?: string[] | null;
|
||||
}
|
||||
|
||||
// issues
|
||||
export interface IGroupedIssues {
|
||||
[group_id: string]: string[];
|
||||
}
|
||||
|
||||
export interface ISubGroupedIssues {
|
||||
[sub_grouped_id: string]: {
|
||||
[group_id: string]: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export type TUnGroupedIssues = string[];
|
||||
|
||||
export interface IIssueResponse {
|
||||
[issue_id: string]: IIssue;
|
||||
}
|
||||
|
||||
export type TLoader = "init-loader" | "mutation" | undefined;
|
||||
|
||||
export interface ViewFlags {
|
||||
enableQuickAdd: boolean;
|
||||
enableIssueCreation: boolean;
|
||||
enableInlineEditing: boolean;
|
||||
}
|
||||
@ -11,11 +11,15 @@ export interface IProjectStore {
|
||||
error: any | null;
|
||||
workspace: IWorkspace | null;
|
||||
project: IProject | null;
|
||||
deploySettings: IProjectSettings | null;
|
||||
viewOptions: any;
|
||||
activeBoard: TIssueBoardKeys | null;
|
||||
settings: IProjectSettings | null;
|
||||
activeLayout: TIssueBoardKeys;
|
||||
layoutOptions: Record<TIssueBoardKeys, boolean>;
|
||||
canReact: boolean;
|
||||
canComment: boolean;
|
||||
canVote: boolean;
|
||||
fetchProjectSettings: (workspace_slug: string, project_slug: string) => Promise<void>;
|
||||
setActiveBoard: (value: TIssueBoardKeys) => void;
|
||||
setActiveLayout: (value: TIssueBoardKeys) => void;
|
||||
hydrate: (projectSettings: any) => void;
|
||||
}
|
||||
|
||||
export class ProjectStore implements IProjectStore {
|
||||
@ -24,9 +28,18 @@ export class ProjectStore implements IProjectStore {
|
||||
// data
|
||||
workspace: IWorkspace | null = null;
|
||||
project: IProject | null = null;
|
||||
deploySettings: IProjectSettings | null = null;
|
||||
viewOptions: any = null;
|
||||
activeBoard: TIssueBoardKeys | null = null;
|
||||
settings: IProjectSettings | null = null;
|
||||
activeLayout: TIssueBoardKeys = "list";
|
||||
layoutOptions: Record<TIssueBoardKeys, boolean> = {
|
||||
list: true,
|
||||
kanban: true,
|
||||
calendar: false,
|
||||
gantt: false,
|
||||
spreadsheet: false,
|
||||
};
|
||||
canReact: boolean = false;
|
||||
canComment: boolean = false;
|
||||
canVote: boolean = false;
|
||||
// root store
|
||||
rootStore;
|
||||
// service
|
||||
@ -38,14 +51,18 @@ export class ProjectStore implements IProjectStore {
|
||||
loader: observable,
|
||||
error: observable.ref,
|
||||
// observable
|
||||
workspace: observable.ref,
|
||||
project: observable.ref,
|
||||
deploySettings: observable.ref,
|
||||
viewOptions: observable.ref,
|
||||
activeBoard: observable.ref,
|
||||
workspace: observable,
|
||||
project: observable,
|
||||
settings: observable,
|
||||
layoutOptions: observable,
|
||||
activeLayout: observable.ref,
|
||||
canReact: observable.ref,
|
||||
canComment: observable.ref,
|
||||
canVote: observable.ref,
|
||||
// actions
|
||||
fetchProjectSettings: action,
|
||||
setActiveBoard: action,
|
||||
setActiveLayout: action,
|
||||
hydrate: action,
|
||||
// computed
|
||||
});
|
||||
|
||||
@ -53,6 +70,20 @@ export class ProjectStore implements IProjectStore {
|
||||
this.projectService = new ProjectService();
|
||||
}
|
||||
|
||||
hydrate = (projectSettings: any) => {
|
||||
const { workspace_detail, project_details, views, votes, comments, reactions } = projectSettings;
|
||||
this.workspace = workspace_detail;
|
||||
this.project = project_details;
|
||||
this.layoutOptions = views;
|
||||
this.canComment = comments;
|
||||
this.canVote = votes;
|
||||
this.canReact = reactions;
|
||||
};
|
||||
|
||||
setActiveLayout = (boardValue: TIssueBoardKeys) => {
|
||||
this.activeLayout = boardValue;
|
||||
};
|
||||
|
||||
fetchProjectSettings = async (workspace_slug: string, project_slug: string) => {
|
||||
try {
|
||||
this.loader = true;
|
||||
@ -68,8 +99,8 @@ export class ProjectStore implements IProjectStore {
|
||||
runInAction(() => {
|
||||
this.project = currentProject;
|
||||
this.workspace = currentWorkspace;
|
||||
this.viewOptions = currentViewOptions;
|
||||
this.deploySettings = currentDeploySettings;
|
||||
this.layoutOptions = currentViewOptions;
|
||||
this.settings = currentDeploySettings;
|
||||
this.loader = false;
|
||||
});
|
||||
}
|
||||
@ -80,8 +111,4 @@ export class ProjectStore implements IProjectStore {
|
||||
return error;
|
||||
}
|
||||
};
|
||||
|
||||
setActiveBoard = (boardValue: TIssueBoardKeys) => {
|
||||
this.activeBoard = boardValue;
|
||||
};
|
||||
}
|
||||
@ -1,13 +1,11 @@
|
||||
// mobx lite
|
||||
import { enableStaticRendering } from "mobx-react-lite";
|
||||
// store imports
|
||||
import { IInstanceStore, InstanceStore } from "@/store/instance.store";
|
||||
import { IProjectStore, ProjectStore } from "@/store/project";
|
||||
import { IUserStore, UserStore } from "@/store/user";
|
||||
|
||||
import IssueStore, { IIssueStore } from "./issue";
|
||||
import IssueDetailStore, { IIssueDetailStore } from "./issue_details";
|
||||
import { IIssuesFilterStore, IssuesFilterStore } from "./issues/issue-filters.store";
|
||||
import { IssueDetailStore, IIssueDetailStore } from "@/store/issue-detail.store";
|
||||
import { IssueStore, IIssueStore } from "@/store/issue.store";
|
||||
import { IProjectStore, ProjectStore } from "@/store/project.store";
|
||||
import { IUserStore, UserStore } from "@/store/user.store";
|
||||
import { IssueFilterStore, IIssueFilterStore } from "./issue-filters.store";
|
||||
import { IMentionsStore, MentionsStore } from "./mentions.store";
|
||||
|
||||
enableStaticRendering(typeof window === "undefined");
|
||||
@ -16,33 +14,36 @@ export class RootStore {
|
||||
instance: IInstanceStore;
|
||||
user: IUserStore;
|
||||
project: IProjectStore;
|
||||
|
||||
issue: IIssueStore;
|
||||
issueDetails: IIssueDetailStore;
|
||||
mentionsStore: IMentionsStore;
|
||||
issuesFilter: IIssuesFilterStore;
|
||||
issueDetail: IIssueDetailStore;
|
||||
mentionStore: IMentionsStore;
|
||||
issueFilter: IIssueFilterStore;
|
||||
|
||||
constructor() {
|
||||
this.instance = new InstanceStore(this);
|
||||
this.user = new UserStore(this);
|
||||
|
||||
this.project = new ProjectStore(this);
|
||||
this.issue = new IssueStore(this);
|
||||
this.issueDetails = new IssueDetailStore(this);
|
||||
this.mentionsStore = new MentionsStore(this);
|
||||
this.issuesFilter = new IssuesFilterStore(this);
|
||||
this.issueDetail = new IssueDetailStore(this);
|
||||
this.mentionStore = new MentionsStore(this);
|
||||
this.issueFilter = new IssueFilterStore(this);
|
||||
}
|
||||
|
||||
resetOnSignOut = () => {
|
||||
localStorage.setItem("theme", "system");
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
hydrate = (data: any) => {
|
||||
if (!data) return;
|
||||
this.instance.hydrate(data?.instance || {}, data?.config || {});
|
||||
this.user.hydrate(data?.user || {});
|
||||
};
|
||||
|
||||
reset = () => {
|
||||
localStorage.setItem("theme", "system");
|
||||
this.instance = new InstanceStore(this);
|
||||
this.user = new UserStore(this);
|
||||
this.project = new ProjectStore(this);
|
||||
|
||||
this.issue = new IssueStore(this);
|
||||
this.issueDetails = new IssueDetailStore(this);
|
||||
this.mentionsStore = new MentionsStore(this);
|
||||
this.issuesFilter = new IssuesFilterStore(this);
|
||||
this.issueDetail = new IssueDetailStore(this);
|
||||
this.mentionStore = new MentionsStore(this);
|
||||
this.issueFilter = new IssueFilterStore(this);
|
||||
};
|
||||
}
|
||||
|
||||
@ -3,11 +3,11 @@ import { action, computed, makeObservable, observable, runInAction } from "mobx"
|
||||
// types
|
||||
import { IUser } from "@plane/types";
|
||||
// services
|
||||
import { AuthService } from "@/services/authentication.service";
|
||||
import { AuthService } from "@/services/auth.service";
|
||||
import { UserService } from "@/services/user.service";
|
||||
// stores
|
||||
import { RootStore } from "@/store/root.store";
|
||||
import { ProfileStore, IProfileStore } from "@/store/user/profile.store";
|
||||
import { ProfileStore, IProfileStore } from "@/store/profile.store";
|
||||
import { ActorDetail } from "@/types/issue";
|
||||
|
||||
type TUserErrorStatus = {
|
||||
@ -22,12 +22,13 @@ export interface IUserStore {
|
||||
error: TUserErrorStatus | undefined;
|
||||
data: IUser | undefined;
|
||||
// store observables
|
||||
userProfile: IProfileStore;
|
||||
profile: IProfileStore;
|
||||
// computed
|
||||
currentActor: ActorDetail;
|
||||
// actions
|
||||
fetchCurrentUser: () => Promise<IUser | undefined>;
|
||||
updateCurrentUser: (data: Partial<IUser>) => Promise<IUser | undefined>;
|
||||
hydrate: (data: IUser) => void;
|
||||
reset: () => void;
|
||||
signOut: () => Promise<void>;
|
||||
}
|
||||
@ -39,14 +40,14 @@ export class UserStore implements IUserStore {
|
||||
error: TUserErrorStatus | undefined = undefined;
|
||||
data: IUser | undefined = undefined;
|
||||
// store observables
|
||||
userProfile: IProfileStore;
|
||||
profile: IProfileStore;
|
||||
// service
|
||||
userService: UserService;
|
||||
authService: AuthService;
|
||||
|
||||
constructor(private store: RootStore) {
|
||||
// stores
|
||||
this.userProfile = new ProfileStore(store);
|
||||
this.profile = new ProfileStore(store);
|
||||
// service
|
||||
this.userService = new UserService();
|
||||
this.authService = new AuthService();
|
||||
@ -58,7 +59,7 @@ export class UserStore implements IUserStore {
|
||||
error: observable,
|
||||
// model observables
|
||||
data: observable,
|
||||
userProfile: observable,
|
||||
profile: observable,
|
||||
// computed
|
||||
currentActor: computed,
|
||||
// actions
|
||||
@ -94,7 +95,7 @@ export class UserStore implements IUserStore {
|
||||
});
|
||||
const user = await this.userService.currentUser();
|
||||
if (user && user?.id) {
|
||||
await this.userProfile.fetchUserProfile();
|
||||
await this.profile.fetchUserProfile();
|
||||
runInAction(() => {
|
||||
this.data = user;
|
||||
this.isLoading = false;
|
||||
@ -153,6 +154,10 @@ export class UserStore implements IUserStore {
|
||||
}
|
||||
};
|
||||
|
||||
hydrate = (data: IUser): void => {
|
||||
this.data = { ...this.data, ...data };
|
||||
};
|
||||
|
||||
/**
|
||||
* @description resets the user store
|
||||
* @returns {void}
|
||||
@ -163,7 +168,7 @@ export class UserStore implements IUserStore {
|
||||
this.isLoading = false;
|
||||
this.error = undefined;
|
||||
this.data = undefined;
|
||||
this.userProfile = new ProfileStore(this.store);
|
||||
this.profile = new ProfileStore(this.store);
|
||||
});
|
||||
};
|
||||
|
||||
@ -1,12 +1,23 @@
|
||||
{
|
||||
"extends": "tsconfig/nextjs.json",
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts"],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "additional.d.ts", ".next/types/**/*.ts"],
|
||||
"exclude": ["node_modules"],
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"jsx": "preserve",
|
||||
"paths": {
|
||||
"@/*": ["*"]
|
||||
}
|
||||
},
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"strictNullChecks": true
|
||||
}
|
||||
}
|
||||
|
||||
6
space/types/issue-filters.d.ts
vendored
Normal file
6
space/types/issue-filters.d.ts
vendored
Normal file
@ -0,0 +1,6 @@
|
||||
export interface ILayoutDisplayFiltersOptions {
|
||||
filters: (keyof IIssueFilterOptions)[];
|
||||
display_properties: boolean | null;
|
||||
display_filters: null;
|
||||
extra_options: null;
|
||||
}
|
||||
35
space/types/issue.d.ts
vendored
35
space/types/issue.d.ts
vendored
@ -170,3 +170,38 @@ export interface IssueDetailType {
|
||||
votes: any[];
|
||||
};
|
||||
}
|
||||
|
||||
export type TIssueGroupByOptions = "state" | "priority" | "labels" | null;
|
||||
|
||||
export type TIssueParams = "priority" | "state" | "labels";
|
||||
|
||||
export interface IIssueFilterOptions {
|
||||
state?: string[] | null;
|
||||
labels?: string[] | null;
|
||||
priority?: string[] | null;
|
||||
}
|
||||
|
||||
// issues
|
||||
export interface IGroupedIssues {
|
||||
[group_id: string]: string[];
|
||||
}
|
||||
|
||||
export interface ISubGroupedIssues {
|
||||
[sub_grouped_id: string]: {
|
||||
[group_id: string]: string[];
|
||||
};
|
||||
}
|
||||
|
||||
export type TUnGroupedIssues = string[];
|
||||
|
||||
export interface IIssueResponse {
|
||||
[issue_id: string]: IIssue;
|
||||
}
|
||||
|
||||
export type TLoader = "init-loader" | "mutation" | undefined;
|
||||
|
||||
export interface ViewFlags {
|
||||
enableQuickAdd: boolean;
|
||||
enableIssueCreation: boolean;
|
||||
enableInlineEditing: boolean;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user