github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: created global issue card component for kanban

Browse Source
This commit is contained in:
Aaryan Khandelwal 2022-12-18 17:13:43 +05:30
commit 058b2e6592
34 changed files with 1212 additions and 779 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.eslintrc.json → apps/app/.eslintrc.json
View File

132
apps/app/components/command-palette/shortcuts.tsx
View File

@ -1,15 +1,53 @@
import React from "react"; import React, { useState } from "react";
// headless ui // headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// icons // icons
import { XMarkIcon } from "@heroicons/react/20/solid"; import { XMarkIcon } from "@heroicons/react/20/solid";
// ui
import { Input } from "ui";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
}; };
const shortcuts = [
{
title: "Navigation",
shortcuts: [
{ keys: "ctrl,/", description: "To open navigator" },
{ keys: "↑", description: "Move up" },
{ keys: "↓", description: "Move down" },
{ keys: "←", description: "Move left" },
{ keys: "→", description: "Move right" },
{ keys: "Enter", description: "Select" },
{ keys: "Esc", description: "Close" },
],
},
{
title: "Common",
shortcuts: [
{ keys: "ctrl,p", description: "To create project" },
{ keys: "ctrl,i", description: "To create issue" },
{ keys: "ctrl,q", description: "To create cycle" },
{ keys: "ctrl,h", description: "To open shortcuts guide" },
{
keys: "ctrl,alt,c",
description: "To copy issue url when on issue detail page.",
},
],
},
];
const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => { const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
const [query, setQuery] = useState("");
const filteredShortcuts = shortcuts.filter((shortcut) =>
shortcut.shortcuts.some((item) => item.description.includes(query.trim())) || query === ""
? true
: false
);
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
<Dialog as="div" className="relative z-10" onClose={setIsOpen}> <Dialog as="div" className="relative z-10" onClose={setIsOpen}>
@ -39,7 +77,7 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg"> <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white p-5"> <div className="bg-white p-5">
<div className="sm:flex sm:items-start"> <div className="sm:flex sm:items-start">
<div className="text-center sm:text-left w-full"> <div className="flex flex-col gap-y-4 text-center sm:text-left w-full">
<Dialog.Title <Dialog.Title
as="h3" as="h3"
className="text-lg font-medium leading-6 text-gray-900 flex justify-between" className="text-lg font-medium leading-6 text-gray-900 flex justify-between"
@ -54,58 +92,50 @@ const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
</button> </button>
</span> </span>
</Dialog.Title> </Dialog.Title>
<div className="mt-2 pt-5 flex flex-col gap-y-3 w-full"> <div>
{[ <Input
{ id="search"
title: "Navigation", name="search"
shortcuts: [ type="text"
{ keys: "ctrl,/", description: "To open navigator" }, placeholder="Search for shortcuts"
{ keys: "↑", description: "Move up" }, onChange={(e) => setQuery(e.target.value)}
{ keys: "↓", description: "Move down" }, />
{ keys: "←", description: "Move left" }, </div>
{ keys: "→", description: "Move right" }, <div className="flex flex-col gap-y-3 w-full">
{ keys: "Enter", description: "Select" }, {filteredShortcuts.length > 0 ? (
{ keys: "Esc", description: "Close" }, filteredShortcuts.map(({ title, shortcuts }) => (
], <div key={title} className="w-full flex flex-col">
}, <p className="font-medium mb-4">{title}</p>
{ <div className="flex flex-col gap-y-3">
title: "Common", {shortcuts.map(({ keys, description }, index) => (
shortcuts: [ <div key={index} className="flex justify-between">
{ keys: "ctrl,p", description: "To create project" }, <p className="text-sm text-gray-500">{description}</p>
{ keys: "ctrl,i", description: "To create issue" }, <div className="flex items-center gap-x-1">
{ keys: "ctrl,q", description: "To create cycle" }, {keys.split(",").map((key, index) => (
{ keys: "ctrl,m", description: "To create module" }, <span key={index} className="flex items-center gap-1">
{ keys: "ctrl,h", description: "To open shortcuts guide" }, <kbd className="bg-gray-200 text-sm px-1 rounded">
{ {key}
keys: "ctrl,alt,c", </kbd>
description: "To copy issue url when on issue detail page.", </span>
}, ))}
], </div>
},
].map(({ title, shortcuts }) => (
<div key={title} className="w-full flex flex-col">
<p className="font-medium mb-4">{title}</p>
<div className="flex flex-col gap-y-3">
{shortcuts.map(({ keys, description }, index) => (
<div key={index} className="flex justify-between">
<p className="text-sm text-gray-500">{description}</p>
<div className="flex items-center gap-x-1">
{keys.split(",").map((key, index) => (
<span key={index} className="flex items-center gap-1">
<kbd className="bg-gray-200 text-sm px-1 rounded">
{key}
</kbd>
{/* {index !== keys.split(",").length - 1 ? (
<span className="text-xs">+</span>
) : null} */}
</span>
))}
</div> </div>
</div> ))}
))} </div>
</div> </div>
))
) : (
<div className="flex flex-col gap-y-3">
<p className="text-sm text-gray-500">
No shortcuts found for{" "}
<span className="font-semibold italic">
{`"`}
{query}
{`"`}
</span>
</p>
</div> </div>
))} )}
</div> </div>
</div> </div>
</div> </div>

388
apps/app/components/project/common/board-view/single-issue.tsx Normal file
View File

@ -0,0 +1,388 @@
// next
import Link from "next/link";
import Image from "next/image";
// react-beautiful-dnd
import { DraggableStateSnapshot } from "react-beautiful-dnd";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// icons
import { TrashIcon } from "@heroicons/react/24/outline";
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
import User from "public/user.png";
// types
import { IIssue, IWorkspaceMember, Properties } from "types";
// common
import {
addSpaceIfCamelCase,
classNames,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
// constants
import { PRIORITIES } from "constants/";
import useUser from "lib/hooks/useUser";
import React from "react";
type Props = {
issue: IIssue;
properties: Properties;
snapshot?: DraggableStateSnapshot;
assignees: {
avatar: string | undefined;
first_name: string | undefined;
email: string | undefined;
}[];
people: IWorkspaceMember[] | undefined;
handleDeleteIssue?: React.Dispatch<React.SetStateAction<string | undefined>>;
partialUpdateIssue: (formData: Partial<IIssue>, childIssueId: string) => void;
};
const SingleIssue: React.FC<Props> = ({
issue,
properties,
snapshot,
assignees,
people,
handleDeleteIssue,
partialUpdateIssue,
}) => {
const { activeProject, states } = useUser();
return (
<div
className={`border rounded bg-white shadow-sm ${
snapshot && snapshot.isDragging ? "border-theme shadow-lg bg-indigo-50" : ""
}`}
>
<div className="group/card relative p-2 select-none">
{handleDeleteIssue && (
<div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1 z-10">
<button
type="button"
className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 bg-white hover:bg-red-50 duration-300 outline-none"
onClick={() => handleDeleteIssue(issue.id)}
>
<TrashIcon className="h-4 w-4" />
</button>
</div>
)}
<Link href={`/projects/${issue.project}/issues/${issue.id}`}>
<a>
{properties.key && (
<div className="text-xs font-medium text-gray-500 mb-2">
{activeProject?.identifier}-{issue.sequence_id}
</div>
)}
<h5
className="group-hover:text-theme text-sm mb-3"
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
>
{issue.name}
</h5>
</a>
</Link>
<div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
{properties.priority && (
<Listbox
as="div"
value={issue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data }, issue.id);
}}
className="group relative flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button
className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
issue.priority === "urgent"
? "bg-red-100 text-red-600"
: issue.priority === "high"
? "bg-orange-100 text-orange-500"
: issue.priority === "medium"
? "bg-yellow-100 text-yellow-500"
: issue.priority === "low"
? "bg-green-100 text-green-500"
: "bg-gray-100"
}`}
>
{issue.priority ?? "None"}
</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-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">
{PRIORITIES?.map((priority) => (
<Listbox.Option
key={priority}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer capitalize select-none px-3 py-2"
)
}
value={priority}
>
{priority}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900">Priority</h5>
<div
className={`capitalize ${
issue.priority === "urgent"
? "text-red-600"
: issue.priority === "high"
? "text-orange-500"
: issue.priority === "medium"
? "text-yellow-500"
: issue.priority === "low"
? "text-green-500"
: ""
}`}
>
{issue.priority ?? "None"}
</div>
</div>
</>
)}
</Listbox>
)}
{properties.state && (
<Listbox
as="div"
value={issue.state}
onChange={(data: string) => {
partialUpdateIssue({ state: data }, issue.id);
}}
className="group relative flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<span
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: issue.state_detail.color,
}}
></span>
{addSpaceIfCamelCase(issue.state_detail.name)}
</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-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">
{states?.map((state) => (
<Listbox.Option
key={state.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none px-3 py-2"
)
}
value={state.id}
>
{addSpaceIfCamelCase(state.name)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">State</h5>
<div>{issue.state_detail.name}</div>
</div>
</>
)}
</Listbox>
)}
{properties.start_date && (
<div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<CalendarDaysIcon className="h-4 w-4" />
{issue.start_date ? renderShortNumericDateFormat(issue.start_date) : "N/A"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">Started at</h5>
<div>{renderShortNumericDateFormat(issue.start_date ?? "")}</div>
</div>
</div>
)}
{properties.target_date && (
<div
className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
issue.target_date === null
? ""
: issue.target_date < new Date().toISOString()
? "text-red-600"
: findHowManyDaysLeft(issue.target_date) <= 3 && "text-orange-400"
}`}
>
<CalendarDaysIcon className="h-4 w-4" />
{issue.target_date ? renderShortNumericDateFormat(issue.target_date) : "N/A"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900">Target date</h5>
<div>{renderShortNumericDateFormat(issue.target_date ?? "")}</div>
<div>
{issue.target_date &&
(issue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft(issue.target_date)} days`
: findHowManyDaysLeft(issue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft(issue.target_date)} days`
: "Target date")}
</div>
</div>
</div>
)}
{properties.assignee && (
<Listbox
as="div"
value={issue.assignees}
onChange={(data: any) => {
const newData = issue.assignees ?? [];
if (newData.includes(data)) {
newData.splice(newData.indexOf(data), 1);
} else {
newData.push(data);
}
partialUpdateIssue({ assignees_list: newData }, issue.id);
}}
className="group relative flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button>
<div className="flex items-center gap-1 text-xs cursor-pointer">
{assignees.length > 0 ? (
assignees.map((assignee, index: number) => (
<div
key={index}
className={`relative z-[1] h-5 w-5 rounded-full ${
index !== 0 ? "-ml-2.5" : ""
}`}
>
{assignee.avatar && assignee.avatar !== "" ? (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={assignee.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={assignee?.first_name}
/>
</div>
) : (
<div className="h-5 w-5 bg-gray-700 text-white border-2 border-white grid place-items-center rounded-full capitalize">
{assignee.first_name && assignee.first_name !== ""
? assignee.first_name.charAt(0)
: assignee?.email?.charAt(0)}
</div>
)}
</div>
))
) : (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
</div>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute left-0 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">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none p-2"
)
}
value={person.member.id}
>
<div
className={`flex items-center gap-x-1 ${
assignees.includes({
avatar: person.member.avatar,
first_name: person.member.first_name,
email: person.member.email,
})
? "font-medium"
: "font-normal"
}`}
>
{person.member.avatar && person.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={person.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
{person.member.first_name && person.member.first_name !== ""
? person.member.first_name.charAt(0)
: person.member.email.charAt(0)}
</div>
)}
<p>
{person.member.first_name && person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</p>
</div>
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
<div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">Assigned to</h5>
<div>
{issue.assignee_details?.length > 0
? issue.assignee_details.map((assignee) => assignee.first_name).join(", ")
: "No one"}
</div>
</div>
</>
)}
</Listbox>
)}
</div>
</div>
</div>
);
};
export default SingleIssue;

