binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: issue details page, feat: add to cycles

Browse source
This commit is contained in:
Aaryan Khandelwal 2022-11-29 19:49:39 +05:30
parent 0bfb0a136a
commit 9727994c08
46 changed files with 2349 additions and 600 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/project/cycles/CycleView.tsx
View file

@ -175,7 +175,7 @@ const SprintView: React.FC<Props> = ({
</div>
))
) : (
<p className="text-sm text-gray-500">This sprint has no issues.</p>
<p className="text-sm text-gray-500">This cycle has no issues.</p>
)
) : (
<div className="w-full h-full flex items-center justify-center">

45
components/project/issues/BoardView/SingleBoard.tsx
View file

@ -18,6 +18,7 @@ import {
PlusIcon,
} from "@heroicons/react/24/outline";
import Image from "next/image";
import { divide } from "lodash";
type Props = {
selectedGroup: NestedKeyOf<IIssue> | null;
@ -190,7 +191,7 @@ const SingleBoard: React.FC<Props> = ({
<StrictModeDroppable key={groupTitle} droppableId={groupTitle}>
{(provided, snapshot) => (
<div
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 ${
className={`mt-3 space-y-3 h-full overflow-y-auto px-3 pb-3 ${
snapshot.isDraggingOver ? "bg-indigo-50 bg-opacity-50" : ""
} ${!show ? "hidden" : "block"}`}
{...provided.droppableProps}
@ -219,7 +220,7 @@ const SingleBoard: React.FC<Props> = ({
key={key}
className={`${
key === "name"
? "text-sm font-medium mb-2"
? "text-sm mb-2"
: key === "description"
? "text-xs text-black"
: key === "priority"
@ -236,7 +237,7 @@ const SingleBoard: React.FC<Props> = ({
? "text-xs bg-indigo-50 px-2 py-1 mt-2 flex items-center gap-x-1 rounded w-min whitespace-nowrap"
: "text-sm text-gray-500"
} gap-1
`}
`}
>
{key === "target_date" ? (
<>
@ -300,27 +301,27 @@ const SingleBoard: React.FC<Props> = ({
</div>
{/* <div
className={`p-2 bg-indigo-50 flex items-center justify-between ${
snapshot.isDragging ? "bg-indigo-200" : ""
}`}
className={`p-2 bg-indigo-50 flex items-center justify-between ${
snapshot.isDragging ? "bg-indigo-200" : ""
}`}
>
<button
type="button"
className="flex flex-col"
{...provided.dragHandleProps}
>
<button
type="button"
className="flex flex-col"
{...provided.dragHandleProps}
>
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600" />
<EllipsisHorizontalIcon className="h-4 w-4 text-gray-600 mt-[-0.7rem]" />
</button>
<div className="flex gap-1 items-center">
<button type="button">
<HeartIcon className="h-4 w-4 text-yellow-500" />
</button>
<div className="flex gap-1 items-center">
<button type="button">
<HeartIcon className="h-4 w-4 text-yellow-500" />
</button>
<button type="button">
<CheckCircleIcon className="h-4 w-4 text-green-500" />
</button>
</div>
</div> */}
<button type="button">
<CheckCircleIcon className="h-4 w-4 text-green-500" />
</button>
</div>
</div> */}
</a>
</Link>
)}

255
components/project/issues/BoardView/index.tsx
View file

@ -21,6 +21,8 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
import { Spinner } from "ui";
// types
import type { IState, IIssue, Properties, NestedKeyOf, ProjectMember } from "types";
import ConfirmIssueDeletion from "../ConfirmIssueDeletion";
import { TrashIcon } from "@heroicons/react/24/outline";
type Props = {
properties: Properties;
@ -35,6 +37,8 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
const [isOpen, setIsOpen] = useState(false);
const [isIssueOpen, setIsIssueOpen] = useState(false);
const [isIssueDeletionOpen, setIsIssueDeletionOpen] = useState(false);
const [issueDeletionData, setIssueDeletionData] = useState<IIssue | undefined>();
const [preloadedData, setPreloadedData] = useState<
(Partial<IIssue> & { actionType: "createIssue" | "edit" | "delete" }) | undefined
@ -58,72 +62,96 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
if (!result.destination) return;
const { source, destination, type } = result;
if (type === "state") {
const newStates = Array.from(states ?? []);
const [reorderedState] = newStates.splice(source.index, 1);
newStates.splice(destination.index, 0, reorderedState);
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
if (destination.droppableId === "trashBox") {
const removedItem = groupedByIssues[source.droppableId][source.index];
const sequenceNumber =
prevSequenceNumber && nextSequenceNumber
? (prevSequenceNumber + nextSequenceNumber) / 2
: nextSequenceNumber
? nextSequenceNumber - 15000 / 2
: prevSequenceNumber
? prevSequenceNumber + 15000 / 2
: 15000;
setIssueDeletionData(removedItem);
setIsIssueDeletionOpen(true);
newStates[destination.index].sequence = sequenceNumber;
mutateState(newStates, false);
if (!activeWorkspace) return;
stateServices
.patchState(activeWorkspace.slug, projectId as string, newStates[destination.index].id, {
sequence: sequenceNumber,
})
.then((response) => {
console.log(response);
})
.catch((err) => {
console.error(err);
});
console.log(removedItem);
} else {
if (source.droppableId !== destination.droppableId) {
const sourceGroup = source.droppableId; // source group id
const destinationGroup = destination.droppableId; // destination group id
if (!sourceGroup || !destinationGroup) return;
if (type === "state") {
const newStates = Array.from(states ?? []);
const [reorderedState] = newStates.splice(source.index, 1);
newStates.splice(destination.index, 0, reorderedState);
const prevSequenceNumber = newStates[destination.index - 1]?.sequence;
const nextSequenceNumber = newStates[destination.index + 1]?.sequence;
// removed/dragged item
const removedItem = groupedByIssues[source.droppableId][source.index];
const sequenceNumber =
prevSequenceNumber && nextSequenceNumber
? (prevSequenceNumber + nextSequenceNumber) / 2
: nextSequenceNumber
? nextSequenceNumber - 15000 / 2
: prevSequenceNumber
? prevSequenceNumber + 15000 / 2
: 15000;
if (selectedGroup === "priority") {
// update the removed item for mutation
removedItem.priority = destinationGroup;
newStates[destination.index].sequence = sequenceNumber;
// patch request
issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, {
priority: destinationGroup,
mutateState(newStates, false);
if (!activeWorkspace) return;
stateServices
.patchState(
activeWorkspace.slug,
projectId as string,
newStates[destination.index].id,
{
sequence: sequenceNumber,
}
)
.then((response) => {
console.log(response);
})
.catch((err) => {
console.error(err);
});
} else if (selectedGroup === "state_detail.name") {
const destinationState = states?.find((s) => s.name === destinationGroup);
const destinationStateId = destinationState?.id;
} else {
if (source.droppableId !== destination.droppableId) {
const sourceGroup = source.droppableId; // source group id
const destinationGroup = destination.droppableId; // destination group id
if (!sourceGroup || !destinationGroup) return;
// update the removed item for mutation
if (!destinationStateId || !destinationState) return;
removedItem.state = destinationStateId;
removedItem.state_detail = destinationState;
// removed/dragged item
const removedItem = groupedByIssues[source.droppableId][source.index];
// patch request
issuesServices.patchIssue(activeWorkspace!.slug, projectId as string, removedItem.id, {
state: destinationStateId,
});
if (selectedGroup === "priority") {
// update the removed item for mutation
removedItem.priority = destinationGroup;
// patch request
issuesServices.patchIssue(
activeWorkspace!.slug,
projectId as string,
removedItem.id,
{
priority: destinationGroup,
}
);
} else if (selectedGroup === "state_detail.name") {
const destinationState = states?.find((s) => s.name === destinationGroup);
const destinationStateId = destinationState?.id;
// update the removed item for mutation
if (!destinationStateId || !destinationState) return;
removedItem.state = destinationStateId;
removedItem.state_detail = destinationState;
// patch request
issuesServices.patchIssue(
activeWorkspace!.slug,
projectId as string,
removedItem.id,
{
state: destinationStateId,
}
);
}
// remove item from the source group
groupedByIssues[source.droppableId].splice(source.index, 1);
// add item to the destination group
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
}
// remove item from the source group
groupedByIssues[source.droppableId].splice(source.index, 1);
// add item to the destination group
groupedByIssues[destination.droppableId].splice(destination.index, 0, removedItem);
}
}
},
@ -155,6 +183,11 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
setIsOpen={setIsOpen}
data={preloadedData as Partial<IIssue>}
/> */}
<ConfirmIssueDeletion
isOpen={isIssueDeletionOpen}
handleClose={() => setIsIssueDeletionOpen(false)}
data={issueDeletionData}
/>
<CreateUpdateIssuesModal
isOpen={isIssueOpen && preloadedData?.actionType === "createIssue"}
setIsOpen={setIsIssueOpen}
@ -164,57 +197,69 @@ const BoardView: React.FC<Props> = ({ properties, selectedGroup, groupedByIssues
projectId={projectId as string}
/>
{groupedByIssues ? (
groupedByIssues ? (
<div className="w-full" style={{ height: "calc(82vh - 1.5rem)" }}>
<DragDropContext onDragEnd={handleOnDragEnd}>
<div className="h-full w-full overflow-hidden">
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
{(provided) => (
<div
className="h-full w-full"
{...provided.droppableProps}
ref={provided.innerRef}
>
<div className="flex gap-x-4 h-full overflow-x-auto overflow-y-hidden pb-3">
{Object.keys(groupedByIssues).map((singleGroup, index) => (
<SingleBoard
key={singleGroup}
selectedGroup={selectedGroup}
groupTitle={singleGroup}
createdBy={
members
? members?.find((m) => m.member.id === singleGroup)?.member
.first_name
: undefined
}
groupedByIssues={groupedByIssues}
index={index}
setIsIssueOpen={setIsIssueOpen}
properties={properties}
setPreloadedData={setPreloadedData}
stateId={
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.id
: undefined
}
bgColor={
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.color
: undefined
}
/>
))}
</div>
{provided.placeholder}
<div className="h-full w-full">
<DragDropContext onDragEnd={handleOnDragEnd}>
{/* <StrictModeDroppable droppableId="trashBox">
{(provided, snapshot) => (
<button
type="button"
className={`fixed bottom-2 right-8 z-10 px-2 py-1 flex items-center gap-2 rounded-lg mb-5 text-red-600 text-sm bg-red-100 border-2 border-transparent ${
snapshot.isDraggingOver ? "border-red-600" : ""
}`}
{...provided.droppableProps}
ref={provided.innerRef}
>
<TrashIcon className="h-3 w-3" />
Drop to delete
</button>
)}
</StrictModeDroppable> */}
<div className="h-full w-full overflow-hidden">
<StrictModeDroppable droppableId="state" type="state" direction="horizontal">
{(provided) => (
<div
className="h-full w-full"
{...provided.droppableProps}
ref={provided.innerRef}
>
<div className="flex gap-x-4 h-full overflow-x-auto overflow-y-hidden pb-3">
{Object.keys(groupedByIssues).map((singleGroup, index) => (
<SingleBoard
key={singleGroup}
selectedGroup={selectedGroup}
groupTitle={singleGroup}
createdBy={
members
? members?.find((m) => m.member.id === singleGroup)?.member.first_name
: undefined
}
groupedByIssues={groupedByIssues}
index={index}
setIsIssueOpen={setIsIssueOpen}
properties={properties}
setPreloadedData={setPreloadedData}
stateId={
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.id
: undefined
}
bgColor={
selectedGroup === "state_detail.name"
? states?.find((s) => s.name === singleGroup)?.color
: undefined
}
/>
))}
</div>
)}
</StrictModeDroppable>
</div>
</DragDropContext>
</div>
) : null
{provided.placeholder}
</div>
)}
</StrictModeDroppable>
</div>
</DragDropContext>
</div>
) : (
<div className="w-full h-full flex justify-center items-center">
<div className="h-full w-full flex justify-center items-center">
<Spinner />
</div>
)}

1
components/project/issues/CreateUpdateIssueModal/SelectParentIssues.tsx
View file

@ -52,6 +52,7 @@ const SelectParent: React.FC<Props> = ({ control }) => {
};
})}
value={value}
width="xs"
buttonClassName="max-h-30 overflow-y-scroll"
optionsClassName="max-h-30 overflow-y-scroll"
onChange={onChange}

10
components/project/issues/ListView/index.tsx
View file

@ -77,11 +77,11 @@ const ListView: React.FC<Props> = ({
const handleHover = (issueId: string) => {
document.addEventListener("keydown", (e) => {
if (e.code === "Space") {
e.preventDefault();
setPreviewModalIssueId(issueId);
setIssuePreviewModal(true);
}
// if (e.code === "Space") {
// e.preventDefault();
// setPreviewModalIssueId(issueId);
// setIssuePreviewModal(true);
// }
});
};

103
components/project/issues/issue-detail/IssueDetailSidebar.tsx
View file

@ -21,7 +21,7 @@ import {
// commons
import { classNames, copyTextToClipboard } from "constants/common";
// ui
import { Input, Button } from "ui";
import { Input, Button, Spinner } from "ui";
// icons
import {
UserIcon,
@ -32,6 +32,7 @@ import {
ChartBarIcon,
ClipboardDocumentIcon,
LinkIcon,
ArrowPathIcon,
} from "@heroicons/react/24/outline";
// types
import type { Control } from "react-hook-form";
@ -50,7 +51,7 @@ const defaultValues: Partial<IIssueLabels> = {
};
const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDetail }) => {
const { activeWorkspace, activeProject } = useUser();
const { activeWorkspace, activeProject, cycles } = useUser();
const { data: states } = useSWR<IState[]>(
activeWorkspace && activeProject ? STATE_LIST(activeProject.id) : null,
@ -121,6 +122,16 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
value: state.id,
})),
},
{
label: "Cycle",
name: "cycle",
canSelectMultipleOptions: false,
icon: ArrowPathIcon,
options: cycles?.map((cycle) => ({
label: cycle.name,
value: cycle.id,
})),
},
{
label: "Assignees",
name: "assignees_list",
@ -153,6 +164,13 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
},
];
const handleCycleChange = (cycleId: string) => {
if (activeWorkspace && activeProject && issueDetail)
issuesServices.addIssueToSprint(activeWorkspace.slug, activeProject.id, cycleId, {
issue: issueDetail.id,
});
};
return (
<div className="h-full w-full">
<div className="space-y-3">
@ -193,7 +211,10 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
as="div"
value={value}
multiple={item.canSelectMultipleOptions}
onChange={(value: any) => submitChanges({ [item.name]: value })}
onChange={(value: any) => {
if (item.name === "cycle") handleCycleChange(value);
else submitChanges({ [item.name]: value });
}}
className="flex-shrink-0"
>
{({ open }) => (
@ -229,21 +250,31 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
>
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{item.options?.map((option) => (
<Listbox.Option
key={option.value}
className={({ active, selected }) =>
`${
active || selected ? "text-white bg-theme" : "text-gray-900"
} ${
item.label === "Priority" && "capitalize"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={option.value}
>
{option.label}
</Listbox.Option>
))}
{item.options ? (
item.options.length > 0 ? (
item.options.map((option) => (
<Listbox.Option
key={option.value}
className={({ active, selected }) =>
`${
active || selected
? "text-white bg-theme"
: "text-gray-900"
} ${
item.label === "Priority" && "capitalize"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={option.value}
>
{option.label}
</Listbox.Option>
))
) : (
<div className="text-center">No {item.label}s found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>
@ -321,19 +352,29 @@ const IssueDetailSidebar: React.FC<Props> = ({ control, submitChanges, issueDeta
>
<Listbox.Options className="absolute z-10 right-0 mt-1 w-40 bg-white shadow-lg max-h-28 rounded-md py-1 text-xs ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none">
<div className="p-1">
{issueLabels?.map((label: any) => (
<Listbox.Option
key={label.id}
className={({ active, selected }) =>
`${
active || selected ? "text-white bg-theme" : "text-gray-900"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={label.id}
>
{label.name}
</Listbox.Option>
))}
{issueLabels ? (
issueLabels.length > 0 ? (
issueLabels.map((label: any) => (
<Listbox.Option
key={label.id}
className={({ active, selected }) =>
`${
active || selected
? "text-white bg-theme"
: "text-gray-900"
} cursor-pointer select-none relative p-2 rounded-md truncate`
}
value={label.id}
>
{label.name}
</Listbox.Option>
))
) : (
<div className="text-center">No labels found</div>
)
) : (
<Spinner />
)}
</div>
</Listbox.Options>
</Transition>

2
components/project/issues/issue-detail/activity/index.tsx
View file

@ -45,7 +45,7 @@ const IssueActivitySection: React.FC<Props> = ({ issueActivities, states }) => {
</div>
</div>
) : (
<div className="relative z-10 flex-shrink-0 border-2 border-white -ml-1.5">
<div className="relative z-10 flex-shrink-0 border-2 border-white rounded-full h-[34px] -ml-1.5">
{activity.actor_detail.avatar && activity.actor_detail.avatar !== "" ? (
<Image
src={activity.actor_detail.avatar}

2
components/project/memberInvitations.tsx
View file

@ -39,7 +39,7 @@ const ProjectMemberInvitations = ({
return (
<>
<div
className={`w-full h-full flex flex-col px-4 py-3 rounded-lg bg-indigo-50 ${
className={`w-full h-full flex flex-col px-4 py-3 rounded-md bg-white ${
selected ? "ring-2 ring-indigo-400" : ""
}`}
>