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

Merge pull request #42 from aaryan610/master

Browse Source
This commit is contained in:
Vamsi Kurama 2022-12-18 18:46:41 +05:30 committed by GitHub
commit f52724fd86
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 688 additions and 791 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/app/components/command-palette/index.tsx
View File

@ -23,7 +23,7 @@ import {
// components // components
import ShortcutsModal from "components/command-palette/shortcuts"; import ShortcutsModal from "components/command-palette/shortcuts";
import CreateProjectModal from "components/project/create-project-modal"; import CreateProjectModal from "components/project/create-project-modal";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal"; import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
// ui // ui
import { Button } from "ui"; import { Button } from "ui";
@ -260,7 +260,7 @@ const CommandPalette: React.FC = () => {
<li className="p-2"> <li className="p-2">
{query === "" && ( {query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900"> <h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
Issues Select issues
</h2> </h2>
)} )}
<ul className="text-sm text-gray-700"> <ul className="text-sm text-gray-700">
@ -376,9 +376,9 @@ const CommandPalette: React.FC = () => {
)} )}
</Combobox> </Combobox>
<div className="flex justify-between items-center gap-2 p-3"> <div className="flex justify-end items-center gap-2 p-3">
<Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm"> <Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
Delete selected Delete selected issues
</Button> </Button>
<div> <div>
<Button type="button" size="sm" onClick={handleCommandPaletteClose}> <Button type="button" size="sm" onClick={handleCommandPaletteClose}>

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>

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

@ -1,44 +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 // services
import cycleServices from "lib/services/cycles.service"; import workspaceService from "lib/services/workspace.service";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// ui // components
import { Spinner } from "ui"; import SingleIssue from "components/project/common/board-view/single-issue";
// icons // headless ui
import {
ArrowsPointingInIcon,
ArrowsPointingOutIcon,
CalendarDaysIcon,
PlusIcon,
EllipsisHorizontalIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import User from "public/user.png";
// types
import {
CycleIssueResponse,
ICycle,
IIssue,
IWorkspaceMember,
NestedKeyOf,
Properties,
} from "types";
// constants
import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
import {
addSpaceIfCamelCase,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
import { Menu, Transition } from "@headlessui/react"; import { Menu, Transition } from "@headlessui/react";
import workspaceService from "lib/services/workspace.service"; // ui
import { CustomMenu } from "ui";
// icons
import { PlusIcon } from "@heroicons/react/24/outline";
// types
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// fetch-keys
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
// common
import { addSpaceIfCamelCase, classNames } from "constants/common";
type Props = { type Props = {
properties: Properties; properties: Properties;
@ -52,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> = ({
@ -64,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"
@ -123,48 +108,14 @@ const SingleCycleBoard: React.FC<Props> = ({
</span> </span>
</div> </div>
<Menu as="div" className="relative inline-block"> <CustomMenu width="auto" ellipsis>
<Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none"> <CustomMenu.MenuItem onClick={() => openCreateIssueModal()}>
<EllipsisHorizontalIcon className="h-4 w-4" /> Create new
</Menu.Button> </CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
<Transition Add an existing issue
as={React.Fragment} </CustomMenu.MenuItem>
enter="transition ease-out duration-100" </CustomMenu>
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="absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10 text-xs">
<div className="py-1">
<Menu.Item as="div">
{(active) => (
<button
type="button"
className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
onClick={() => openCreateIssueModal()}
>
Create new
</button>
)}
</Menu.Item>
<Menu.Item as="div">
{(active) => (
<button
type="button"
className="w-full text-left p-2 text-gray-900 hover:bg-indigo-50 whitespace-nowrap"
onClick={() => openIssuesListModal()}
>
Add an existing issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div> </div>
</div> </div>
<div <div
@ -187,181 +138,67 @@ 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>
); );
})} })}
<button
type="button" <Menu as="div" className="relative text-left">
className="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none" <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
> <PlusIcon className="h-3 w-3" />
<PlusIcon className="h-3 w-3 mr-1" /> Add issue
Create </Menu.Button>
</button>
<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="absolute left-0 z-10 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none whitespace-nowrap">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
"block w-full p-2 text-left"
)}
onClick={() => openCreateIssueModal()}
>
Create new
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
"block w-full p-2 text-left"
)}
onClick={() => openIssuesListModal()}
>
Add an existing issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div> </div>
</div> </div>
</div> </div>

6
apps/app/components/project/cycles/create-update-cycle-modal.tsx
View File

@ -195,6 +195,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
placeholder="Enter start date" placeholder="Enter start date"
error={errors.start_date} error={errors.start_date}
register={register} register={register}
validations={{
required: "Start date is required",
}}
/> />
</div> </div>
<div className="w-full"> <div className="w-full">
@ -206,6 +209,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
placeholder="Enter end date" placeholder="Enter end date"
error={errors.end_date} error={errors.end_date}
register={register} register={register}
validations={{
required: "End date is required",
}}
/> />
</div> </div>
</div> </div>

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

@ -17,6 +17,8 @@ import { MagnifyingGlassIcon, RectangleStackIcon } from "@heroicons/react/24/out
import { IIssue, IssueResponse } from "types"; import { IIssue, IssueResponse } from "types";
// constants // constants
import { classNames } from "constants/common"; import { classNames } from "constants/common";
import { mutate } from "swr";
import { CYCLE_ISSUES } from "constants/fetch-keys";
type Props = { type Props = {
isOpen: boolean; isOpen: boolean;
@ -73,6 +75,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data) .bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
.then((res) => { .then((res) => {
console.log(res); console.log(res);
mutate(CYCLE_ISSUES(cycleId));
handleClose(); handleClose();
}) })
.catch((e) => { .catch((e) => {

96
apps/app/components/project/cycles/list-view/index.tsx
View File

@ -6,22 +6,21 @@ import Link from "next/link";
import useSWR from "swr"; import useSWR from "swr";
// headless ui // headless ui
import { Disclosure, Transition, Menu } from "@headlessui/react"; import { Disclosure, Transition, Menu } from "@headlessui/react";
// services
import cycleServices from "lib/services/cycles.service";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// ui // ui
import { CustomMenu, Spinner } from "ui"; import { CustomMenu, Spinner } from "ui";
// icons // icons
import { PlusIcon, EllipsisHorizontalIcon, ChevronDownIcon } from "@heroicons/react/20/solid"; import { PlusIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
import { CalendarDaysIcon } from "@heroicons/react/24/outline"; import { CalendarDaysIcon } from "@heroicons/react/24/outline";
// types // types
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types"; import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// fetch keys // fetch keys
import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys"; import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
// constants // constants
import { import {
addSpaceIfCamelCase, addSpaceIfCamelCase,
classNames,
findHowManyDaysLeft, findHowManyDaysLeft,
renderShortNumericDateFormat, renderShortNumericDateFormat,
} from "constants/common"; } from "constants/common";
@ -34,7 +33,7 @@ type Props = {
properties: Properties; properties: Properties;
selectedGroup: NestedKeyOf<IIssue> | null; selectedGroup: NestedKeyOf<IIssue> | null;
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void; openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
openIssuesListModal: (cycleId: string) => void; openIssuesListModal: () => void;
removeIssueFromCycle: (bridgeId: string) => void; removeIssueFromCycle: (bridgeId: string) => void;
}; };
@ -269,51 +268,60 @@ const CyclesListView: React.FC<Props> = ({
</div> </div>
</Disclosure.Panel> </Disclosure.Panel>
</Transition> </Transition>
<div className="p-3"> <Menu as="div" className="relative text-left p-3">
<button <Menu.Button className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium">
type="button"
className="flex items-center gap-1 px-2 py-1 rounded hover:bg-gray-100 text-xs font-medium"
// onClick={() => {
// setIsCreateIssuesModalOpen(true);
// if (selectedGroup !== null) {
// const stateId =
// selectedGroup === "state_detail.name"
// ? states?.find((s) => s.name === singleGroup)?.id ?? null
// : null;
// setPreloadedData({
// state: stateId !== null ? stateId : undefined,
// [selectedGroup]: singleGroup,
// actionType: "createIssue",
// });
// }
// }}
>
<PlusIcon className="h-3 w-3" /> <PlusIcon className="h-3 w-3" />
Add issue Add issue
</button> </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="absolute left-0 z-10 mt-1 rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none whitespace-nowrap">
<div className="py-1">
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
"block w-full p-2 text-left"
)}
onClick={() => openCreateIssueModal()}
>
Create new
</button>
)}
</Menu.Item>
<Menu.Item>
{({ active }) => (
<button
type="button"
className={classNames(
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
"block w-full p-2 text-left"
)}
onClick={() => openIssuesListModal()}
>
Add an existing issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</div> </div>
)} )}
</Disclosure> </Disclosure>
))} ))}
</div> </div>
// <button
// type="button"
// className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
// onClick={() => selectSprint({ ...cycle, actionType: "edit" })}
// >
// Edit
// </button>
// </Menu.Item>
// <Menu.Item>
// <button
// type="button"
// className="text-left p-2 text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap w-full"
// onClick={() => selectSprint({ ...cycle, actionType: "delete" })}
// >
// Delete
// </button>
// </Menu.Item
); );
}; };

36
apps/app/components/project/cycles/stats-view/single-stat.tsx
View File

@ -66,26 +66,26 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
<div className="bg-white p-3"> <div className="bg-white p-3">
<div className="grid grid-cols-8 gap-2 divide-x"> <div className="grid grid-cols-8 gap-2 divide-x">
<div className="col-span-3 space-y-3"> <div className="col-span-3 space-y-3">
<Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}> <div className="flex justify-between items-center gap-2">
<a className="flex justify-between items-center"> <Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
<h2 className="font-medium">{cycle.name}</h2> <a>
<h2 className="font-medium">{cycle.name}</h2>
</a>
</Link>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-xs bg-gray-100 px-2 py-1 rounded-xl"> <span className="text-xs bg-gray-100 px-2 py-1 rounded-xl">
{today.getDate() < startDate.getDate() {today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
? "Not started"
: today.getDate() > endDate.getDate()
? "Over"
: "Active"}
</span> </span>
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteCycle}>
Delete cycle permanently
</CustomMenu.MenuItem>
</CustomMenu>
</div> </div>
</a> <CustomMenu width="auto" ellipsis>
</Link> <CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteCycle}>
Delete cycle permanently
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
<div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs"> <div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
<div className="flex items-center gap-2 text-gray-500"> <div className="flex items-center gap-2 text-gray-500">
@ -157,7 +157,9 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
<span className="text-gray-500"> <span className="text-gray-500">
-{" "} -{" "}
{cycleIssues && cycleIssues.length > 0 {cycleIssues && cycleIssues.length > 0
? `${(groupedIssues[group].length / cycleIssues.length) * 100}%` ? `${Math.round(
(groupedIssues[group].length / cycleIssues.length) * 100
)}%`
: "0%"} : "0%"}
</span> </span>
</span> </span>

2
apps/app/components/project/issues/BoardView/index.tsx
View File

@ -16,7 +16,7 @@ import { STATE_LIST } from "constants/fetch-keys";
// components // components
import SingleBoard from "components/project/issues/BoardView/single-board"; import SingleBoard from "components/project/issues/BoardView/single-board";
import StrictModeDroppable from "components/dnd/StrictModeDroppable"; import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
// ui // ui
import { Spinner } from "ui"; import { Spinner } from "ui";
// types // types

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 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 && (
<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>

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",

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

@ -6,13 +6,6 @@ import dynamic from "next/dynamic";
import { mutate } from "swr"; import { mutate } from "swr";
// react hook form // react hook form
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
// fetching keys
import {
PROJECT_ISSUES_DETAILS,
PROJECT_ISSUES_LIST,
CYCLE_ISSUES,
USER_ISSUE,
} from "constants/fetch-keys";
// headless // headless
import { Dialog, Menu, Transition } from "@headlessui/react"; import { Dialog, Menu, Transition } from "@headlessui/react";
// services // services
@ -21,22 +14,30 @@ import issuesServices from "lib/services/issues.service";
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast"; import useToast from "lib/hooks/useToast";
// ui // ui
import { Button, Input, TextArea } from "ui"; import { Button, TextArea } from "ui";
// commons // icons
import { renderDateFormat, cosineSimilarity } from "constants/common"; import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
// components // components
import SelectState from "./SelectState"; import SelectState from "components/project/issues/create-update-issue-modal/select-state";
import SelectCycles from "./SelectCycles"; import SelectCycles from "components/project/issues/create-update-issue-modal/select-cycle";
import SelectLabels from "./SelectLabels"; import SelectLabels from "components/project/issues/create-update-issue-modal/select-labels";
import SelectProject from "./SelectProject"; import SelectProject from "components/project/issues/create-update-issue-modal/select-project";
import SelectPriority from "./SelectPriority"; import SelectPriority from "components/project/issues/create-update-issue-modal/select-priority";
import SelectAssignee from "./SelectAssignee"; import SelectAssignee from "components/project/issues/create-update-issue-modal/select-assignee";
import SelectParent from "./SelectParentIssue"; import SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue";
import CreateUpdateStateModal from "components/project/issues/BoardView/state/create-update-state-modal"; 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, CycleIssueResponse } from "types"; import type { IIssue, IssueResponse } from "types";
import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline"; // fetching keys
import {
PROJECT_ISSUES_DETAILS,
PROJECT_ISSUES_LIST,
CYCLE_ISSUES,
USER_ISSUE,
} from "constants/fetch-keys";
// common
import { renderDateFormat, cosineSimilarity } from "constants/common";
const RichTextEditor = dynamic(() => import("components/lexical/editor"), { const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
ssr: false, ssr: false,
@ -113,36 +114,18 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
}, 500); }, 500);
}; };
const addIssueToSprint = async (issueId: string, sprintId: string, issueDetail: IIssue) => { const addIssueToCycle = async (issueId: string, cycleId: string, issueDetail: IIssue) => {
if (!activeWorkspace || !activeProject) return; if (!activeWorkspace || !activeProject) return;
await issuesServices await issuesServices
.addIssueToCycle(activeWorkspace.slug, activeProject.id, sprintId, { .addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueId, issue: issueId,
}) })
.then((res) => { .then((res) => {
mutate<CycleIssueResponse[]>( mutate(CYCLE_ISSUES(cycleId));
CYCLE_ISSUES(sprintId),
(prevData) => {
const targetResponse = prevData?.find((t) => t.cycle === sprintId);
if (targetResponse) {
targetResponse.issue_details = issueDetail;
return prevData;
} else {
return [
...(prevData ?? []),
{
cycle: sprintId,
issue_details: issueDetail,
} as CycleIssueResponse,
];
}
},
false
);
if (isUpdatingSingleIssue) { if (isUpdatingSingleIssue) {
mutate<IIssue>( mutate<IIssue>(
PROJECT_ISSUES_DETAILS, PROJECT_ISSUES_DETAILS,
(prevData) => ({ ...(prevData as IIssue), sprints: sprintId }), (prevData) => ({ ...(prevData as IIssue), sprints: cycleId }),
false false
); );
} else } else
@ -152,7 +135,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
return { return {
...(prevData as IssueResponse), ...(prevData as IssueResponse),
results: (prevData?.results ?? []).map((issue) => { results: (prevData?.results ?? []).map((issue) => {
if (issue.id === res.id) return { ...issue, sprints: sprintId }; if (issue.id === res.id) return { ...issue, sprints: cycleId };
return issue; return issue;
}), }),
}; };
@ -185,7 +168,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
mutate<IssueResponse>(PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id)); mutate<IssueResponse>(PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id));
if (formData.sprints && formData.sprints !== null) { if (formData.sprints && formData.sprints !== null) {
await addIssueToSprint(res.id, formData.sprints, formData); await addIssueToCycle(res.id, formData.sprints, formData);
} }
handleClose(); handleClose();
resetForm(); resetForm();
@ -225,7 +208,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
false false
); );
if (formData.sprints && formData.sprints !== null) { if (formData.sprints && formData.sprints !== null) {
await addIssueToSprint(res.id, formData.sprints, formData); await addIssueToCycle(res.id, formData.sprints, formData);
} }
handleClose(); handleClose();
resetForm(); resetForm();

8
apps/app/components/project/issues/CreateUpdateIssueModal/SelectAssignee.tsx → apps/app/components/project/issues/create-update-issue-modal/select-assignee.tsx
View File

