feat: cycles and modules toggle in settings, refactor: folder structure (#247)
* feat: link option in remirror * fix: removed link import from remirror toolbar * refactor: constants folder * refactor: layouts folder structure * fix: issue view context * feat: cycles and modules toggle in settings
This commit is contained in:
Aaryan Khandelwal
GitHub
parent
4e27e93739
commit
76cc634a46
73 changed files with 1283 additions and 1648 deletions
|
|
@ -1,34 +1,34 @@
|
|||
import React from "react";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// lib
|
||||
import { requiredAuth } from "lib/auth";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// hooks
|
||||
import useProjects from "hooks/use-projects";
|
||||
import useWorkspaceDetails from "hooks/use-workspace-details";
|
||||
import useIssues from "hooks/use-issues";
|
||||
// components
|
||||
import { WorkspaceHomeCardsList, WorkspaceHomeGreetings } from "components/workspace";
|
||||
// ui
|
||||
import { Spinner } from "components/ui";
|
||||
// icons
|
||||
import {
|
||||
ArrowRightIcon,
|
||||
CalendarDaysIcon,
|
||||
ClipboardDocumentListIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// lib
|
||||
import { requiredAuth } from "lib/auth";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import { Spinner } from "components/ui";
|
||||
import { WorkspaceHomeCardsList, WorkspaceHomeGreetings } from "components/workspace";
|
||||
// hooks
|
||||
import useProjects from "hooks/use-projects";
|
||||
import useWorkspaceDetails from "hooks/use-workspace-details";
|
||||
import useIssues from "hooks/use-issues";
|
||||
// icons
|
||||
import { LayerDiagonalIcon } from "components/icons";
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
// helpers
|
||||
import { renderShortNumericDateFormat, findHowManyDaysLeft } from "helpers/date-time.helper";
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { groupBy } from "helpers/array.helper";
|
||||
// types
|
||||
import type { NextPage, NextPageContext } from "next";
|
||||
// constants
|
||||
import { getPriorityIcon } from "constants/global";
|
||||
|
||||
const WorkspacePage: NextPage = () => {
|
||||
// router
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { Controller, useForm } from "react-hook-form";
|
|||
// lib
|
||||
import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
|
|
@ -103,8 +103,8 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout
|
||||
type="project"
|
||||
<AppLayout
|
||||
settingsLayout="project"
|
||||
memberType={{ isMember, isOwner, isViewer, isGuest }}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
|
|
@ -247,7 +247,7 @@ const ControlSettings: NextPage<TControlSettingsProps> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,187 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// lib
|
||||
import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// ui
|
||||
import { Button } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
import { IProject, UserAuth } from "types";
|
||||
import type { NextPage, NextPageContext } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
const FeaturesSettings: NextPage<UserAuth> = (props) => {
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const handleSubmit = async (formData: Partial<IProject>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
mutate<IProject>(
|
||||
PROJECT_DETAILS(projectId as string),
|
||||
(prevData) => ({ ...(prevData as IProject), ...formData }),
|
||||
false
|
||||
);
|
||||
|
||||
mutate<IProject[]>(
|
||||
PROJECTS_LIST(workspaceSlug as string),
|
||||
(prevData) =>
|
||||
prevData?.map((p) => {
|
||||
if (p.id === projectId)
|
||||
return {
|
||||
...p,
|
||||
...formData,
|
||||
};
|
||||
|
||||
return p;
|
||||
}),
|
||||
false
|
||||
);
|
||||
|
||||
await projectService
|
||||
.updateProject(workspaceSlug as string, projectId as string, formData)
|
||||
.then((res) => {
|
||||
mutate(PROJECT_DETAILS(projectId as string));
|
||||
mutate(PROJECTS_LIST(workspaceSlug as string));
|
||||
|
||||
setToastAlert({
|
||||
title: "Success!",
|
||||
type: "success",
|
||||
message: "Project features updated successfully.",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<AppLayout
|
||||
settingsLayout="project"
|
||||
memberType={props}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
/>
|
||||
<BreadcrumbItem title="Features Settings" />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<section className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold leading-6 text-gray-900">Project Features</h3>
|
||||
</div>
|
||||
<div className="space-y-8 md:w-2/3">
|
||||
<div className="flex items-center justify-between gap-x-10 gap-y-2">
|
||||
<div>
|
||||
<h4 className="text-md mb-1 leading-6 text-gray-900">Use cycles</h4>
|
||||
<p className="mb-3 text-sm text-gray-500">
|
||||
Cycles are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.cycle_view ? "bg-indigo-500" : "bg-gray-200"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.cycle_view}
|
||||
onClick={() => handleSubmit({ cycle_view: !projectDetails?.cycle_view })}
|
||||
>
|
||||
<span className="sr-only">Use cycles</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.cycle_view ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-x-10 gap-y-2">
|
||||
<div>
|
||||
<h4 className="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
|
||||
<p className="mb-3 text-sm text-gray-500">
|
||||
Modules are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none ${
|
||||
projectDetails?.module_view ? "bg-indigo-500" : "bg-gray-200"
|
||||
}`}
|
||||
role="switch"
|
||||
aria-checked={projectDetails?.module_view}
|
||||
onClick={() => handleSubmit({ module_view: !projectDetails?.module_view })}
|
||||
>
|
||||
<span className="sr-only">Use cycles</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className={`inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${
|
||||
projectDetails?.module_view ? "translate-x-5" : "translate-x-0"
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a href="https://plane.so/" target="_blank" rel="noreferrer">
|
||||
<Button theme="secondary" size="rg" className="text-xs">
|
||||
Plane is open-source, view Roadmap
|
||||
</Button>
|
||||
</a>
|
||||
<a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
|
||||
<Button theme="secondary" size="rg" className="text-xs">
|
||||
Star us on GitHub
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps = async (ctx: NextPageContext) => {
|
||||
const projectId = ctx.query.projectId as string;
|
||||
const workspaceSlug = ctx.query.workspaceSlug as string;
|
||||
|
||||
const memberDetail = await requiredAdmin(workspaceSlug, projectId, ctx.req?.headers.cookie);
|
||||
|
||||
return {
|
||||
props: {
|
||||
isOwner: memberDetail?.role === 20,
|
||||
isMember: memberDetail?.role === 15,
|
||||
isViewer: memberDetail?.role === 10,
|
||||
isGuest: memberDetail?.role === 5,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default FeaturesSettings;
|
||||
|
|
@ -6,11 +6,11 @@ import useSWR, { mutate } from "swr";
|
|||
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { IProject, IWorkspace } from "types";
|
||||
import { IProject, IWorkspace, UserAuth } from "types";
|
||||
// lib
|
||||
import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
|
|
@ -24,13 +24,13 @@ import { Button, Input, TextArea, Loader, CustomSelect } from "components/ui";
|
|||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import OutlineButton from "components/ui/outline-button";
|
||||
// helpers
|
||||
import { debounce } from "helpers/functions.helper";
|
||||
import { debounce } from "helpers/common.helper";
|
||||
// types
|
||||
import type { NextPage, NextPageContext } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { NETWORK_CHOICES } from "constants/";
|
||||
import { NETWORK_CHOICES } from "constants/project";
|
||||
|
||||
const defaultValues: Partial<IProject> = {
|
||||
name: "",
|
||||
|
|
@ -39,14 +39,7 @@ const defaultValues: Partial<IProject> = {
|
|||
network: 0,
|
||||
};
|
||||
|
||||
type TGeneralSettingsProps = {
|
||||
isMember: boolean;
|
||||
isOwner: boolean;
|
||||
isViewer: boolean;
|
||||
isGuest: boolean;
|
||||
};
|
||||
|
||||
const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
|
||||
const GeneralSettings: NextPage<UserAuth> = (props) => {
|
||||
const { isMember, isOwner, isViewer, isGuest } = props;
|
||||
|
||||
const [selectProject, setSelectedProject] = useState<string | null>(null);
|
||||
|
|
@ -100,6 +93,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
|
|||
|
||||
const onSubmit = async (formData: IProject) => {
|
||||
if (!activeWorkspace || !projectDetails) return;
|
||||
|
||||
const payload: Partial<IProject> = {
|
||||
name: formData.name,
|
||||
network: formData.network,
|
||||
|
|
@ -109,6 +103,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
|
|||
project_lead: formData.project_lead,
|
||||
icon: formData.icon,
|
||||
};
|
||||
|
||||
await projectService
|
||||
.updateProject(activeWorkspace.slug, projectDetails.id, payload)
|
||||
.then((res) => {
|
||||
|
|
@ -130,9 +125,9 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout
|
||||
<AppLayout
|
||||
settingsLayout="project"
|
||||
memberType={{ isMember, isOwner, isViewer, isGuest }}
|
||||
type="project"
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
|
|
@ -341,7 +336,7 @@ const GeneralSettings: NextPage<TGeneralSettingsProps> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Controller, SubmitHandler, useForm } from "react-hook-form";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
// react-color
|
||||
import { TwitterPicker } from "react-color";
|
||||
import type { NextPageContext, NextPage } from "next";
|
||||
// headless ui
|
||||
import { Popover, Transition } from "@headlessui/react";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
import workspaceService from "services/workspace.service";
|
||||
|
|
@ -13,20 +17,23 @@ import issuesService from "services/issues.service";
|
|||
// lib
|
||||
import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import SingleLabel from "components/project/settings/single-label";
|
||||
// ui
|
||||
import { Button, Input, Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssueLabels } from "types";
|
||||
import type { NextPageContext, NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS, WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
const defaultValues: Partial<IIssueLabels> = {
|
||||
name: "",
|
||||
colour: "#ff0000",
|
||||
color: "#ff0000",
|
||||
};
|
||||
|
||||
type TLabelSettingsProps = {
|
||||
|
|
@ -52,7 +59,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
const { data: activeProject } = useSWR(
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
|
|
@ -77,9 +84,9 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
);
|
||||
|
||||
const handleNewLabel: SubmitHandler<IIssueLabels> = async (formData) => {
|
||||
if (!activeWorkspace || !activeProject || isSubmitting) return;
|
||||
if (!activeWorkspace || !projectDetails || isSubmitting) return;
|
||||
await issuesService
|
||||
.createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
|
||||
.createIssueLabel(activeWorkspace.slug, projectDetails.id, formData)
|
||||
.then((res) => {
|
||||
reset(defaultValues);
|
||||
mutate((prevData) => [...(prevData ?? []), res], false);
|
||||
|
|
@ -89,16 +96,17 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
|
||||
const editLabel = (label: IIssueLabels) => {
|
||||
setNewLabelForm(true);
|
||||
setValue("colour", label.colour);
|
||||
setValue("color", label.color);
|
||||
setValue("name", label.name);
|
||||
setIsUpdating(true);
|
||||
setLabelIdForUpdate(label.id);
|
||||
};
|
||||
|
||||
const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
|
||||
if (!activeWorkspace || !activeProject || isSubmitting) return;
|
||||
if (!activeWorkspace || !projectDetails || isSubmitting) return;
|
||||
|
||||
await issuesService
|
||||
.patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
|
||||
.patchIssueLabel(activeWorkspace.slug, projectDetails.id, labelIdForUpdate ?? "", formData)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
reset(defaultValues);
|
||||
|
|
@ -112,10 +120,10 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
};
|
||||
|
||||
const handleLabelDelete = (labelId: string) => {
|
||||
if (activeWorkspace && activeProject) {
|
||||
if (activeWorkspace && projectDetails) {
|
||||
mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
|
||||
issuesService
|
||||
.deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
|
||||
.deleteIssueLabel(activeWorkspace.slug, projectDetails.id, labelId)
|
||||
.then((res) => {
|
||||
console.log(res);
|
||||
})
|
||||
|
|
@ -126,14 +134,14 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout
|
||||
type="project"
|
||||
<AppLayout
|
||||
settingsLayout="project"
|
||||
memberType={{ isMember, isOwner, isViewer, isGuest }}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeProject?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
/>
|
||||
<BreadcrumbItem title="Labels Settings" />
|
||||
</Breadcrumbs>
|
||||
|
|
@ -170,13 +178,13 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
open ? "text-gray-900" : "text-gray-500"
|
||||
}`}
|
||||
>
|
||||
{watch("colour") && watch("colour") !== "" && (
|
||||
{watch("color") && watch("color") !== "" && (
|
||||
<span
|
||||
className="h-4 w-4 rounded"
|
||||
style={{
|
||||
backgroundColor: watch("colour") ?? "green",
|
||||
backgroundColor: watch("color") ?? "green",
|
||||
}}
|
||||
/>
|
||||
/>
|
||||
)}
|
||||
</Popover.Button>
|
||||
|
||||
|
|
@ -191,7 +199,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
>
|
||||
<Popover.Panel className="absolute top-full left-0 z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
|
||||
<Controller
|
||||
name="colour"
|
||||
name="color"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<TwitterPicker
|
||||
|
|
@ -258,7 +266,7 @@ const LabelsSettings: NextPage<TLabelSettingsProps> = (props) => {
|
|||
</>
|
||||
</div>
|
||||
</section>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,9 +2,8 @@ import { useState } from "react";
|
|||
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import type { NextPage, NextPageContext } from "next";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
|
|
@ -13,10 +12,8 @@ import workspaceService from "services/workspace.service";
|
|||
import { requiredAdmin } from "lib/auth";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// constants
|
||||
import { ROLE } from "constants/";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
|
||||
import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
|
||||
|
|
@ -24,6 +21,9 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
|
|||
import { Button, CustomListbox, CustomMenu, Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { NextPage, NextPageContext } from "next";
|
||||
// fetch-keys
|
||||
import {
|
||||
PROJECT_DETAILS,
|
||||
|
|
@ -31,6 +31,8 @@ import {
|
|||
PROJECT_MEMBERS,
|
||||
WORKSPACE_DETAILS,
|
||||
} from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
|
||||
type TMemberSettingsProps = {
|
||||
isMember: boolean;
|
||||
|
|
@ -58,7 +60,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
|
|||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
const { data: activeProject } = useSWR(
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
|
|
@ -120,11 +122,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
|
|||
(item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
|
||||
)}
|
||||
handleDelete={async () => {
|
||||
if (!activeWorkspace || !activeProject) return;
|
||||
if (!activeWorkspace || !projectDetails) return;
|
||||
if (selectedRemoveMember) {
|
||||
await projectService.deleteProjectMember(
|
||||
activeWorkspace.slug,
|
||||
activeProject.id,
|
||||
projectDetails.id,
|
||||
selectedRemoveMember
|
||||
);
|
||||
mutateMembers(
|
||||
|
|
@ -135,7 +137,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
|
|||
if (selectedInviteRemoveMember) {
|
||||
await projectService.deleteProjectInvitation(
|
||||
activeWorkspace.slug,
|
||||
activeProject.id,
|
||||
projectDetails.id,
|
||||
selectedInviteRemoveMember
|
||||
);
|
||||
mutateInvitations(
|
||||
|
|
@ -155,14 +157,14 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
|
|||
setIsOpen={setInviteModal}
|
||||
members={members}
|
||||
/>
|
||||
<SettingsLayout
|
||||
type="project"
|
||||
<AppLayout
|
||||
settingsLayout="project"
|
||||
memberType={{ isMember, isOwner, isViewer, isGuest }}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeProject?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
/>
|
||||
<BreadcrumbItem title="Members Settings" />
|
||||
</Breadcrumbs>
|
||||
|
|
@ -235,11 +237,11 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
|
|||
title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
|
||||
value={member.role}
|
||||
onChange={(value) => {
|
||||
if (!activeWorkspace || !activeProject) return;
|
||||
if (!activeWorkspace || !projectDetails) return;
|
||||
projectService
|
||||
.updateProjectMember(
|
||||
activeWorkspace.slug,
|
||||
activeProject.id,
|
||||
projectDetails.id,
|
||||
member.id,
|
||||
{
|
||||
role: value,
|
||||
|
|
@ -306,7 +308,7 @@ const MembersSettings: NextPage<TMemberSettingsProps> = (props) => {
|
|||
</div>
|
||||
)}
|
||||
</section>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import projectService from "services/project.service";
|
|||
// lib
|
||||
import { requiredAdmin } from "lib/auth";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import { CreateUpdateStateInline, DeleteStateModal, StateGroup } from "components/states";
|
||||
// ui
|
||||
|
|
@ -43,7 +43,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||
query: { workspaceSlug, projectId },
|
||||
} = useRouter();
|
||||
|
||||
const { data: activeProject } = useSWR(
|
||||
const { data: projectDetails } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
|
|
@ -68,14 +68,14 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||
data={states?.find((state) => state.id === selectDeleteState) ?? null}
|
||||
onClose={() => setSelectDeleteState(null)}
|
||||
/>
|
||||
<SettingsLayout
|
||||
type="project"
|
||||
<AppLayout
|
||||
settingsLayout="project"
|
||||
memberType={{ isMember, isOwner, isViewer, isGuest }}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeProject?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${activeProject?.id}/issues`}
|
||||
title={`${projectDetails?.name ?? "Project"}`}
|
||||
link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
|
||||
/>
|
||||
<BreadcrumbItem title="States Settings" />
|
||||
</Breadcrumbs>
|
||||
|
|
@ -87,7 +87,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||
<p className="mt-4 text-sm text-gray-500">Manage the state of this project.</p>
|
||||
</div>
|
||||
<div className="flex flex-col justify-between gap-4">
|
||||
{states && activeProject ? (
|
||||
{states && projectDetails ? (
|
||||
Object.keys(groupedStates).map((key) => (
|
||||
<div key={key}>
|
||||
<div className="mb-2 flex w-full justify-between md:w-2/3">
|
||||
|
|
@ -104,7 +104,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||
<div className="space-y-1 rounded-xl border p-1 md:w-2/3">
|
||||
{key === activeGroup && (
|
||||
<CreateUpdateStateInline
|
||||
projectId={activeProject.id}
|
||||
projectId={projectDetails.id}
|
||||
onClose={() => {
|
||||
setActiveGroup(null);
|
||||
setSelectedState(null);
|
||||
|
|
@ -143,7 +143,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||
) : (
|
||||
<div className="border-b last:border-b-0" key={state.id}>
|
||||
<CreateUpdateStateInline
|
||||
projectId={activeProject.id}
|
||||
projectId={projectDetails.id}
|
||||
onClose={() => {
|
||||
setActiveGroup(null);
|
||||
setSelectedState(null);
|
||||
|
|
@ -168,7 +168,7 @@ const StatesSettings: NextPage<TStateSettingsProps> = (props) => {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,21 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
|
||||
// lib
|
||||
import type { NextPage, GetServerSideProps } from "next";
|
||||
import { requiredWorkspaceAdmin } from "lib/auth";
|
||||
// constants
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// ui
|
||||
import { Button } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
import type { NextPage, GetServerSideProps } from "next";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
type TBillingSettingsProps = {
|
||||
|
|
@ -35,9 +37,9 @@ const BillingSettings: NextPage<TBillingSettingsProps> = (props) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<SettingsLayout
|
||||
memberType={{ ...props }}
|
||||
type="workspace"
|
||||
<AppLayout
|
||||
settingsLayout="workspace"
|
||||
memberType={props}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
|
|
@ -75,7 +77,7 @@ const BillingSettings: NextPage<TBillingSettingsProps> = (props) => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,173 +0,0 @@
|
|||
import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import useSWR from "swr";
|
||||
|
||||
// lib
|
||||
import type { GetServerSideProps, NextPage } from "next";
|
||||
import { requiredWorkspaceAdmin } from "lib/auth";
|
||||
// constants
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
// ui
|
||||
import { Button } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { WORKSPACE_DETAILS } from "constants/fetch-keys";
|
||||
|
||||
type TFeatureSettingsProps = {
|
||||
isOwner: boolean;
|
||||
isMember: boolean;
|
||||
isViewer: boolean;
|
||||
isGuest: boolean;
|
||||
};
|
||||
|
||||
const FeaturesSettings: NextPage<TFeatureSettingsProps> = (props) => {
|
||||
const {
|
||||
query: { workspaceSlug },
|
||||
} = useRouter();
|
||||
|
||||
const { data: activeWorkspace } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SettingsLayout
|
||||
memberType={{
|
||||
...props,
|
||||
}}
|
||||
type="workspace"
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${activeWorkspace?.name ?? "Workspace"}`}
|
||||
link={`/${workspaceSlug}`}
|
||||
/>
|
||||
<BreadcrumbItem title="Members Settings" />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<section className="space-y-8">
|
||||
<div>
|
||||
<h3 className="text-3xl font-bold leading-6 text-gray-900">Workspace Features</h3>
|
||||
</div>
|
||||
<div className="space-y-8 md:w-2/3">
|
||||
<div className="flex items-center gap-x-10 gap-y-2">
|
||||
<div>
|
||||
<h4 className="text-md mb-1 leading-6 text-gray-900">Use modules</h4>
|
||||
<p className="mb-3 text-sm text-gray-500">
|
||||
Modules are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{/* Disabled- bg-gray-200, translate-x-0 */}
|
||||
<button
|
||||
type="button"
|
||||
className="pointer-events-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-500 transition-colors duration-200 ease-in-out focus:outline-none"
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span className="sr-only">Use setting</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-10 gap-y-2">
|
||||
<div>
|
||||
<h4 className="text-md mb-1 leading-6 text-gray-900">Use cycles</h4>
|
||||
<p className="mb-3 text-sm text-gray-500">
|
||||
Cycles are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{/* Disabled- bg-gray-200, translate-x-0 */}
|
||||
<button
|
||||
type="button"
|
||||
className="pointer-events-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-500 transition-colors duration-200 ease-in-out focus:outline-none"
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span className="sr-only">Use setting</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-10 gap-y-2">
|
||||
<div>
|
||||
<h4 className="text-md mb-1 leading-6 text-gray-900">Use backlogs</h4>
|
||||
<p className="mb-3 text-sm text-gray-500">
|
||||
Backlog are enabled for all the projects in this workspace. Access it from the
|
||||
navigation bar.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
{/* Disabled- bg-gray-200, translate-x-0 */}
|
||||
<button
|
||||
type="button"
|
||||
className="pointer-events-none relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-500 transition-colors duration-200 ease-in-out focus:outline-none"
|
||||
role="switch"
|
||||
aria-checked="false"
|
||||
>
|
||||
<span className="sr-only">Use setting</span>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<a href="https://plane.so/" target="_blank" rel="noreferrer">
|
||||
<Button theme="secondary" size="rg" className="text-xs">
|
||||
Plane is open-source, view Roadmap
|
||||
</Button>
|
||||
</a>
|
||||
<a href="https://github.com/makeplane/plane" target="_blank" rel="noreferrer">
|
||||
<Button theme="secondary" size="rg" className="text-xs">
|
||||
Star us on GitHub
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</SettingsLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const workspaceSlug = ctx.params?.workspaceSlug as string;
|
||||
|
||||
const memberDetail = await requiredWorkspaceAdmin(workspaceSlug, ctx.req.headers.cookie);
|
||||
|
||||
if (memberDetail === null) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: "/",
|
||||
permanent: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
isOwner: memberDetail?.role === 20,
|
||||
isMember: memberDetail?.role === 15,
|
||||
isViewer: memberDetail?.role === 10,
|
||||
isGuest: memberDetail?.role === 5,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default FeaturesSettings;
|
||||
|
|
@ -17,7 +17,7 @@ import { requiredWorkspaceAdmin } from "lib/auth";
|
|||
import workspaceService from "services/workspace.service";
|
||||
import fileServices from "services/file.service";
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
|
|
@ -35,7 +35,7 @@ import type { GetServerSideProps, NextPage } from "next";
|
|||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS, USER_WORKSPACES } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { companySize } from "constants/";
|
||||
import { COMPANY_SIZE } from "constants/workspace";
|
||||
|
||||
const defaultValues: Partial<IWorkspace> = {
|
||||
name: "",
|
||||
|
|
@ -85,11 +85,13 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
|
|||
|
||||
const onSubmit = async (formData: IWorkspace) => {
|
||||
if (!activeWorkspace) return;
|
||||
|
||||
const payload: Partial<IWorkspace> = {
|
||||
logo: formData.logo,
|
||||
name: formData.name,
|
||||
company_size: formData.company_size,
|
||||
};
|
||||
|
||||
await workspaceService
|
||||
.updateWorkspace(activeWorkspace.slug, payload)
|
||||
.then((res) => {
|
||||
|
|
@ -106,9 +108,9 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout
|
||||
memberType={{ ...props }}
|
||||
type="workspace"
|
||||
<AppLayout
|
||||
settingsLayout="workspace"
|
||||
memberType={props}
|
||||
meta={{
|
||||
title: "Plane - Workspace Settings",
|
||||
}}
|
||||
|
|
@ -278,7 +280,7 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
|
|||
label={value ? value.toString() : "Select company size"}
|
||||
input
|
||||
>
|
||||
{companySize?.map((item) => (
|
||||
{COMPANY_SIZE?.map((item) => (
|
||||
<CustomSelect.Option key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</CustomSelect.Option>
|
||||
|
|
@ -315,7 +317,7 @@ const WorkspaceSettings: NextPage<TWorkspaceSettingsProps> = (props) => {
|
|||
<Spinner />
|
||||
</div>
|
||||
)}
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,29 +2,31 @@ import { useState } from "react";
|
|||
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR from "swr";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
// lib
|
||||
import type { GetServerSideProps, NextPage } from "next";
|
||||
import { requiredWorkspaceAdmin } from "lib/auth";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
// services
|
||||
import workspaceService from "services/workspace.service";
|
||||
// constants
|
||||
// layouts
|
||||
import SettingsLayout from "layouts/settings-layout";
|
||||
import AppLayout from "layouts/app-layout";
|
||||
// components
|
||||
import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace-member-remove";
|
||||
import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
|
||||
// ui
|
||||
import { Button, CustomListbox, CustomMenu, Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
import { ROLE } from "constants/";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { GetServerSideProps, NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
import { ROLE } from "constants/workspace";
|
||||
|
||||
type TMembersSettingsProps = {
|
||||
isOwner: boolean;
|
||||
|
|
@ -135,11 +137,9 @@ const MembersSettings: NextPage<TMembersSettingsProps> = (props) => {
|
|||
workspace_slug={workspaceSlug as string}
|
||||
members={members}
|
||||
/>
|
||||
<SettingsLayout
|
||||
memberType={{
|
||||
...props,
|
||||
}}
|
||||
type="workspace"
|
||||
<AppLayout
|
||||
settingsLayout="workspace"
|
||||
memberType={props}
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
|
|
@ -283,7 +283,7 @@ const MembersSettings: NextPage<TMembersSettingsProps> = (props) => {
|
|||
</div>
|
||||
)}
|
||||
</section>
|
||||
</SettingsLayout>
|
||||
</AppLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue