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

fix: designing bugs fixed

Browse Source
This commit is contained in:
Aaryan Khandelwal 2022-12-18 01:31:13 +05:30
parent f12320874e
commit a0084fdcc4
30 changed files with 235 additions and 235 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
import ShortcutsModal from "components/command-palette/shortcuts";
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";
// ui
import { Button } from "ui";
@ -260,7 +260,7 @@ const CommandPalette: React.FC = () => {
<li className="p-2">
{query === "" && (
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
Issues
Select issues
</h2>
)}
<ul className="text-sm text-gray-700">
@ -376,9 +376,9 @@ const CommandPalette: React.FC = () => {
)}
</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">
Delete selected
Delete selected issues
</Button>
<div>
<Button type="button" size="sm" onClick={handleCommandPaletteClose}>

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

@ -5,40 +5,25 @@ import Link from "next/link";
import Image from "next/image";
// swr
import useSWR from "swr";
// services
import cycleServices from "lib/services/cycles.service";
// hooks
import useUser from "lib/hooks/useUser";
// ui
import { Spinner } from "ui";
import { CustomMenu } from "ui";
// icons
import {
ArrowsPointingInIcon,
ArrowsPointingOutIcon,
CalendarDaysIcon,
PlusIcon,
EllipsisHorizontalIcon,
TrashIcon,
} from "@heroicons/react/24/outline";
import { CalendarDaysIcon, PlusIcon } from "@heroicons/react/24/outline";
import User from "public/user.png";
// types
import {
CycleIssueResponse,
ICycle,
IIssue,
IWorkspaceMember,
NestedKeyOf,
Properties,
} from "types";
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// constants
import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
import {
addSpaceIfCamelCase,
classNames,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
import { Menu, Transition } from "@headlessui/react";
import workspaceService from "lib/services/workspace.service";
import { Menu, Transition } from "@headlessui/react";
type Props = {
properties: Properties;
@ -123,48 +108,14 @@ const SingleCycleBoard: React.FC<Props> = ({
</span>
</div>
<Menu as="div" className="relative inline-block">
<Menu.Button className="h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none">
<EllipsisHorizontalIcon className="h-4 w-4" />
</Menu.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 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()}
>
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem 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()}
>
</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={() => openIssuesListModal()}>
Add an existing issue
</button>
)}
</Menu.Item>
</div>
</Menu.Items>
</Transition>
</Menu>
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</div>
<div
@ -355,13 +306,56 @@ const SingleCycleBoard: React.FC<Props> = ({
</div>
);
})}
<Menu as="div" className="relative text-left">
<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" />
Add issue
</Menu.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="flex items-center text-xs font-medium hover:bg-gray-100 p-2 rounded duration-300 outline-none"
className={classNames(
active ? "bg-indigo-50 text-gray-900" : "text-gray-700",
"block w-full p-2 text-left"
)}
onClick={() => openCreateIssueModal()}
>
<PlusIcon className="h-3 w-3 mr-1" />
Create
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>

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"
error={errors.start_date}
register={register}
validations={{
required: "Start date is required",
}}
/>
</div>
<div className="w-full">
@ -206,6 +209,9 @@ const CreateUpdateCycleModal: React.FC<Props> = ({ isOpen, setIsOpen, data, proj
placeholder="Enter end date"
error={errors.end_date}
register={register}
validations={{
required: "End date is required",
}}
/>
</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";
// constants
import { classNames } from "constants/common";
import { mutate } from "swr";
import { CYCLE_ISSUES } from "constants/fetch-keys";
type Props = {
isOpen: boolean;
@ -73,6 +75,7 @@ const CycleIssuesListModal: React.FC<Props> = ({
.bulkAddIssuesToCycle(activeWorkspace.slug, activeProject.id, cycleId, data)
.then((res) => {
console.log(res);
mutate(CYCLE_ISSUES(cycleId));
handleClose();
})
.catch((e) => {

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

@ -6,22 +6,21 @@ import Link from "next/link";
import useSWR from "swr";
// headless ui
import { Disclosure, Transition, Menu } from "@headlessui/react";
// services
import cycleServices from "lib/services/cycles.service";
// hooks
import useUser from "lib/hooks/useUser";
// ui
import { CustomMenu, Spinner } from "ui";
// 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";
// types
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties, SelectSprintType } from "types";
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// fetch keys
import { CYCLE_ISSUES, WORKSPACE_MEMBERS } from "constants/fetch-keys";
import { WORKSPACE_MEMBERS } from "constants/fetch-keys";
// constants
import {
addSpaceIfCamelCase,
classNames,
findHowManyDaysLeft,
renderShortNumericDateFormat,
} from "constants/common";
@ -34,7 +33,7 @@ type Props = {
properties: Properties;
selectedGroup: NestedKeyOf<IIssue> | null;
openCreateIssueModal: (issue?: IIssue, actionType?: "create" | "edit" | "delete") => void;
openIssuesListModal: (cycleId: string) => void;
openIssuesListModal: () => void;
removeIssueFromCycle: (bridgeId: string) => void;
};
@ -269,51 +268,60 @@ const CyclesListView: React.FC<Props> = ({
</div>
</Disclosure.Panel>
</Transition>
<div className="p-3">
<button
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",
// });
// }
// }}
>
<Menu as="div" className="relative text-left p-3">
<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" />
Add issue
</Menu.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>
)}
</Disclosure>
))}
</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
);
};

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

@ -66,17 +66,18 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
<div className="bg-white p-3">
<div className="grid grid-cols-8 gap-2 divide-x">
<div className="col-span-3 space-y-3">
<div className="flex justify-between items-center gap-2">
<Link href={`/projects/${activeProject?.id}/cycles/${cycle.id}`}>
<a className="flex justify-between items-center">
<a>
<h2 className="font-medium">{cycle.name}</h2>
</a>
</Link>
<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">
{today.getDate() < startDate.getDate()
? "Not started"
: today.getDate() > endDate.getDate()
? "Over"
: "Active"}
{today < startDate ? "Not started" : today > endDate ? "Over" : "Active"}
</span>
</div>
<CustomMenu width="auto" ellipsis>
<CustomMenu.MenuItem onClick={handleEditCycle}>Edit cycle</CustomMenu.MenuItem>
<CustomMenu.MenuItem onClick={handleDeleteCycle}>
@ -84,8 +85,7 @@ const SingleStat: React.FC<Props> = ({ cycle, handleEditCycle, handleDeleteCycle
</CustomMenu.MenuItem>
</CustomMenu>
</div>
</a>
</Link>
</div>
<div className="grid grid-cols-2 gap-x-2 gap-y-3 text-xs">
<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">
-{" "}
{cycleIssues && cycleIssues.length > 0
? `${(groupedIssues[group].length / cycleIssues.length) * 100}%`
? `${Math.round(
(groupedIssues[group].length / cycleIssues.length) * 100
)}%`
: "0%"}
</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
import SingleBoard from "components/project/issues/BoardView/single-board";
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
// ui
import { Spinner } from "ui";
// types

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

@ -235,7 +235,7 @@ const SingleBoard: React.FC<Props> = ({
</div>
)}
<h5
className="group-hover:text-theme text-sm break-all mb-3"
className="group-hover:text-theme text-sm mb-3"
style={{ lineClamp: 3, WebkitLineClamp: 3 }}
>
{childIssue.name}

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";
// 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
import { Dialog, Menu, Transition } from "@headlessui/react";
// services
@ -21,22 +14,30 @@ import issuesServices from "lib/services/issues.service";
import useUser from "lib/hooks/useUser";
import useToast from "lib/hooks/useToast";
// ui
import { Button, Input, TextArea } from "ui";
// commons
import { renderDateFormat, cosineSimilarity } from "constants/common";
import { Button, TextArea } from "ui";
// icons
import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
// components
import SelectState from "./SelectState";
import SelectCycles from "./SelectCycles";
import SelectLabels from "./SelectLabels";
import SelectProject from "./SelectProject";
import SelectPriority from "./SelectPriority";
import SelectAssignee from "./SelectAssignee";
import SelectParent from "./SelectParentIssue";
import SelectState from "components/project/issues/create-update-issue-modal/select-state";
import SelectCycles from "components/project/issues/create-update-issue-modal/select-cycle";
import SelectLabels from "components/project/issues/create-update-issue-modal/select-labels";
import SelectProject from "components/project/issues/create-update-issue-modal/select-project";
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 SelectParent from "components/project/issues/create-update-issue-modal/select-parent-issue";
import CreateUpdateStateModal from "components/project/issues/BoardView/state/CreateUpdateStateModal";
import CreateUpdateCycleModal from "components/project/cycles/create-update-cycle-modal";
// types
import type { IIssue, IssueResponse, CycleIssueResponse } from "types";
import { EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
import type { IIssue, IssueResponse } from "types";
// 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"), {
ssr: false,
@ -113,36 +114,18 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
}, 500);
};
const addIssueToSprint = async (issueId: string, sprintId: string, issueDetail: IIssue) => {
const addIssueToCycle = async (issueId: string, cycleId: string, issueDetail: IIssue) => {
if (!activeWorkspace || !activeProject) return;
await issuesServices
.addIssueToCycle(activeWorkspace.slug, activeProject.id, sprintId, {
.addIssueToCycle(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueId,
})
.then((res) => {
mutate<CycleIssueResponse[]>(
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
);
mutate(CYCLE_ISSUES(cycleId));
if (isUpdatingSingleIssue) {
mutate<IIssue>(
PROJECT_ISSUES_DETAILS,
(prevData) => ({ ...(prevData as IIssue), sprints: sprintId }),
(prevData) => ({ ...(prevData as IIssue), sprints: cycleId }),
false
);
} else
@ -152,7 +135,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
return {
...(prevData as IssueResponse),
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;
}),
};
@ -185,7 +168,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
mutate<IssueResponse>(PROJECT_ISSUES_LIST(activeWorkspace.slug, activeProject.id));
if (formData.sprints && formData.sprints !== null) {
await addIssueToSprint(res.id, formData.sprints, formData);
await addIssueToCycle(res.id, formData.sprints, formData);
}
handleClose();
resetForm();
@ -225,7 +208,7 @@ const CreateUpdateIssuesModal: React.FC<Props> = ({
false
);
if (formData.sprints && formData.sprints !== null) {
await addIssueToSprint(res.id, formData.sprints, formData);
await addIssueToCycle(res.id, formData.sprints, formData);
}
handleClose();
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"
optionsFontsize="sm"
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}
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"
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">
{people ? (
people.length > 0 ? (
@ -135,7 +135,7 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
className={({ active, selected }) =>
`${
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}
>
@ -150,13 +150,15 @@ const SelectAssignee: React.FC<Props> = ({ control, submitChanges }) => {
/>
</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.charAt(0)
: option.member.email.charAt(0)}
</div>
)}
{option.member.first_name}
{option.member.first_name && option.member.first_name !== ""
? option.member.first_name
: option.member.email}
</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";
import User from "public/user.png";
// components
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
import CreateUpdateIssuesModal from "components/project/issues/create-update-issue-modal";
// types
import { IIssue, IWorkspaceMember, NestedKeyOf, Properties } from "types";
// 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">
<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" : ""
}`}
>

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

@ -40,7 +40,7 @@ import {
import { CYCLE_ISSUES, PROJECT_MEMBERS } from "constants/fetch-keys";
// constants
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 ConfirmCycleDeletion from "components/project/cycles/confirm-cycle-deletion";
@ -149,22 +149,6 @@ const SingleCycle: React.FC<Props> = () => {
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) => {
if (!result.destination) return;
const { source, destination } = result;
@ -264,6 +248,7 @@ const SingleCycle: React.FC<Props> = () => {
</>
}
className="ml-1.5"
width="auto"
>
{cycles?.map((cycle) => (
<CustomMenu.MenuItem

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";
// react hook form
import { useForm } from "react-hook-form";
// headless ui
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
// services
import issuesServices from "lib/services/issues.service";
// fetch keys
import {
PROJECT_ISSUES_ACTIVITY,
PROJECT_ISSUES_COMMENTS,
PROJECT_ISSUES_LIST,
} from "constants/fetch-keys";
// hooks
import useUser from "lib/hooks/useUser";
// hoc
@ -26,22 +18,18 @@ import withAuth from "lib/hoc/withAuthWrapper";
// layouts
import AppLayout from "layouts/app-layout";
// 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 AddAsSubIssue from "components/project/issues/issue-detail/add-as-sub-issue";
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";
// activites
import IssueActivitySection from "components/project/issues/issue-detail/activity";
// headless ui
import { Disclosure, Menu, Tab, Transition } from "@headlessui/react";
// ui
import { Spinner, TextArea } from "ui";
import HeaderButton from "ui/HeaderButton";
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
// types
import { IIssue, IIssueComment, IssueResponse } from "types";
// icons
import {
ChevronLeftIcon,
@ -49,6 +37,16 @@ import {
EllipsisHorizontalIcon,
PlusIcon,
} 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"), {
ssr: false,
@ -276,8 +274,8 @@ const IssueDetail: NextPage = () => {
parent={issueDetail}
/>
{issueDetail && activeProject ? (
<div className="flex gap-5">
<div className="basis-3/4 space-y-5 p-5">
<div className="h-full flex gap-5">
<div className="basis-2/3 space-y-5 p-5">
<div className="mb-5"></div>
<div className="rounded-lg">
{issueDetail.parent !== null && issueDetail.parent !== "" ? (
@ -614,7 +612,8 @@ const IssueDetail: NextPage = () => {
</Tab.Group>
</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
control={control}
issueDetail={issueDetail}

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

@ -24,10 +24,10 @@ import AppLayout from "layouts/app-layout";
// hooks
import useIssuesFilter from "lib/hooks/useIssuesFilter";
// components
import ListView from "components/project/issues/ListView";
import ListView from "components/project/issues/list-view";
import BoardView from "components/project/issues/BoardView";
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
import {
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"
>
<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"
}`}
>

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;
label: string | JSX.Element;
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 (
<Listbox
as="div"
@ -44,7 +52,11 @@ const CustomSelect = ({ children, label, textAlignment, value, onChange }: Custo
leaveFrom="transform opacity-100 scale-100"
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>
</Listbox.Options>
</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 Select } from "./Select";
export { default as TextArea } from "./TextArea";
export { default as CustomListbox } from "./CustomListbox";
export { default as CustomMenu } from "./CustomMenu";
export { default as CustomListbox } from "./custom-listbox";
export { default as CustomMenu } from "./custom-menu";
export { default as Spinner } from "./Spinner";
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 * from "./Breadcrumbs";
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 || ""}`}
>
<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)}
placeholder="Search"
displayValue={(assigned: any) => assigned?.name}
/>
<div className="p-1">
<div className="py-1">
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
@ -113,8 +113,8 @@ const SearchListbox: React.FC<Props> = ({
key={option.value}
className={({ active }) =>
`${
active ? "text-white bg-theme" : "text-gray-900"
} cursor-pointer select-none truncate font-medium relative p-2 rounded-md`
active ? "bg-indigo-50" : ""
} cursor-pointer select-none truncate text-gray-900 p-2`
}
value={option.value}
>

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