style: project setting ui revamp (#2177)
* style: project settings navigation sidebar added * chore: emoji and image picker close on outside click added * style: project setting general page revamp * style: project setting member page revamp * style: project setting features page revamp * style: project setting state page revamp * style: project setting integrations page revamp * style: project setting estimates page revamp * style: project setting automation page revamp * style: project setting label page revamp * chore: member select improvement for member setting page * chore: toggle switch component improvement * style: project automation setting ui improvement * style: module icon added * style: toggle switch improvement * style: ui and spacing consistency * style: project label setting revamp * style: project state setting ui improvement * chore: integration setting repo select validation * chore: code refactor * fix: build fix
This commit is contained in:
Anmol Singh Bhatia
GitHub
parent
d0f6ca3bac
commit
87abf3ccb1
31 changed files with 1090 additions and 876 deletions
|
|
@ -13,8 +13,8 @@ import useUserAuth from "hooks/use-user-auth";
|
|||
import useProjectDetails from "hooks/use-project-details";
|
||||
import useToast from "hooks/use-toast";
|
||||
// components
|
||||
import { SettingsHeader } from "components/project";
|
||||
import { AutoArchiveAutomation, AutoCloseAutomation } from "components/automation";
|
||||
import { SettingsSidebar } from "components/project";
|
||||
// ui
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
|
|
@ -75,11 +75,16 @@ const AutomationsSettings: NextPage = () => {
|
|||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="p-8">
|
||||
<SettingsHeader />
|
||||
<section className="space-y-5">
|
||||
<AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<section className="pr-9 py-8 w-full">
|
||||
<div className="flex items-center py-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">Automations</h3>
|
||||
</div>
|
||||
<AutoArchiveAutomation projectDetails={projectDetails} handleChange={handleChange} />
|
||||
<AutoCloseAutomation projectDetails={projectDetails} handleChange={handleChange} />
|
||||
</section>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
|
|
|
|||
|
|
@ -1,241 +0,0 @@
|
|||
import React, { useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
// hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// components
|
||||
import { SettingsHeader } from "components/project";
|
||||
// ui
|
||||
import { CustomSelect, Loader, SecondaryButton } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// types
|
||||
import { IProject, IUserLite, IWorkspace } from "types";
|
||||
import type { NextPage } from "next";
|
||||
// fetch-keys
|
||||
import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues: Partial<IProject> = {
|
||||
project_lead: null,
|
||||
default_assignee: null,
|
||||
};
|
||||
|
||||
const ControlSettings: NextPage = () => {
|
||||
const { setToastAlert } = useToast();
|
||||
|
||||
const router = useRouter();
|
||||
const { workspaceSlug, projectId } = router.query;
|
||||
|
||||
const { user } = useUserAuth();
|
||||
|
||||
const { data: projectDetails } = useSWR<IProject>(
|
||||
workspaceSlug && projectId ? PROJECT_DETAILS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.getProject(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: people } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
reset,
|
||||
control,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<IProject>({ defaultValues });
|
||||
|
||||
const onSubmit = async (formData: IProject) => {
|
||||
if (!workspaceSlug || !projectId || !projectDetails) return;
|
||||
|
||||
const payload: Partial<IProject> = {
|
||||
default_assignee: formData.default_assignee,
|
||||
project_lead: formData.project_lead,
|
||||
};
|
||||
|
||||
await projectService
|
||||
.updateProject(workspaceSlug as string, projectId as string, payload, user)
|
||||
.then((res) => {
|
||||
mutate(PROJECT_DETAILS(projectId as string));
|
||||
|
||||
mutate(
|
||||
PROJECTS_LIST(workspaceSlug as string, {
|
||||
is_favorite: "all",
|
||||
})
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Project updated successfully",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (projectDetails)
|
||||
reset({
|
||||
...projectDetails,
|
||||
default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
|
||||
project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
|
||||
workspace: (projectDetails.workspace as IWorkspace).id,
|
||||
});
|
||||
}, [projectDetails, reset]);
|
||||
|
||||
return (
|
||||
<ProjectAuthorizationWrapper
|
||||
breadcrumbs={
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem
|
||||
title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
|
||||
link={`/${workspaceSlug}/projects/${projectId}/issues`}
|
||||
linkTruncate
|
||||
/>
|
||||
<BreadcrumbItem title="Control Settings" unshrinkTitle />
|
||||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="p-8">
|
||||
<SettingsHeader />
|
||||
<div className="space-y-8 sm:space-y-12">
|
||||
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Project Lead</h4>
|
||||
<p className="text-sm text-custom-text-200">Select the project leader.</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<Controller
|
||||
name="project_lead"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CustomSelect
|
||||
{...field}
|
||||
label={
|
||||
people?.find((person) => person.member.id === field.value)?.member
|
||||
.display_name ?? <span className="text-custom-text-200">Select lead</span>
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{people?.map((person) => (
|
||||
<CustomSelect.Option
|
||||
key={person.member.id}
|
||||
value={person.member.id}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{person.member.avatar && person.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<img
|
||||
src={person.member.avatar}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
|
||||
alt="User Avatar"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
||||
{person.member.display_name?.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{person.member.display_name}
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="h-9 w-full">
|
||||
<Loader.Item width="100%" height="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Default Assignee</h4>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Select the default assignee for the project.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<Controller
|
||||
name="default_assignee"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<CustomSelect
|
||||
{...field}
|
||||
label={
|
||||
people?.find((p) => p.member.id === field.value)?.member.display_name ?? (
|
||||
<span className="text-custom-text-200">Select default assignee</span>
|
||||
)
|
||||
}
|
||||
width="w-full"
|
||||
input
|
||||
>
|
||||
{people?.map((person) => (
|
||||
<CustomSelect.Option
|
||||
key={person.member.id}
|
||||
value={person.member.id}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{person.member.avatar && person.member.avatar !== "" ? (
|
||||
<div className="relative h-4 w-4">
|
||||
<img
|
||||
src={person.member.avatar}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded-full"
|
||||
alt="User Avatar"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
|
||||
{person.member.display_name?.charAt(0)}
|
||||
</div>
|
||||
)}
|
||||
{person.member.display_name}
|
||||
</div>
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="h-9 w-full">
|
||||
<Loader.Item width="100%" height="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="sm:text-right">
|
||||
<SecondaryButton type="submit" loading={isSubmitting}>
|
||||
{isSubmitting ? "Updating Project..." : "Update Project"}
|
||||
</SecondaryButton>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ProjectAuthorizationWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default ControlSettings;
|
||||
|
|
@ -13,12 +13,12 @@ import useProjectDetails from "hooks/use-project-details";
|
|||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import { CreateUpdateEstimateModal, SingleEstimate } from "components/estimates";
|
||||
import { SettingsHeader } from "components/project";
|
||||
import { SettingsSidebar } from "components/project";
|
||||
//hooks
|
||||
import useToast from "hooks/use-toast";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// ui
|
||||
import { EmptyState, Loader, SecondaryButton } from "components/ui";
|
||||
import { EmptyState, Loader, PrimaryButton, SecondaryButton } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
|
|
@ -125,66 +125,68 @@ const EstimatesSettings: NextPage = () => {
|
|||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="h-full flex flex-col p-8 overflow-hidden">
|
||||
<SettingsHeader />
|
||||
<section className="flex items-center justify-between">
|
||||
<h3 className="text-2xl font-semibold">Estimates</h3>
|
||||
<div className="col-span-12 space-y-5 sm:col-span-7">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="flex cursor-pointer items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200"
|
||||
onClick={() => {
|
||||
setEstimateToUpdate(undefined);
|
||||
setEstimateFormOpen(true);
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Create New Estimate
|
||||
</div>
|
||||
{projectDetails?.estimate && (
|
||||
<SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{estimatesList ? (
|
||||
estimatesList.length > 0 ? (
|
||||
<section className="h-full mt-5 divide-y divide-custom-border-200 rounded-xl border border-custom-border-200 bg-custom-background-100 px-6 overflow-y-auto">
|
||||
{estimatesList.map((estimate) => (
|
||||
<SingleEstimate
|
||||
key={estimate.id}
|
||||
estimate={estimate}
|
||||
editEstimate={(estimate) => editEstimate(estimate)}
|
||||
handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
|
||||
user={user}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
) : (
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<EmptyState
|
||||
title="No estimates yet"
|
||||
description="Estimates help you communicate the complexity of an issue."
|
||||
image={emptyEstimate}
|
||||
primaryButton={{
|
||||
icon: <PlusIcon className="h-4 w-4" />,
|
||||
text: "Add Estimate",
|
||||
onClick: () => {
|
||||
<div className="flex flex-row gap-2 h-full overflow-hidden">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<div className="pr-9 py-8 flex flex-col w-full">
|
||||
<section className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">Estimates</h3>
|
||||
<div className="col-span-12 space-y-5 sm:col-span-7">
|
||||
<div className="flex items-center gap-2">
|
||||
<PrimaryButton
|
||||
onClick={() => {
|
||||
setEstimateToUpdate(undefined);
|
||||
setEstimateFormOpen(true);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
}}
|
||||
>
|
||||
Add Estimate
|
||||
</PrimaryButton>
|
||||
{projectDetails?.estimate && (
|
||||
<SecondaryButton onClick={disableEstimates}>Disable Estimates</SecondaryButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<Loader className="mt-5 space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
)}
|
||||
</section>
|
||||
{estimatesList ? (
|
||||
estimatesList.length > 0 ? (
|
||||
<section className="h-full bg-custom-background-100 overflow-y-auto">
|
||||
{estimatesList.map((estimate) => (
|
||||
<SingleEstimate
|
||||
key={estimate.id}
|
||||
estimate={estimate}
|
||||
editEstimate={(estimate) => editEstimate(estimate)}
|
||||
handleEstimateDelete={(estimateId) => removeEstimate(estimateId)}
|
||||
user={user}
|
||||
/>
|
||||
))}
|
||||
</section>
|
||||
) : (
|
||||
<div className="h-full w-full overflow-y-auto">
|
||||
<EmptyState
|
||||
title="No estimates yet"
|
||||
description="Estimates help you communicate the complexity of an issue."
|
||||
image={emptyEstimate}
|
||||
primaryButton={{
|
||||
icon: <PlusIcon className="h-4 w-4" />,
|
||||
text: "Add Estimate",
|
||||
onClick: () => {
|
||||
setEstimateToUpdate(undefined);
|
||||
setEstimateFormOpen(true);
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<Loader className="mt-5 space-y-5">
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -13,13 +13,13 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
|||
import useToast from "hooks/use-toast";
|
||||
import useUserAuth from "hooks/use-user-auth";
|
||||
// components
|
||||
import { SettingsHeader } from "components/project";
|
||||
import { SettingsSidebar } from "components/project";
|
||||
// ui
|
||||
import { SecondaryButton, ToggleSwitch } from "components/ui";
|
||||
import { ToggleSwitch } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { ContrastIcon, PeopleGroupIcon, ViewListIcon, InboxIcon } from "components/icons";
|
||||
import { DocumentTextIcon } from "@heroicons/react/24/outline";
|
||||
import { ModuleIcon } from "components/icons";
|
||||
import { Contrast, FileText, Inbox, Layers } from "lucide-react";
|
||||
// types
|
||||
import { IProject } from "types";
|
||||
import type { NextPage } from "next";
|
||||
|
|
@ -33,35 +33,35 @@ const featuresList = [
|
|||
title: "Cycles",
|
||||
description:
|
||||
"Cycles are enabled for all the projects in this workspace. Access them from the sidebar.",
|
||||
icon: <ContrastIcon color="#3f76ff" width={28} height={28} className="flex-shrink-0" />,
|
||||
icon: <Contrast className="h-4 w-4 text-custom-primary-100 flex-shrink-0" />,
|
||||
property: "cycle_view",
|
||||
},
|
||||
{
|
||||
title: "Modules",
|
||||
description:
|
||||
"Modules are enabled for all the projects in this workspace. Access it from the sidebar.",
|
||||
icon: <PeopleGroupIcon color="#ff6b00" width={28} height={28} className="flex-shrink-0" />,
|
||||
icon: <ModuleIcon width={16} height={16} className="flex-shrink-0" />,
|
||||
property: "module_view",
|
||||
},
|
||||
{
|
||||
title: "Views",
|
||||
description:
|
||||
"Views are enabled for all the projects in this workspace. Access it from the sidebar.",
|
||||
icon: <ViewListIcon color="#05c3ff" width={28} height={28} className="flex-shrink-0" />,
|
||||
icon: <Layers className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
|
||||
property: "issue_views_view",
|
||||
},
|
||||
{
|
||||
title: "Pages",
|
||||
description:
|
||||
"Pages are enabled for all the projects in this workspace. Access it from the sidebar.",
|
||||
icon: <DocumentTextIcon color="#fcbe1d" width={28} height={28} className="flex-shrink-0" />,
|
||||
icon: <FileText className="h-4 w-4 text-red-400 flex-shrink-0" />,
|
||||
property: "page_view",
|
||||
},
|
||||
{
|
||||
title: "Inbox",
|
||||
description:
|
||||
"Inbox are enabled for all the projects in this workspace. Access it from the issues views page.",
|
||||
icon: <InboxIcon color="#fcbe1d" width={24} height={24} className="flex-shrink-0" />,
|
||||
icon: <Inbox className="h-4 w-4 text-cyan-500 flex-shrink-0" />,
|
||||
property: "inbox_view",
|
||||
},
|
||||
];
|
||||
|
|
@ -149,21 +149,29 @@ const FeaturesSettings: NextPage = () => {
|
|||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="p-8">
|
||||
<SettingsHeader />
|
||||
<section className="space-y-5">
|
||||
<h3 className="text-2xl font-semibold">Features</h3>
|
||||
<div className="space-y-5">
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<section className="pr-9 py-8 w-full">
|
||||
<div className="flex items-center py-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">Features</h3>
|
||||
</div>
|
||||
<div>
|
||||
{featuresList.map((feature) => (
|
||||
<div
|
||||
key={feature.property}
|
||||
className="flex items-center justify-between gap-x-8 gap-y-2 rounded-[10px] border border-custom-border-200 bg-custom-background-100 p-5"
|
||||
className="flex items-center justify-between gap-x-8 gap-y-2 border-b border-custom-border-200 bg-custom-background-100 p-4"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{feature.icon}
|
||||
<div className="flex items-center justify-center p-3 rounded bg-custom-background-90">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div className="">
|
||||
<h4 className="text-lg font-semibold">{feature.title}</h4>
|
||||
<p className="text-sm text-custom-text-200">{feature.description}</p>
|
||||
<h4 className="text-sm font-medium">{feature.title}</h4>
|
||||
<p className="text-sm text-custom-text-200 tracking-tight">
|
||||
{feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ToggleSwitch
|
||||
|
|
@ -187,29 +195,11 @@ const FeaturesSettings: NextPage = () => {
|
|||
[feature.property]: !projectDetails?.[feature.property as keyof IProject],
|
||||
});
|
||||
}}
|
||||
size="lg"
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-custom-text-200">
|
||||
<a
|
||||
href="https://plane.so/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-custom-text-100"
|
||||
>
|
||||
<SecondaryButton outline>Plane is open-source, view Roadmap</SecondaryButton>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/makeplane/plane"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hover:text-custom-text-100"
|
||||
>
|
||||
<SecondaryButton outline>Star us on GitHub</SecondaryButton>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</ProjectAuthorizationWrapper>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { useRouter } from "next/router";
|
|||
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// headless ui
|
||||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
// react-hook-form
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// layouts
|
||||
|
|
@ -11,7 +13,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
|||
// services
|
||||
import projectService from "services/project.service";
|
||||
// components
|
||||
import { DeleteProjectModal, SettingsHeader } from "components/project";
|
||||
import { DeleteProjectModal, SettingsSidebar } from "components/project";
|
||||
import { ImagePickerPopover } from "components/core";
|
||||
import EmojiIconPicker from "components/emoji-icon-picker";
|
||||
// hooks
|
||||
|
|
@ -25,11 +27,14 @@ import {
|
|||
CustomSelect,
|
||||
SecondaryButton,
|
||||
DangerButton,
|
||||
Icon,
|
||||
PrimaryButton,
|
||||
} from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// helpers
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
import { renderShortDateWithYearFormat } from "helpers/date-time.helper";
|
||||
// types
|
||||
import { IProject, IWorkspace } from "types";
|
||||
import type { NextPage } from "next";
|
||||
|
|
@ -185,229 +190,258 @@ const GeneralSettings: NextPage = () => {
|
|||
onClose={() => setSelectedProject(null)}
|
||||
user={user}
|
||||
/>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="p-8">
|
||||
<SettingsHeader />
|
||||
<div className={`space-y-8 sm:space-y-12 ${isAdmin ? "" : "opacity-60"}`}>
|
||||
<div className="grid grid-cols-12 items-start gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Icon & Name</h4>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Select an icon and a name for your project.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 flex gap-2 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<div className="h-7 w-7 grid place-items-center">
|
||||
<Controller
|
||||
control={control}
|
||||
name="emoji_and_icon"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
label={value ? renderEmoji(value) : "Icon"}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<div className={`pr-9 py-8 w-full ${isAdmin ? "" : "opacity-60"}`}>
|
||||
<div className="relative h-44 w-full mt-6">
|
||||
<img
|
||||
src={watch("cover_image")!}
|
||||
alt={watch("cover_image")!}
|
||||
className="h-44 w-full rounded-md object-cover"
|
||||
/>
|
||||
<div className="flex items-end justify-between absolute bottom-4 w-full px-4">
|
||||
<div className="flex gap-3">
|
||||
<div className="flex items-center justify-center bg-custom-background-90 h-[52px] w-[52px] rounded-lg">
|
||||
{projectDetails ? (
|
||||
<div className="h-7 w-7 grid place-items-center">
|
||||
<Controller
|
||||
control={control}
|
||||
name="emoji_and_icon"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<EmojiIconPicker
|
||||
label={value ? renderEmoji(value) : "Icon"}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="46px" width="46px" />
|
||||
</Loader>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="46px" width="46px" />
|
||||
</Loader>
|
||||
)}
|
||||
{projectDetails ? (
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
error={errors.name}
|
||||
register={register}
|
||||
placeholder="Project Name"
|
||||
validations={{
|
||||
required: "Name is required",
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="46px" width="225px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Description</h4>
|
||||
<p className="text-sm text-custom-text-200">Give a description to your project.</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<TextArea
|
||||
id="description"
|
||||
name="description"
|
||||
error={errors.description}
|
||||
register={register}
|
||||
placeholder="Enter project description"
|
||||
validations={{}}
|
||||
className="min-h-[46px] text-sm"
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="w-full">
|
||||
<Loader.Item height="46px" width="full" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Cover Photo</h4>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Select your cover photo from the given library.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{watch("cover_image") ? (
|
||||
<div className="h-32 w-full rounded border border-custom-border-200 p-1">
|
||||
<div className="relative h-full w-full rounded">
|
||||
<img
|
||||
src={watch("cover_image")!}
|
||||
className="absolute top-0 left-0 h-full w-full object-cover rounded"
|
||||
alt={projectDetails?.name ?? "Cover image"}
|
||||
/>
|
||||
<div className="absolute bottom-0 flex w-full justify-end">
|
||||
<ImagePickerPopover
|
||||
label={"Change cover"}
|
||||
onChange={(imageUrl) => {
|
||||
setValue("cover_image", imageUrl);
|
||||
}}
|
||||
value={watch("cover_image")}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1 text-white">
|
||||
<span className="text-lg font-semibold">{watch("name")}</span>
|
||||
<span className="flex items-center gap-2 text-sm">
|
||||
<span>
|
||||
{watch("identifier")} . {currentNetwork?.label}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<Loader className="w-full">
|
||||
<Loader.Item height="46px" width="full" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Identifier</h4>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
Create a 1-6 characters{"'"} identifier for the project.
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<Input
|
||||
id="identifier"
|
||||
name="identifier"
|
||||
error={errors.identifier}
|
||||
register={register}
|
||||
placeholder="Enter identifier"
|
||||
onChange={handleIdentifierChange}
|
||||
validations={{
|
||||
required: "Identifier is required",
|
||||
validate: (value) =>
|
||||
/^[A-Z0-9]+$/.test(value.toUpperCase()) || "Identifier must be in uppercase.",
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Identifier must at least be of 1 character",
|
||||
},
|
||||
maxLength: {
|
||||
value: 5,
|
||||
message: "Identifier must at most be of 5 characters",
|
||||
},
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="46px" width="160px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Network</h4>
|
||||
<p className="text-sm text-custom-text-200">Select privacy type for the project.</p>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<Controller
|
||||
name="network"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={currentNetwork?.label ?? "Select network"}
|
||||
input
|
||||
disabled={!isAdmin}
|
||||
>
|
||||
{NETWORK_CHOICES.map((network) => (
|
||||
<CustomSelect.Option key={network.key} value={network.key}>
|
||||
{network.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="w-full">
|
||||
<Loader.Item height="46px" width="160px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{isAdmin && (
|
||||
<>
|
||||
<div className="sm:text-right">
|
||||
<div className="flex justify-center">
|
||||
{projectDetails ? (
|
||||
<div>
|
||||
<Controller
|
||||
control={control}
|
||||
name="cover_image"
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<ImagePickerPopover
|
||||
label={"Change cover"}
|
||||
onChange={(imageUrl) => {
|
||||
setValue("cover_image", imageUrl);
|
||||
}}
|
||||
value={watch("cover_image")}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="32px" width="108px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-8 my-8">
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4 className="text-sm">Project Name</h4>
|
||||
{projectDetails ? (
|
||||
<SecondaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
|
||||
{isSubmitting ? "Updating Project..." : "Update Project"}
|
||||
</SecondaryButton>
|
||||
<Input
|
||||
id="name"
|
||||
name="name"
|
||||
error={errors.name}
|
||||
register={register}
|
||||
className="!p-3 rounded-md font-medium"
|
||||
placeholder="Project Name"
|
||||
validations={{
|
||||
required: "Name is required",
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="46px" width="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<h4 className="text-sm">Description</h4>
|
||||
{projectDetails ? (
|
||||
<TextArea
|
||||
id="description"
|
||||
name="description"
|
||||
error={errors.description}
|
||||
register={register}
|
||||
placeholder="Enter project description"
|
||||
validations={{}}
|
||||
className="min-h-[102px] text-sm"
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="w-full">
|
||||
<Loader.Item height="102px" width="full" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-10 w-full">
|
||||
<div className="flex flex-col gap-1 w-1/2">
|
||||
<h4 className="text-sm">Identifier</h4>
|
||||
{projectDetails ? (
|
||||
<Input
|
||||
id="identifier"
|
||||
name="identifier"
|
||||
error={errors.identifier}
|
||||
register={register}
|
||||
placeholder="Enter identifier"
|
||||
onChange={handleIdentifierChange}
|
||||
validations={{
|
||||
required: "Identifier is required",
|
||||
validate: (value) =>
|
||||
/^[A-Z0-9]+$/.test(value.toUpperCase()) ||
|
||||
"Identifier must be in uppercase.",
|
||||
minLength: {
|
||||
value: 1,
|
||||
message: "Identifier must at least be of 1 character",
|
||||
},
|
||||
maxLength: {
|
||||
value: 5,
|
||||
message: "Identifier must at most be of 5 characters",
|
||||
},
|
||||
}}
|
||||
disabled={!isAdmin}
|
||||
/>
|
||||
) : (
|
||||
<Loader>
|
||||
<Loader.Item height="36px" width="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1 w-1/2">
|
||||
<h4 className="text-sm">Network</h4>
|
||||
{projectDetails ? (
|
||||
<Controller
|
||||
name="network"
|
||||
control={control}
|
||||
render={({ field: { value, onChange } }) => (
|
||||
<CustomSelect
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
label={currentNetwork?.label ?? "Select network"}
|
||||
className="!border-custom-border-200 !shadow-none"
|
||||
input
|
||||
disabled={!isAdmin}
|
||||
>
|
||||
{NETWORK_CHOICES.map((network) => (
|
||||
<CustomSelect.Option key={network.key} value={network.key}>
|
||||
{network.label}
|
||||
</CustomSelect.Option>
|
||||
))}
|
||||
</CustomSelect>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="w-full">
|
||||
<Loader.Item height="46px" width="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between py-2">
|
||||
{projectDetails ? (
|
||||
<>
|
||||
<PrimaryButton type="submit" loading={isSubmitting} disabled={!isAdmin}>
|
||||
{isSubmitting ? "Updating Project..." : "Update Project"}
|
||||
</PrimaryButton>
|
||||
<span className="text-sm text-custom-sidebar-text-400 italic">
|
||||
Created on {renderShortDateWithYearFormat(projectDetails?.created_at)}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<Loader className="mt-2 w-full">
|
||||
<Loader.Item height="34px" width="100px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
<div className="grid grid-cols-12 gap-4 sm:gap-16">
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
<h4 className="text-lg font-semibold">Danger Zone</h4>
|
||||
<p className="text-sm text-custom-text-200">
|
||||
The danger zone of the project delete page is a critical area that requires
|
||||
careful consideration and attention. When deleting a project, all of the data
|
||||
and resources within that project will be permanently removed and cannot be
|
||||
recovered.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Disclosure as="div" className="border-t border-custom-border-400">
|
||||
{({ open }) => (
|
||||
<div className="w-full">
|
||||
<Disclosure.Button
|
||||
as="button"
|
||||
type="button"
|
||||
className="flex items-center justify-between w-full py-4"
|
||||
>
|
||||
<span className="text-xl tracking-tight">Danger Zone</span>
|
||||
<Icon iconName={open ? "expand_more" : "expand_less"} className="!text-2xl" />
|
||||
</Disclosure.Button>
|
||||
|
||||
<Transition
|
||||
show={open}
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform opacity-0"
|
||||
enterTo="transform opacity-100"
|
||||
leave="transition duration-75 ease-out"
|
||||
leaveFrom="transform opacity-100"
|
||||
leaveTo="transform opacity-0"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="flex flex-col gap-8">
|
||||
<span className="text-sm tracking-tight">
|
||||
The danger zone of the project delete page is a critical area that
|
||||
requires careful consideration and attention. When deleting a project, all
|
||||
of the data and resources within that project will be permanently removed
|
||||
and cannot be recovered.
|
||||
</span>
|
||||
<div>
|
||||
{projectDetails ? (
|
||||
<div>
|
||||
<DangerButton
|
||||
onClick={() => setSelectedProject(projectDetails.id ?? null)}
|
||||
className="!text-sm"
|
||||
outline
|
||||
>
|
||||
Delete my project
|
||||
</DangerButton>
|
||||
</div>
|
||||
) : (
|
||||
<Loader className="mt-2 w-full">
|
||||
<Loader.Item height="38px" width="144px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</div>
|
||||
<div className="col-span-12 sm:col-span-6">
|
||||
{projectDetails ? (
|
||||
<div>
|
||||
<DangerButton
|
||||
onClick={() => setSelectedProject(projectDetails.id ?? null)}
|
||||
outline
|
||||
>
|
||||
Delete Project
|
||||
</DangerButton>
|
||||
</div>
|
||||
) : (
|
||||
<Loader className="mt-2 w-full">
|
||||
<Loader.Item height="46px" width="100px" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
</Disclosure>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</ProjectAuthorizationWrapper>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
|||
import IntegrationService from "services/integration";
|
||||
import projectService from "services/project.service";
|
||||
// components
|
||||
import { SettingsHeader, SingleIntegration } from "components/project";
|
||||
import { SettingsSidebar, SingleIntegration } from "components/project";
|
||||
// ui
|
||||
import { EmptyState, IntegrationAndImportExportBanner, Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
|
|
@ -58,13 +58,15 @@ const ProjectIntegrations: NextPage = () => {
|
|||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="h-full flex flex-col p-8 overflow-hidden">
|
||||
<SettingsHeader />
|
||||
<div className="flex flex-row gap-2 h-full overflow-hidden">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
{workspaceIntegrations ? (
|
||||
workspaceIntegrations.length > 0 ? (
|
||||
<section className="space-y-8 overflow-y-auto">
|
||||
<section className="pr-9 py-8 overflow-y-auto w-full">
|
||||
<IntegrationAndImportExportBanner bannerName="Integrations" />
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
{workspaceIntegrations.map((integration) => (
|
||||
<SingleIntegration
|
||||
key={integration.integration_detail.id}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import {
|
|||
SingleLabel,
|
||||
SingleLabelGroup,
|
||||
} from "components/labels";
|
||||
import { SettingsHeader } from "components/project";
|
||||
import { SettingsSidebar } from "components/project";
|
||||
// ui
|
||||
import { EmptyState, Loader, PrimaryButton } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
|
|
@ -113,20 +113,23 @@ const LabelsSettings: NextPage = () => {
|
|||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="p-8">
|
||||
<SettingsHeader />
|
||||
<section className="grid grid-cols-12 gap-10">
|
||||
<div className="col-span-12 sm:col-span-5">
|
||||
<h3 className="text-2xl font-semibold">Labels</h3>
|
||||
<p className="text-custom-text-200">Manage the labels of this project.</p>
|
||||
<PrimaryButton onClick={newLabel} size="sm" className="mt-4">
|
||||
<span className="flex items-center gap-2">
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
New label
|
||||
</span>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<section className="pr-9 py-8 gap-10 w-full">
|
||||
<div className="flex items-center justify-between pt-2 pb-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">Labels</h3>
|
||||
|
||||
<PrimaryButton
|
||||
onClick={newLabel}
|
||||
size="sm"
|
||||
className="flex items-center justify-center"
|
||||
>
|
||||
Add label
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
<div className="col-span-12 space-y-5 sm:col-span-7">
|
||||
<div className="space-y-3 py-6">
|
||||
{labelForm && (
|
||||
<CreateUpdateLabelInline
|
||||
labelForm={labelForm}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { useState } from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import useSWR from "swr";
|
||||
import useSWR, { mutate } from "swr";
|
||||
|
||||
// services
|
||||
import projectService from "services/project.service";
|
||||
|
|
@ -13,22 +13,35 @@ import useToast from "hooks/use-toast";
|
|||
import useUser from "hooks/use-user";
|
||||
import useProjectMembers from "hooks/use-project-members";
|
||||
import useProjectDetails from "hooks/use-project-details";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
// layouts
|
||||
import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
|
||||
// components
|
||||
import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
|
||||
import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
|
||||
import { SettingsHeader } from "components/project";
|
||||
import { MemberSelect, SettingsSidebar } from "components/project";
|
||||
// ui
|
||||
import { CustomMenu, CustomSelect, Loader } from "components/ui";
|
||||
import {
|
||||
CustomMenu,
|
||||
CustomSearchSelect,
|
||||
CustomSelect,
|
||||
Icon,
|
||||
Loader,
|
||||
PrimaryButton,
|
||||
SecondaryButton,
|
||||
} from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
// icons
|
||||
import { PlusIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { NextPage } from "next";
|
||||
import { IProject, IUserLite, IWorkspace } from "types";
|
||||
// fetch-keys
|
||||
import {
|
||||
PROJECTS_LIST,
|
||||
PROJECT_DETAILS,
|
||||
PROJECT_INVITATIONS_WITH_EMAIL,
|
||||
PROJECT_MEMBERS,
|
||||
PROJECT_MEMBERS_WITH_EMAIL,
|
||||
WORKSPACE_DETAILS,
|
||||
} from "constants/fetch-keys";
|
||||
|
|
@ -37,6 +50,11 @@ import { ROLE } from "constants/workspace";
|
|||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues: Partial<IProject> = {
|
||||
project_lead: null,
|
||||
default_assignee: null,
|
||||
};
|
||||
|
||||
const MembersSettings: NextPage = () => {
|
||||
const [inviteModal, setInviteModal] = useState(false);
|
||||
const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
|
||||
|
|
@ -55,11 +73,25 @@ const MembersSettings: NextPage = () => {
|
|||
Boolean(workspaceSlug && projectId)
|
||||
);
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
reset,
|
||||
control,
|
||||
formState: { isSubmitting },
|
||||
} = useForm<IProject>({ defaultValues });
|
||||
|
||||
const { data: activeWorkspace } = useSWR(
|
||||
workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
|
||||
() => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
|
||||
);
|
||||
|
||||
const { data: people } = useSWR(
|
||||
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||
workspaceSlug && projectId
|
||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||
: null
|
||||
);
|
||||
|
||||
const { data: projectMembers, mutate: mutateMembers } = useSWR(
|
||||
workspaceSlug && projectId
|
||||
? PROJECT_MEMBERS_WITH_EMAIL(workspaceSlug.toString(), projectId.toString())
|
||||
|
|
@ -110,6 +142,76 @@ const MembersSettings: NextPage = () => {
|
|||
|
||||
const handleProjectInvitationSuccess = () => {};
|
||||
|
||||
const onSubmit = async (formData: IProject) => {
|
||||
if (!workspaceSlug || !projectId || !projectDetails) return;
|
||||
|
||||
const payload: Partial<IProject> = {
|
||||
default_assignee: formData.default_assignee,
|
||||
project_lead: formData.project_lead === "none" ? null : formData.project_lead,
|
||||
};
|
||||
|
||||
await projectService
|
||||
.updateProject(workspaceSlug as string, projectId as string, payload, user)
|
||||
.then((res) => {
|
||||
mutate(PROJECT_DETAILS(projectId as string));
|
||||
|
||||
mutate(
|
||||
PROJECTS_LIST(workspaceSlug as string, {
|
||||
is_favorite: "all",
|
||||
})
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Project updated successfully",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (projectDetails)
|
||||
reset({
|
||||
...projectDetails,
|
||||
default_assignee: projectDetails.default_assignee?.id ?? projectDetails.default_assignee,
|
||||
project_lead: (projectDetails.project_lead as IUserLite)?.id ?? projectDetails.project_lead,
|
||||
workspace: (projectDetails.workspace as IWorkspace).id,
|
||||
});
|
||||
}, [projectDetails, reset]);
|
||||
|
||||
const submitChanges = async (formData: Partial<IProject>) => {
|
||||
if (!workspaceSlug || !projectId) return;
|
||||
|
||||
const payload: Partial<IProject> = {
|
||||
default_assignee: formData.default_assignee === "none" ? null : formData.default_assignee,
|
||||
project_lead: formData.project_lead === "none" ? null : formData.project_lead,
|
||||
};
|
||||
|
||||
await projectService
|
||||
.updateProject(workspaceSlug as string, projectId as string, payload, user)
|
||||
.then((res) => {
|
||||
mutate(PROJECT_DETAILS(projectId as string));
|
||||
|
||||
mutate(
|
||||
PROJECTS_LIST(workspaceSlug as string, {
|
||||
is_favorite: "all",
|
||||
})
|
||||
);
|
||||
|
||||
setToastAlert({
|
||||
title: "Success",
|
||||
type: "success",
|
||||
message: "Project updated successfully",
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<ProjectAuthorizationWrapper
|
||||
breadcrumbs={
|
||||
|
|
@ -171,19 +273,69 @@ const MembersSettings: NextPage = () => {
|
|||
user={user}
|
||||
onSuccess={() => mutateMembers()}
|
||||
/>
|
||||
<div className="p-8">
|
||||
<SettingsHeader />
|
||||
<section className="space-y-5">
|
||||
<div className="flex items-end justify-between gap-4">
|
||||
<h3 className="text-2xl font-semibold">Members</h3>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-custom-primary outline-none"
|
||||
onClick={() => setInviteModal(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add Member
|
||||
</button>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<section className="pr-9 py-8 w-full">
|
||||
<div className="flex items-center py-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">Defaults</h3>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 pb-4 w-full">
|
||||
<div className="flex items-center py-8 gap-4 w-full">
|
||||
<div className="flex flex-col gap-2 w-1/2">
|
||||
<h4 className="text-sm">Project Lead</h4>
|
||||
<div className="">
|
||||
{projectDetails ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="project_lead"
|
||||
render={({ field: { value } }) => (
|
||||
<MemberSelect
|
||||
value={value}
|
||||
onChange={(val: string) => {
|
||||
submitChanges({ project_lead: val });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="h-9 w-full">
|
||||
<Loader.Item width="100%" height="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2 w-1/2">
|
||||
<h4 className="text-sm">Default Assignee</h4>
|
||||
<div className="">
|
||||
{projectDetails ? (
|
||||
<Controller
|
||||
control={control}
|
||||
name="default_assignee"
|
||||
render={({ field: { value } }) => (
|
||||
<MemberSelect
|
||||
value={value}
|
||||
onChange={(val: string) => {
|
||||
submitChanges({ default_assignee: val });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
) : (
|
||||
<Loader className="h-9 w-full">
|
||||
<Loader.Item width="100%" height="100%" />
|
||||
</Loader>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between gap-4 py-3.5 border-b border-custom-border-200">
|
||||
<h4 className="text-xl font-medium border-b border-custom-border-100">Members</h4>
|
||||
<PrimaryButton onClick={() => setInviteModal(true)}>Add Member</PrimaryButton>
|
||||
</div>
|
||||
{!projectMembers || !projectInvitations ? (
|
||||
<Loader className="space-y-5">
|
||||
|
|
@ -193,10 +345,13 @@ const MembersSettings: NextPage = () => {
|
|||
<Loader.Item height="40px" />
|
||||
</Loader>
|
||||
) : (
|
||||
<div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200 bg-custom-background-100 px-6">
|
||||
<div className="divide-y divide-custom-border-200">
|
||||
{members.length > 0
|
||||
? members.map((member) => (
|
||||
<div key={member.id} className="flex items-center justify-between py-6">
|
||||
<div
|
||||
key={member.id}
|
||||
className="flex items-center justify-between px-3.5 py-[18px]"
|
||||
>
|
||||
<div className="flex items-center gap-x-6 gap-y-2">
|
||||
{member.avatar && member.avatar !== "" ? (
|
||||
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg p-4 capitalize text-white">
|
||||
|
|
@ -242,7 +397,20 @@ const MembersSettings: NextPage = () => {
|
|||
</div>
|
||||
)}
|
||||
<CustomSelect
|
||||
label={ROLE[member.role as keyof typeof ROLE]}
|
||||
customButton={
|
||||
<button className="flex item-center gap-1">
|
||||
<span
|
||||
className={`flex items-center text-sm font-medium ${
|
||||
member.memberId !== user?.id ? "" : "text-custom-sidebar-text-400"
|
||||
}`}
|
||||
>
|
||||
{ROLE[member.role as keyof typeof ROLE]}
|
||||
</span>
|
||||
{member.memberId !== user?.id && (
|
||||
<Icon iconName="expand_more" className="text-lg font-medium" />
|
||||
)}
|
||||
</button>
|
||||
}
|
||||
value={member.role}
|
||||
onChange={(value: 5 | 10 | 15 | 20 | undefined) => {
|
||||
if (!activeWorkspace || !projectDetails) return;
|
||||
|
|
@ -306,7 +474,11 @@ const MembersSettings: NextPage = () => {
|
|||
>
|
||||
<span className="flex items-center justify-start gap-2">
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
<span>Remove member</span>
|
||||
|
||||
<span>
|
||||
{" "}
|
||||
{member.memberId !== user?.id ? "Remove member" : "Leave project"}
|
||||
</span>
|
||||
</span>
|
||||
</CustomMenu.MenuItem>
|
||||
</CustomMenu>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
SingleState,
|
||||
StateGroup,
|
||||
} from "components/states";
|
||||
import { SettingsHeader } from "components/project";
|
||||
import { SettingsSidebar } from "components/project";
|
||||
// ui
|
||||
import { Loader } from "components/ui";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
|
||||
|
|
@ -73,31 +73,33 @@ const StatesSettings: NextPage = () => {
|
|||
</Breadcrumbs>
|
||||
}
|
||||
>
|
||||
<div className="p-8">
|
||||
<SettingsHeader />
|
||||
<div className="grid grid-cols-12 gap-10">
|
||||
<div className="col-span-12 sm:col-span-5">
|
||||
<h3 className="text-2xl font-semibold text-custom-text-100">States</h3>
|
||||
<p className="text-custom-text-200">Manage the states of this project.</p>
|
||||
<div className="flex flex-row gap-2">
|
||||
<div className="w-80 py-8">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
<div className="pr-9 py-8 gap-10 w-full">
|
||||
<div className="flex items-center py-3.5 border-b border-custom-border-200">
|
||||
<h3 className="text-xl font-medium">States</h3>
|
||||
</div>
|
||||
<div className="col-span-12 space-y-8 sm:col-span-7">
|
||||
<div className="space-y-8 py-6">
|
||||
{states && projectDetails && orderedStateGroups ? (
|
||||
Object.keys(orderedStateGroups).map((key) => {
|
||||
if (orderedStateGroups[key].length !== 0)
|
||||
return (
|
||||
<div key={key}>
|
||||
<div className="mb-2 flex w-full justify-between">
|
||||
<h4 className="text-custom-text-200 capitalize">{key}</h4>
|
||||
<div key={key} className="flex flex-col gap-2">
|
||||
<div className="flex w-full justify-between">
|
||||
<h4 className="text-base font-medium text-custom-text-200 capitalize">
|
||||
{key}
|
||||
</h4>
|
||||
<button
|
||||
type="button"
|
||||
className="flex items-center gap-2 text-custom-primary-100 hover:text-custom-primary-200 outline-none"
|
||||
className="flex items-center gap-2 text-custom-primary-100 px-2 hover:text-custom-primary-200 outline-none"
|
||||
onClick={() => setActiveGroup(key as keyof StateGroup)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
<div className="divide-y divide-custom-border-200 rounded-[10px] border border-custom-border-200">
|
||||
<div className="flex flex-col gap-2 rounded">
|
||||
{key === activeGroup && (
|
||||
<CreateUpdateStateInline
|
||||
groupLength={orderedStateGroups[key].length}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue