thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

fix: assign issues to cycle, feat: settings sidebar

Browse Source
This commit is contained in:
Aaryan Khandelwal 2022-12-20 16:05:21 +05:30
parent c9e9b67a30
commit 5f7aee6a8d
22 changed files with 1039 additions and 1071 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/app/components/project/cycles/cycle-issues-list-modal.tsx
View File

@ -28,7 +28,7 @@ type Props = {
};
type FormInput = {
issue_ids: string[];
issue: string[];
};
const CycleIssuesListModal: React.FC<Props> = ({
@ -56,12 +56,12 @@ const CycleIssuesListModal: React.FC<Props> = ({
formState: { isSubmitting },
} = useForm<FormInput>({
defaultValues: {
issue_ids: [],
issue: [],
},
});
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
if (!data.issue_ids || data.issue_ids.length === 0) {
if (!data.issue || data.issue.length === 0) {
setToastAlert({
title: "Error",
type: "error",
@ -72,7 +72,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
if (activeWorkspace && activeProject) {
issuesServices
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
.then((res) => {
console.log(res);
mutate(CYCLE_ISSUES(cycleId));
@ -120,7 +120,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
<form>
<Controller
control={control}
name="issue_ids"
name="issue"
render={({ field }) => (
<Combobox as="div" {...field} multiple>
<div className="relative m-1">

2
apps/app/components/project/issues/create-update-issue-modal/index.tsx
View File

@ -118,7 +118,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
if (!activeWorkspace || !activeProject) return;
await issuesServices
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueId,
issue: [issueId],
})
.then((res) => {
mutate(CYCLE_ISSUES(cycleId));

2
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/index.tsx
View File

@ -101,7 +101,7 @@ const IssueDetailSidebar: React.FC<Props> = ({
if (activeWorkspace && activeProject && issueDetail)
issuesServices
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueDetail.id,
issue: [issueDetail.id],
})
.then(() => {
submitChanges({});

43
apps/app/components/project/memberInvitations.tsx → apps/app/components/project/member-invitations.tsx
View File

@ -3,14 +3,13 @@ import React, { useState } from "react";
// next
import Link from "next/link";
import useSWR from "swr";
import { useRouter } from "next/router";
// services
import projectService from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
// Services
import projectService from "lib/services/project.service";
// fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
// commons
import { renderShortNumericDateFormat } from "constants/common";
// ui
import { Button } from "ui";
// icons
import {
CalendarDaysIcon,
@ -20,9 +19,15 @@ import {
PencilIcon,
PlusIcon,
TrashIcon,
ClipboardDocumentListIcon,
} from "@heroicons/react/24/outline";
// types
import type { IProject } from "types";
// fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
// common
import { renderShortNumericDateFormat } from "constants/common";
type Props = {
project: IProject;
slug: string;
@ -40,6 +45,8 @@ const ProjectMemberInvitations: React.FC<Props> = ({
}) => {
const { user } = useUser();
const router = useRouter();
const { data: members } = useSWR<any[]>(PROJECT_MEMBERS(project.id), () =>
projectService.projectMembers(slug, project.id)
);
@ -93,13 +100,13 @@ const ProjectMemberInvitations: React.FC<Props> = ({
{isMember ? (
<div className="flex">
<Link href={`/projects/${project.id}/settings`}>
<a className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 cursor-pointer">
<a className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 cursor-pointer">
<PencilIcon className="h-4 w-4" />
</a>
</Link>
<button
type="button"
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"
className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-100 duration-300 outline-none"
onClick={() => setDeleteProject(project.id)}
>
<TrashIcon className="h-4 w-4 text-red-500" />
@ -115,7 +122,7 @@ const ProjectMemberInvitations: React.FC<Props> = ({
{!isMember ? (
<label
htmlFor={project.id}
className="flex items-center gap-1 text-xs font-medium bg-blue-200 hover:bg-blue-300 p-2 rounded duration-300 cursor-pointer"
className="flex items-center gap-1 text-xs font-medium border hover:bg-gray-100 p-2 rounded duration-300 cursor-pointer"
>
{selected ? (
<>
@ -130,17 +137,19 @@ const ProjectMemberInvitations: React.FC<Props> = ({
)}
</label>
) : (
<span className="flex items-center gap-1 text-xs bg-green-200 p-2 rounded">
<Button theme="secondary" className="flex items-center gap-1" disabled>
<CheckIcon className="h-3 w-3" />
Member
</span>
</Button>
)}
<Link href={`/projects/${project.id}/issues`}>
<a className="flex items-center gap-1 text-xs font-medium bg-blue-200 hover:bg-blue-300 p-2 rounded duration-300">
<EyeIcon className="h-3 w-3" />
View
</a>
</Link>
<Button
theme="secondary"
className="flex items-center gap-1"
onClick={() => router.push(`/projects/${project.id}/issues`)}
>
<ClipboardDocumentListIcon className="h-3 w-3" />
Open Project
</Button>
</div>
<div className="flex items-center gap-1 text-xs mb-1">
<CalendarDaysIcon className="h-4 w-4" />

197
apps/app/components/project/settings/control.tsx
View File

@ -1,197 +0,0 @@
// react
import React from "react";
// swr
import useSWR from "swr";
// react-hook-form
import { Control, Controller } from "react-hook-form";
// services
import workspaceService from "lib/services/workspace.service";
// hooks
import useUser from "lib/hooks/useUser";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// ui
import { Button } from "ui";
// icons
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { IProject } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
type Props = {
control: Control<IProject, any>;
isSubmitting: boolean;
};
const ControlSettings: React.FC<Props> = ({ control, isSubmitting }) => {
const { activeWorkspace } = useUser();
const { data: people } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);
return (
<>
<section className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
<p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
</div>
<div className="grid grid-cols-2 gap-16">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Project Lead</h4>
<p className="text-sm text-gray-500 mb-3">Select the project leader.</p>
<Controller
control={control}
name="project_lead"
render={({ field: { onChange, value } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{people?.find((person) => person.member.id === value)?.member
.first_name ?? "Select Lead"}
</span>
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
`${
active ? "bg-indigo-50" : ""
} text-gray-900 cursor-default select-none relative px-3 py-2`
}
value={person.member.id}
>
{({ selected, active }) => (
<>
<span
className={`${
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-theme"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Default Assignee</h4>
<p className="text-sm text-gray-500 mb-3">
Select the default assignee for the project.
</p>
<Controller
control={control}
name="default_assignee"
render={({ field: { value, onChange } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{people?.find((p) => p.member.id === value)?.member.first_name ??
"Select Default Assignee"}
</span>
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
`${
active ? "bg-indigo-50" : ""
} text-gray-900 cursor-default select-none relative px-3 py-2`
}
value={person.member.id}
>
{({ selected, active }) => (
<>
<span
className={`${
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-theme"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
</div>
<div>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
</div>
</section>
</>
);
};
export default ControlSettings;

158
apps/app/components/project/settings/general.tsx
View File

@ -1,158 +0,0 @@
// react
import { useCallback } from "react";
// react-hook-form
import { Controller } from "react-hook-form";
import type { Control, UseFormRegister, UseFormSetError } from "react-hook-form";
// services
import projectServices from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
// ui
import { Button, Input, Select, TextArea, EmojiIconPicker } from "ui";
// types
import { IProject } from "types";
// constants
import { debounce } from "constants/common";
type Props = {
register: UseFormRegister<IProject>;
errors: any;
setError: UseFormSetError<IProject>;
isSubmitting: boolean;
control: Control<IProject, any>;
};
const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
const GeneralSettings: React.FC<Props> = ({
register,
errors,
setError,
isSubmitting,
control,
}) => {
const { activeWorkspace } = useUser();
const checkIdentifier = (slug: string, value: string) => {
projectServices.checkProjectIdentifierAvailability(slug, value).then((response) => {
console.log(response);
if (response.exists) setError("identifier", { message: "Identifier already exists" });
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
return (
<>
<section className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
<p className="mt-4 text-sm text-gray-500">
This information will be displayed to every member of the project.
</p>
</div>
<div className="grid grid-cols-2 gap-16">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Icon & Name</h4>
<p className="text-sm text-gray-500 mb-3">Select an icon and a name for the project.</p>
<div className="flex gap-2">
<Controller
control={control}
name="icon"
render={({ field: { value, onChange } }) => (
<EmojiIconPicker
label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
value={value}
onChange={onChange}
/>
)}
/>
<Input
id="name"
name="name"
error={errors.name}
register={register}
placeholder="Project Name"
size="lg"
className="w-auto"
validations={{
required: "Name is required",
}}
/>
</div>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Description</h4>
<p className="text-sm text-gray-500 mb-3">Give a description to the project.</p>
<TextArea
id="description"
name="description"
error={errors.description}
register={register}
placeholder="Enter project description"
validations={{
required: "Description is required",
}}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Identifier</h4>
<p className="text-sm text-gray-500 mb-3">
Create a 1-6 characters{"'"} identifier for the project.
</p>
<Input
id="identifier"
name="identifier"
error={errors.identifier}
register={register}
placeholder="Enter identifier"
className="w-40"
size="lg"
onChange={(e: any) => {
if (!activeWorkspace || !e.target.value) return;
checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
}}
validations={{
required: "Identifier is required",
minLength: {
value: 1,
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 9,
message: "Identifier must at most be of 9 characters",
},
}}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Network</h4>
<p className="text-sm text-gray-500 mb-3">Select privacy type for the project.</p>
<Select
name="network"
id="network"
options={Object.keys(NETWORK_CHOICES).map((key) => ({
value: key,
label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
}))}
size="lg"
register={register}
validations={{
required: "Network is required",
}}
className="w-40"
/>
</div>
</div>
<div>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
</div>
</section>
</>
);
};
export default GeneralSettings;

261
apps/app/components/project/settings/members.tsx
View File

@ -1,261 +0,0 @@
// react
import { useState } from "react";
// next
import Image from "next/image";
import useSWR from "swr";
// services
import projectService from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// components
import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
// ui
import { Button, CustomListbox, CustomMenu, Spinner } from "ui";
// fetch-keys
import { PROJECT_INVITATIONS, PROJECT_MEMBERS } from "constants/fetch-keys";
import { PlusIcon } from "@heroicons/react/24/outline";
type Props = { projectId: string };
const ROLE = {
5: "Guest",
10: "Viewer",
15: "Member",
20: "Admin",
};
const MembersSettings: React.FC<Props> = ({ projectId }) => {
const [selectedMember, setSelectedMember] = useState<string | null>(null);
const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
const [inviteModal, setInviteModal] = useState(false);
const { activeWorkspace } = useUser();
const { setToastAlert } = useToast();
const { data: projectMembers, mutate: mutateMembers } = useSWR(
activeWorkspace && projectId ? PROJECT_MEMBERS(projectId as string) : null,
activeWorkspace && projectId
? () => projectService.projectMembers(activeWorkspace.slug, projectId as any)
: null,
{
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
if (err?.status === 403) return;
setTimeout(() => revalidate(revalidateOpts), 5000);
},
}
);
const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
activeWorkspace && projectId ? PROJECT_INVITATIONS : null,
activeWorkspace && projectId
? () => projectService.projectInvitations(activeWorkspace.slug, projectId as any)
: null
);
let members = [
...(projectMembers?.map((item: any) => ({
id: item.id,
avatar: item.member?.avatar,
first_name: item.member?.first_name,
last_name: item.member?.last_name,
email: item.member?.email,
role: item.role,
status: true,
member: true,
})) || []),
...(projectInvitations?.map((item: any) => ({
id: item.id,
avatar: item.avatar ?? "",
first_name: item.first_name ?? item.email,
last_name: item.last_name ?? "",
email: item.email,
role: item.role,
status: item.accepted,
member: false,
})) || []),
];
return (
<>
<ConfirmProjectMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => {
setSelectedRemoveMember(null);
setSelectedInviteRemoveMember(null);
}}
data={members.find(
(item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
)}
handleDelete={async () => {
if (!activeWorkspace || !projectId) return;
if (selectedRemoveMember) {
await projectService.deleteProjectMember(
activeWorkspace.slug,
projectId as string,
selectedRemoveMember
);
mutateMembers(
(prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
false
);
}
if (selectedInviteRemoveMember) {
await projectService.deleteProjectInvitation(
activeWorkspace.slug,
projectId as string,
selectedInviteRemoveMember
);
mutateInvitations(
(prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
false
);
}
setToastAlert({
type: "success",
message: "Member removed successfully",
title: "Success",
});
}}
/>
<SendProjectInvitationModal
isOpen={inviteModal}
setIsOpen={setInviteModal}
members={members}
/>
<section className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
<p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
</div>
{!projectMembers || !projectInvitations ? (
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
) : (
<div className="md:w-2/3">
<div className="flex justify-between items-center gap-2">
<h4 className="text-md leading-6 text-gray-900 mb-1">Manage members</h4>
<Button
theme="secondary"
className="flex items-center gap-x-1"
onClick={() => setInviteModal(true)}
>
<PlusIcon className="h-4 w-4" />
Add Member
</Button>
</div>
<div className="space-y-6 mt-6">
{members.length > 0
? members.map((member) => (
<div key={member.id} className="flex justify-between items-center">
<div className="flex items-center gap-x-8 gap-y-2">
<div className="h-10 w-10 p-4 flex items-center justify-center bg-gray-700 text-white rounded uppercase relative">
{member.avatar && member.avatar !== "" ? (
<Image
src={member.avatar}
alt={member.first_name}
layout="fill"
objectFit="cover"
className="rounded"
/>
) : (
member.first_name.charAt(0) ?? "N"
)}
</div>
<div>
<h4 className="text-sm">
{member.first_name} {member.last_name}
</h4>
<p className="text-xs text-gray-500">{member.email}</p>
</div>
</div>
<div className="flex items-center gap-2 text-xs">
{selectedMember === member.id ? (
<CustomListbox
options={Object.keys(ROLE).map((key) => ({
value: key,
display: ROLE[parseInt(key) as keyof typeof ROLE],
}))}
title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
value={member.role}
onChange={(value) => {
if (!activeWorkspace || !projectId) return;
projectService
.updateProjectMember(
activeWorkspace.slug,
projectId as string,
member.id,
{
role: value,
}
)
.then((res) => {
setToastAlert({
type: "success",
message: "Member role updated successfully.",
title: "Success",
});
mutateMembers(
(prevData: any) =>
prevData.map((m: any) => {
return m.id === selectedMember
? { ...m, ...res, role: value }
: m;
}),
false
);
setSelectedMember(null);
})
.catch((err) => {
console.log(err);
});
}}
/>
) : (
ROLE[member.role as keyof typeof ROLE] ?? "None"
)}
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={() => {
if (!member.member) {
setToastAlert({
type: "error",
message: "You can't edit a pending invitation.",
title: "Error",
});
} else {
setSelectedMember(member.id);
}
}}
>
Edit
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) {
setSelectedRemoveMember(member.id);
} else {
setSelectedInviteRemoveMember(member.id);
}
}}
>
Remove
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
))
: null}
</div>
</div>
)}
</section>
</>
);
};
export default MembersSettings;

0
apps/app/components/project/settings/labels/single-label.tsx → apps/app/components/project/settings/single-label.tsx
View File

130
apps/app/components/project/settings/states.tsx
View File

@ -1,130 +0,0 @@
import React, { useState } from "react";
// hooks
import useUser from "lib/hooks/useUser";
// components
import {
StateGroup,
CreateUpdateStateInline,
} from "components/project/issues/BoardView/state/create-update-state-inline";
import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
// ui
import { Spinner } from "ui";
// icons
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
// constants
import { addSpaceIfCamelCase, groupBy } from "constants/common";
// types
import type { IState } from "types";
type Props = {
projectId: string;
};
const StatesSettings: React.FC<Props> = ({ projectId }) => {
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
const [selectedState, setSelectedState] = useState<string | null>(null);
const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
const { states, activeWorkspace } = useUser();
const groupedStates: {
[key: string]: Array<IState>;
} = groupBy(states ?? [], "group");
return (
<>
<ConfirmStateDeletion
isOpen={!!selectDeleteState}
data={states?.find((state) => state.id === selectDeleteState) ?? null}
onClose={() => setSelectDeleteState(null)}
/>
<section className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">State</h3>
<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 ? (
Object.keys(groupedStates).map((key) => (
<div key={key}>
<div className="flex justify-between w-full md:w-2/3 mb-2">
<p className="text-md leading-6 text-gray-900 capitalize">{key} states</p>
<button
type="button"
onClick={() => setActiveGroup(key as keyof StateGroup)}
className="flex items-center gap-x-2 text-theme"
>
<PlusIcon className="h-4 w-4 text-theme" />
<span>Add</span>
</button>
</div>
<div className="md:w-2/3 space-y-1 border p-1 rounded-xl">
{key === activeGroup && (
<CreateUpdateStateInline
projectId={projectId as string}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={activeWorkspace?.slug}
data={null}
selectedGroup={key as keyof StateGroup}
/>
)}
{groupedStates[key]?.map((state) =>
state.id !== selectedState ? (
<div
key={state.id}
className={`bg-gray-50 p-3 flex justify-between items-center gap-2 border-t ${
Boolean(activeGroup !== key) ? "first:border-0" : ""
}`}
>
<div className="flex items-center gap-2">
<div
className="flex-shrink-0 h-3 w-3 rounded-full"
style={{
backgroundColor: state.color,
}}
></div>
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
</div>
<div className="flex items-center gap-2">
<button type="button" onClick={() => setSelectDeleteState(state.id)}>
<TrashIcon className="h-4 w-4 text-red-400" />
</button>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
</button>
</div>
</div>
) : (
<div className={`border-t first:border-t-0`} key={state.id}>
<CreateUpdateStateInline
projectId={projectId as string}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={activeWorkspace?.slug}
data={states?.find((state) => state.id === selectedState) ?? null}
selectedGroup={key as keyof StateGroup}
/>
</div>
)
)}
</div>
</div>
))
) : (
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</section>
</>
);
};
export default StatesSettings;

5
apps/app/constants/api-routes.ts
View File

@ -110,11 +110,6 @@ export const FILTER_STATE_ISSUES = (workspaceSlug: string, projectId: string, st
`/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/?state=${state}`;
export const BULK_DELETE_ISSUES = (workspaceSlug: string, projectId: string) =>
`/api/workspaces/${workspaceSlug}/projects/${projectId}/bulk-delete-issues/`;
export const BULK_ADD_ISSUES_TO_CYCLE = (
workspaceSlug: string,
projectId: string,
cycleId: string
) => `/api/workspaces/${workspaceSlug}/projects/${projectId}/cycles/${cycleId}/bulk-assign-issues/`;
// states
export const STATES_ENDPOINT = (workspaceSlug: string, projectId: string) =>

28
apps/app/layouts/navbar/main-siderbar.tsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useEffect, useState } from "react";
// next
import Link from "next/link";
import { useRouter } from "next/router";
@ -15,15 +15,16 @@ import {
Bars3Icon,
Cog6ToothIcon,
RectangleStackIcon,
UserGroupIcon,
XMarkIcon,
ArrowLongLeftIcon,
QuestionMarkCircleIcon,
RectangleGroupIcon,
} from "@heroicons/react/24/outline";
// constants
// common
import { classNames } from "constants/common";
type Props = { collapse?: boolean };
const navigation = (projectId: string) => [
{
name: "Issues",
@ -40,11 +41,6 @@ const navigation = (projectId: string) => [
// href: `/projects/${projectId}/modules`,
// icon: RectangleGroupIcon,
// },
// {
// name: "Members",
// href: `/projects/${projectId}/members`,
// icon: UserGroupIcon,
// },
{
name: "Settings",
href: `/projects/${projectId}/settings`,
@ -52,7 +48,7 @@ const navigation = (projectId: string) => [
},
];
const Sidebar: React.FC = () => {
const Sidebar: React.FC<Props> = ({ collapse = false }) => {
const [sidebarOpen, setSidebarOpen] = useState(false);
const router = useRouter();
@ -144,35 +140,35 @@ const Sidebar: React.FC = () => {
</Transition.Root>
<div
className={`${
sidebarCollapse ? "" : "w-auto md:w-60"
sidebarCollapse || collapse ? "" : "w-auto md:w-60"
} h-full hidden md:inset-y-0 md:flex md:flex-col`}
>
<div className="h-full flex flex-1 flex-col border-r border-gray-200">
<div className="h-full flex flex-1 flex-col pt-2">
<WorkspaceOptions sidebarCollapse={sidebarCollapse} />
<ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse} />
<WorkspaceOptions sidebarCollapse={sidebarCollapse || collapse} />
<ProjectsList navigation={navigation} sidebarCollapse={sidebarCollapse || collapse} />
<div
className={`px-2 py-2 w-full self-baseline flex items-center bg-primary ${
sidebarCollapse ? "flex-col-reverse" : ""
sidebarCollapse || collapse ? "flex-col-reverse" : ""
}`}
>
<button
type="button"
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
sidebarCollapse ? "justify-center w-full" : ""
sidebarCollapse || collapse ? "justify-center w-full" : ""
}`}
onClick={() => toggleCollapsed()}
>
<ArrowLongLeftIcon
className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
sidebarCollapse ? "rotate-180" : ""
sidebarCollapse || collapse ? "rotate-180" : ""
}`}
/>
</button>
<button
type="button"
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 outline-none ${
sidebarCollapse ? "justify-center w-full" : ""
sidebarCollapse || collapse ? "justify-center w-full" : ""
}`}
onClick={() => {
const e = new KeyboardEvent("keydown", {

14
apps/app/layouts/navbar/settings-sidebar.tsx
View File

@ -1,12 +1,13 @@
// next
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
import Link from "next/link";
import { useRouter } from "next/router";
type Props = {
links: Array<{
links: {
label: string;
href: string;
}>;
}[];
};
const SettingsSidebar: React.FC<Props> = ({ links }) => {
@ -14,9 +15,12 @@ const SettingsSidebar: React.FC<Props> = ({ links }) => {
return (
<nav className="h-screen w-72 border-r border-gray-200">
<div className="h-full p-2 pt-4">
<h2 className="text-lg font-medium leading-5">Settings</h2>
<div className="mt-3">
<div className="h-full p-2 pl-6 mt-16">
<h2 className="flex items-center gap-2 text-lg font-medium leading-5">
<ArrowLeftIcon className="h-4 w-4" />
Settings
</h2>
<div className="mt-6 space-y-1">
{links.map((link, index) => (
<h4 key={index}>
<Link href={link.href}>

69
apps/app/layouts/settings-layout.tsx
View File

@ -19,12 +19,11 @@ type Props = {
children: React.ReactNode;
noPadding?: boolean;
bg?: "primary" | "secondary";
noHeader?: boolean;
breadcrumbs?: JSX.Element;
left?: JSX.Element;
right?: JSX.Element;
links: Array<{
label: string;
href: string;
}>;
type: "workspace" | "project";
};
const SettingsLayout: React.FC<Props> = ({
@ -32,30 +31,80 @@ const SettingsLayout: React.FC<Props> = ({
children,
noPadding = false,
bg = "primary",
noHeader = false,
breadcrumbs,
left,
right,
links,
type,
}) => {
const [isOpen, setIsOpen] = useState(false);
const router = useRouter();
const { user, isUserLoading } = useUser();
const { activeWorkspace, activeProject, user, isUserLoading } = useUser();
useEffect(() => {
if (!isUserLoading && (!user || user === null)) router.push("/signin");
}, [isUserLoading, user, router]);
const workspaceLinks: {
label: string;
href: string;
}[] = [
{
label: "General",
href: "#",
},
{
label: "Control",
href: "#",
},
{
label: "States",
href: "#",
},
{
label: "Labels",
href: "#",
},
];
const sidebarLinks: {
label: string;
href: string;
}[] = [
{
label: "General",
href: `/projects/${activeProject?.id}/settings`,
},
{
label: "Control",
href: `/projects/${activeProject?.id}/settings/control`,
},
{
label: "Members",
href: `/projects/${activeProject?.id}/settings/members`,
},
{
label: "States",
href: `/projects/${activeProject?.id}/settings/states`,
},
{
label: "Labels",
href: `/projects/${activeProject?.id}/settings/labels`,
},
];
return (
<Container meta={meta}>
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="h-screen w-full flex overflow-x-hidden">
<Sidebar />
<SettingsSidebar links={links} />
<Sidebar collapse />
<SettingsSidebar links={type === "workspace" ? workspaceLinks : sidebarLinks} />
<main className="h-screen w-full flex flex-col overflow-y-auto min-w-0">
<Header breadcrumbs={breadcrumbs} right={right} />
{noHeader ? null : <Header breadcrumbs={breadcrumbs} left={left} right={right} />}
<div
className={`w-full flex-grow ${noPadding ? "" : "p-5"} ${
className={`w-full flex-grow ${noPadding ? "" : "p-5 px-16 pt-16"} ${
bg === "primary" ? "bg-primary" : bg === "secondary" ? "bg-secondary" : "bg-primary"
}`}
>

18
apps/app/lib/services/issues.service.ts
View File

@ -9,7 +9,6 @@ import {
CYCLE_DETAIL,
ISSUE_LABELS,
BULK_DELETE_ISSUES,
BULK_ADD_ISSUES_TO_CYCLE,
REMOVE_ISSUE_FROM_CYCLE,
ISSUE_LABEL_DETAILS,
} from "constants/api-routes";
@ -93,7 +92,7 @@ class ProjectIssuesServices extends APIService {
projectId: string,
cycleId: string,
data: {
issue: string;
issue: string[];
}
) {
return this.post(CYCLE_DETAIL(workspaceSlug, projectId, cycleId), data)
@ -289,21 +288,6 @@ class ProjectIssuesServices extends APIService {
throw error?.response?.data;
});
}
async bulkAddIssuesToCycle(
workspaceSlug: string,
projectId: string,
cycleId: string,
data: any
): Promise<any> {
return this.post(BULK_ADD_ISSUES_TO_CYCLE(workspaceSlug, projectId, cycleId), data)
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
}
export default new ProjectIssuesServices();

2
apps/app/pages/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -175,7 +175,7 @@ const SingleCycle: React.FC = () => {
.then((res) => {
issuesServices
.addIssueToCycle(activeWorkspace.slug, activeProject.id, destination.droppableId, {
issue: result.draggableId.split(",")[1],
issue: [result.draggableId.split(",")[1]],
})
.then((res) => {
console.log(res);

224
apps/app/pages/projects/[projectId]/settings.tsx
View File

@ -1,224 +0,0 @@
import React, { useEffect, useState } from "react";
// next
import type { NextPage } from "next";
import { useRouter } from "next/router";
import dynamic from "next/dynamic";
// swr
import useSWR, { mutate } from "swr";
// react hook form
import { useForm } from "react-hook-form";
// headless ui
import { Tab } from "@headlessui/react";
// hoc
import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import SettingsLayout from "layouts/settings-layout";
import AppLayout from "layouts/app-layout";
// service
import projectServices from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// fetch keys
import { PROJECT_DETAILS, PROJECTS_LIST } from "constants/fetch-keys";
// ui
import { Button, Spinner } from "ui";
import { Breadcrumbs, BreadcrumbItem } from "ui/Breadcrumbs";
// types
import type { IProject, IWorkspace } from "types";
const GeneralSettings = dynamic(() => import("components/project/settings/general"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
const MembersSettings = dynamic(() => import("components/project/settings/members"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
const ControlSettings = dynamic(() => import("components/project/settings/control"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
const StatesSettings = dynamic(() => import("components/project/settings/states"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
const LabelsSettings = dynamic(() => import("components/project/settings/labels"), {
loading: () => <p>Loading...</p>,
ssr: false,
});
const defaultValues: Partial<IProject> = {
name: "",
description: "",
identifier: "",
network: 0,
};
const ProjectSettings: NextPage = () => {
const {
register,
handleSubmit,
reset,
control,
setError,
formState: { errors, isSubmitting },
} = useForm<IProject>({
defaultValues,
});
const router = useRouter();
const { projectId } = router.query;
const { activeWorkspace, activeProject } = useUser();
const { setToastAlert } = useToast();
const { data: projectDetails } = useSWR<IProject>(
activeWorkspace && projectId ? PROJECT_DETAILS(projectId as string) : null,
activeWorkspace
? () => projectServices.getProject(activeWorkspace.slug, projectId as string)
: null
);
useEffect(() => {
projectDetails &&
reset({
...projectDetails,
default_assignee: projectDetails.default_assignee?.id,
project_lead: projectDetails.project_lead?.id,
workspace: (projectDetails.workspace as IWorkspace).id,
});
}, [projectDetails, reset]);
const onSubmit = async (formData: IProject) => {
if (!activeWorkspace || !projectId) return;
const payload: Partial<IProject> = {
name: formData.name,
network: formData.network,
identifier: formData.identifier,
description: formData.description,
default_assignee: formData.default_assignee,
project_lead: formData.project_lead,
icon: formData.icon,
};
await projectServices
.updateProject(activeWorkspace.slug, projectId as string, payload)
.then((res) => {
mutate<IProject>(
PROJECT_DETAILS(projectId as string),
(prevData) => ({ ...prevData, ...res }),
false
);
mutate<IProject[]>(
PROJECTS_LIST(activeWorkspace.slug),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
},
false
);
setToastAlert({
title: "Success",
type: "success",
message: "Project updated successfully",
});
})
.catch((err) => {
console.log(err);
});
};
const sidebarLinks: Array<{
label: string;
href: string;
}> = [
{
label: "General",
href: "#",
},
{
label: "Control",
href: "#",
},
{
label: "States",
href: "#",
},
{
label: "Labels",
href: "#",
},
];
return (
<AppLayout
breadcrumbs={
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
</Breadcrumbs>
}
// links={sidebarLinks}
>
{projectDetails ? (
<div className="space-y-3 px-10">
<Tab.Group>
<Tab.List className="flex items-center gap-x-4 gap-y-2 flex-wrap mb-8">
{["General", "Control", "Members", "States", "Labels"].map((tab, index) => (
<Tab key={index} as="div">
{({ selected }) => (
<Button theme="secondary" className={selected ? "border-theme" : ""}>
{tab}
</Button>
)}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<form onSubmit={handleSubmit(onSubmit)}>
<Tab.Panel>
<GeneralSettings
control={control}
register={register}
errors={errors}
setError={setError}
isSubmitting={isSubmitting}
/>
</Tab.Panel>
<Tab.Panel>
<ControlSettings control={control} isSubmitting={isSubmitting} />
</Tab.Panel>
</form>
<Tab.Panel>
<MembersSettings projectId={projectId as string} />
</Tab.Panel>
<Tab.Panel>
<StatesSettings projectId={projectId as string} />
</Tab.Panel>
<Tab.Panel>
<LabelsSettings />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
) : (
<div className="h-full w-full flex justify-center items-center">
<Spinner />
</div>
)}
</AppLayout>
);
};
export default withAuth(ProjectSettings);

268
apps/app/pages/projects/[projectId]/settings/control.tsx Normal file
View File

@ -0,0 +1,268 @@
// react
import React, { useEffect } from "react";
// swr
import useSWR, { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// layouts
import SettingsLayout from "layouts/settings-layout";
// services
import projectService from "lib/services/project.service";
import workspaceService from "lib/services/workspace.service";
// hooks
import useToast from "lib/hooks/useToast";
import useUser from "lib/hooks/useUser";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// ui
import { Button } from "ui";
// icons
import { CheckIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
// types
import { IProject, IWorkspace } from "types";
// fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
const ControlSettings = () => {
const { activeWorkspace, activeProject } = useUser();
const { setToastAlert } = useToast();
const { data: projectDetails } = useSWR<IProject>(
activeWorkspace && activeProject ? PROJECT_DETAILS(activeProject.id) : null,
activeWorkspace && activeProject
? () => projectService.getProject(activeWorkspace.slug, activeProject.id)
: null
);
const { data: people } = useSWR(
activeWorkspace ? WORKSPACE_MEMBERS : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);
const {
handleSubmit,
reset,
control,
formState: { isSubmitting },
} = useForm<IProject>({});
const onSubmit = async (formData: IProject) => {
if (!activeWorkspace || !activeProject) return;
const payload: Partial<IProject> = {
name: formData.name,
network: formData.network,
identifier: formData.identifier,
description: formData.description,
default_assignee: formData.default_assignee,
project_lead: formData.project_lead,
icon: formData.icon,
};
await projectService
.updateProject(activeWorkspace.slug, activeProject.id, payload)
.then((res) => {
mutate<IProject>(
PROJECT_DETAILS(activeProject.id),
(prevData) => ({ ...prevData, ...res }),
false
);
mutate<IProject[]>(
PROJECTS_LIST(activeWorkspace.slug),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
},
false
);
setToastAlert({
title: "Success",
type: "success",
message: "Project updated successfully",
});
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
projectDetails &&
reset({
...projectDetails,
default_assignee: projectDetails.default_assignee?.id,
project_lead: projectDetails.project_lead?.id,
workspace: (projectDetails.workspace as IWorkspace).id,
});
}, [projectDetails, reset]);
return (
<SettingsLayout type="project" noHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Control</h3>
<p className="mt-4 text-sm text-gray-500">Set the control for the project.</p>
</div>
<div className="grid grid-cols-2 gap-16">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Project Lead</h4>
<p className="text-sm text-gray-500 mb-3">Select the project leader.</p>
<Controller
control={control}
name="project_lead"
render={({ field: { onChange, value } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{people?.find((person) => person.member.id === value)?.member
.first_name ?? "Select Lead"}
</span>
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
`${
active ? "bg-indigo-50" : ""
} text-gray-900 cursor-default select-none relative px-3 py-2`
}
value={person.member.id}
>
{({ selected, active }) => (
<>
<span
className={`${
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-theme"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Default Assignee</h4>
<p className="text-sm text-gray-500 mb-3">
Select the default assignee for the project.
</p>
<Controller
control={control}
name="default_assignee"
render={({ field: { value, onChange } }) => (
<Listbox value={value} onChange={onChange}>
{({ open }) => (
<>
<div className="relative">
<Listbox.Button className="relative w-full flex justify-between items-center gap-4 border border-gray-300 rounded-md shadow-sm p-3 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
<span className="block truncate">
{people?.find((p) => p.member.id === value)?.member.first_name ??
"Select Default Assignee"}
</span>
<ChevronDownIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-20 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
`${
active ? "bg-indigo-50" : ""
} text-gray-900 cursor-default select-none relative px-3 py-2`
}
value={person.member.id}
>
{({ selected, active }) => (
<>
<span
className={`${
selected ? "font-semibold" : "font-normal"
} block truncate`}
>
{person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-theme"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
/>
</div>
</div>
<div>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
</div>
</div>
</form>
</SettingsLayout>
);
};
export default ControlSettings;

234
apps/app/pages/projects/[projectId]/settings/index.tsx Normal file
View File

@ -0,0 +1,234 @@
// react
import { useCallback, useEffect } from "react";
// swr
import useSWR, { mutate } from "swr";
// react-hook-form
import { Controller, useForm } from "react-hook-form";
// layouts
import SettingsLayout from "layouts/settings-layout";
// services
import projectService from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// ui
import { Button, EmojiIconPicker, Input, Select, TextArea } from "ui";
// types
import { IProject, IWorkspace } from "types";
// fetch-keys
import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
// common
import { debounce } from "constants/common";
const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
const defaultValues: Partial<IProject> = {
name: "",
description: "",
identifier: "",
network: 0,
};
const GeneralSettings = () => {
const { activeWorkspace, activeProject } = useUser();
const { setToastAlert } = useToast();
const { data: projectDetails } = useSWR<IProject>(
activeWorkspace && activeProject ? PROJECT_DETAILS(activeProject.id) : null,
activeWorkspace && activeProject
? () => projectService.getProject(activeWorkspace.slug, activeProject.id)
: null
);
const {
register,
handleSubmit,
reset,
control,
setError,
formState: { errors, isSubmitting },
} = useForm<IProject>({
defaultValues,
});
const onSubmit = async (formData: IProject) => {
if (!activeWorkspace || !activeProject) return;
const payload: Partial<IProject> = {
name: formData.name,
network: formData.network,
identifier: formData.identifier,
description: formData.description,
default_assignee: formData.default_assignee,
project_lead: formData.project_lead,
icon: formData.icon,
};
await projectService
.updateProject(activeWorkspace.slug, activeProject.id, payload)
.then((res) => {
mutate<IProject>(
PROJECT_DETAILS(activeProject.id),
(prevData) => ({ ...prevData, ...res }),
false
);
mutate<IProject[]>(
PROJECTS_LIST(activeWorkspace.slug),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
},
false
);
setToastAlert({
title: "Success",
type: "success",
message: "Project updated successfully",
});
})
.catch((err) => {
console.log(err);
});
};
const checkIdentifier = (slug: string, value: string) => {
projectService.checkProjectIdentifierAvailability(slug, value).then((response) => {
console.log(response);
if (response.exists) setError("identifier", { message: "Identifier already exists" });
});
};
// eslint-disable-next-line react-hooks/exhaustive-deps
const checkIdentifierAvailability = useCallback(debounce(checkIdentifier, 1500), []);
useEffect(() => {
projectDetails &&
reset({
...projectDetails,
default_assignee: projectDetails.default_assignee?.id,
project_lead: projectDetails.project_lead?.id,
workspace: (projectDetails.workspace as IWorkspace).id,
});
}, [projectDetails, reset]);
return (
<SettingsLayout type="project" noHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">General</h3>
<p className="mt-4 text-sm text-gray-500">
This information will be displayed to every member of the project.
</p>
</div>
<div className="grid grid-cols-2 gap-16">
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Icon & Name</h4>
<p className="text-sm text-gray-500 mb-3">
Select an icon and a name for the project.
</p>
<div className="flex gap-2">
<Controller
control={control}
name="icon"
render={({ field: { value, onChange } }) => (
<EmojiIconPicker
label={value ? String.fromCodePoint(parseInt(value)) : "Icon"}
value={value}
onChange={onChange}
/>
)}
/>
<Input
id="name"
name="name"
error={errors.name}
register={register}
placeholder="Project Name"
size="lg"
className="w-auto"
validations={{
required: "Name is required",
}}
/>
</div>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Description</h4>
<p className="text-sm text-gray-500 mb-3">Give a description to the project.</p>
<TextArea
id="description"
name="description"
error={errors.description}
register={register}
placeholder="Enter project description"
validations={{
required: "Description is required",
}}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Identifier</h4>
<p className="text-sm text-gray-500 mb-3">
Create a 1-6 characters{"'"} identifier for the project.
</p>
<Input
id="identifier"
name="identifier"
error={errors.identifier}
register={register}
placeholder="Enter identifier"
className="w-40"
size="lg"
onChange={(e: any) => {
if (!activeWorkspace || !e.target.value) return;
checkIdentifierAvailability(activeWorkspace.slug, e.target.value);
}}
validations={{
required: "Identifier is required",
minLength: {
value: 1,
message: "Identifier must at least be of 1 character",
},
maxLength: {
value: 9,
message: "Identifier must at most be of 9 characters",
},
}}
/>
</div>
<div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Network</h4>
<p className="text-sm text-gray-500 mb-3">Select privacy type for the project.</p>
<Select
name="network"
id="network"
options={Object.keys(NETWORK_CHOICES).map((key) => ({
value: key,
label: NETWORK_CHOICES[key as keyof typeof NETWORK_CHOICES],
}))}
size="lg"
register={register}
validations={{
required: "Network is required",
}}
className="w-40"
/>
</div>
</div>
<div>
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Project..." : "Update Project"}
</Button>
</div>
</div>
</form>
</SettingsLayout>
);
};
export default GeneralSettings;

46
apps/app/components/project/settings/labels/index.tsx → apps/app/pages/projects/[projectId]/settings/labels.tsx
View File

@ -7,27 +7,30 @@ import { Controller, SubmitHandler, useForm } from "react-hook-form";
// react-color
import { TwitterPicker } from "react-color";
// services
import issuesServices from "lib/services/issues.service";
import issuesService from "lib/services/issues.service";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
import SettingsLayout from "layouts/settings-layout";
// components
import SingleLabel from "components/project/settings/single-label";
// headless ui
import { Popover, Transition } from "@headlessui/react";
// ui
import { Button, Input, Spinner } from "ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssueLabels } from "types";
// fetch-keys
import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
import SingleLabel from "./single-label";
// types
import { IIssueLabels } from "types";
const defaultValues: Partial<IIssueLabels> = {
name: "",
colour: "#ff0000",
};
const LabelsSettings: React.FC = () => {
const LabelsSettings = () => {
const [newLabelForm, setNewLabelForm] = useState(false);
const [isUpdating, setIsUpdating] = useState(false);
const [labelIdForUpdate, setLabelidForUpdate] = useState<string | null>(null);
@ -47,20 +50,18 @@ const LabelsSettings: React.FC = () => {
const { data: issueLabels, mutate } = useSWR<IIssueLabels[]>(
activeProject && activeWorkspace ? PROJECT_ISSUE_LABELS(activeProject.id) : null,
activeProject && activeWorkspace
? () => issuesServices.getIssueLabels(activeWorkspace.slug, activeProject.id)
? () => issuesService.getIssueLabels(activeWorkspace.slug, activeProject.id)
: null
);
const handleNewLabel: SubmitHandler<IIssueLabels> = (formData) => {
if (!activeWorkspace || !activeProject || isSubmitting) return;
issuesServices
.createIssueLabel(activeWorkspace.slug, activeProject.id, formData)
.then((res) => {
console.log(res);
reset(defaultValues);
mutate((prevData) => [...(prevData ?? []), res], false);
setNewLabelForm(false);
});
issuesService.createIssueLabel(activeWorkspace.slug, activeProject.id, formData).then((res) => {
console.log(res);
reset(defaultValues);
mutate((prevData) => [...(prevData ?? []), res], false);
setNewLabelForm(false);
});
};
const editLabel = (label: IIssueLabels) => {
@ -73,7 +74,7 @@ const LabelsSettings: React.FC = () => {
const handleLabelUpdate: SubmitHandler<IIssueLabels> = (formData) => {
if (!activeWorkspace || !activeProject || isSubmitting) return;
issuesServices
issuesService
.patchIssueLabel(activeWorkspace.slug, activeProject.id, labelIdForUpdate ?? "", formData)
.then((res) => {
console.log(res);
@ -90,7 +91,7 @@ const LabelsSettings: React.FC = () => {
const handleLabelDelete = (labelId: string) => {
if (activeWorkspace && activeProject) {
mutate((prevData) => prevData?.filter((p) => p.id !== labelId), false);
issuesServices
issuesService
.deleteIssueLabel(activeWorkspace.slug, activeProject.id, labelId)
.then((res) => {
console.log(res);
@ -102,13 +103,14 @@ const LabelsSettings: React.FC = () => {
};
return (
<>
<SettingsLayout type="project" noHeader>
<section className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
<p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
</div>
<div className="md:w-2/3 flex justify-between items-center gap-2">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Labels</h3>
<p className="mt-4 text-sm text-gray-500">Manage the labels of this project.</p>
</div>
<h4 className="text-md leading-6 text-gray-900 mb-1">Manage labels</h4>
<Button
theme="secondary"
className="flex items-center gap-x-1"
@ -218,7 +220,7 @@ const LabelsSettings: React.FC = () => {
</>
</div>
</section>
</>
</SettingsLayout>
);
};

267
apps/app/pages/projects/[projectId]/settings/members.tsx Normal file
View File

@ -0,0 +1,267 @@
// react
import { useState } from "react";
// next
import Image from "next/image";
// swr
import useSWR from "swr";
// services
import projectService from "lib/services/project.service";
// hooks
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// layouts
import SettingsLayout from "layouts/settings-layout";
// components
import ConfirmProjectMemberRemove from "components/project/confirm-project-member-remove";
import SendProjectInvitationModal from "components/project/send-project-invitation-modal";
// ui
import { Button, CustomListbox, CustomMenu, Spinner } from "ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// fetch-keys
import { PROJECT_INVITATIONS, PROJECT_MEMBERS } from "constants/fetch-keys";
const ROLE = {
5: "Guest",
10: "Viewer",
15: "Member",
20: "Admin",
};
const MembersSettings = () => {
const [selectedMember, setSelectedMember] = useState<string | null>(null);
const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
const [selectedInviteRemoveMember, setSelectedInviteRemoveMember] = useState<string | null>(null);
const [inviteModal, setInviteModal] = useState(false);
const { activeWorkspace, activeProject } = useUser();
const { setToastAlert } = useToast();
const { data: projectMembers, mutate: mutateMembers } = useSWR(
activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
activeWorkspace && activeProject
? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
: null,
{
onErrorRetry(err, _, __, revalidate, revalidateOpts) {
if (err?.status === 403) return;
setTimeout(() => revalidate(revalidateOpts), 5000);
},
}
);
const { data: projectInvitations, mutate: mutateInvitations } = useSWR(
activeWorkspace && activeProject ? PROJECT_INVITATIONS : null,
activeWorkspace && activeProject
? () => projectService.projectInvitations(activeWorkspace.slug, activeProject.id)
: null
);
let members = [
...(projectMembers?.map((item: any) => ({
id: item.id,
avatar: item.member?.avatar,
first_name: item.member?.first_name,
last_name: item.member?.last_name,
email: item.member?.email,
role: item.role,
status: true,
member: true,
})) || []),
...(projectInvitations?.map((item: any) => ({
id: item.id,
avatar: item.avatar ?? "",
first_name: item.first_name ?? item.email,
last_name: item.last_name ?? "",
email: item.email,
role: item.role,
status: item.accepted,
member: false,
})) || []),
];
return (
<>
<ConfirmProjectMemberRemove
isOpen={Boolean(selectedRemoveMember) || Boolean(selectedInviteRemoveMember)}
onClose={() => {
setSelectedRemoveMember(null);
setSelectedInviteRemoveMember(null);
}}
data={members.find(
(item) => item.id === selectedRemoveMember || item.id === selectedInviteRemoveMember
)}
handleDelete={async () => {
if (!activeWorkspace || !activeProject) return;
if (selectedRemoveMember) {
await projectService.deleteProjectMember(
activeWorkspace.slug,
activeProject.id,
selectedRemoveMember
);
mutateMembers(
(prevData) => prevData?.filter((item: any) => item.id !== selectedRemoveMember),
false
);
}
if (selectedInviteRemoveMember) {
await projectService.deleteProjectInvitation(
activeWorkspace.slug,
activeProject.id,
selectedInviteRemoveMember
);
mutateInvitations(
(prevData) => prevData?.filter((item: any) => item.id !== selectedInviteRemoveMember),
false
);
}
setToastAlert({
type: "success",
message: "Member removed successfully",
title: "Success",
});
}}
/>
<SendProjectInvitationModal
isOpen={inviteModal}
setIsOpen={setInviteModal}
members={members}
/>
<SettingsLayout type="project" noHeader>
<section className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">Members</h3>
<p className="mt-4 text-sm text-gray-500">Manage all the members of the project.</p>
</div>
{!projectMembers || !projectInvitations ? (
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
) : (
<div className="md:w-2/3">
<div className="flex justify-between items-center gap-2">
<h4 className="text-md leading-6 text-gray-900 mb-1">Manage members</h4>
<Button
theme="secondary"
className="flex items-center gap-x-1"
onClick={() => setInviteModal(true)}
>
<PlusIcon className="h-4 w-4" />
Add Member
</Button>
</div>
<div className="space-y-6 mt-6">
{members.length > 0
? members.map((member) => (
<div key={member.id} className="flex justify-between items-center">
<div className="flex items-center gap-x-8 gap-y-2">
<div className="h-10 w-10 p-4 flex items-center justify-center bg-gray-700 text-white rounded capitalize relative">
{member.avatar && member.avatar !== "" ? (
<Image
src={member.avatar}
alt={member.first_name}
layout="fill"
objectFit="cover"
className="rounded"
/>
) : member.first_name !== "" ? (
member.first_name.charAt(0)
) : (
member.email.charAt(0)
)}
</div>
<div>
<h4 className="text-sm">
{member.first_name} {member.last_name}
</h4>
<p className="text-xs text-gray-500">{member.email}</p>
</div>
</div>
<div className="flex items-center gap-2 text-xs">
{selectedMember === member.id ? (
<CustomListbox
options={Object.keys(ROLE).map((key) => ({
value: key,
display: ROLE[parseInt(key) as keyof typeof ROLE],
}))}
title={ROLE[member.role as keyof typeof ROLE] ?? "Select Role"}
value={member.role}
onChange={(value) => {
if (!activeWorkspace || !activeProject) return;
projectService
.updateProjectMember(
activeWorkspace.slug,
activeProject.id,
member.id,
{
role: value,
}
)
.then((res) => {
setToastAlert({
type: "success",
message: "Member role updated successfully.",
title: "Success",
});
mutateMembers(
(prevData: any) =>
prevData.map((m: any) => {
return m.id === selectedMember
? { ...m, ...res, role: value }
: m;
}),
false
);
setSelectedMember(null);
})
.catch((err) => {
console.log(err);
});
}}
/>
) : (
ROLE[member.role as keyof typeof ROLE] ?? "None"
)}
<CustomMenu ellipsis>
<CustomMenu.MenuItem
onClick={() => {
if (!member.member) {
setToastAlert({
type: "error",
message: "You can't edit a pending invitation.",
title: "Error",
});
} else {
setSelectedMember(member.id);
}
}}
>
Edit
</CustomMenu.MenuItem>
<CustomMenu.MenuItem
onClick={() => {
if (member.member) {
setSelectedRemoveMember(member.id);
} else {
setSelectedInviteRemoveMember(member.id);
}
}}
>
Remove
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
))
: null}
</div>
</div>
)}
</section>
</SettingsLayout>
</>
);
};
export default MembersSettings;

130
apps/app/pages/projects/[projectId]/settings/states.tsx Normal file
View File

@ -0,0 +1,130 @@
// react
import { useState } from "react";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
import SettingsLayout from "layouts/settings-layout";
// components
import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
import {
CreateUpdateStateInline,
StateGroup,
} from "components/project/issues/BoardView/state/create-update-state-inline";
// ui
import { Spinner } from "ui";
// icons
import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
// types
import { IState } from "types";
// common
import { addSpaceIfCamelCase, groupBy } from "constants/common";
const StatesSettings = () => {
const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
const [selectedState, setSelectedState] = useState<string | null>(null);
const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
const { activeWorkspace, activeProject, states } = useUser();
const groupedStates: {
[key: string]: IState[];
} = groupBy(states ?? [], "group");
return (
<>
<ConfirmStateDeletion
isOpen={!!selectDeleteState}
data={states?.find((state) => state.id === selectDeleteState) ?? null}
onClose={() => setSelectDeleteState(null)}
/>
<SettingsLayout type="project" noHeader>
<div className="space-y-8">
<div>
<h3 className="text-3xl font-bold leading-6 text-gray-900">States</h3>
<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 ? (
Object.keys(groupedStates).map((key) => (
<div key={key}>
<div className="flex justify-between w-full md:w-2/3 mb-2">
<p className="text-md leading-6 text-gray-900 capitalize">{key} states</p>
<button
type="button"
onClick={() => setActiveGroup(key as keyof StateGroup)}
className="flex items-center gap-2 text-theme text-xs"
>
<PlusIcon className="h-3 w-3 text-theme" />
Add
</button>
</div>
<div className="md:w-2/3 space-y-1 border p-1 rounded-xl">
{key === activeGroup && (
<CreateUpdateStateInline
projectId={activeProject.id}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={activeWorkspace?.slug}
data={null}
selectedGroup={key as keyof StateGroup}
/>
)}
{groupedStates[key]?.map((state) =>
state.id !== selectedState ? (
<div
key={state.id}
className={`bg-gray-50 p-3 flex justify-between items-center gap-2 border-b ${
Boolean(activeGroup !== key) ? "last:border-0" : ""
}`}
>
<div className="flex items-center gap-2">
<div
className="flex-shrink-0 h-3 w-3 rounded-full"
style={{
backgroundColor: state.color,
}}
></div>
<h6 className="text-sm">{addSpaceIfCamelCase(state.name)}</h6>
</div>
<div className="flex items-center gap-2">
<button type="button" onClick={() => setSelectDeleteState(state.id)}>
<TrashIcon className="h-4 w-4 text-red-400" />
</button>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-4 w-4 text-gray-400" />
</button>
</div>
</div>
) : (
<div className={`border-b last:border-b-0`} key={state.id}>
<CreateUpdateStateInline
projectId={activeProject.id}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={activeWorkspace?.slug}
data={states?.find((state) => state.id === selectedState) ?? null}
selectedGroup={key as keyof StateGroup}
/>
</div>
)
)}
</div>
</div>
))
) : (
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</div>
</SettingsLayout>
</>
);
};
export default StatesSettings;

2
apps/app/pages/projects/index.tsx
View File

@ -8,7 +8,7 @@ import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/app-layout";
// components
import ProjectMemberInvitations from "components/project/memberInvitations";
import ProjectMemberInvitations from "components/project/member-invitations";
import ConfirmProjectDeletion from "components/project/confirm-project-deletion";
// ui
import {