@ -39,7 +39,13 @@ const SelectAssignee: React.FC<Props> = ({ control }) => {
title="Assignees" title="Assignees"
optionsFontsize="sm" optionsFontsize="sm"
options={people?.map((person) => { options={people?.map((person) => {
return { value: person.member.id, display: person.member.first_name }; return {
value: person.member.id,
display:
person.member.first_name && person.member.first_name !== ""
? person.member.first_name
: person.member.email,
};
})} })}
multiple={true} multiple={true}
value={value} value={value}

0
apps/app/components/project/issues/CreateUpdateIssueModal/SelectCycles.tsx → apps/app/components/project/issues/create-update-issue-modal/select-cycle.tsx
View File

0
apps/app/components/project/issues/CreateUpdateIssueModal/SelectLabels.tsx → apps/app/components/project/issues/create-update-issue-modal/select-labels.tsx
View File

0
apps/app/components/project/issues/CreateUpdateIssueModal/SelectParentIssue.tsx → apps/app/components/project/issues/create-update-issue-modal/select-parent-issue.tsx
View File

0
apps/app/components/project/issues/CreateUpdateIssueModal/SelectPriority.tsx → apps/app/components/project/issues/create-update-issue-modal/select-priority.tsx
View File

0
apps/app/components/project/issues/CreateUpdateIssueModal/SelectProject.tsx → apps/app/components/project/issues/create-update-issue-modal/select-project.tsx
View File

0
apps/app/components/project/issues/CreateUpdateIssueModal/SelectState.tsx → apps/app/components/project/issues/create-update-issue-modal/select-state.tsx
View File

10
apps/app/components/project/issues/issue-detail/issue-detail-sidebar/select-assignee.tsx
View File

@ -125,7 +125,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
leaveFrom="opacity-100" leaveFrom="opacity-100"
leaveTo="opacity-0" leaveTo="opacity-0"
> >
<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"> <Listbox.Options className="absolute z-10 right-0 mt-1 w-auto 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="py-1"> <div className="py-1">
{people ? ( {people ? (
people.length > 0 ? ( people.length > 0 ? (
@ -135,7 +135,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
className={({ active, selected }) => className={({ active, selected }) =>
`${ `${
active || selected ? "bg-indigo-50" : "" active || selected ? "bg-indigo-50" : ""
} flex items-center gap-2 text-gray-900 cursor-pointer select-none relative p-2 rounded-md truncate` } flex items-center gap-2 text-gray-900 cursor-pointer select-none p-2 truncate`
} }
value={option.member.id} value={option.member.id}
> >
@ -150,13 +150,15 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
/> />
</div> </div>
) : ( ) : (
<div className="h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full"> <div className="flex-shrink-0 h-4 w-4 bg-gray-700 text-white grid place-items-center capitalize rounded-full">
{option.member.first_name && option.member.first_name !== "" {option.member.first_name && option.member.first_name !== ""
? option.member.first_name.charAt(0) ? option.member.first_name.charAt(0)
: option.member.email.charAt(0)} : option.member.email.charAt(0)}
</div> </div>
)} )}
{option.member.first_name} {option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</Listbox.Option> </Listbox.Option>
)) ))
) : ( ) : (

2
apps/app/components/project/issues/ListView/index.tsx → apps/app/components/project/issues/list-view/index.tsx
View File

@ -18,7 +18,7 @@ import {
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import User from "public/user.png"; import User from "public/user.png";
// components // components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
// types // types
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types"; import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// services // services

2
apps/app/components/sidebar/projects-list.tsx
View File

@ -58,7 +58,7 @@ const ProjectsList: React.FC<Props> = ({ navigation, sidebarCollapse }) => {
<> <>
<div className="flex items-center"> <div className="flex items-center">
<Disclosure.Button <Disclosure.Button
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${ className={`w-full flex items-center text-left gap-2 font-medium rounded-md p-2 text-sm ${
sidebarCollapse ? "justify-center" : "" sidebarCollapse ? "justify-center" : ""
}`} }`}
> >

43
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/CreateUpdateIssueModal"; 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,
@ -149,22 +164,6 @@ const SingleCycle: React.FC<Props> = () => {
setCycleIssuesListModal(true); setCycleIssuesListModal(true);
}; };
const addIssueToCycle = (cycleId: string, issueId: string) => {
if (!activeWorkspace || !activeProject?.id) return;
issuesServices
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueId,
})
.then((response) => {
console.log(response);
mutate(CYCLE_ISSUES(cycleId));
})
.catch((error) => {
console.log(error);
});
};
const handleDragEnd = (result: DropResult) => { const handleDragEnd = (result: DropResult) => {
if (!result.destination) return; if (!result.destination) return;
const { source, destination } = result; const { source, destination } = result;
@ -246,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>
@ -264,6 +268,7 @@ const SingleCycle: React.FC<Props> = () => {
</> </>
} }
className="ml-1.5" className="ml-1.5"
width="auto"
> >
{cycles?.map((cycle) => ( {cycles?.map((cycle) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
@ -435,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>
)} )}

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

@ -9,16 +9,8 @@ import React, { useCallback, useEffect, useState } from "react";
import useSWR, { mutate } from "swr"; import useSWR, { mutate } from "swr";
// react hook form // react hook form
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
// headless ui
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
// services // services
import issuesServices from "lib/services/issues.service"; import issuesServices from "lib/services/issues.service";
// fetch keys
import {
PROJECT_ISSUES_ACTIVITY,
PROJECT_ISSUES_COMMENTS,
PROJECT_ISSUES_LIST,
} from "constants/fetch-keys";
// hooks // hooks
import useUser from "lib/hooks/useUser"; import useUser from "lib/hooks/useUser";
// hoc // hoc
@ -26,22 +18,18 @@ import withAuth from "lib/hoc/withAuthWrapper";
// layouts // layouts
import AppLayout from "layouts/app-layout"; import AppLayout from "layouts/app-layout";
// components // components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection"; import IssueCommentSection from "components/project/issues/issue-detail/comment/IssueCommentSection";
import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue"; import AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
// common
import { debounce } from "constants/common";
// components
import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar"; import IssueDetailSidebar from "components/project/issues/issue-detail/issue-detail-sidebar";
// activites
import IssueActivitySection from "components/project/issues/issue-detail/activity"; import IssueActivitySection from "components/project/issues/issue-detail/activity";
// headless ui
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
// ui // ui
import { Spinner, TextArea } from "ui"; import { Spinner, TextArea } from "ui";
import HeaderButton from "ui/HeaderButton"; import HeaderButton from "ui/HeaderButton";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs"; import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
// types
import { IIssue, IIssueComment, IssueResponse } from "types";
// icons // icons
import { import {
ChevronLeftIcon, ChevronLeftIcon,
@ -49,6 +37,16 @@ import {
EllipsisHorizontalIcon, EllipsisHorizontalIcon,
PlusIcon, PlusIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
// types
import { IIssue, IIssueComment, IssueResponse } from "types";
// fetch keys
import {
PROJECT_ISSUES_ACTIVITY,
PROJECT_ISSUES_COMMENTS,
PROJECT_ISSUES_LIST,
} from "constants/fetch-keys";
// common
import { debounce } from "constants/common";
const RichTextEditor = dynamic(() => import("components/lexical/editor"), { const RichTextEditor = dynamic(() => import("components/lexical/editor"), {
ssr: false, ssr: false,
@ -276,8 +274,8 @@ const IssueDetail: NextPage = () => {
parent={issueDetail} parent={issueDetail}
/> />
{issueDetail && activeProject ? ( {issueDetail && activeProject ? (
<div className="flex gap-5"> <div className="h-full flex gap-5">
<div className="basis-3/4 space-y-5 p-5"> <div className="basis-2/3 space-y-5 p-5">
<div className="mb-5"></div> <div className="mb-5"></div>
<div className="rounded-lg"> <div className="rounded-lg">
{issueDetail.parent !== null && issueDetail.parent !== "" ? ( {issueDetail.parent !== null && issueDetail.parent !== "" ? (
@ -614,7 +612,8 @@ const IssueDetail: NextPage = () => {
</Tab.Group> </Tab.Group>
</div> </div>
</div> </div>
<div className="h-full basis-1/4 space-y-5 p-5 border-l"> <div className="h-full basis-1/3 space-y-5 p-5 border-l">
{/* TODO add flex-grow, if needed */}
<IssueDetailSidebar <IssueDetailSidebar
control={control} control={control}
issueDetail={issueDetail} issueDetail={issueDetail}

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

@ -24,10 +24,10 @@ import AppLayout from "layouts/app-layout";
// hooks // hooks
import useIssuesFilter from "lib/hooks/useIssuesFilter"; import useIssuesFilter from "lib/hooks/useIssuesFilter";
// components // components
import ListView from "components/project/issues/ListView"; import ListView from "components/project/issues/list-view";
import BoardView from "components/project/issues/BoardView"; import BoardView from "components/project/issues/BoardView";
import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion"; import ConfirmIssueDeletion from "components/project/issues/confirm-issue-deletion";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal"; import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
// ui // ui
import { import {
Spinner, Spinner,

0
apps/app/ui/CustomListbox/index.tsx → apps/app/ui/custom-listbox/index.tsx
View File

0
apps/app/ui/CustomListbox/types.d.ts → apps/app/ui/custom-listbox/types.d.ts vendored
View File

2
apps/app/ui/CustomMenu/index.tsx → apps/app/ui/custom-menu/index.tsx
View File

@ -51,7 +51,7 @@ const CustomMenu = ({
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Menu.Items <Menu.Items
className={`absolute right-0 z-10 mt-2 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${ className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
width === "auto" ? "min-w-full whitespace-nowrap" : "w-56" width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
}`} }`}
> >

0
apps/app/ui/CustomMenu/types.d.ts → apps/app/ui/custom-menu/types.d.ts vendored
View File

16
apps/app/ui/custom-select/index.tsx
View File

@ -10,9 +10,17 @@ type CustomSelectProps = {
children: React.ReactNode; children: React.ReactNode;
label: string | JSX.Element; label: string | JSX.Element;
textAlignment?: "left" | "center" | "right"; textAlignment?: "left" | "center" | "right";
width?: "auto" | string;
}; };
const CustomSelect = ({ children, label, textAlignment, value, onChange }: CustomSelectProps) => { const CustomSelect = ({
children,
label,
textAlignment,
value,
onChange,
width = "auto",
}: CustomSelectProps) => {
return ( return (
<Listbox <Listbox
as="div" as="div"
@ -44,7 +52,11 @@ const CustomSelect = ({ children, label, textAlignment, value, onChange }: Custo
leaveFrom="transform opacity-100 scale-100" leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95" leaveTo="transform opacity-0 scale-95"
> >
<Listbox.Options className="absolute right-0 z-10 mt-1 w-56 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"> <Listbox.Options
className={`absolute right-0 z-10 mt-1 origin-top-right rounded-md bg-white text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
width === "auto" ? "min-w-full whitespace-nowrap" : "w-56"
}`}
>
<div className="py-1">{children}</div> <div className="py-1">{children}</div>
</Listbox.Options> </Listbox.Options>
</Transition> </Transition>

6
apps/app/ui/index.ts
View File

@ -2,11 +2,11 @@ export { default as Button } from "./Button";
export { default as Input } from "./Input"; export { default as Input } from "./Input";
export { default as Select } from "./Select"; export { default as Select } from "./Select";
export { default as TextArea } from "./TextArea"; export { default as TextArea } from "./TextArea";
export { default as CustomListbox } from "./CustomListbox"; export { default as CustomListbox } from "./custom-listbox";
export { default as CustomMenu } from "./CustomMenu"; export { default as CustomMenu } from "./custom-menu";
export { default as Spinner } from "./Spinner"; export { default as Spinner } from "./Spinner";
export { default as Tooltip } from "./Tooltip"; export { default as Tooltip } from "./Tooltip";
export { default as SearchListbox } from "./SearchListbox"; export { default as SearchListbox } from "./search-listbox";
export { default as HeaderButton } from "./HeaderButton"; export { default as HeaderButton } from "./HeaderButton";
export * from "./Breadcrumbs"; export * from "./Breadcrumbs";
export * from "./EmptySpace"; export * from "./EmptySpace";

8
apps/app/ui/SearchListbox/index.tsx → apps/app/ui/search-listbox/index.tsx
View File

@ -100,12 +100,12 @@ const SearchListbox: React.FC<Props> = ({
} ${optionsClassName || ""}`} } ${optionsClassName || ""}`}
> >
<Combobox.Input <Combobox.Input
className="w-full bg-transparent border-b p-2 mb-1 focus:outline-none sm:text-sm" className="w-full bg-transparent border-b p-2 focus:outline-none text-xs"
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
placeholder="Search" placeholder="Search"
displayValue={(assigned: any) => assigned?.name} displayValue={(assigned: any) => assigned?.name}
/> />
<div className="p-1"> <div className="py-1">
{filteredOptions ? ( {filteredOptions ? (
filteredOptions.length > 0 ? ( filteredOptions.length > 0 ? (
filteredOptions.map((option) => ( filteredOptions.map((option) => (
@ -113,8 +113,8 @@ const SearchListbox: React.FC<Props> = ({
key={option.value} key={option.value}
className={({ active }) => className={({ active }) =>
`${ `${
active ? "text-white bg-theme" : "text-gray-900" active ? "bg-indigo-50" : ""
} cursor-pointer select-none truncate font-medium relative p-2 rounded-md` } cursor-pointer select-none truncate text-gray-900 p-2`
} }
value={option.value} value={option.value}
> >

0
apps/app/ui/SearchListbox/types.d.ts → apps/app/ui/search-listbox/types.d.ts vendored
View File