dev: profile page, issue details page design

This commit is contained in:
Aaryan Khandelwal 2022-11-24 19:18:18 +05:30
parent 2a57b111f0
commit dbf2a138b3
40 changed files with 2301 additions and 2034 deletions

View File

@ -36,6 +36,7 @@ type Props = {
>;
bgColor?: string;
stateId?: string;
createdBy?: string;
};
const SingleBoard: React.FC<Props> = ({
@ -48,6 +49,7 @@ const SingleBoard: React.FC<Props> = ({
setPreloadedData,
bgColor = "#0f2b16",
stateId,
createdBy,
}) => {
// Collapse/Expand
const [show, setState] = useState<any>(true);
@ -118,6 +120,8 @@ const SingleBoard: React.FC<Props> = ({
>
{groupTitle === null || groupTitle === "null"
? "None"
: createdBy
? createdBy
: addSpaceIfCamelCase(groupTitle)}
</h2>
<span className="text-gray-500 text-sm ml-0.5">
@ -280,7 +284,7 @@ const SingleBoard: React.FC<Props> = ({
</div>
) : (
<div
className={`h-5 w-5 bg-gray-500 text-white border-2 border-white grid place-items-center rounded-full`}
className={`h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
>
{assignee.first_name.charAt(0)}
</div>

View File

@ -18,9 +18,9 @@ import SingleBoard from "components/project/issues/BoardView/SingleBoard";
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
// ui
import { Spinner, Button } from "ui";
import { Spinner } from "ui";
// types
import type { IState, IIssue, Properties, NestedKeyOf } from "types";
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
type Props = {
properties: Properties;
@ -28,9 +28,10 @@ type Props = {
groupedByIssues: {
[key: string]: IIssue[];
};
members: ProjectMember[] | undefined;
};
const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues }) => {
const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues, members }) => {
const [isOpen, setIsOpen] = useState(false);
const [isIssueOpen, setIsIssueOpen] = useState(false);
@ -164,7 +165,7 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
/>
{groupedByIssues ? (
groupedByIssues ? (
<div className="h-full w-full">
<div className="w-full" style={{ height: "calc(82vh - 1.5rem)" }}>
<DragDropContext onDragEnd={handleOnDragEnd}>
<div className="h-full w-full overflow-hidden">
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
@ -180,6 +181,12 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
key={singleGroup}
selectedGroup={selectedGroup}
groupTitle={singleGroup}
createdBy={
members
? members?.find((m) => m.member.id === singleGroup)?.member
.first_name
: undefined
}
groupedByIssues={groupedByIssues}
index={index}
setIsIssueOpen={setIsIssueOpen}

View File

@ -72,7 +72,7 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{people?.map((person) => (
<Listbox.Option

View File

@ -46,7 +46,7 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{sprints?.map((sprint) => (
<Listbox.Option
@ -63,16 +63,6 @@ const SelectSprint: React.FC<Props> = ({ control, setIsOpen }) => {
<span className={`block ${selected && "font-semibold"}`}>
{sprint.name}
</span>
{selected && (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
)}
</>
)}
</Listbox.Option>

View File

@ -98,7 +98,7 @@ const SelectLabels: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{issueLabels?.map((label) => (
<Listbox.Option
@ -121,18 +121,6 @@ const SelectLabels: React.FC<Props> = ({ control }) => {
>
{label.name}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active || (value ?? []).some((i) => i === label.id)
? "text-white"
: "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>

View File

@ -52,7 +52,7 @@ const SelectParent: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 max-w-[15rem] rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 max-w-[15rem] rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{projectIssues?.results?.map((issue) => (
<Listbox.Option

View File

@ -39,7 +39,7 @@ const SelectPriority: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 w-full bg-white shadow-lg max-h-28 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-xs">
<Listbox.Options className="absolute z-10 mt-1 w-full w-[5rem] bg-white shadow-lg max-h-28 rounded-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-xs">
<div className="p-1">
{PRIORITIES.map((priority) => (
<Listbox.Option
@ -55,21 +55,11 @@ const SelectPriority: React.FC<Props> = ({ control }) => {
<>
<span
className={`block capitalize ${
selected ? "font-semibold" : "font-normal"
selected ? "font-medium" : "font-normal"
}`}
>
{priority}
</span>
{selected ? (
<span
className={`absolute inset-y-0 right-0 flex items-center pr-4 ${
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
)}
</Listbox.Option>

View File

@ -51,7 +51,7 @@ const SelectProject: React.FC<Props> = ({ control }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{projects ? (
projects.length > 0 ? (

View File

@ -49,7 +49,7 @@ const SelectState: React.FC<Props> = ({ control, data, setIsOpen }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<Listbox.Options className="absolute z-10 mt-1 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{states ? (
states.filter((i) => i.id !== data?.id).length > 0 ? (

View File

@ -135,7 +135,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
setToastAlert({
title: "Success",
type: "success",
message: "Issue added to sprint successfully",
message: "Issue added to cycle successfully",
});
})
.catch((err) => {
@ -325,7 +325,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
register={register}
/>
</div>
<div className="flex items-center gap-2">
<div className="flex items-center flex-wrap gap-2">
<SelectState control={control} setIsOpen={setIsStateModalOpen} />
<SelectCycles control={control} setIsOpen={setIsCycleModalOpen} />
<SelectPriority control={control} />

View File

@ -9,7 +9,15 @@ import { Listbox, Transition } from "@headlessui/react";
// icons
import { PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
// types
import { IIssue, IssueResponse, IState, NestedKeyOf, Properties, WorkspaceMember } from "types";
import {
IIssue,
IssueResponse,
IState,
NestedKeyOf,
ProjectMember,
Properties,
WorkspaceMember,
} from "types";
// hooks
import useUser from "lib/hooks/useUser";
// fetch keys
@ -32,6 +40,7 @@ type Props = {
selectedGroup: NestedKeyOf<IIssue> | null;
setSelectedIssue: any;
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
members: ProjectMember[] | undefined;
};
const PRIORITIES = ["high", "medium", "low"];
@ -42,6 +51,7 @@ const ListView: React.FC<Props> = ({
selectedGroup,
setSelectedIssue,
handleDeleteIssue,
members,
}) => {
const { activeWorkspace, activeProject, states } = useUser();
@ -71,7 +81,6 @@ const ListView: React.FC<Props> = ({
);
return (
<div className="mt-4 flex flex-col">
<div className="overflow-x-auto">
<div className="inline-block min-w-full p-0.5 align-middle">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
@ -123,8 +132,7 @@ const ListView: React.FC<Props> = ({
...(issue?.assignees_list ?? []),
...(issue?.assignees ?? []),
]?.map(
(assignee) =>
people?.find((p) => p.member.id === assignee)?.member.email
(assignee) => people?.find((p) => p.member.id === assignee)?.member.email
);
return (
@ -275,9 +283,7 @@ const ListView: React.FC<Props> = ({
>
<div
className={`flex items-center ${
assignees.includes(
person.member.email
)
assignees.includes(person.member.email)
? "font-medium"
: "font-normal"
}`}
@ -404,7 +410,6 @@ const ListView: React.FC<Props> = ({
</div>
</div>
</div>
</div>
);
};

View File

@ -19,11 +19,20 @@ import {
PROJECT_ISSUE_LABELS,
} from "constants/fetch-keys";
// commons
import { classNames } from "constants/common";
import { classNames, copyTextToClipboard } from "constants/common";
// ui
import { Input, Button } from "ui";
// icons
import { Bars3BottomRightIcon, PlusIcon, UserIcon, TagIcon } from "@heroicons/react/24/outline";
import {
UserIcon,
TagIcon,
UserGroupIcon,
ChevronDownIcon,
Squares2X2Icon,
ChartBarIcon,
ClipboardDocumentIcon,
LinkIcon,
} from "@heroicons/react/24/outline";
// types
import type { Control } from "react-hook-form";
import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } from "types";
@ -31,6 +40,7 @@ import type { IIssue, IIssueLabels, IssueResponse, IState, WorkspaceMember } fro
type Props = {
control: Control<IIssue, any>;
submitChanges: (formData: Partial<IIssue>) => void;
issueDetail: IIssue | undefined;
};
const PRIORITIES = ["high", "medium", "low"];
@ -39,7 +49,7 @@ const defaultValues: Partial<IIssueLabels> = {
name: "",
};
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
const { activeWorkspace, activeProject } = useUser();
const { data: states } = useSWR<IState[]>(
@ -90,16 +100,12 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
});
};
return (
<div className="w-full h-full">
<div className="space-y-3">
<div className="flex flex-col gap-y-4">
{[
const sidebarOptions = [
{
label: "Priority",
name: "priority",
canSelectMultipleOptions: false,
icon: Bars3BottomRightIcon,
icon: ChartBarIcon,
options: PRIORITIES.map((property) => ({
label: property,
value: property,
@ -109,7 +115,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
label: "Status",
name: "state",
canSelectMultipleOptions: false,
icon: Bars3BottomRightIcon,
icon: Squares2X2Icon,
options: states?.map((state) => ({
label: state.name,
value: state.id,
@ -119,7 +125,7 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
label: "Assignees",
name: "assignees_list",
canSelectMultipleOptions: true,
icon: UserIcon,
icon: UserGroupIcon,
options: people?.map((person) => ({
label: person.member.first_name,
value: person.member.id,
@ -145,10 +151,37 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
value: issue.id,
})),
},
].map((item) => (
<div className="flex items-center gap-x-2" key={item.label}>
<div className="flex items-center gap-x-2">
<item.icon className="w-5 h-5 text-gray-500" />
];
return (
<div className="h-full w-full">
<div className="space-y-3">
<div className="flex flex-col gap-y-4">
<h3 className="text-lg font-medium leading-6 text-gray-900">Quick Actions</h3>
<div className="flex items-center gap-2 flex-wrap">
<button
type="button"
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
onClick={() =>
copyTextToClipboard(
`https://app.plane.so/projects/${activeProject?.id}/issues/${issueDetail?.id}`
)
}
>
<LinkIcon className="h-3.5 w-3.5" />
</button>
<button
type="button"
className="p-2 hover:bg-gray-100 border rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 duration-300"
onClick={() => copyTextToClipboard(`${issueDetail?.id}`)}
>
<ClipboardDocumentIcon className="h-3.5 w-3.5" />
</button>
</div>
{sidebarOptions.map((item) => (
<div className="flex items-center justify-between gap-x-2" key={item.label}>
<div className="flex items-center gap-x-2 text-sm">
<item.icon className="h-4 w-4" />
<p>{item.label}</p>
</div>
<div>
@ -160,22 +193,17 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
as="div"
value={value}
multiple={item.canSelectMultipleOptions}
onChange={(value) => submitChanges({ [item.name]: value })}
onChange={(value: any) => submitChanges({ [item.name]: value })}
className="flex-shrink-0"
>
{({ open }) => (
<>
<Listbox.Label className="sr-only">{item.label}</Listbox.Label>
<div className="relative">
<Listbox.Button className="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3 border border-dashed">
<PlusIcon
className="h-5 w-5 flex-shrink-0 text-gray-300 sm:-ml-1"
aria-hidden="true"
/>
<Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
<span
className={classNames(
value ? "" : "text-gray-900",
"hidden truncate capitalize sm:ml-2 sm:block w-16"
"hidden truncate sm:block w-16 text-left",
item.label === "Priority" ? "capitalize" : ""
)}
>
{value
@ -183,13 +211,13 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
? value
.map(
(i: any) =>
item.options?.find((option) => option.value === i)
?.label
item.options?.find((option) => option.value === i)?.label
)
.join(", ") || `Select ${item.label}`
.join(", ") || item.label
: item.options?.find((option) => option.value === value)?.label
: `Select ${item.label}`}
: "None"}
</span>
<ChevronDownIcon className="h-3 w-3" />
</Listbox.Button>
<Transition
@ -199,29 +227,27 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-56 w-52 overflow-auto rounded-lg bg-white py-3 text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{item.options?.map((option) => (
<Listbox.Option
key={option.value}
className={({ active, selected }) =>
classNames(
active || selected ? "bg-indigo-50" : "bg-white",
"relative cursor-default select-none py-2 px-3"
)
`${
active || selected ? "text-white bg-theme" : "text-gray-900"
} ${
item.label === "Priority" && "capitalize"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={option.value}
>
<div className="flex items-center">
<span className="ml-3 block capitalize font-medium">
{option.label}
</span>
</div>
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</div>
</>
)}
</Listbox>
)}
@ -230,11 +256,11 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
</div>
))}
<div>
<form className="flex" onSubmit={handleSubmit(onSubmit)}>
<form className="flex items-center gap-x-2" onSubmit={handleSubmit(onSubmit)}>
<Input
id="name"
name="name"
placeholder="Add label"
placeholder="Add new label"
register={register}
validations={{
required: false,
@ -246,9 +272,9 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
</Button>
</form>
</div>
<div className="flex items-center gap-x-2">
<div className="flex items-center gap-x-2">
<TagIcon className="w-5 h-5 text-gray-500" />
<div className="flex justify-between items-center gap-x-2">
<div className="flex items-center gap-x-2 text-sm">
<TagIcon className="w-4 h-4" />
<p>Label</p>
</div>
<div>
@ -267,15 +293,11 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
<>
<Listbox.Label className="sr-only">Label</Listbox.Label>
<div className="relative">
<Listbox.Button className="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 py-2 px-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3 border border-dashed">
<PlusIcon
className="h-5 w-5 flex-shrink-0 text-gray-300 sm:-ml-1"
aria-hidden="true"
/>
<Listbox.Button className="relative flex justify-between items-center gap-1 hover:bg-gray-100 border rounded-md shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm duration-300">
<span
className={classNames(
value ? "" : "text-gray-900",
"hidden truncate capitalize sm:ml-2 sm:block w-16"
"hidden truncate capitalize sm:block w-16 text-left"
)}
>
{value && value.length > 0
@ -285,8 +307,9 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
issueLabels?.find((option) => option.id === i)?.name
)
.join(", ")
: `Select label`}
: "None"}
</span>
<ChevronDownIcon className="h-3 w-3" />
</Listbox.Button>
<Transition
@ -296,25 +319,22 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute right-0 z-10 mt-1 max-h-56 w-52 overflow-auto rounded-lg bg-white py-3 text-base shadow ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{issueLabels?.map((label: any) => (
<Listbox.Option
key={label.id}
className={({ active, selected }) =>
classNames(
active || selected ? "bg-indigo-50" : "bg-white",
"relative cursor-default select-none py-2 px-3"
)
`${
active || selected ? "text-white bg-theme" : "text-gray-900"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={label.id}
>
<div className="flex items-center">
<span className="ml-3 block capitalize font-medium">
{label.name}
</span>
</div>
</Listbox.Option>
))}
</div>
</Listbox.Options>
</Transition>
</div>

View File

@ -0,0 +1,122 @@
// next
import Image from "next/image";
import {
ChartBarIcon,
ChatBubbleBottomCenterTextIcon,
Squares2X2Icon,
} from "@heroicons/react/24/outline";
import { addSpaceIfCamelCase, timeAgo } from "constants/common";
import { IState } from "types";
import { Spinner } from "ui";
type Props = {
issueActivities: any[] | undefined;
states: IState[] | undefined;
};
const activityIcons = {
state: <Squares2X2Icon className="h-4 w-4" />,
priority: <ChartBarIcon className="h-4 w-4" />,
name: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
description: <ChatBubbleBottomCenterTextIcon className="h-4 w-4" />,
};
const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
return (
<>
{issueActivities ? (
<div className="space-y-3">
{issueActivities.map((activity) => {
if (activity.field !== "updated_by")
return (
<div key={activity.id} className="relative flex gap-x-2 w-full">
{issueActivities.length > 1 ? (
<span
className="absolute top-5 left-2.5 h-full w-0.5 bg-gray-200"
aria-hidden="true"
/>
) : null}
{activity.field ? (
<div className="relative z-10 flex-shrink-0 -ml-1">
<div
className={`h-7 w-7 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
>
{activityIcons[activity.field as keyof typeof activityIcons]}
</div>
</div>
) : (
<div className="relative z-10 flex-shrink-0 border-2 border-white -ml-1.5">
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
<Image
src={activity.actor_detail.avatar}
alt={activity.actor_detail.name}
height={30}
width={30}
className="rounded-full"
/>
) : (
<div
className={`h-8 w-8 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full`}
>
{activity.actor_detail.first_name.charAt(0)}
</div>
)}
</div>
)}
<div className="w-full">
<p>
{activity.actor_detail.first_name} {activity.actor_detail.last_name}{" "}
<span>{activity.verb}</span>{" "}
{activity.verb !== "created" ? (
<span>{activity.field ?? "commented"}</span>
) : (
" this issue"
)}
</p>
<p className="text-xs text-gray-500">{timeAgo(activity.created_at)}</p>
<div className="w-full mt-2">
{activity.verb !== "created" && (
<div className="text-sm">
<div>
From:{" "}
<span className="text-gray-500">
{activity.field === "state"
? activity.old_value
? addSpaceIfCamelCase(
states?.find((s) => s.id === activity.old_value)?.name ?? ""
)
: "None"
: activity.old_value}
</span>
</div>
<div>
To:{" "}
<span className="text-gray-500">
{activity.field === "state"
? activity.new_value
? addSpaceIfCamelCase(
states?.find((s) => s.id === activity.new_value)?.name ?? ""
)
: "None"
: activity.new_value}
</span>
</div>
</div>
)}
</div>
</div>
</div>
);
})}
</div>
) : (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
)}
</>
);
};
export default IssueActivitySection;

View File

@ -8,11 +8,14 @@ import issuesServices from "lib/services/issues.services";
// fetch keys
import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
// components
import CommentCard from "components/project/issues/comment/IssueCommentCard";
import CommentCard from "components/project/issues/issue-detail/comment/IssueCommentCard";
// ui
import { TextArea, Button, Spinner } from "ui";
// types
import type { IIssueComment } from "types";
// icons
import UploadingIcon from "public/animated-icons/uploading.json";
type Props = {
comments?: IIssueComment[];
workspaceSlug: string;
@ -67,9 +70,9 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
};
return (
<div className="space-y-3 px-2">
<div className="space-y-5">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="p-2 bg-indigo-50 rounded-md mb-6">
<div className="p-2 bg-indigo-50 rounded-md">
<div className="w-full">
<TextArea
id="comment"
@ -99,6 +102,7 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
<div className="w-full flex justify-end">
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Adding comment..." : "Add comment"}
{/* <UploadingIcon /> */}
</Button>
</div>
</div>

View File

@ -107,3 +107,36 @@ export const addSpaceIfCamelCase = (str: string) => {
export const replaceUnderscoreIfSnakeCase = (str: string) => {
return str.replace(/_/g, " ");
};
const fallbackCopyTextToClipboard = (text: string) => {
var textArea = document.createElement("textarea");
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
// FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this.
// https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
var successful = document.execCommand("copy");
var msg = successful ? "successful" : "unsuccessful";
console.log("Fallback: Copying text command was " + msg);
} catch (err) {
console.error("Fallback: Oops, unable to copy", err);
}
document.body.removeChild(textArea);
};
export const copyTextToClipboard = async (text: string) => {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
await navigator.clipboard.writeText(text);
};

View File

@ -43,7 +43,7 @@ type ReducerFunctionType = (state: StateType, action: ReducerActionType) => Stat
export const initialState: StateType = {
collapsed: false,
issueView: null,
issueView: "list",
groupByProperty: null,
};

View File

@ -1,16 +1,22 @@
import React from "react";
// react
import React, { useState } from "react";
// layouts
import Container from "layouts/Container";
import Sidebar from "layouts/Navbar/Sidebar";
// components
import CreateProjectModal from "components/project/CreateProjectModal";
// types
import type { Props } from "./types";
const AdminLayout: React.FC<Props> = ({ meta, children }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<Container meta={meta}>
<div className="w-full h-screen overflow-auto">
<>{children}</>
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="h-screen w-full flex overflow-x-hidden">
<Sidebar />
<main className="h-full w-full min-w-0 p-5 bg-primary overflow-y-auto">{children}</main>
</div>
</Container>
);

View File

@ -1,6 +1,9 @@
// next
import Head from "next/head";
import { useRouter } from "next/router";
// types
import type { Props } from "./types";
// constants
import {
SITE_NAME,
SITE_DESCRIPTION,
@ -10,9 +13,6 @@ import {
SITE_TITLE,
} from "constants/seo/seo-variables";
// types
import type { Props } from "./types";
const Container = ({ meta, children }: Props) => {
const router = useRouter();
const image = meta?.image || "/site-image.png";
@ -31,35 +31,16 @@ const Container = ({ meta, children }: Props) => {
<meta property="og:description" content={description} />
<meta name="keywords" content={SITE_KEYWORDS} />
<meta name="twitter:site" content={`@${TWITTER_USER_NAME}`} />
<meta
name="twitter:card"
content={image ? "summary_large_image" : "summary"}
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<meta name="twitter:card" content={image ? "summary_large_image" : "summary"} />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest.json" />
<link rel="shortcut icon" href="/favicon/favicon.ico" />
{image && (
<meta
property="og:image"
content={
image.startsWith("https://") ? image : `${SITE_URL}${image}`
}
content={image.startsWith("https://") ? image : `${SITE_URL}${image}`}
/>
)}
</Head>

View File

@ -27,6 +27,7 @@ import {
XMarkIcon,
InboxIcon,
ArrowLongLeftIcon,
QuestionMarkCircleIcon,
} from "@heroicons/react/24/outline";
// constants
import { classNames } from "constants/common";
@ -57,7 +58,7 @@ const navigation = (projectId: string) => [
},
];
const navLinks = [
const workspaceLinks = [
{
icon: HomeIcon,
name: "Home",
@ -116,7 +117,7 @@ const Sidebar: React.FC = () => {
const { collapsed: sidebarCollapse, toggleCollapsed } = useTheme();
return (
<nav className="h-screen">
<nav className="h-full">
<CreateProjectModal isOpen={isCreateProjectModal} setIsOpen={setCreateProjectModal} />
<Transition.Root show={sidebarOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-40 md:hidden" onClose={setSidebarOpen}>
@ -202,7 +203,7 @@ const Sidebar: React.FC = () => {
sidebarCollapse ? "" : "w-auto md:w-64"
} hidden md:inset-y-0 md:flex md:flex-col h-full`}
>
<div className="h-full flex flex-1 flex-col border-r border-gray-200">
<div className="flex flex-1 flex-col border-r border-gray-200">
<div className="h-full flex flex-1 flex-col pt-5">
<div className="px-2">
<div className={`relative ${sidebarCollapse ? "flex" : "grid grid-cols-5 gap-1"}`}>
@ -210,7 +211,9 @@ const Sidebar: React.FC = () => {
<div className="w-full">
<Menu.Button
className={`inline-flex justify-between items-center w-full rounded-md px-2 py-2 text-sm font-semibold text-gray-700 focus:outline-none ${
!sidebarCollapse ? "hover:bg-gray-50 border border-gray-300 shadow-sm" : ""
!sidebarCollapse
? "hover:bg-gray-50 focus:bg-gray-50 border border-gray-300 shadow-sm"
: ""
}`}
>
<span className="flex gap-x-1 items-center">
@ -302,7 +305,7 @@ const Sidebar: React.FC = () => {
{!sidebarCollapse && (
<Menu as="div" className="inline-block text-left w-full">
<div className="h-full w-full">
<Menu.Button className="grid place-items-center h-full w-full rounded-md shadow-sm px-2 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus:outline-none">
<Menu.Button className="grid place-items-center h-full w-full rounded-md shadow-sm px-2 py-2 bg-white border border-gray-300 text-gray-700 hover:bg-gray-50 focus:bg-gray-50 focus:outline-none">
<UserIcon className="h-5 w-5" />
</Menu.Button>
</div>
@ -361,12 +364,14 @@ const Sidebar: React.FC = () => {
)}
</div>
<div className="mt-3 flex-1 space-y-1 bg-white">
{navLinks.map((link, index) => (
{workspaceLinks.map((link, index) => (
<Link key={index} href={link.href}>
<a
className={`${
link.href === router.asPath ? "bg-theme text-white" : "hover:bg-indigo-100"
} group flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md ${
link.href === router.asPath
? "bg-theme text-white"
: "hover:bg-indigo-100 focus:bg-indigo-100"
} flex items-center gap-3 p-2 text-xs font-medium rounded-md outline-none ${
sidebarCollapse ? "justify-center" : ""
}`}
>
@ -380,6 +385,17 @@ const Sidebar: React.FC = () => {
</a>
</Link>
))}
<button
type="button"
className="w-full flex items-center gap-3 p-2 hover:bg-indigo-100 text-xs font-medium rounded-md outline-none"
onClick={() => {
const e = new KeyboardEvent("keydown", { key: "h", ctrlKey: true });
document.dispatchEvent(e);
}}
>
<QuestionMarkCircleIcon className="flex-shrink-0 h-4 w-4" />
{!sidebarCollapse && "Help Centre"}
</button>
</div>
</div>
<div
@ -421,8 +437,8 @@ const Sidebar: React.FC = () => {
className={classNames(
item.href === router.asPath
? "bg-gray-200 text-gray-900"
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900",
"group flex items-center px-2 py-2 text-xs font-medium rounded-md",
: "text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900",
"group flex items-center px-2 py-2 text-xs font-medium rounded-md outline-none",
sidebarCollapse ? "justify-center" : ""
)}
>
@ -467,8 +483,8 @@ const Sidebar: React.FC = () => {
<div className="px-2 py-2 bg-gray-50 w-full self-baseline">
<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 w-full ${
sidebarCollapse ? "justify-center" : ""
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 focus:bg-gray-100 focus:text-gray-900 outline-none ${
sidebarCollapse ? "justify-center w-full" : ""
}`}
onClick={() => toggleCollapsed()}
>
@ -477,7 +493,6 @@ const Sidebar: React.FC = () => {
sidebarCollapse ? "rotate-180" : ""
}`}
/>
{!sidebarCollapse && "Collapse"}
</button>
</div>
</div>

View File

@ -1,27 +0,0 @@
import React, { useState } from "react";
// components
import CreateProjectModal from "components/project/CreateProjectModal";
// layouts
import AdminLayout from "layouts/AdminLayout";
// types
import type { Props } from "./types";
// components
import Sidebar from "./Navbar/Sidebar";
const ProjectLayouts: React.FC<Props> = ({ children, meta }) => {
const [isOpen, setIsOpen] = useState(false);
return (
<AdminLayout meta={meta}>
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="h-full w-full overflow-x-hidden relative flex">
<Sidebar />
<main className="h-full w-full mx-auto min-w-0 pb-6 overflow-y-hidden">
<div className="h-full w-full px-8 py-6 overflow-auto">{children}</div>
</main>
</div>
</AdminLayout>
);
};
export default ProjectLayouts;

View File

@ -1,33 +1,14 @@
import React, { useEffect } from "react";
// next
import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
// swr
import useSWR from "swr";
// hooks
import useUser from "lib/hooks/useUser";
// fetch keys
import { USER_ISSUE } from "constants/fetch-keys";
// services
import userService from "lib/services/user.service";
// ui
import { Spinner } from "ui";
// icons
import { ArrowRightIcon } from "@heroicons/react/24/outline";
// types
import type { IIssue } from "types";
import ProjectLayout from "layouts/ProjectLayout";
const Home: NextPage = () => {
const router = useRouter();
const { user, isUserLoading, activeWorkspace, projects, workspaces } = useUser();
const { data: myIssues } = useSWR<IIssue[]>(
user ? USER_ISSUE : null,
user ? () => userService.userIssues() : null
);
const { user, isUserLoading, activeWorkspace, workspaces } = useUser();
if (!isUserLoading && !user) router.push("/signin");

View File

@ -1,59 +1,192 @@
// react
import React, { useState } from "react";
// next
import type { NextPage } from "next";
import Link from "next/link";
// react
import React, { useState } from "react";
// swr
import useSWR from "swr";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// hooks
import useUser from "lib/hooks/useUser";
import useIssuesProperties from "lib/hooks/useIssuesProperties";
// components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
// ui
import { Spinner } from "ui";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
import HeaderButton from "ui/HeaderButton";
import { Menu, Popover, Transition } from "@headlessui/react";
// icons
import { PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
import { ChevronDownIcon, PlusIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
// services
import userService from "lib/services/user.service";
// types
import { IIssue } from "types";
import { IIssue, NestedKeyOf, Properties, WorkspaceMember } from "types";
// constants
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
import { USER_ISSUE } from "constants/fetch-keys";
import { classNames } from "constants/common";
import { USER_ISSUE, WORKSPACE_MEMBERS } from "constants/fetch-keys";
import {
classNames,
groupBy,
renderShortNumericDateFormat,
replaceUnderscoreIfSnakeCase,
} from "constants/common";
import { EyeIcon, EyeSlashIcon } from "@heroicons/react/20/solid";
import workspaceService from "lib/services/workspace.service";
import useTheme from "lib/hooks/useTheme";
const MyIssues: NextPage = () => {
const [isOpen, setIsOpen] = useState(false);
const { user } = useUser();
const { user, activeWorkspace, activeProject } = useUser();
const { issueView, setIssueView, groupByProperty, setGroupByProperty } = useTheme();
const { data: myIssues } = useSWR<IIssue[]>(
user ? USER_ISSUE : null,
user ? () => userService.userIssues() : null
);
const [properties, setProperties] = useIssuesProperties(
activeWorkspace?.slug,
activeProject?.id as string
);
const { data: people } = useSWR<WorkspaceMember[]>(
activeWorkspace ? WORKSPACE_MEMBERS : null,
activeWorkspace ? () => workspaceService.workspaceMembers(activeWorkspace.slug) : null
);
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
{ name: "State", key: "state_detail.name" },
{ name: "Priority", key: "priority" },
{ name: "Created By", key: "created_by" },
];
const groupedByIssues: {
[key: string]: IIssue[];
} = groupBy(myIssues ?? [], groupByProperty ?? "");
return (
<ProjectLayout>
<AdminLayout>
<CreateUpdateIssuesModal isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="w-full h-full flex flex-col space-y-5">
{myIssues ? (
<>
{myIssues.length > 0 ? (
<>
<div className="space-y-5">
<Breadcrumbs>
<BreadcrumbItem title="My Issues" />
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<div className="w-full flex items-center justify-between">
<h2 className="text-2xl font-medium">My Issues</h2>
<div className="flex items-center gap-x-3">
<Menu as="div" className="relative inline-block w-40">
<div className="w-full">
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 bg-white border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none">
<span className="flex gap-x-1 items-center">
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
"No Grouping"}
</span>
<div className="flex-grow flex justify-end">
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
</div>
</Menu.Button>
</div>
<Transition
as={React.Fragment}
enter="transition ease-out duration-100"
enterFrom="transform opacity-0 scale-95"
enterTo="transform opacity-100 scale-100"
leave="transition ease-in duration-75"
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
<div className="p-1">
{groupByOptions.map((option) => (
<Menu.Item key={option.key}>
{({ active }) => (
<button
type="button"
className={`${
active ? "bg-theme text-white" : "text-gray-900"
} group flex w-full items-center rounded-md p-2 text-xs`}
onClick={() => setGroupByProperty(option.key)}
>
{option.name}
</button>
)}
</Menu.Item>
))}
{issueView === "list" ? (
<Menu.Item>
{({ active }) => (
<button
type="button"
className={`hover:bg-theme hover:text-white ${
active ? "bg-theme text-white" : "text-gray-900"
} group flex w-full items-center rounded-md p-2 text-xs`}
onClick={() => setGroupByProperty(null)}
>
No grouping
</button>
)}
</Menu.Item>
) : null}
</div>
</Menu.Items>
</Transition>
</Menu>
<Popover className="relative">
{({ open }) => (
<>
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 bg-white border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-50 focus:outline-none w-40">
<span>Properties</span>
<ChevronDownIcon className="h-4 w-4" />
</Popover.Button>
<Transition
as={React.Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid bg-white p-1">
{Object.keys(properties).map((key) => (
<button
key={key}
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`}
onClick={() => setProperties(key as keyof Properties)}
>
<p className="capitalize">{key.replace("_", " ")}</p>
<span className="self-end">
{properties[key as keyof Properties] ? (
<EyeIcon width="18" height="18" />
) : (
<EyeSlashIcon width="18" height="18" />
)}
</span>
</button>
))}
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
<HeaderButton
Icon={PlusIcon}
label="Add Issue"
action={() => {
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "i",
ctrlKey: true,
@ -63,43 +196,24 @@ const MyIssues: NextPage = () => {
/>
</div>
</div>
<div className="mt-4 flex flex-col">
<div className="overflow-x-auto">
<div className="inline-block min-w-full align-middle px-0.5 py-2">
<div className="inline-block min-w-full align-middle p-0.5">
<div className="overflow-hidden shadow ring-1 ring-black ring-opacity-5 md:rounded-lg">
<table className="min-w-full">
<thead className="bg-gray-100">
<tr className="text-left">
<tr>
{Object.keys(properties).map(
(key) =>
properties[key as keyof Properties] && (
<th
key={key}
scope="col"
className="px-3 py-3.5 text-sm font-semibold text-gray-900"
className="px-3 py-3.5 text-left uppercase text-sm font-semibold text-gray-900"
>
NAME
</th>
<th
scope="col"
className="px-3 py-3.5 text-sm font-semibold text-gray-900"
>
DESCRIPTION
</th>
<th
scope="col"
className="px-3 py-3.5 text-sm font-semibold text-gray-900"
>
PROJECT
</th>
<th
scope="col"
className="px-3 py-3.5 text-sm font-semibold text-gray-900"
>
PRIORITY
</th>
<th
scope="col"
className="px-3 py-3.5 text-sm font-semibold text-gray-900"
>
STATUS
{replaceUnderscoreIfSnakeCase(key)}
</th>
)
)}
</tr>
</thead>
<tbody className="bg-white">
@ -111,19 +225,62 @@ const MyIssues: NextPage = () => {
"border-t text-sm text-gray-900"
)}
>
<td className="px-3 py-4 text-sm font-medium text-gray-900 max-w-[15rem]">
{Object.keys(properties).map(
(key) =>
properties[key as keyof Properties] && (
<td
key={key}
className="px-3 py-4 text-sm font-medium text-gray-900 relative"
>
{(key as keyof Properties) === "name" ? (
<p className="w-[15rem]">
<Link
href={`/projects/${myIssue.project}/issues/${myIssue.id}`}
>
<a className="hover:text-theme duration-300">
{myIssue.name}
</td>
<td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td>
<td className="px-3 py-4">
{myIssue.project_detail.name}
<br />
<span className="text-xs">{`(${myIssue.project_detail.identifier}-${myIssue.sequence_id})`}</span>
</td>
<td className="px-3 py-4 capitalize">{myIssue.priority}</td>
<td className="relative px-3 py-4">
</a>
</Link>
</p>
) : (key as keyof Properties) === "key" ? (
<p className="text-xs whitespace-nowrap">
{activeProject?.identifier}-{myIssue.sequence_id}
</p>
) : (key as keyof Properties) === "description" ? (
<p className="truncate text-xs max-w-[15rem]">
{myIssue.description}
</p>
) : (key as keyof Properties) === "state" ? (
<ChangeStateDropdown issue={myIssue} />
) : (key as keyof Properties) === "assignee" ? (
<div className="max-w-xs text-xs">
{myIssue.assignees && myIssue.assignees.length > 0
? myIssue.assignees.map((assignee, index) => (
<p key={index}>
{
people?.find((p) => p.member.id === assignee)
?.member.email
}
</p>
))
: "None"}
</div>
) : (key as keyof Properties) === "target_date" ? (
<p className="whitespace-nowrap">
{myIssue.target_date
? renderShortNumericDateFormat(myIssue.target_date)
: "-"}
</p>
) : (
<p className="capitalize text-sm">
{myIssue[key as keyof IIssue] ??
(myIssue[key as keyof IIssue] as any)?.name ??
"None"}
</p>
)}
</td>
)
)}
</tr>
))}
</tbody>
@ -132,9 +289,8 @@ const MyIssues: NextPage = () => {
</div>
</div>
</div>
</>
) : (
<div className="w-full h-full flex flex-col justify-center items-center px-4">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<EmptySpace
title="You don't have any issue assigned to you yet."
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
@ -157,12 +313,11 @@ const MyIssues: NextPage = () => {
)}
</>
) : (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -5,19 +5,32 @@ import type { NextPage } from "next";
// react hook form
import { useForm } from "react-hook-form";
// react dropzone
import Dropzone from "react-dropzone";
import Dropzone, { useDropzone } from "react-dropzone";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// services
import userService from "lib/services/user.service";
import fileServices from "lib/services/file.services";
// ui
import { Button, Input, Spinner } from "ui";
import { BreadcrumbItem, Breadcrumbs, Button, Input, Spinner } from "ui";
// types
import type { IUser } from "types";
import { UserIcon } from "@heroicons/react/24/outline";
import type { IIssue, IUser, IWorkspaceInvitation } from "types";
import {
ChevronRightIcon,
ClipboardDocumentListIcon,
PencilIcon,
RectangleStackIcon,
UserIcon,
UserPlusIcon,
XMarkIcon,
} from "@heroicons/react/24/outline";
import useSWR from "swr";
import { USER_ISSUE, USER_WORKSPACE_INVITATIONS } from "constants/fetch-keys";
import useToast from "lib/hooks/useToast";
import Link from "next/link";
import workspaceService from "lib/services/workspace.service";
const defaultValues: Partial<IUser> = {
avatar: "",
@ -29,15 +42,23 @@ const defaultValues: Partial<IUser> = {
const Profile: NextPage = () => {
const [image, setImage] = useState<File | null>(null);
const [isImageUploading, setIsImageUploading] = useState(false);
const [isEditing, setIsEditing] = useState(false);
const { user: myProfile, mutateUser } = useUser();
const { user: myProfile, mutateUser, projects } = useUser();
const { setToastAlert } = useToast();
const onSubmit = (formData: IUser) => {
userService
.updateUser(formData)
.then((response) => {
console.log(response);
mutateUser(response, false);
setIsEditing(false);
setToastAlert({
title: "Success",
type: "success",
message: "Profile updated successfully",
});
})
.catch((error) => {
console.log(error);
@ -53,20 +74,68 @@ const Profile: NextPage = () => {
formState: { errors, isSubmitting },
} = useForm<IUser>({ defaultValues });
const { data: myIssues } = useSWR<IIssue[]>(
myProfile ? USER_ISSUE : null,
myProfile ? () => userService.userIssues() : null
);
const { data: invitations } = useSWR<IWorkspaceInvitation[]>(USER_WORKSPACE_INVITATIONS, () =>
workspaceService.userWorkspaceInvitations()
);
useEffect(() => {
reset({ ...defaultValues, ...myProfile });
}, [myProfile, reset]);
const quickLinks = [
{
icon: RectangleStackIcon,
title: "My Issues",
number: myIssues?.length ?? 0,
description: "View the list of issues assigned to you across the workspace.",
href: "/me/my-issues",
},
{
icon: ClipboardDocumentListIcon,
title: "My Projects",
number: projects?.length ?? 0,
description: "View the list of projects of the workspace.",
href: "/projects",
},
{
icon: UserPlusIcon,
title: "Workspace Invitations",
number: invitations?.length ?? 0,
description: "View your workspace invitations.",
href: "/invitations",
},
];
return (
<ProjectLayout
<AdminLayout
meta={{
title: "Plane - My Profile",
}}
>
<div className="w-full h-full md:px-20 p-8 flex flex-wrap overflow-auto gap-y-10 justify-center items-center">
<div className="w-full space-y-5">
<Breadcrumbs>
<BreadcrumbItem title="My Profile" />
</Breadcrumbs>
{myProfile ? (
<>
<div className="w-2/5">
<div className="space-y-5">
<section className="relative p-5 rounded-xl flex gap-10 bg-secondary">
<div
className="absolute top-4 right-4 bg-indigo-100 hover:bg-theme hover:text-white rounded p-1 cursor-pointer duration-300"
onClick={() => setIsEditing((prevData) => !prevData)}
>
{isEditing ? (
<XMarkIcon className="h-4 w-4" />
) : (
<PencilIcon className="h-4 w-4" />
)}
</div>
<div className="flex-shrink-0">
<Dropzone
multiple={false}
accept={{
@ -76,20 +145,19 @@ const Profile: NextPage = () => {
setImage(files[0]);
}}
>
{({ getRootProps, getInputProps }) => (
{({ getRootProps, getInputProps, open }) => (
<div className="space-y-4">
<input {...getInputProps()} />
<h2 className="font-semibold text-xl">Profile Picture</h2>
<div className="relative">
<span
className="inline-block h-24 w-24 rounded-full overflow-hidden bg-gray-100"
className="inline-block h-40 w-40 rounded overflow-hidden bg-gray-100"
{...getRootProps()}
>
{(!watch("avatar") || watch("avatar") === "") &&
(!image || image === null) ? (
<UserIcon className="h-full w-full text-gray-300" />
) : (
<div className="relative h-24 w-24 overflow-hidden">
<div className="relative h-40 w-40 overflow-hidden">
<Image
src={image ? URL.createObjectURL(image) : watch("avatar")}
alt={myProfile.first_name}
@ -102,16 +170,16 @@ const Profile: NextPage = () => {
</span>
</div>
<p className="text-gray-500 text-sm">
Max file size is 500kb. Supported file types are .jpg and .png.
Max file size is 500kb.
<br />
Supported file types are .jpg and .png.
</p>
</div>
)}
</Dropzone>
<Button
type="button"
className="mt-4"
onClick={() => {
if (image === null) return;
if (image === null) open();
else {
setIsImageUploading(true);
const formData = new FormData();
formData.append("asset", image);
@ -127,43 +195,53 @@ const Profile: NextPage = () => {
.catch((err) => {
setIsImageUploading(false);
});
}
}}
>
{isImageUploading ? "Uploading..." : "Upload"}
</Button>
</div>
<div className="mt-5 w-3/5">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-4">
<h2 className="font-semibold text-xl">Details</h2>
<div className="flex gap-x-4">
<div className="flex-grow">
)}
</Dropzone>
</div>
<form className="space-y-5" onSubmit={handleSubmit(onSubmit)}>
<div className="grid grid-cols-2 gap-x-10 gap-y-5 mt-2">
<div>
<h4 className="text-sm text-gray-500">First Name</h4>
{isEditing ? (
<Input
name="first_name"
id="first_name"
register={register}
error={errors.first_name}
label="First Name"
placeholder="Enter your first name"
autoComplete="off"
validations={{
required: "This field is required.",
}}
/>
) : (
<h2>{myProfile.first_name}</h2>
)}
</div>
<div className="flex-grow">
<div>
<h4 className="text-sm text-gray-500">Last Name</h4>
{isEditing ? (
<Input
name="last_name"
register={register}
error={errors.last_name}
id="last_name"
label="Last Name"
placeholder="Enter your last name"
autoComplete="off"
/>
</div>
) : (
<h2>{myProfile.last_name}</h2>
)}
</div>
<div>
<h4 className="text-sm text-gray-500">Email ID</h4>
{isEditing ? (
<Input
id="email"
type="email"
@ -173,44 +251,50 @@ const Profile: NextPage = () => {
validations={{
required: "Email is required",
}}
label="Email"
placeholder="Enter email"
/>
) : (
<h2>{myProfile.email}</h2>
)}
</div>
</div>
{isEditing && (
<div>
<Button disabled={isSubmitting} type="submit">
<Button type="submit" disabled={isSubmitting}>
{isSubmitting ? "Updating Profile..." : "Update Profile"}
</Button>
</div>
{/* <div>
<Button type="submit" onClick={handleSubmit(onSubmit)} disabled={isSubmitting}>
{isSubmitting ? "Submitting..." : "Update"}
</Button>
{myProfile.is_email_verified || (
<button
type="button"
className="ml-2 text-indigo-600"
onClick={() => {
requestEmailVerification()
.then(() => {
setToastAlert({
type: "success",
title: "Verification email sent.",
message: "Please check your email.",
});
})
.catch((err) => {
console.error(err);
});
}}
>
Verify Your Email
</button>
)}
</div> */}
</div>
</form>
</section>
<section>
<h2 className="text-xl font-medium mb-3">Quick Links</h2>
<div className="grid grid-cols-3 gap-5">
{quickLinks.map((item, index) => (
<Link key={index} href={item.href}>
<a className="group p-5 rounded-lg bg-secondary hover:bg-theme duration-300">
<h4 className="group-hover:text-white flex items-center gap-2 duration-300">
{item.title}
<ChevronRightIcon className="h-3 w-3" />
</h4>
<div className="flex justify-between items-center gap-3">
<div>
<h2 className="mt-3 mb-2 text-3xl font-bold group-hover:text-white duration-300">
{item.number}
</h2>
<p className="text-gray-500 group-hover:text-white text-sm duration-300">
{item.description}
</p>
</div>
<div>
<item.icon className="h-12 w-12 group-hover:text-white duration-300" />
</div>
</div>
</a>
</Link>
))}
</div>
</section>
</div>
</>
) : (
@ -219,7 +303,7 @@ const Profile: NextPage = () => {
</div>
)}
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -12,7 +12,7 @@ import useUser from "lib/hooks/useUser";
// fetching keys
import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// components
import SprintView from "components/project/cycles/CycleView";
import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
@ -98,7 +98,7 @@ const ProjectSprints: NextPage = () => {
}, [selectedIssues]);
return (
<ProjectLayout
<AdminLayout
meta={{
title: "Plane - Cycles",
}}
@ -134,20 +134,18 @@ const ProjectSprints: NextPage = () => {
setIsOpen={setIsOpen}
projectId={projectId as string}
/>
<div className="w-full h-full flex flex-col space-y-5">
{sprints ? (
sprints.length > 0 ? (
<div className="flex flex-col items-center justify-center w-full h-full px-2">
<div className="w-full h-full flex flex-col space-y-5">
<div className="h-full w-full space-y-5">
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name} Cycles`} />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Cycles`} />
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<h2 className="text-2xl font-medium">Project Cycle</h2>
<HeaderButton Icon={PlusIcon} label="Add Cycle" action={() => setIsOpen(true)} />
<HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
</div>
<div className="w-full h-full pr-2 overflow-auto">
<div className="h-full w-full">
{sprints.map((sprint) => (
<SprintView
sprint={sprint}
@ -161,9 +159,7 @@ const ProjectSprints: NextPage = () => {
))}
</div>
</div>
</div>
) : (
<>
<div className="w-full h-full flex flex-col justify-center items-center px-4">
<EmptySpace
title="You don't have any cycle yet."
@ -174,8 +170,7 @@ const ProjectSprints: NextPage = () => {
title="Create a new cycle"
description={
<span>
Use{" "}
<pre className="inline bg-gray-100 px-2 py-1 rounded">Ctrl/Command + Q</pre>{" "}
Use <pre className="inline bg-gray-100 px-2 py-1 rounded">Ctrl/Command + Q</pre>{" "}
shortcut to create a new cycle
</span>
}
@ -184,15 +179,13 @@ const ProjectSprints: NextPage = () => {
/>
</EmptySpace>
</div>
</>
)
) : (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
)}
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -1,8 +1,6 @@
// next
import Link from "next/link";
import type { NextPage } from "next";
import { useRouter } from "next/router";
import Image from "next/image";
// react
import React, { useCallback, useEffect, useState } from "react";
// swr
@ -13,25 +11,30 @@ import { useForm } from "react-hook-form";
import { Tab } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.services";
import stateServices from "lib/services/state.services";
// fetch keys
import { PROJECT_ISSUES_ACTIVITY, PROJECT_ISSUES_COMMENTS, STATE_LIST } from "constants/fetch-keys";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import IssueCommentSection from "components/project/issues/comment/IssueCommentSection";
import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
// common
import { timeAgo, debounce, addSpaceIfCamelCase } from "constants/common";
import { debounce } from "constants/common";
// components
import IssueDetailSidebar from "components/project/issues/issue-detail/IssueDetailSidebar";
// activites
import IssueActivitySection from "components/project/issues/issue-detail/activity";
// ui
import { Spinner, TextArea } from "ui";
import HeaderButton from "ui/HeaderButton";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
// types
import { IIssue, IIssueComment, IssueResponse, IState } from "types";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
import stateServices from "lib/services/state.services";
// icons
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
const IssueDetail: NextPage = () => {
const router = useRouter();
@ -137,7 +140,7 @@ const IssueDetail: NextPage = () => {
const nextIssue = issues?.results[issues?.results.findIndex((issue) => issue.id === issueId) + 1];
return (
<ProjectLayout>
<AdminLayout>
<CreateUpdateIssuesModal
isOpen={isOpen}
setIsOpen={setIsOpen}
@ -149,54 +152,43 @@ const IssueDetail: NextPage = () => {
<div className="space-y-5">
<Breadcrumbs>
<BreadcrumbItem
title={`${activeProject?.name} Issues`}
title={`${activeProject?.name ?? "Project"} Issues`}
link={`/projects/${activeProject?.id}/issues`}
/>
<BreadcrumbItem
title={`Issue ${activeProject?.identifier}-${issueDetail?.sequence_id} Details`}
title={`Issue ${activeProject?.identifier ?? "Project"}-${
issueDetail?.sequence_id ?? "..."
} Details`}
/>
</Breadcrumbs>
<div className="bg-gray-50 rounded-xl overflow-hidden">
{issueDetail && activeProject ? (
<>
<div className="w-full py-4 px-10 bg-gray-200 flex justify-between items-center">
<p className="text-gray-500">
<Link href={`/projects/${activeProject.id}/issues`}>{activeProject.name}</Link>/
{activeProject.identifier}-{issueDetail.sequence_id}
</p>
<div className="flex gap-x-2">
<button
type="button"
className={`px-4 py-1.5 bg-white rounded-lg ${
prevIssue ? "hover:bg-gray-100" : "bg-gray-100"
}`}
disabled={prevIssue ? false : true}
<div className="flex items-center justify-between w-full">
<h2 className="text-2xl font-medium">{`${activeProject?.name}/${activeProject?.identifier}-${issueDetail?.sequence_id}`}</h2>
<div className="flex items-center gap-x-3">
<HeaderButton
Icon={ChevronLeftIcon}
disabled={!prevIssue}
label="Previous"
onClick={() => {
if (!prevIssue) return;
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
}}
>
Previous
</button>
<button
type="button"
className={`px-4 py-1.5 bg-white rounded-lg ${
nextIssue ? "hover:bg-gray-100" : "bg-gray-100"
}`}
disabled={nextIssue ? false : true}
/>
<HeaderButton
Icon={ChevronRightIcon}
disabled={!nextIssue}
label="Next"
onClick={() => {
if (!nextIssue) return;
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
}}
>
Next
</button>
position="reverse"
/>
</div>
</div>
<div>
<div className="flex flex-wrap">
<div className="w-full lg:w-3/4 h-full px-2 md:px-10 py-10 overflow-auto">
<div className="w-full h-full space-y-5">
{issueDetail && activeProject ? (
<div className="grid grid-cols-4 gap-5">
<div className="col-span-3 space-y-5">
<div className="bg-secondary rounded-lg p-5">
<TextArea
id="name"
placeholder="Enter issue name"
@ -224,25 +216,25 @@ const IssueDetail: NextPage = () => {
mode="transparent"
register={register}
/>
</div>
<div className="bg-secondary rounded-lg p-5">
<div className="relative">
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="w-full border-t border-gray-300" />
</div>
<div className="relative flex justify-center">
<span className="bg-gray-50 px-2 text-sm text-gray-500">
Activity/Comments
</span>
<span className="bg-white px-2 text-sm text-gray-500">Activity/Comments</span>
</div>
</div>
<div className="w-full">
<div className="w-full space-y-5 mt-3">
<Tab.Group>
<Tab.List className="flex gap-x-3">
{["Comments", "Activity"].map((item) => (
<Tab
key={item}
className={({ selected }) =>
`px-3 py-1 text-sm rounded-md ${
selected ? "bg-gray-800 text-white" : ""
`px-3 py-1 text-sm rounded-md border border-gray-700 ${
selected ? "bg-gray-700 text-white" : ""
}`
}
>
@ -250,7 +242,7 @@ const IssueDetail: NextPage = () => {
</Tab>
))}
</Tab.List>
<Tab.Panels className="mt-5">
<Tab.Panels>
<Tab.Panel>
<IssueCommentSection
comments={issueComments}
@ -260,115 +252,28 @@ const IssueDetail: NextPage = () => {
/>
</Tab.Panel>
<Tab.Panel>
{issueActivities ? (
<div className="space-y-3">
{issueActivities.map((activity) => {
if (activity.field !== "updated_by")
return (
<div
key={activity.id}
className="relative flex gap-x-2 w-full"
>
{/* <span
className="absolute top-5 left-5 -ml-1 h-full w-0.5 bg-gray-200"
aria-hidden="true"
/> */}
<div className="flex-shrink-0 -ml-1.5">
{activity.actor_detail.avatar &&
activity.actor_detail.avatar !== "" ? (
<Image
src={activity.actor_detail.avatar}
alt={activity.actor_detail.name}
height={30}
width={30}
className="rounded-full"
/>
) : (
<div
className={`h-8 w-8 bg-gray-500 text-white border-2 border-white grid place-items-center rounded-full`}
>
{activity.actor_detail.first_name.charAt(0)}
</div>
)}
</div>
<div className="w-full">
<p>
{activity.actor_detail.first_name}{" "}
{activity.actor_detail.last_name}{" "}
<span>{activity.verb}</span>{" "}
{activity.verb !== "created" ? (
<span>{activity.field ?? "commented"}</span>
) : (
" this issue"
)}
</p>
<p className="text-xs text-gray-500">
{timeAgo(activity.created_at)}
</p>
<div className="w-full mt-2">
{activity.verb !== "created" && (
<div className="text-sm">
<div>
From:{" "}
<span className="text-gray-500">
{activity.field === "state"
? activity.old_value
? addSpaceIfCamelCase(
states?.find(
(s) => s.id === activity.old_value
)?.name ?? ""
)
: "None"
: activity.old_value}
</span>
</div>
<div>
To:{" "}
<span className="text-gray-500">
{activity.field === "state"
? activity.new_value
? addSpaceIfCamelCase(
states?.find(
(s) => s.id === activity.new_value
)?.name ?? ""
)
: "None"
: activity.new_value}
</span>
</div>
</div>
)}
</div>
</div>
</div>
);
})}
</div>
) : (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
)}
<IssueActivitySection issueActivities={issueActivities} states={states} />
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
</div>
</div>
<div className="w-full lg:w-1/4 h-full border-l px-2 md:px-10 py-10">
<IssueDetailSidebar control={control} submitChanges={submitChanges} />
<div className="sticky top-0 h-min bg-secondary p-4 rounded-lg">
<IssueDetailSidebar
control={control}
issueDetail={issueDetail}
submitChanges={submitChanges}
/>
</div>
</div>
</div>
</>
) : (
<div className="w-full h-full flex items-center justify-center">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -19,7 +19,7 @@ import { PROJECT_ISSUES_LIST, STATE_LIST } from "constants/fetch-keys";
// commons
import { groupBy } from "constants/common";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// components
import ListView from "components/project/issues/ListView";
import BoardView from "components/project/issues/BoardView";
@ -29,12 +29,14 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
import { Spinner } from "ui";
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
import HeaderButton from "ui/HeaderButton";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
import { BreadcrumbItem, Breadcrumbs } from "ui";
// icons
import { ChevronDownIcon, ListBulletIcon, RectangleStackIcon } from "@heroicons/react/24/outline";
import { PlusIcon, EyeIcon, EyeSlashIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
// types
import type { IIssue, IssueResponse, Properties, IState, NestedKeyOf } from "types";
import type { IIssue, IssueResponse, Properties, IState, NestedKeyOf, ProjectMember } from "types";
import { PROJECT_MEMBERS } from "constants/api-routes";
import projectService from "lib/services/project.service";
const PRIORITIES = ["high", "medium", "low"];
@ -76,6 +78,13 @@ const ProjectIssues: NextPage = () => {
: null
);
const { data: members } = useSWR<ProjectMember[]>(
activeWorkspace && activeProject ? PROJECT_MEMBERS : null,
activeWorkspace && activeProject
? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
: null
);
useEffect(() => {
if (!isOpen) {
const timer = setTimeout(() => {
@ -111,10 +120,11 @@ const ProjectIssues: NextPage = () => {
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> }> = [
{ name: "State", key: "state_detail.name" },
{ name: "Priority", key: "priority" },
{ name: "Created By", key: "created_by" },
];
return (
<ProjectLayout>
<AdminLayout>
<CreateUpdateIssuesModal
isOpen={isOpen && selectedIssue?.actionType !== "delete"}
setIsOpen={setIsOpen}
@ -126,19 +136,18 @@ const ProjectIssues: NextPage = () => {
isOpen={!!deleteIssue}
data={projectIssues?.results.find((issue) => issue.id === deleteIssue)}
/>
<div className="w-full h-full flex flex-col space-y-5 pb-6 mb-10">
<div className="w-full">
{!projectIssues ? (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full flex justify-center items-center">
<Spinner />
</div>
) : projectIssues.count > 0 ? (
<div className="flex flex-col items-center justify-center w-full h-full px-2 pb-8">
<div className="w-full h-full flex flex-col space-y-5">
<div className="w-full space-y-5">
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name} Issues`} />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<div className="flex items-center justify-between w-full">
<h2 className="text-2xl font-medium">Project Issues</h2>
<div className="flex items-center gap-x-3">
<div className="flex items-center gap-x-1">
@ -271,7 +280,7 @@ const ProjectIssues: NextPage = () => {
<HeaderButton
Icon={PlusIcon}
label="Add Issue"
action={() => {
onClick={() => {
const e = new KeyboardEvent("keydown", {
key: "i",
ctrlKey: true,
@ -281,7 +290,6 @@ const ProjectIssues: NextPage = () => {
/>
</div>
</div>
<div className="h-full">
{issueView === "list" ? (
<ListView
properties={properties}
@ -289,19 +297,19 @@ const ProjectIssues: NextPage = () => {
selectedGroup={groupByProperty}
setSelectedIssue={setSelectedIssue}
handleDeleteIssue={setDeleteIssue}
members={members}
/>
) : (
<BoardView
properties={properties}
selectedGroup={groupByProperty}
groupedByIssues={groupedByIssues}
members={members}
/>
)}
</div>
</div>
</div>
) : (
<div className="w-full h-full flex flex-col justify-center items-center px-4">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<EmptySpace
title="You don't have any issue yet."
description="Issues help you track individual pieces of work. With Issues, keep track of what's going on, who is working on it, and what's done."
@ -322,7 +330,7 @@ const ProjectIssues: NextPage = () => {
</div>
)}
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -13,7 +13,7 @@ import useUser from "lib/hooks/useUser";
// fetching keys
import { PROJECT_MEMBERS, PROJECT_INVITATIONS } from "constants/fetch-keys";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// components
import SendProjectInvitationModal from "components/project/SendProjectInvitationModal";
// ui
@ -69,26 +69,23 @@ const ProjectMembers: NextPage = () => {
];
return (
<ProjectLayout>
<AdminLayout>
<SendProjectInvitationModal isOpen={isOpen} setIsOpen={setIsOpen} members={members} />
<div className="w-full h-full flex flex-col space-y-5">
{!projectMembers || !projectInvitations ? (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
) : (
<div className="flex flex-col items-center justify-center w-full h-full px-2">
<div className="w-full h-full flex flex-col space-y-5 pb-10 overflow-auto">
<div className="h-full w-full space-y-5">
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name} Members`} />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Members`} />
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<h2 className="text-2xl font-medium">Invite Members</h2>
<HeaderButton Icon={PlusIcon} label="Add Member" action={() => setIsOpen(true)} />
<HeaderButton Icon={PlusIcon} label="Add Member" onClick={() => setIsOpen(true)} />
</div>
{members && members.length === 0 ? null : (
<>
<table className="min-w-full table-fixed border border-gray-300 md:rounded-lg divide-y divide-gray-300">
<thead className="bg-gray-50">
<tr>
@ -190,13 +187,10 @@ const ProjectMembers: NextPage = () => {
))}
</tbody>
</table>
</>
)}
</div>
</div>
)}
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -11,7 +11,7 @@ import { useForm, Controller } from "react-hook-form";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// service
import projectServices from "lib/services/project.service";
import workspaceService from "lib/services/workspace.service";
@ -114,16 +114,14 @@ const ProjectSettings: NextPage = () => {
};
return (
<ProjectLayout>
<div className="w-full h-full space-y-5">
<AdminLayout>
<div className="space-y-5">
<Breadcrumbs>
<BreadcrumbItem title="Projects" link="/projects" />
<BreadcrumbItem title={`${activeProject?.name} Settings`} />
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Settings`} />
</Breadcrumbs>
<div className="w-full h-full flex flex-col space-y-3">
{projectDetails ? (
<div>
<form onSubmit={handleSubmit(onSubmit)} className="mt-3">
<form onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-8">
<section className="space-y-5">
<div>
@ -209,8 +207,8 @@ const ProjectSettings: NextPage = () => {
<div className="relative">
<Listbox.Button className="bg-white relative w-full border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 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"}
{people?.find((person) => person.member.id === value)?.member
.first_name ?? "Select Lead"}
</span>
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<ChevronDownIcon
@ -254,10 +252,7 @@ const ProjectSettings: NextPage = () => {
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
@ -332,10 +327,7 @@ const ProjectSettings: NextPage = () => {
active ? "text-white" : "text-indigo-600"
}`}
>
<CheckIcon
className="h-5 w-5"
aria-hidden="true"
/>
<CheckIcon className="h-5 w-5" aria-hidden="true" />
</span>
) : null}
</>
@ -360,15 +352,13 @@ const ProjectSettings: NextPage = () => {
</section>
</div>
</form>
</div>
) : (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -4,7 +4,7 @@ import type { NextPage } from "next";
// hooks
import useUser from "lib/hooks/useUser";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// components
import CreateProjectModal from "components/project/CreateProjectModal";
import ConfirmProjectDeletion from "components/project/ConfirmProjectDeletion";
@ -61,7 +61,7 @@ const Projects: NextPage = () => {
}, [isOpen]);
return (
<ProjectLayout>
<AdminLayout>
<CreateProjectModal isOpen={isOpen && !deleteProject} setIsOpen={setIsOpen} />
<ConfirmProjectDeletion
isOpen={isOpen && !!deleteProject}
@ -70,10 +70,8 @@ const Projects: NextPage = () => {
/>
{projects ? (
<>
<div className="flex flex-col items-center justify-center w-full h-full px-2">
<div className="w-full h-full flex flex-col space-y-5 pb-10">
{projects.length === 0 ? (
<div className="w-full h-full flex flex-col justify-center items-center px-4">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<EmptySpace
title="You don't have any project yet."
description="Projects are a collection of issues. They can be used to represent the development work for a product, project, or service."
@ -84,9 +82,7 @@ const Projects: NextPage = () => {
description={
<span>
Use{" "}
<pre className="inline bg-gray-100 px-2 py-1 rounded">
Ctrl/Command + P
</pre>{" "}
<pre className="inline bg-gray-100 px-2 py-1 rounded">Ctrl/Command + P</pre>{" "}
shortcut to create a new project
</span>
}
@ -96,19 +92,14 @@ const Projects: NextPage = () => {
</EmptySpace>
</div>
) : (
<>
<div className="h-full w-full space-y-5">
<Breadcrumbs>
<BreadcrumbItem title={`${activeWorkspace?.name} Projects`} />
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<h2 className="text-2xl font-medium">Projects</h2>
<HeaderButton
Icon={PlusIcon}
label="Add Project"
action={() => setIsOpen(true)}
/>
<HeaderButton Icon={PlusIcon} label="Add Project" onClick={() => setIsOpen(true)} />
</div>
<>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{projects.map((item) => (
<ProjectMemberInvitations
@ -126,18 +117,15 @@ const Projects: NextPage = () => {
<Button onClick={submitInvitations}>Submit</Button>
</div>
)}
</>
</>
</div>
)}
</div>
</div>
</>
) : (
<div className="w-full h-full flex justify-center items-center">
<Spinner />
</div>
)}
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -4,7 +4,7 @@ import Link from "next/link";
// react
import React from "react";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// swr
import useSWR from "swr";
// hooks
@ -41,18 +41,26 @@ const Workspace: NextPage = () => {
},
];
const hours = new Date().getHours();
return (
<ProjectLayout>
<div className="h-full w-full px-2 space-y-5">
<div>
<AdminLayout>
<div className="h-full w-full space-y-5">
{user ? (
<div className="font-medium text-2xl">Good Morning, {user.first_name}!!</div>
<div className="font-medium text-2xl">
Good{" "}
{hours >= 4 && hours < 12
? "Morning"
: hours >= 12 && hours < 17
? "Afternoon"
: "Evening"}
, {user.first_name}!!
</div>
) : (
<div className="animate-pulse" role="status">
<div className="font-semibold text-2xl h-8 bg-gray-200 rounded dark:bg-gray-700 w-60"></div>
</div>
)}
</div>
{/* dashboard */}
<div className="flex flex-col gap-8">
@ -155,7 +163,7 @@ const Workspace: NextPage = () => {
</div>
</div>
</div>
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -15,7 +15,6 @@ import { WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
import withAuthWrapper from "lib/hoc/withAuthWrapper";
// layouts
import AdminLayout from "layouts/AdminLayout";
import ProjectLayout from "layouts/ProjectLayout";
// components
import SendWorkspaceInvitationModal from "components/workspace/SendWorkspaceInvitationModal";
// ui
@ -65,7 +64,7 @@ const WorkspaceInvite: NextPage = () => {
];
return (
<ProjectLayout
<AdminLayout
meta={{
title: "Plane - Workspace Invite",
}}
@ -77,18 +76,17 @@ const WorkspaceInvite: NextPage = () => {
members={members}
/>
{!workspaceMembers || !workspaceInvitations ? (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
) : (
<div className="flex flex-col items-center justify-center w-full h-full px-2">
<div className="w-full h-full flex flex-col space-y-5 pb-10">
<div className="w-full space-y-5">
<Breadcrumbs>
<BreadcrumbItem title={`${activeWorkspace?.name} Members`} />
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Members`} />
</Breadcrumbs>
<div className="flex items-center justify-between cursor-pointer w-full">
<h2 className="text-2xl font-medium">Invite Members</h2>
<HeaderButton Icon={PlusIcon} label="Add Member" action={() => setIsOpen(true)} />
<HeaderButton Icon={PlusIcon} label="Add Member" onClick={() => setIsOpen(true)} />
</div>
{members && members.length === 0 ? null : (
<>
@ -129,7 +127,9 @@ const WorkspaceInvite: NextPage = () => {
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 sm:pl-6">
{member?.member ? (
"Accepted"
<span className="p-0.5 px-2 text-sm bg-green-700 text-white rounded-full">
Accepted
</span>
) : member.status ? (
<span className="p-0.5 px-2 text-sm bg-green-700 text-white rounded-full">
Accepted
@ -202,9 +202,8 @@ const WorkspaceInvite: NextPage = () => {
</>
)}
</div>
</div>
)}
</ProjectLayout>
</AdminLayout>
);
};

View File

@ -9,7 +9,7 @@ import Dropzone from "react-dropzone";
import workspaceService from "lib/services/workspace.service";
import fileServices from "lib/services/file.services";
// layouts
import ProjectLayout from "layouts/ProjectLayout";
import AdminLayout from "layouts/AdminLayout";
// hooks
import useUser from "lib/hooks/useUser";
@ -21,6 +21,7 @@ import { Spinner, Button, Input, Select } from "ui";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
// types
import type { IWorkspace } from "types";
import { Tab } from "@headlessui/react";
const defaultValues: Partial<IWorkspace> = {
name: "",
@ -79,27 +80,35 @@ const WorkspaceSettings = () => {
};
return (
<ProjectLayout
<AdminLayout
meta={{
title: "Plane - Workspace Settings",
}}
>
<ConfirmWorkspaceDeletion isOpen={isOpen} setIsOpen={setIsOpen} />
<div className="w-full h-full space-y-5">
<div className="space-y-5">
<Breadcrumbs>
<BreadcrumbItem title={`${activeWorkspace?.name} Settings`} />
<BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />
</Breadcrumbs>
<div className="w-full h-full flex flex-col space-y-3">
{activeWorkspace ? (
<div className="space-y-8">
<section className="space-y-5">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">General</h3>
<p className="mt-1 text-sm text-gray-500">
This information will be displayed to every member of the workspace.
</p>
</div>
<Tab.Group>
<Tab.List className="flex items-center gap-3">
{["General", "Actions"].map((tab, index) => (
<Tab
key={index}
className={({ selected }) =>
`text-md leading-6 text-gray-900 px-4 py-1 rounded outline-none ${
selected ? "bg-gray-700 text-white" : "hover:bg-gray-200"
} duration-300`
}
>
{tab}
</Tab>
))}
</Tab.List>
<Tab.Panels>
<Tab.Panel>
<div className="grid grid-cols-2 gap-6">
<div className="w-full space-y-3">
<Dropzone
@ -117,7 +126,9 @@ const WorkspaceSettings = () => {
<div className="text-gray-500 mb-2">Logo</div>
<div>
<div className="h-60 bg-blue-50" {...getRootProps()}>
{((watch("logo") && watch("logo") !== null && watch("logo") !== "") ||
{((watch("logo") &&
watch("logo") !== null &&
watch("logo") !== "") ||
(image && image !== null)) && (
<div className="relative flex mx-auto h-60">
<Image
@ -197,29 +208,24 @@ const WorkspaceSettings = () => {
</div>
</div>
</div>
</section>
<section className="space-y-5">
<div>
<h3 className="text-lg font-medium leading-6 text-gray-900">Actions</h3>
<p className="mt-1 text-sm text-gray-500">
Once deleted, it will be gone forever. Please be certain.
</p>
</div>
</Tab.Panel>
<Tab.Panel>
<div>
<Button theme="danger" onClick={() => setIsOpen(true)}>
Delete the workspace
</Button>
</div>
</section>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>
</div>
) : (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
<Spinner />
</div>
)}
</div>
</div>
</ProjectLayout>
</AdminLayout>
);
};

File diff suppressed because one or more lines are too long

View File

@ -5,6 +5,8 @@ module.exports = {
extend: {
colors: {
theme: "#4338ca",
primary: "#f9fafb", // gray-50
secondary: "white",
},
keyframes: {
leftToaster: {

View File

@ -32,7 +32,7 @@ export interface ProjectMember {
email: string;
message: string;
role: 5 | 10 | 15 | 20;
member: string;
member: any;
member_id: string;
user_id: string;
}

View File

@ -6,7 +6,7 @@ type BreadcrumbsProps = {
children: any;
};
const Breadcrumbs = (props: BreadcrumbsProps) => {
const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children }: BreadcrumbsProps) => {
const router = useRouter();
return (
@ -20,7 +20,7 @@ const Breadcrumbs = (props: BreadcrumbsProps) => {
<ArrowLeftIcon className="h-3 w-3" />
</p>
</div>
{props.children}
{children}
</div>
</>
);
@ -32,23 +32,23 @@ type BreadcrumbItemProps = {
icon?: any;
};
const BreadcrumbItem = (props: BreadcrumbItemProps) => {
const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => {
return (
<>
{props.link ? (
<Link href={props.link}>
{link ? (
<Link href={link}>
<a className="bg-indigo-50 hover:bg-indigo-100 duration-300 px-4 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center">
<p className={`skew-x-[20deg] ${props.icon ? "flex items-center gap-2" : ""}`}>
{props?.icon}
{props.title}
<p className={`skew-x-[20deg] ${icon ? "flex items-center gap-2" : ""}`}>
{icon ?? null}
{title}
</p>
</a>
</Link>
) : (
<div className="bg-indigo-50 px-4 py-1 rounded-tl-lg rounded-tr-md rounded-br-lg rounded-bl-md skew-x-[-20deg] text-sm text-center">
<p className={`skew-x-[20deg] ${props.icon ? "flex items-center gap-2" : ""}`}>
{props?.icon}
{props.title}
<p className={`skew-x-[20deg] ${icon ? "flex items-center gap-2" : ""}`}>
{icon}
{title}
</p>
</div>
)}

View File

@ -18,7 +18,7 @@ type EmptySpaceProps = {
link?: { text: string; href: string };
};
const EmptySpace = ({ title, description, children, Icon, link }: EmptySpaceProps) => {
const EmptySpace: React.FC<EmptySpaceProps> = ({ title, description, children, Icon, link }) => {
return (
<>
<div className="max-w-lg">
@ -61,13 +61,13 @@ type EmptySpaceItemProps = {
action: () => void;
};
const EmptySpaceItem = ({
const EmptySpaceItem: React.FC<EmptySpaceItemProps> = ({
title,
description,
bgColor = "blue",
Icon,
action,
}: EmptySpaceItemProps) => {
}) => {
return (
<>
<li className="cursor-pointer" onClick={action}>

View File

@ -6,16 +6,29 @@ type HeaderButtonProps = {
}
) => JSX.Element;
label: string;
action: () => void;
disabled?: boolean;
onClick: () => void;
className?: string;
position?: "normal" | "reverse";
};
const HeaderButton = ({ Icon, label, action }: HeaderButtonProps) => {
const HeaderButton = ({
Icon,
label,
disabled = false,
onClick,
className = "",
position = "normal",
}: HeaderButtonProps) => {
return (
<>
<button
type="button"
className="bg-theme text-white border border-indigo-600 text-xs flex items-center gap-x-1 p-2 rounded-md font-medium whitespace-nowrap outline-none"
onClick={action}
className={`bg-theme text-white border border-indigo-600 text-xs flex items-center gap-x-1 p-2 rounded-md font-medium whitespace-nowrap outline-none ${
position === "reverse" && "flex-row-reverse"
} ${className}`}
disabled={disabled}
onClick={onClick}
>
<Icon className="h-4 w-4" />
{label}

View File

@ -6,3 +6,5 @@ export { default as ListBox } from "./ListBox";
export { default as Spinner } from "./Spinner";
export { default as Tooltip } from "./Tooltip";
export { default as SearchListbox } from "./SearchListbox";
export * from "./Breadcrumbs";
export * from "./EmptySpace";