6
apps/app/components/project/cycles/board-view/index.tsx
View File

@ -16,6 +16,8 @@ type Props = {
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void; openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
openIssuesListModal: () => void; openIssuesListModal: () => void;
removeIssueFromCycle: (bridgeId: string) => void; removeIssueFromCycle: (bridgeId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
}; };
const CyclesBoardView: React.FC<Props> = ({ const CyclesBoardView: React.FC<Props> = ({
@ -26,6 +28,8 @@ const CyclesBoardView: React.FC<Props> = ({
openCreateIssueModal, openCreateIssueModal,
openIssuesListModal, openIssuesListModal,
removeIssueFromCycle, removeIssueFromCycle,
partialUpdateIssue,
handleDeleteIssue,
}) => { }) => {
const { states } = useUser(); const { states } = useUser();
@ -57,6 +61,8 @@ const CyclesBoardView: React.FC<Props> = ({
removeIssueFromCycle={removeIssueFromCycle} removeIssueFromCycle={removeIssueFromCycle}
openIssuesListModal={openIssuesListModal} openIssuesListModal={openIssuesListModal}
openCreateIssueModal={openCreateIssueModal} openCreateIssueModal={openCreateIssueModal}
partialUpdateIssue={partialUpdateIssue}
handleDeleteIssue={handleDeleteIssue}
/> />
))} ))}
</div> </div>

205
apps/app/components/project/cycles/board-view/single-board.tsx
View File

@ -1,29 +1,25 @@
// react // react
import React, { useState } from "react"; import React, { useState } from "react";
// next
import Link from "next/link";
import Image from "next/image";
// swr // swr
import useSWR from "swr"; import useSWR from "swr";
// services
import workspaceService from "lib/services/workspace.service";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// components
import SingleIssue from "components/project/common/board-view/single-issue";
// headless ui
import { Menu, Transition } from "@headlessui/react";
// ui // ui
import { CustomMenu } from "ui"; import { CustomMenu } from "ui";
// icons // icons
import { CalendarDaysIcon, PlusIcon } from "@heroicons/react/24/outline"; import { PlusIcon } from "@heroicons/react/24/outline";
import User from "public/user.png";
// types // types
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types"; import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// constants // fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
import { // common
addSpaceIfCamelCase, import { addSpaceIfCamelCase, classNames } from "constants/common";
classNames,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
import workspaceService from "lib/services/workspace.service";
import { Menu, Transition } from "@headlessui/react";
type Props = { type Props = {
properties: Properties; properties: Properties;
@ -37,6 +33,8 @@ type Props = {
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void; openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
openIssuesListModal: () => void; openIssuesListModal: () => void;
removeIssueFromCycle: (bridgeId: string) => void; removeIssueFromCycle: (bridgeId: string) => void;
partialUpdateIssue: (formData: Partial<IIssue>, issueId: string) => void;
handleDeleteIssue: React.Dispatch<React.SetStateAction<string | undefined>>;
}; };
const SingleCycleBoard: React.FC<Props> = ({ const SingleCycleBoard: React.FC<Props> = ({
@ -49,11 +47,13 @@ const SingleCycleBoard: React.FC<Props> = ({
openCreateIssueModal, openCreateIssueModal,
openIssuesListModal, openIssuesListModal,
removeIssueFromCycle, removeIssueFromCycle,
partialUpdateIssue,
handleDeleteIssue,
}) => { }) => {
// Collapse/Expand // Collapse/Expand
const [show, setState] = useState(true); const [show, setState] = useState(true);
const { activeWorkspace, activeProject } = useUser(); const { activeWorkspace } = useUser();
if (selectedGroup === "priority") if (selectedGroup === "priority")
groupTitle === "high" groupTitle === "high"
@ -138,172 +138,15 @@ const SingleCycleBoard: React.FC<Props> = ({
}); });
return ( return (
<div key={childIssue.id} className={`border rounded bg-white shadow-sm`}> <SingleIssue
<div className="relative p-2 select-none"> key={childIssue.id}
<Link href={`/projects/${childIssue.project}/issues/${childIssue.id}`}> issue={childIssue}
<a> properties={properties}
{properties.key && ( assignees={assignees}
<div className="text-xs font-medium text-gray-500 mb-2"> people={people}
{activeProject?.identifier}-{childIssue.sequence_id} partialUpdateIssue={partialUpdateIssue}
</div> handleDeleteIssue={handleDeleteIssue}
)} />
<h5
className="group-hover:text-theme text-sm break-all mb-3"
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
>
{childIssue.name}
</h5>
</a>
</Link>
<div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
{properties.priority && (
<div
className={`group flex-shrink-0 flex items-center gap-1 rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
childIssue.priority === "urgent"
? "bg-red-100 text-red-600"
: childIssue.priority === "high"
? "bg-orange-100 text-orange-500"
: childIssue.priority === "medium"
? "bg-yellow-100 text-yellow-500"
: childIssue.priority === "low"
? "bg-green-100 text-green-500"
: "bg-gray-100"
}`}
>
{/* {getPriorityIcon(childIssue.priority ?? "")} */}
{childIssue.priority ?? "None"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900">Priority</h5>
<div
className={`capitalize ${
childIssue.priority === "urgent"
? "text-red-600"
: childIssue.priority === "high"
? "text-orange-500"
: childIssue.priority === "medium"
? "text-yellow-500"
: childIssue.priority === "low"
? "text-green-500"
: ""
}`}
>
{childIssue.priority ?? "None"}
</div>
</div>
</div>
)}
{properties.state && (
<div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<span
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
style={{ backgroundColor: childIssue.state_detail.color }}
></span>
{addSpaceIfCamelCase(childIssue.state_detail.name)}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">State</h5>
<div>{childIssue.state_detail.name}</div>
</div>
</div>
)}
{properties.start_date && (
<div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<CalendarDaysIcon className="h-4 w-4" />
{childIssue.start_date
? renderShortNumericDateFormat(childIssue.start_date)
: "N/A"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">Started at</h5>
<div>{renderShortNumericDateFormat(childIssue.start_date ?? "")}</div>
</div>
</div>
)}
{properties.target_date && (
<div
className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
childIssue.target_date === null
? ""
: childIssue.target_date < new Date().toISOString()
? "text-red-600"
: findHowManyDaysLeft(childIssue.target_date) <= 3 && "text-orange-400"
}`}
>
<CalendarDaysIcon className="h-4 w-4" />
{childIssue.target_date
? renderShortNumericDateFormat(childIssue.target_date)
: "N/A"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900">Target date</h5>
<div>{renderShortNumericDateFormat(childIssue.target_date ?? "")}</div>
<div>
{childIssue.target_date &&
(childIssue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft(
childIssue.target_date
)} days`
: findHowManyDaysLeft(childIssue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft(
childIssue.target_date
)} days`
: "Target date")}
</div>
</div>
</div>
)}
{properties.assignee && (
<div className="group flex items-center gap-1 text-xs">
{childIssue.assignee_details?.length > 0 ? (
childIssue.assignee_details?.map((assignee, index: number) => (
<div
key={index}
className={`relative z-[1] h-5 w-5 rounded-full ${
index !== 0 ? "-ml-2.5" : ""
}`}
>
{assignee.avatar && assignee.avatar !== "" ? (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={assignee.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={assignee.name}
/>
</div>
) : (
<div
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>
)}
</div>
))
) : (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">Assigned to</h5>
<div>
{childIssue.assignee_details?.length > 0
? childIssue.assignee_details
.map((assignee) => assignee.first_name)
.join(", ")
: "No one"}
</div>
</div>
</div>
)}
</div>
</div>
</div>
); );
})} })}

389
apps/app/components/project/issues/BoardView/single-board.tsx
View File

@ -1,8 +1,5 @@
// react // react
import React, { useState } from "react"; import React, { useState } from "react";
// next
import Link from "next/link";
import Image from "next/image";
// swr // swr
import useSWR from "swr"; import useSWR from "swr";
// react-beautiful-dnd // react-beautiful-dnd
@ -12,30 +9,18 @@ import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import workspaceService from "lib/services/workspace.service"; import workspaceService from "lib/services/workspace.service";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// headless ui
import { Listbox, Transition } from "@headlessui/react";
// icons // icons
import { import {
ArrowsPointingInIcon, ArrowsPointingInIcon,
ArrowsPointingOutIcon, ArrowsPointingOutIcon,
CalendarDaysIcon,
EllipsisHorizontalIcon, EllipsisHorizontalIcon,
PlusIcon, PlusIcon,
TrashIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import User from "public/user.png"; import { addSpaceIfCamelCase } from "constants/common";
// common
import { PRIORITIES } from "constants/";
import {
addSpaceIfCamelCase,
classNames,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
import { WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
import { getPriorityIcon } from "constants/global";
// types // types
import { IIssue, Properties, NestedKeyOf, IWorkspaceMember } from "types"; import { IIssue, Properties, NestedKeyOf, IWorkspaceMember } from "types";
import SingleIssue from "components/project/common/board-view/single-issue";
type Props = { type Props = {
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
@ -78,7 +63,7 @@ const SingleBoard: React.FC<Props> = ({
// Collapse/Expand // Collapse/Expand
const [show, setShow] = useState(true); const [show, setShow] = useState(true);
const { activeProject, activeWorkspace, states } = useUser(); const { activeWorkspace } = useUser();
if (selectedGroup === "priority") if (selectedGroup === "priority")
groupTitle === "high" groupTitle === "high"
@ -206,367 +191,19 @@ const SingleBoard: React.FC<Props> = ({
<Draggable key={childIssue.id} draggableId={childIssue.id} index={index}> <Draggable key={childIssue.id} draggableId={childIssue.id} index={index}>
{(provided, snapshot) => ( {(provided, snapshot) => (
<div <div
className={`border rounded bg-white shadow-sm ${
snapshot.isDragging ? "border-theme shadow-lg bg-indigo-50" : ""
}`}
ref={provided.innerRef} ref={provided.innerRef}
{...provided.draggableProps} {...provided.draggableProps}
{...provided.dragHandleProps}
> >
<div <SingleIssue
className="group/card relative p-2 select-none" issue={childIssue}
{...provided.dragHandleProps} properties={properties}
> snapshot={snapshot}
<div className="opacity-0 group-hover/card:opacity-100 absolute top-1 right-1"> people={people}
<button assignees={assignees}
type="button" handleDeleteIssue={handleDeleteIssue}
className="h-7 w-7 p-1 grid place-items-center rounded text-red-500 hover:bg-red-50 duration-300 outline-none" partialUpdateIssue={partialUpdateIssue}
onClick={() => handleDeleteIssue(childIssue.id)} />
>
<TrashIcon className="h-4 w-4" />
</button>
</div>
<Link
href={`/projects/${childIssue.project}/issues/${childIssue.id}`}
>
<a>
{properties.key && (
<div className="text-xs font-medium text-gray-500 mb-2">
{activeProject?.identifier}-{childIssue.sequence_id}
</div>
)}
<h5
className="group-hover:text-theme text-sm mb-3"
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
>
{childIssue.name}
</h5>
</a>
</Link>
<div className="flex items-center gap-x-1 gap-y-2 text-xs flex-wrap">
{properties.priority && (
<Listbox
as="div"
value={childIssue.priority}
onChange={(data: string) => {
partialUpdateIssue({ priority: data }, childIssue.id);
}}
className="group relative flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button
className={`rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 capitalize ${
childIssue.priority === "urgent"
? "bg-red-100 text-red-600"
: childIssue.priority === "high"
? "bg-orange-100 text-orange-500"
: childIssue.priority === "medium"
? "bg-yellow-100 text-yellow-500"
: childIssue.priority === "low"
? "bg-green-100 text-green-500"
: "bg-gray-100"
}`}
>
{childIssue.priority ?? "None"}
</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-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">
{PRIORITIES?.map((priority) => (
<Listbox.Option
key={priority}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer capitalize select-none px-3 py-2"
)
}
value={priority}
>
{priority}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900">
Priority
</h5>
<div
className={`capitalize ${
childIssue.priority === "urgent"
? "text-red-600"
: childIssue.priority === "high"
? "text-orange-500"
: childIssue.priority === "medium"
? "text-yellow-500"
: childIssue.priority === "low"
? "text-green-500"
: ""
}`}
>
{childIssue.priority ?? "None"}
</div>
</div>
</>
)}
</Listbox>
)}
{properties.state && (
<Listbox
as="div"
value={childIssue.state}
onChange={(data: string) => {
partialUpdateIssue({ state: data }, childIssue.id);
}}
className="group relative flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button className="flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<span
className="flex-shrink-0 h-1.5 w-1.5 rounded-full"
style={{
backgroundColor: childIssue.state_detail.color,
}}
></span>
{addSpaceIfCamelCase(childIssue.state_detail.name)}
</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-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">
{states?.map((state) => (
<Listbox.Option
key={state.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none px-3 py-2"
)
}
value={state.id}
>
{addSpaceIfCamelCase(state.name)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
<div className="absolute bottom-full right-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">State</h5>
<div>{childIssue.state_detail.name}</div>
</div>
</>
)}
</Listbox>
)}
{properties.start_date && (
<div className="group flex-shrink-0 flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300">
<CalendarDaysIcon className="h-4 w-4" />
{childIssue.start_date
? renderShortNumericDateFormat(childIssue.start_date)
: "N/A"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">Started at</h5>
<div>
{renderShortNumericDateFormat(childIssue.start_date ?? "")}
</div>
</div>
</div>
)}
{properties.target_date && (
<div
className={`group flex-shrink-0 group flex items-center gap-1 hover:bg-gray-100 border rounded shadow-sm px-2 py-1 cursor-pointer focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-xs duration-300 ${
childIssue.target_date === null
? ""
: childIssue.target_date < new Date().toISOString()
? "text-red-600"
: findHowManyDaysLeft(childIssue.target_date) <= 3 &&
"text-orange-400"
}`}
>
<CalendarDaysIcon className="h-4 w-4" />
{childIssue.target_date
? renderShortNumericDateFormat(childIssue.target_date)
: "N/A"}
<div className="fixed -translate-y-3/4 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1 text-gray-900">
Target date
</h5>
<div>
{renderShortNumericDateFormat(childIssue.target_date ?? "")}
</div>
<div>
{childIssue.target_date &&
(childIssue.target_date < new Date().toISOString()
? `Target date has passed by ${findHowManyDaysLeft(
childIssue.target_date
)} days`
: findHowManyDaysLeft(childIssue.target_date) <= 3
? `Target date is in ${findHowManyDaysLeft(
childIssue.target_date
)} days`
: "Target date")}
</div>
</div>
</div>
)}
{properties.assignee && (
<Listbox
as="div"
value={childIssue.assignees}
onChange={(data: any) => {
const newData = childIssue.assignees ?? [];
if (newData.includes(data)) {
newData.splice(newData.indexOf(data), 1);
} else {
newData.push(data);
}
partialUpdateIssue(
{ assignees_list: newData },
childIssue.id
);
}}
className="group relative flex-shrink-0"
>
{({ open }) => (
<>
<div>
<Listbox.Button>
<div className="flex items-center gap-1 text-xs cursor-pointer">
{assignees.length > 0 ? (
assignees.map((assignee, index: number) => (
<div
key={index}
className={`relative z-[1] h-5 w-5 rounded-full ${
index !== 0 ? "-ml-2.5" : ""
}`}
>
{assignee.avatar && assignee.avatar !== "" ? (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={assignee.avatar}
height="100%"
width="100%"
className="rounded-full"
alt={assignee?.first_name}
/>
</div>
) : (
<div
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>
)}
</div>
))
) : (
<div className="h-5 w-5 border-2 bg-white border-white rounded-full">
<Image
src={User}
height="100%"
width="100%"
className="rounded-full"
alt="No user"
/>
</div>
)}
</div>
</Listbox.Button>
<Transition
show={open}
as={React.Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute left-0 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">
{people?.map((person) => (
<Listbox.Option
key={person.id}
className={({ active }) =>
classNames(
active ? "bg-indigo-50" : "bg-white",
"cursor-pointer select-none p-2"
)
}
value={person.member.id}
>
<div
className={`flex items-center gap-x-1 ${
assignees.includes({
avatar: person.member.avatar,
first_name: person.member.first_name,
email: person.member.email,
})
? "font-medium"
: "font-normal"
}`}
>
{person.member.avatar &&
person.member.avatar !== "" ? (
<div className="relative h-4 w-4">
<Image
src={person.member.avatar}
alt="avatar"
className="rounded-full"
layout="fill"
objectFit="cover"
/>
</div>
) : (
<div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
{person.member.first_name &&
person.member.first_name !== ""
? person.member.first_name.charAt(0)
: person.member.email.charAt(0)}
</div>
)}
<p>
{person.member.first_name &&
person.member.first_name !== ""
? person.member.first_name
: person.member.email}
</p>
</div>
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
<div className="absolute bottom-full left-0 mb-2 z-10 hidden group-hover:block p-2 bg-white shadow-md rounded-md whitespace-nowrap">
<h5 className="font-medium mb-1">Assigned to</h5>
<div>
{childIssue.assignee_details?.length > 0
? childIssue.assignee_details
.map((assignee) => assignee.first_name)
.join(", ")
: "No one"}
</div>
</div>
</>
)}
</Listbox>
)}
</div>
</div>
</div> </div>
)} )}
</Draggable> </Draggable>

32
apps/app/components/project/issues/BoardView/state/ConfirmStateDeletion.tsx → apps/app/components/project/issues/BoardView/state/confirm-state-delete.tsx
View File

@ -9,6 +9,8 @@ import stateServices from "lib/services/state.service";
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// common
import { groupBy } from "constants/common";
// icons // icons
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline"; import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
// ui // ui
@ -18,25 +20,27 @@ import { Button } from "ui";
import type { IState } from "types"; import type { IState } from "types";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; onClose: () => void;
data?: IState; data: IState | null;
}; };
const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => { const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, onClose, data }) => {
const [isDeleteLoading, setIsDeleteLoading] = useState(false); const [isDeleteLoading, setIsDeleteLoading] = useState(false);
const { activeWorkspace } = useUser(); const [issuesWithThisStateExist, setIssuesWithThisStateExist] = useState(true);
const { activeWorkspace, issues } = useUser();
const cancelButtonRef = useRef(null); const cancelButtonRef = useRef(null);
const handleClose = () => { const handleClose = () => {
setIsOpen(false); onClose();
setIsDeleteLoading(false); setIsDeleteLoading(false);
}; };
const handleDeletion = async () => { const handleDeletion = async () => {
setIsDeleteLoading(true); setIsDeleteLoading(true);
if (!data || !activeWorkspace) return; if (!data || !activeWorkspace || issuesWithThisStateExist) return;
await stateServices await stateServices
.deleteState(activeWorkspace.slug, data.project, data.id) .deleteState(activeWorkspace.slug, data.project, data.id)
.then(() => { .then(() => {
@ -53,9 +57,11 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
}); });
}; };
const groupedIssues = groupBy(issues?.results ?? [], "state");
useEffect(() => { useEffect(() => {
data && setIsOpen(true); if (data) setIssuesWithThisStateExist(!!groupedIssues[data.id]);
}, [data, setIsOpen]); }, [groupedIssues, data]);
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <Transition.Root show={isOpen} as={React.Fragment}>
@ -109,6 +115,14 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
This action cannot be undone. This action cannot be undone.
</p> </p>
</div> </div>
<div className="mt-2">
{issuesWithThisStateExist && (
<p className="text-sm text-red-500">
There are issues with this state. Please move them to another state
before deleting this state.
</p>
)}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -117,7 +131,7 @@ const ConfirmStateDeletion: React.FC<Props> = ({ isOpen, setIsOpen, data }) => {
type="button" type="button"
onClick={handleDeletion} onClick={handleDeletion}
theme="danger" theme="danger"
disabled={isDeleteLoading} disabled={isDeleteLoading || issuesWithThisStateExist}
className="inline-flex sm:ml-3" className="inline-flex sm:ml-3"
> >
{isDeleteLoading ? "Deleting..." : "Delete"} {isDeleteLoading ? "Deleting..." : "Delete"}

209
apps/app/components/project/issues/BoardView/state/create-update-state-inline.tsx Normal file
View File

@ -0,0 +1,209 @@
import React, { useEffect } from "react";
// swr
import { mutate } from "swr";
// react hook form
import { useForm, Controller } from "react-hook-form";
// react color
import { TwitterPicker } from "react-color";
// headless
import { Popover, Transition } from "@headlessui/react";
// constants
import { GROUP_CHOICES } from "constants/";
import { STATE_LIST } from "constants/fetch-keys";
// services
import stateService from "lib/services/state.service";
// ui
import { Button, Input, Select, Spinner } from "ui";
// types
import type { IState } from "types";
type Props = {
workspaceSlug?: string;
projectId?: string;
data: IState | null;
onClose: () => void;
selectedGroup: StateGroup | null;
};
export type StateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled" | null;
const defaultValues: Partial<IState> = {
name: "",
color: "#000000",
group: "backlog",
};
export const CreateUpdateStateInline: React.FC<Props> = ({
workspaceSlug,
projectId,
data,
onClose,
selectedGroup,
}) => {
const {
register,
handleSubmit,
formState: { errors, isSubmitting },
setError,
watch,
reset,
control,
} = useForm<IState>({
defaultValues,
});
const handleClose = () => {
onClose();
reset({ name: "", color: "#000000", group: "backlog" });
};
const onSubmit = async (formData: IState) => {
if (!workspaceSlug || !projectId || isSubmitting) return;
const payload: IState = {
...formData,
};
if (!data) {
await stateService
.createState(workspaceSlug, projectId, { ...payload })
.then((res) => {
mutate<IState[]>(STATE_LIST(projectId), (prevData) => [...(prevData ?? []), res], false);
handleClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof IState, {
message: err[key].join(", "),
});
});
});
} else {
await stateService
.updateState(workspaceSlug, projectId, data.id, {
...payload,
})
.then((res) => {
mutate<IState[]>(
STATE_LIST(projectId),
(prevData) => {
const newData = prevData?.map((item) => {
if (item.id === res.id) {
return res;
}
return item;
});
return newData;
},
false
);
handleClose();
})
.catch((err) => {
Object.keys(err).map((key) => {
setError(key as keyof IState, {
message: err[key].join(", "),
});
});
});
}
};
useEffect(() => {
if (data === null) return;
reset(data);
}, [data, reset]);
useEffect(() => {
if (!data)
reset({
...defaultValues,
group: selectedGroup ?? "backlog",
});
}, [selectedGroup, data, reset]);
return (
<div className="flex items-center gap-x-2 p-2 bg-gray-50">
<div className="w-8 h-8 shrink-0">
<Popover className="relative w-full h-full flex justify-center items-center bg-gray-200 rounded-xl">
{({ open }) => (
<>
<Popover.Button
className={`group inline-flex items-center text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${
open ? "text-gray-900" : "text-gray-500"
}`}
>
{watch("color") && watch("color") !== "" && (
<span
className="w-4 h-4 rounded"
style={{
backgroundColor: watch("color") ?? "green",
}}
/>
)}
</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 top-full z-50 left-0 mt-3 px-2 w-screen max-w-xs sm:px-0">
<Controller
name="color"
control={control}
render={({ field: { value, onChange } }) => (
<TwitterPicker color={value} onChange={(value) => onChange(value.hex)} />
)}
/>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
</div>
<Input
id="name"
name="name"
register={register}
placeholder="Enter state name"
validations={{
required: true,
}}
error={errors.name}
autoComplete="off"
/>
{data && (
<Select
id="group"
name="group"
error={errors.group}
register={register}
validations={{
required: true,
}}
options={Object.keys(GROUP_CHOICES).map((key) => ({
value: key,
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
}))}
/>
)}
<Input
id="description"
name="description"
register={register}
placeholder="Enter state description"
error={errors.description}
autoComplete="off"
/>
<Button theme="secondary" onClick={handleClose}>
Cancel
</Button>
<Button theme="primary" disabled={isSubmitting} onClick={handleSubmit(onSubmit)}>
{isSubmitting ? "Loading..." : data ? "Update" : "Create"}
</Button>
</div>
);
};

21
apps/app/components/project/issues/BoardView/state/CreateUpdateStateModal.tsx → apps/app/components/project/issues/BoardView/state/create-update-state-modal.tsx
View File

@ -11,10 +11,12 @@ import { Dialog, Popover, Transition } from "@headlessui/react";
import stateService from "lib/services/state.service"; import stateService from "lib/services/state.service";
// fetch keys // fetch keys
import { STATE_LIST } from "constants/fetch-keys"; import { STATE_LIST } from "constants/fetch-keys";
// constants
import { GROUP_CHOICES } from "constants/";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// ui // ui
import { Button, Input, TextArea } from "ui"; import { Button, Input, Select, TextArea } from "ui";
// icons // icons
import { ChevronDownIcon } from "@heroicons/react/24/outline"; import { ChevronDownIcon } from "@heroicons/react/24/outline";
@ -31,6 +33,7 @@ const defaultValues: Partial<IState> = {
name: "", name: "",
description: "", description: "",
color: "#000000", color: "#000000",
group: "backlog",
}; };
const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => { const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, handleClose }) => {
@ -161,6 +164,22 @@ const CreateUpdateStateModal: React.FC<Props> = ({ isOpen, data, projectId, hand
}} }}
/> />
</div> </div>
<div>
<Select
id="group"
label="Group"
name="group"
error={errors.group}
register={register}
validations={{
required: "Group is required",
}}
options={Object.keys(GROUP_CHOICES).map((key) => ({
value: key,
label: GROUP_CHOICES[key as keyof typeof GROUP_CHOICES],
}))}
/>
</div>
<div> <div>
<Popover className="relative"> <Popover className="relative">
{({ open }) => ( {({ open }) => (

3
apps/app/components/project/issues/confirm-issue-deletion.tsx
View File

@ -4,7 +4,7 @@ import { mutate } from "swr";
// headless ui // headless ui
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// fetching keys // fetching keys
import { PROJECT_ISSUES_LIST } from "constants/fetch-keys"; import { CYCLE_ISSUES, PROJECT_ISSUES_LIST } from "constants/fetch-keys";
// services // services
import issueServices from "lib/services/issues.service"; import issueServices from "lib/services/issues.service";
// hooks // hooks
@ -55,6 +55,7 @@ const ConfirmIssueDeletion: React.FC<Props> = ({ isOpen, handleClose, data }) =>
}, },
false false
); );
mutate(CYCLE_ISSUES(data.issue_cycle.id));
setToastAlert({ setToastAlert({
title: "Success", title: "Success",
type: "success", type: "success",

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

@ -25,7 +25,7 @@ import SelectProject from "components/project/issues/create-update-issue-modal/s
import SelectPriority from "components/project/issues/create-update-issue-modal/select-priority"; import SelectPriority from "components/project/issues/create-update-issue-modal/select-priority";
import SelectAssignee from "components/project/issues/create-update-issue-modal/select-assignee"; import SelectAssignee from "components/project/issues/create-update-issue-modal/select-assignee";
import SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue"; import SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue";
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal"; import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal"; import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
// types // types
import type { IIssue, IssueResponse } from "types"; import type { IIssue, IssueResponse } from "types";

19
apps/app/components/project/issues/issue-detail/comment/IssueCommentCard.tsx
View File

@ -1,16 +1,12 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
// next // next
import Image from "next/image"; import Image from "next/image";
// swr
import { mutate } from "swr";
// headless ui // headless ui
import { Menu } from "@headlessui/react"; import { Menu } from "@headlessui/react";
// react hook form // react hook form
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// fetch keys
import { PROJECT_ISSUES_COMMENTS } from "constants/fetch-keys";
// common // common
import { timeAgo } from "constants/common"; import { timeAgo } from "constants/common";
// ui // ui
@ -42,16 +38,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
const onEnter = (formData: IIssueComment) => { const onEnter = (formData: IIssueComment) => {
if (isSubmitting) return; if (isSubmitting) return;
mutate<IIssueComment[]>(
PROJECT_ISSUES_COMMENTS,
(prevData) => {
const newData = prevData ?? [];
const index = newData.findIndex((comment) => comment.id === formData.id);
newData[index] = formData;
return [...newData];
},
false
);
setIsEditing(false); setIsEditing(false);
onSubmit(formData); onSubmit(formData);
}; };
@ -155,11 +141,6 @@ const CommentCard: React.FC<Props> = ({ comment, onSubmit, handleCommentDeletion
className="w-full text-left py-2 pl-2" className="w-full text-left py-2 pl-2"
type="button" type="button"
onClick={() => { onClick={() => {
mutate<IIssueComment[]>(
PROJECT_ISSUES_COMMENTS,
(prevData) => (prevData ?? []).filter((c) => c.id !== comment.id),
false
);
handleCommentDeletion(comment.id); handleCommentDeletion(comment.id);
}} }}
> >

20
apps/app/components/project/issues/issue-detail/comment/IssueCommentSection.tsx
View File

@ -13,8 +13,6 @@ import CommentCard from "components/project/issues/issue-detail/comment/IssueCom
import { TextArea, Button, Spinner } from "ui"; import { TextArea, Button, Spinner } from "ui";
// types // types
import type { IIssueComment } from "types"; import type { IIssueComment } from "types";
// icons
import UploadingIcon from "public/animated-icons/uploading.json";
type Props = { type Props = {
comments?: IIssueComment[]; comments?: IIssueComment[];
@ -41,11 +39,10 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
.createIssueComment(workspaceSlug, projectId, issueId, formData) .createIssueComment(workspaceSlug, projectId, issueId, formData)
.then((response) => { .then((response) => {
console.log(response); console.log(response);
mutate<IIssueComment[]>( mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => [
PROJECT_ISSUES_COMMENTS, response,
(prevData) => [...(prevData ?? []), response], ...(prevData ?? []),
false ]);
);
reset(defaultValues); reset(defaultValues);
}) })
.catch((error) => { .catch((error) => {
@ -58,6 +55,12 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
.patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment) .patchIssueComment(workspaceSlug, projectId, issueId, comment.id, comment)
.then((response) => { .then((response) => {
console.log(response); console.log(response);
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) => {
const newData = prevData ?? [];
const index = newData.findIndex((comment) => comment.id === response.id);
newData[index] = response;
return [...newData];
});
}); });
}; };
@ -65,6 +68,9 @@ const IssueCommentSection: React.FC<Props> = ({ comments, issueId, projectId, wo
await issuesServices await issuesServices
.deleteIssueComment(workspaceSlug, projectId, issueId, commentId) .deleteIssueComment(workspaceSlug, projectId, issueId, commentId)
.then((response) => { .then((response) => {
mutate<IIssueComment[]>(PROJECT_ISSUES_COMMENTS(issueId), (prevData) =>
(prevData ?? []).filter((c) => c.id !== commentId)
);
console.log(response); console.log(response);
}); });
}; };

3
apps/app/components/project/issues/list-view/index.tsx
View File

@ -93,6 +93,9 @@ const ListView: React.FC<Props> = ({
<h2 className="font-medium leading-5 capitalize"> <h2 className="font-medium leading-5 capitalize">
{singleGroup === null || singleGroup === "null" {singleGroup === null || singleGroup === "null"
? selectedGroup === "priority" && "No priority" ? selectedGroup === "priority" && "No priority"
: selectedGroup === "created_by"
? people?.find((p) => p.member.id === singleGroup)?.member
?.first_name ?? "Loading..."
: addSpaceIfCamelCase(singleGroup)} : addSpaceIfCamelCase(singleGroup)}
</h2> </h2>
) : ( ) : (

144
apps/app/components/project/settings/StatesSettings.tsx
View File

@ -1,74 +1,120 @@
// react import React, { useState } from "react";
import { useState } from "react";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// components // components
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal"; import {
// ui StateGroup,
import { Button } from "ui"; CreateUpdateStateInline,
} from "components/project/issues/BoardView/state/create-update-state-inline";
import ConfirmStateDeletion from "components/project/issues/BoardView/state/confirm-state-delete";
// icons // icons
import { PencilSquareIcon, PlusIcon } from "@heroicons/react/24/outline"; import { PencilSquareIcon, PlusIcon, TrashIcon } from "@heroicons/react/24/outline";
// constants // constants
import { addSpaceIfCamelCase } from "constants/common"; import { addSpaceIfCamelCase, groupBy } from "constants/common";
// types
import type { IState } from "types";
type Props = { type Props = {
projectId: string | string[] | undefined; projectId: string | string[] | undefined;
}; };
const StatesSettings: React.FC<Props> = ({ projectId }) => { const StatesSettings: React.FC<Props> = ({ projectId }) => {
const [isCreateStateModal, setIsCreateStateModal] = useState(false); const [activeGroup, setActiveGroup] = useState<StateGroup>(null);
const [selectedState, setSelectedState] = useState<string | undefined>(); const [selectedState, setSelectedState] = useState<string | null>(null);
const [selectDeleteState, setSelectDeleteState] = useState<string | null>(null);
const { states } = useUser(); const { states, activeWorkspace } = useUser();
const groupedStates: {
[key: string]: Array<IState>;
} = groupBy(states ?? [], "group");
return ( return (
<> <>
<CreateUpdateStateModal <ConfirmStateDeletion
isOpen={isCreateStateModal || Boolean(selectedState)} isOpen={!!selectDeleteState}
handleClose={() => { data={states?.find((state) => state.id === selectDeleteState) ?? null}
setSelectedState(undefined); onClose={() => setSelectDeleteState(null)}
setIsCreateStateModal(false);
}}
projectId={projectId as string}
data={selectedState ? states?.find((state) => state.id === selectedState) : undefined}
/> />
<section className="space-y-5"> <section className="space-y-5">
<div> <div>
<h3 className="text-lg font-medium leading-6 text-gray-900">State</h3> <h3 className="text-lg font-medium leading-6 text-gray-900">State</h3>
<p className="mt-1 text-sm text-gray-500">Manage the state of this project.</p> <p className="mt-1 text-sm text-gray-500">Manage the state of this project.</p>
</div> </div>
<div className="flex justify-between gap-3"> <div className="flex flex-col justify-between gap-3">
<div className="w-full space-y-5"> {Object.keys(groupedStates).map((key) => (
{states?.map((state) => ( <React.Fragment key={key}>
<div <div className="flex justify-between w-full md:w-2/3">
key={state.id} <p className="font-medium capitalize">{key} states</p>
className="bg-white px-4 py-2 rounded flex justify-between items-center" <button
> type="button"
<div className="flex items-center gap-x-2"> onClick={() => setActiveGroup(key as keyof StateGroup)}
<div className="flex items-center gap-x-2 text-theme"
className="w-3 h-3 rounded-full" >
style={{ <PlusIcon className="h-4 w-4 text-theme" />
backgroundColor: state.color, <span>Add</span>
}} </button>
></div>
<h4>{addSpaceIfCamelCase(state.name)}</h4>
</div>
<div>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-5 w-5 text-gray-400" />
</button>
</div>
</div> </div>
))} <div className="w-full md:w-2/3 space-y-1 border p-1 rounded-xl bg-gray-50">
<Button <div className="w-full">
type="button" {groupedStates[key]?.map((state) =>
className="flex items-center gap-x-1" state.id !== selectedState ? (
onClick={() => setIsCreateStateModal(true)} <div
> key={state.id}
<PlusIcon className="h-4 w-4" /> className={`bg-gray-50 px-5 py-4 flex justify-between items-center border-b ${
<span>Add State</span> Boolean(activeGroup !== key) ? "last:border-0" : ""
</Button> }`}
</div> >
<div className="flex items-center gap-x-8">
<div
className="w-6 h-6 rounded-full"
style={{
backgroundColor: state.color,
}}
></div>
<h4>{addSpaceIfCamelCase(state.name)}</h4>
</div>
<div className="flex gap-x-2">
<button type="button" onClick={() => setSelectDeleteState(state.id)}>
<TrashIcon className="h-5 w-5 text-red-400" />
</button>
<button type="button" onClick={() => setSelectedState(state.id)}>
<PencilSquareIcon className="h-5 w-5 text-gray-400" />
</button>
</div>
</div>
) : (
<div className={`border-b last:border-b-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>
{key === activeGroup && (
<CreateUpdateStateInline
projectId={projectId as string}
onClose={() => {
setActiveGroup(null);
setSelectedState(null);
}}
workspaceSlug={activeWorkspace?.slug}
data={null}
selectedGroup={key as keyof StateGroup}
/>
)}
</div>
</React.Fragment>
))}
</div> </div>
</section> </section>
</> </>

56
apps/app/components/socialbuttons/google-login.tsx
View File

@ -1,4 +1,4 @@
import { FC, CSSProperties } from "react"; import { FC, CSSProperties, useEffect, useRef, useCallback } from "react";
// next // next
import Script from "next/script"; import Script from "next/script";
@ -10,32 +10,38 @@ export interface IGoogleLoginButton {
} }
export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => { export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
const googleSignInButton = useRef<HTMLDivElement>(null);
const loadScript = useCallback(() => {
if (!googleSignInButton.current) return;
window?.google?.accounts.id.initialize({
client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
callback: props.onSuccess as any,
});
window?.google?.accounts.id.renderButton(
googleSignInButton.current,
{
type: "standard",
theme: "outline",
size: "large",
logo_alignment: "center",
width: document.getElementById("googleSignInButton")?.offsetWidth,
text: "continue_with",
} as GsiButtonConfiguration // customization attributes
);
window?.google?.accounts.id.prompt(); // also display the One Tap dialog
}, [props.onSuccess]);
useEffect(() => {
if (window?.google?.accounts?.id) {
loadScript();
}
}, [loadScript]);
return ( return (
<> <>
<Script <Script src="https://accounts.google.com/gsi/client" async defer onLoad={loadScript} />
src="https://accounts.google.com/gsi/client" <div className="w-full" id="googleSignInButton" ref={googleSignInButton}></div>
async
defer
onLoad={() => {
window?.google?.accounts.id.initialize({
client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
callback: props.onSuccess as any,
});
window?.google?.accounts.id.renderButton(
document.getElementById("googleSignInButton") as HTMLElement,
{
type: "standard",
theme: "outline",
size: "large",
logo_alignment: "center",
width: document.getElementById("googleSignInButton")?.offsetWidth,
text: "continue_with",
} as GsiButtonConfiguration // customization attributes
);
window?.google?.accounts.id.prompt(); // also display the One Tap dialog
}}
/>
<div className="w-full" id="googleSignInButton"></div>
</> </>
); );
}; };

2
apps/app/constants/common.ts
View File

@ -26,7 +26,7 @@ export const renderShortNumericDateFormat = (date: string | Date) => {
export const groupBy = (array: any[], key: string) => { export const groupBy = (array: any[], key: string) => {
const innerKey = key.split("."); // split the key by dot const innerKey = key.split("."); // split the key by dot
return array.reduce((result, currentValue) => { return array.reduce((result, currentValue) => {
const key = innerKey.reduce((obj, i) => obj[i], currentValue); // get the value of the inner key const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key
(result[key] = result[key] || []).push(currentValue); (result[key] = result[key] || []).push(currentValue);
return result; return result;
}, {}); }, {});

4
apps/app/constants/fetch-keys.ts
View File

@ -5,6 +5,7 @@ export const USER_WORKSPACES = "USER_WORKSPACES";
export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`; export const WORKSPACE_MEMBERS = (workspaceSlug: string) => `WORKSPACE_MEMBERS_${workspaceSlug}`;
export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS"; export const WORKSPACE_INVITATIONS = "WORKSPACE_INVITATIONS";
export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION"; export const WORKSPACE_INVITATION = "WORKSPACE_INVITATION";
export const LAST_ACTIVE_WORKSPACE_AND_PROJECTS = "LAST_ACTIVE_WORKSPACE_AND_PROJECTS";
export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`; export const PROJECTS_LIST = (workspaceSlug: string) => `PROJECTS_LIST_${workspaceSlug}`;
export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`; export const PROJECT_DETAILS = (projectId: string) => `PROJECT_DETAILS_${projectId}`;
@ -17,7 +18,7 @@ export const PROJECT_ISSUES_LIST = (workspaceSlug: string, projectId: string) =>
export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`; export const PROJECT_ISSUES_DETAILS = (issueId: string) => `PROJECT_ISSUES_DETAILS_${issueId}`;
export const PROJECT_ISSUES_PROPERTIES = (projectId: string) => export const PROJECT_ISSUES_PROPERTIES = (projectId: string) =>
`PROJECT_ISSUES_PROPERTIES_${projectId}`; `PROJECT_ISSUES_PROPERTIES_${projectId}`;
export const PROJECT_ISSUES_COMMENTS = "PROJECT_ISSUES_COMMENTS"; export const PROJECT_ISSUES_COMMENTS = (issueId: string) => `PROJECT_ISSUES_COMMENTS_${issueId}`;
export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY"; export const PROJECT_ISSUES_ACTIVITY = "PROJECT_ISSUES_ACTIVITY";
export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`; export const PROJECT_ISSUE_BY_STATE = (projectId: string) => `PROJECT_ISSUE_BY_STATE_${projectId}`;
export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`; export const PROJECT_ISSUE_LABELS = (projectId: string) => `PROJECT_ISSUE_LABELS_${projectId}`;
@ -30,6 +31,7 @@ export const STATE_LIST = (projectId: string) => `STATE_LIST_${projectId}`;
export const STATE_DETAIL = "STATE_DETAIL"; export const STATE_DETAIL = "STATE_DETAIL";
export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`; export const USER_ISSUE = (workspaceSlug: string) => `USER_ISSUE_${workspaceSlug}`;
export const USER_PROJECT_VIEW = (projectId: string) => `USER_PROJECT_VIEW_${projectId}`;
export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`; export const MODULE_LIST = (projectId: string) => `MODULE_LIST_${projectId}`;
export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`; export const MODULE_ISSUES = (moduleId: string) => `MODULE_ISSUES_${moduleId}`;

8
apps/app/constants/index.ts
View File

@ -8,3 +8,11 @@ export const ROLE = {
}; };
export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" }; export const NETWORK_CHOICES = { "0": "Secret", "2": "Public" };
export const GROUP_CHOICES = {
backlog: "Backlog",
unstarted: "Unstarted",
started: "Started",
completed: "Completed",
cancelled: "Cancelled",
};

110
apps/app/contexts/theme.context.tsx
View File

@ -1,4 +1,6 @@
import React, { createContext, useCallback, useReducer, useEffect } from "react"; import React, { createContext, useCallback, useReducer, useEffect } from "react";
// swr
import useSWR from "swr";
// constants // constants
import { import {
TOGGLE_SIDEBAR, TOGGLE_SIDEBAR,
@ -10,6 +12,12 @@ import {
} from "constants/theme.context.constants"; } from "constants/theme.context.constants";
// components // components
import ToastAlert from "components/toast-alert"; import ToastAlert from "components/toast-alert";
// hooks
import useUser from "lib/hooks/useUser";
// constants
import { PROJECT_MEMBERS, USER_PROJECT_VIEW } from "constants/fetch-keys";
// services
import projectService from "lib/services/project.service";
export const themeContext = createContext<ContextType>({} as ContextType); export const themeContext = createContext<ContextType>({} as ContextType);
@ -122,53 +130,89 @@ export const reducer: ReducerFunctionType = (state, action) => {
export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { export const ThemeContextProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, initialState);
const { activeProject, activeWorkspace, user } = useUser();
const { data: projectMember } = useSWR(
activeWorkspace && activeProject ? PROJECT_MEMBERS(activeProject.id) : null,
activeWorkspace && activeProject
? () => projectService.projectMembers(activeWorkspace.slug, activeProject.id)
: null
);
const toggleCollapsed = useCallback(() => { const toggleCollapsed = useCallback(() => {
dispatch({ dispatch({
type: TOGGLE_SIDEBAR, type: TOGGLE_SIDEBAR,
}); });
}, []); }, []);
const setIssueView = useCallback((display: "list" | "kanban") => { const saveDataToServer = useCallback(() => {
dispatch({ if (!activeProject || !activeWorkspace) return;
type: SET_ISSUE_VIEW, projectService
payload: { .setProjectView(activeWorkspace.slug, activeProject.id, state)
issueView: display, .then((res) => {
}, console.log("saved", res);
}); })
}, []); .catch((error) => {});
}, [activeProject, activeWorkspace, state]);
const setGroupByProperty = useCallback((property: NestedKeyOf<IIssue> | null) => { const setIssueView = useCallback(
dispatch({ (display: "list" | "kanban") => {
type: SET_GROUP_BY_PROPERTY, dispatch({
payload: { type: SET_ISSUE_VIEW,
groupByProperty: property, payload: {
}, issueView: display,
}); },
}, []); });
saveDataToServer();
},
[saveDataToServer]
);
const setOrderBy = useCallback((property: NestedKeyOf<IIssue> | null) => { const setGroupByProperty = useCallback(
dispatch({ (property: NestedKeyOf<IIssue> | null) => {
type: SET_ORDER_BY_PROPERTY, dispatch({
payload: { type: SET_GROUP_BY_PROPERTY,
orderBy: property, payload: {
}, groupByProperty: property,
}); },
}, []); });
saveDataToServer();
},
[saveDataToServer]
);
const setFilterIssue = useCallback((property: "activeIssue" | "backlogIssue" | null) => { const setOrderBy = useCallback(
dispatch({ (property: NestedKeyOf<IIssue> | null) => {
type: SET_FILTER_ISSUES, dispatch({
payload: { type: SET_ORDER_BY_PROPERTY,
filterIssue: property, payload: {
}, orderBy: property,
}); },
}, []); });
saveDataToServer();
},
[saveDataToServer]
);
const setFilterIssue = useCallback(
(property: "activeIssue" | "backlogIssue" | null) => {
dispatch({
type: SET_FILTER_ISSUES,
payload: {
filterIssue: property,
},
});
saveDataToServer();
},
[saveDataToServer]
);
useEffect(() => { useEffect(() => {
dispatch({ dispatch({
type: REHYDRATE_THEME, type: REHYDRATE_THEME,
payload: projectMember?.find((member) => member.member.id === user?.id)?.view_props,
}); });
}, []); }, [projectMember, user]);
return ( return (
<themeContext.Provider <themeContext.Provider

15
apps/app/layouts/app-layout.tsx
View File

@ -1,9 +1,4 @@
// react import React, { useState } from "react";
import React, { useEffect, useState } from "react";
// next
import { useRouter } from "next/router";
// hooks
import useUser from "lib/hooks/useUser";
// layouts // layouts
import Container from "layouts/container"; import Container from "layouts/container";
import Sidebar from "layouts/navbar/main-siderbar"; import Sidebar from "layouts/navbar/main-siderbar";
@ -25,14 +20,6 @@ const AppLayout: React.FC<Props> = ({
}) => { }) => {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const router = useRouter();
const { user, isUserLoading } = useUser();
useEffect(() => {
if (!isUserLoading && (!user || user === null)) router.push("/signin");
}, [isUserLoading, user, router]);
return ( return (
<Container meta={meta}> <Container meta={meta}>
<CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} /> <CreateProjectModal isOpen={isOpen} setIsOpen={setIsOpen} />

105
apps/app/lib/hooks/useMyIssueFilter.tsx Normal file
View File

@ -0,0 +1,105 @@
import { useEffect, useState } from "react";
// hooks
import useUser from "./useUser";
// types
import { Properties, NestedKeyOf, IIssue } from "types";
// services
import userService from "lib/services/user.service";
// common
import { groupBy } from "constants/common";
import { PRIORITIES } from "constants/";
const initialValues: Properties = {
key: true,
state: true,
assignee: true,
priority: false,
start_date: false,
target_date: false,
cycle: false,
};
const useMyIssuesProperties = (issues?: IIssue[]) => {
const [properties, setProperties] = useState<Properties>(initialValues);
const [groupByProperty, setGroupByProperty] = useState<NestedKeyOf<IIssue> | null>(null);
const { states, user } = useUser();
useEffect(() => {
if (!user) return;
setProperties({ ...initialValues, ...user.my_issues_prop?.properties });
setGroupByProperty(user.my_issues_prop?.groupBy ?? null);
}, [user]);
let groupedByIssues: {
[key: string]: IIssue[];
} = {
...(groupByProperty === "state_detail.name"
? Object.fromEntries(
states
?.sort((a, b) => a.sequence - b.sequence)
?.map((state) => [
state.name,
issues?.filter((issue) => issue.state === state.name) ?? [],
]) ?? []
)
: groupByProperty === "priority"
? Object.fromEntries(
PRIORITIES.map((priority) => [
priority,
issues?.filter((issue) => issue.priority === priority) ?? [],
])
)
: {}),
...groupBy(issues ?? [], groupByProperty ?? ""),
};
const setMyIssueProperty = (key: keyof Properties) => {
if (!user) return;
userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
setProperties((prevData) => ({
...prevData,
[key]: !prevData[key],
}));
localStorage.setItem(
"my_issues_prop",
JSON.stringify({
properties: {
...properties,
[key]: !properties[key],
},
groupBy: groupByProperty,
})
);
};
const setMyIssueGroupByProperty = (groupByProperty: NestedKeyOf<IIssue> | null) => {
if (!user) return;
userService.updateUser({ my_issues_prop: { properties, groupBy: groupByProperty } });
setGroupByProperty(groupByProperty);
localStorage.setItem(
"my_issues_prop",
JSON.stringify({ properties, groupBy: groupByProperty })
);
};
useEffect(() => {
const viewProps = localStorage.getItem("my_issues_prop");
if (viewProps) {
const { properties, groupBy } = JSON.parse(viewProps);
setProperties(properties);
setGroupByProperty(groupBy);
}
}, []);
return {
filteredIssues: groupedByIssues,
groupByProperty,
properties,
setMyIssueProperty,
setMyIssueGroupByProperty,
} as const;
};
export default useMyIssuesProperties;

16
apps/app/lib/services/project.service.ts
View File

@ -132,6 +132,20 @@ class ProjectServices extends APIService {
}); });
} }
async getProjectMember(
workspacSlug: string,
projectId: string,
memberId: string
): Promise<IProjectMember> {
return this.get(PROJECT_MEMBER_DETAIL(workspacSlug, projectId, memberId))
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async updateProjectMember( async updateProjectMember(
workspacSlug: string, workspacSlug: string,
projectId: string, projectId: string,
@ -207,7 +221,7 @@ class ProjectServices extends APIService {
projectId: string, projectId: string,
data: ProjectViewTheme data: ProjectViewTheme
): Promise<any> { ): Promise<any> {
await this.patch(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data) await this.post(PROJECT_VIEW_ENDPOINT(workspacSlug, projectId), data)
.then((response) => { .then((response) => {
return response?.data; return response?.data;
}) })

3
apps/app/lib/services/user.service.ts
View File

@ -1,6 +1,7 @@
// services // services
import { USER_ENDPOINT, USER_ISSUES_ENDPOINT, USER_ONBOARD_ENDPOINT } from "constants/api-routes"; import { USER_ENDPOINT, USER_ISSUES_ENDPOINT, USER_ONBOARD_ENDPOINT } from "constants/api-routes";
import APIService from "lib/services/api.service"; import APIService from "lib/services/api.service";
import type { IUser } from "types";
const { NEXT_PUBLIC_API_BASE_URL } = process.env; const { NEXT_PUBLIC_API_BASE_URL } = process.env;
@ -38,7 +39,7 @@ class UserService extends APIService {
}); });
} }
async updateUser(data = {}): Promise<any> { async updateUser(data: Partial<IUser>): Promise<any> {
return this.patch(USER_ENDPOINT, data) return this.patch(USER_ENDPOINT, data)
.then((response) => { .then((response) => {
return response?.data; return response?.data;

17
apps/app/lib/services/workspace.service.ts
View File

@ -19,7 +19,12 @@ import APIService from "lib/services/api.service";
const { NEXT_PUBLIC_API_BASE_URL } = process.env; const { NEXT_PUBLIC_API_BASE_URL } = process.env;
// types // types
import { IWorkspace, IWorkspaceMember, IWorkspaceMemberInvitation } from "types"; import {
IWorkspace,
IWorkspaceMember,
IWorkspaceMemberInvitation,
ILastActiveWorkspaceDetails,
} from "types";
class WorkspaceService extends APIService { class WorkspaceService extends APIService {
constructor() { constructor() {
@ -98,6 +103,16 @@ class WorkspaceService extends APIService {
}); });
} }
async getLastActiveWorkspaceAndProjects(): Promise<ILastActiveWorkspaceDetails> {
return this.get(LAST_ACTIVE_WORKSPACE_AND_PROJECTS)
.then((response) => {
return response?.data;
})
.catch((error) => {
throw error?.response?.data;
});
}
async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> { async userWorkspaceInvitations(): Promise<IWorkspaceMemberInvitation[]> {
return this.get(USER_WORKSPACE_INVITATIONS) return this.get(USER_WORKSPACE_INVITATIONS)
.then((response) => { .then((response) => {

9
apps/app/pages/me/my-issues.tsx
View File

@ -1,17 +1,18 @@
// react // react
import React from "react"; import React from "react";
// next // next
import type { NextPage } from "next";
import Link from "next/link"; import Link from "next/link";
import type { NextPage } from "next";
import Image from "next/image"; import Image from "next/image";
// swr // swr
import useSWR from "swr"; import useSWR from "swr";
// headless ui
import { Disclosure, Listbox, Menu, Popover, Transition } from "@headlessui/react";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// headless ui // headless ui
import { Disclosure, Listbox, Menu, Popover, Transition } from "@headlessui/react";
// ui // ui
import { Spinner, Breadcrumbs, BreadcrumbItem, EmptySpace, EmptySpaceItem, HeaderButton } from "ui"; import { Spinner, Breadcrumbs, BreadcrumbItem, EmptySpace, EmptySpaceItem, HeaderButton } from "ui";
// icons // icons
@ -31,6 +32,7 @@ import workspaceService from "lib/services/workspace.service";
import useIssuesProperties from "lib/hooks/useIssuesProperties"; import useIssuesProperties from "lib/hooks/useIssuesProperties";
// hoc // hoc
import withAuth from "lib/hoc/withAuthWrapper"; import withAuth from "lib/hoc/withAuthWrapper";
import useMyIssuesProperties from "lib/hooks/useMyIssueFilter";
// components // components
import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown"; import ChangeStateDropdown from "components/project/issues/my-issues/ChangeStateDropdown";
// types // types
@ -97,6 +99,9 @@ const MyIssues: NextPage = () => {
}); });
}; };
const { filteredIssues, setMyIssueGroupByProperty, setMyIssueProperty, groupByProperty } =
useMyIssuesProperties(myIssues);
return ( return (
<AppLayout <AppLayout
breadcrumbs={ breadcrumbs={

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

@ -31,18 +31,20 @@ import { ArrowPathIcon, ChevronDownIcon, ListBulletIcon } from "@heroicons/react
import { import {
CycleIssueResponse, CycleIssueResponse,
IIssue, IIssue,
IssueResponse,
NestedKeyOf, NestedKeyOf,
Properties, Properties,
SelectIssue, SelectIssue,
SelectSprintType, SelectSprintType,
} from "types"; } from "types";
// fetch-keys // fetch-keys
import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys"; import { CYCLE_ISSUES, PROJECT_ISSUES_LIST, PROJECT_MEMBERS } from "constants/fetch-keys";
// constants // constants
import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common"; import { classNames, replaceUnderscoreIfSnakeCase } from "constants/common";
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal"; import CycleIssuesListModal from "components/project/cycles/cycle-issues-list-modal";
import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion"; import ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [ const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
{ name: "State", key: "state_detail.name" }, { name: "State", key: "state_detail.name" },
@ -82,6 +84,7 @@ const SingleCycle: React.FC<Props> = () => {
const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>(); const [selectedCycle, setSelectedCycle] = useState<SelectSprintType>();
const [selectedIssues, setSelectedIssues] = useState<SelectIssue>(); const [selectedIssues, setSelectedIssues] = useState<SelectIssue>();
const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false); const [cycleIssuesListModal, setCycleIssuesListModal] = useState(false);
const [deleteIssue, setDeleteIssue] = useState<string | undefined>(undefined);
const { activeWorkspace, activeProject, cycles, issues } = useUser(); const { activeWorkspace, activeProject, cycles, issues } = useUser();
@ -118,6 +121,18 @@ const SingleCycle: React.FC<Props> = () => {
} }
); );
const partialUpdateIssue = (formData: Partial<IIssue>, issueId: string) => {
if (!activeWorkspace || !activeProject) return;
issuesServices
.patchIssue(activeWorkspace.slug, activeProject.id, issueId, formData)
.then((response) => {
mutate(CYCLE_ISSUES(cycleId as string));
})
.catch((error) => {
console.log(error);
});
};
const { const {
issueView, issueView,
setIssueView, setIssueView,
@ -230,6 +245,11 @@ const SingleCycle: React.FC<Props> = () => {
issues={issues} issues={issues}
cycleId={cycleId as string} cycleId={cycleId as string}
/> />
<ConfirmIssueDeletion
handleClose={() => setDeleteIssue(undefined)}
isOpen={!!deleteIssue}
data={issues?.results.find((issue) => issue.id === deleteIssue)}
/>
<AppLayout <AppLayout
breadcrumbs={ breadcrumbs={
<Breadcrumbs> <Breadcrumbs>
@ -420,6 +440,8 @@ const SingleCycle: React.FC<Props> = () => {
members={members} members={members}
openCreateIssueModal={openCreateIssueModal} openCreateIssueModal={openCreateIssueModal}
openIssuesListModal={openIssuesListModal} openIssuesListModal={openIssuesListModal}
handleDeleteIssue={setDeleteIssue}
partialUpdateIssue={partialUpdateIssue}
/> />
</div> </div>
)} )}

2
apps/app/pages/projects/[projectId]/issues/[issueId].tsx
View File

@ -112,7 +112,7 @@ const IssueDetail: NextPage = () => {
); );
const { data: issueComments } = useSWR<IIssueComment[]>( const { data: issueComments } = useSWR<IIssueComment[]>(
activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS : null, activeWorkspace && projectId && issueId ? PROJECT_ISSUES_COMMENTS(issueId as string) : null,
activeWorkspace && projectId && issueId activeWorkspace && projectId && issueId
? () => ? () =>
issuesServices.getIssueComments( issuesServices.getIssueComments(

1
apps/app/pages/projects/[projectId]/issues/index.tsx
View File

@ -49,6 +49,7 @@ import { PROJECT_ISSUES_LIST } from "constants/fetch-keys";
const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [ const groupByOptions: Array<{ name: string; key: NestedKeyOf<IIssue> | null }> = [
{ name: "State", key: "state_detail.name" }, { name: "State", key: "state_detail.name" },
{ name: "Priority", key: "priority" }, { name: "Priority", key: "priority" },
{ name: "Cycle", key: "issue_cycle.cycle_detail.name" },
{ name: "Created By", key: "created_by" }, { name: "Created By", key: "created_by" },
{ name: "None", key: null }, { name: "None", key: null },
]; ];

9
apps/app/pages/workspace/settings.tsx
View File

@ -223,7 +223,14 @@ const WorkspaceSettings = () => {
</div> </div>
</Tab.Panel> </Tab.Panel>
<Tab.Panel> <Tab.Panel>
<div> <div className="space-y-3">
<h2 className="text-2xl text-red-500 font-semibold">Danger Zone</h2>
<p className="w-full md:w-1/2">
The danger zone of the workspace delete page is a critical area that requires
careful consideration and attention. When deleting a workspace, all of the
data and resources within that workspace will be permanently removed and
cannot be recovered.
</p>
<Button theme="danger" onClick={() => setIsOpen(true)}> <Button theme="danger" onClick={() => setIsOpen(true)}>
Delete the workspace Delete the workspace
</Button> </Button>

15
apps/app/types/issues.d.ts vendored
View File

@ -11,6 +11,19 @@ export interface IssueResponse {
results: IIssue[]; results: IIssue[];
} }
export interface IIssueCycle {
id: string;
cycle_detail: ICycle;
created_at: Date;
updated_at: Date;
created_by: string;
updated_by: string;
project: string;
workspace: string;
issue: string;
cycle: string;
}
export interface IIssue { export interface IIssue {
id: string; id: string;
state_detail: IState; state_detail: IState;
@ -60,6 +73,8 @@ export interface IIssue {
blocked_issue_details: any[]; blocked_issue_details: any[];
sprints: string | null; sprints: string | null;
cycle: string | null; cycle: string | null;
issue_cycle: IIssueCycle;
} }
export interface BlockeIssue { export interface BlockeIssue {

8
apps/app/types/users.d.ts vendored
View File

@ -1,3 +1,5 @@
import { IIssue, NestedKeyOf, Properties } from "./";
export interface IUser { export interface IUser {
id: readonly string; id: readonly string;
last_login: readonly Date; last_login: readonly Date;
@ -14,6 +16,12 @@ export interface IUser {
created_location: readonly string; created_location: readonly string;
is_email_verified: boolean; is_email_verified: boolean;
token: string; token: string;
my_issues_prop?: {
properties: Properties;
groupBy: NestedKeyOf<IIssue> | null;
};
[...rest: string]: any; [...rest: string]: any;
} }

7
apps/app/types/workspace.d.ts vendored
View File

@ -1,4 +1,4 @@
import type { IUser, IUserLite } from "./"; import type { IProjectMember, IUser, IUserLite } from "./";
export interface IWorkspace { export interface IWorkspace {
readonly id: string; readonly id: string;
@ -36,3 +36,8 @@ export interface IWorkspaceMember {
created_by: string; created_by: string;
updated_by: string; updated_by: string;
} }
export interface ILastActiveWorkspaceDetails {
workspace_details: IWorkspace;
project_details?: IProjectMember[];
}

7
yarn.lock
View File

@ -778,7 +778,12 @@ camelcase-css@^2.0.1:
resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5" resolved "https://registry.yarnpkg.com/camelcase-css/-/camelcase-css-2.0.1.tgz#ee978f6947914cc30c6b44741b6ed1df7f043fd5"
integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA== integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
caniuse-lite@^1.0.30001332, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426: caniuse-lite@^1.0.30001332:
version "1.0.30001439"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001439.tgz#ab7371faeb4adff4b74dad1718a6fd122e45d9cb"
integrity sha512-1MgUzEkoMO6gKfXflStpYgZDlFM7M/ck/bgfVCACO5vnAf0fXoNVHdWtqGU+MYca+4bL9Z5bpOVmR33cWW9G2A==
caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001426:
version "1.0.30001434" version "1.0.30001434"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001434.tgz#ec1ec1cfb0a93a34a0600d37903853030520a4e5"
integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA== integrity sha512-aOBHrLmTQw//WFa2rcF1If9fa3ypkC1wzqqiKHgfdrXTWcU8C4gKVZT77eQAPWN1APys3+uQ0Df07rKauXGEYA==