deps: resolve conflicts
This commit is contained in:
vamsi
commit
3b900c1d8b
45 changed files with 2340 additions and 600 deletions
|
|
@ -9,7 +9,11 @@ import useTheme from "lib/hooks/useTheme";
|
|||
import useToast from "lib/hooks/useToast";
|
||||
// icons
|
||||
import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
|
||||
import { DocumentPlusIcon, FolderPlusIcon, FolderIcon } from "@heroicons/react/24/outline";
|
||||
import {
|
||||
FolderIcon,
|
||||
RectangleStackIcon,
|
||||
ClipboardDocumentListIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// commons
|
||||
import { classNames, copyTextToClipboard } from "constants/common";
|
||||
// components
|
||||
|
|
@ -19,12 +23,19 @@ import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssue
|
|||
import CreateUpdateCycleModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { Button } from "ui";
|
||||
import { SubmitHandler, useForm } from "react-hook-form";
|
||||
|
||||
type ItemType = {
|
||||
name: string;
|
||||
url?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
|
||||
type FormInput = {
|
||||
issue: string[];
|
||||
};
|
||||
|
||||
const CommandPalette: React.FC = () => {
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -51,7 +62,7 @@ const CommandPalette: React.FC = () => {
|
|||
const quickActions = [
|
||||
{
|
||||
name: "Add new issue...",
|
||||
icon: DocumentPlusIcon,
|
||||
icon: RectangleStackIcon,
|
||||
shortcut: "I",
|
||||
onClick: () => {
|
||||
setIsIssueModalOpen(true);
|
||||
|
|
@ -59,7 +70,7 @@ const CommandPalette: React.FC = () => {
|
|||
},
|
||||
{
|
||||
name: "Add new project...",
|
||||
icon: FolderPlusIcon,
|
||||
icon: ClipboardDocumentListIcon,
|
||||
shortcut: "P",
|
||||
onClick: () => {
|
||||
setIsProjectModalOpen(true);
|
||||
|
|
@ -116,6 +127,23 @@ const CommandPalette: React.FC = () => {
|
|||
[toggleCollapsed, setToastAlert, router]
|
||||
);
|
||||
|
||||
const {
|
||||
register,
|
||||
formState: { errors, isSubmitting },
|
||||
handleSubmit,
|
||||
reset,
|
||||
setError,
|
||||
control,
|
||||
} = useForm<FormInput>();
|
||||
|
||||
const handleDelete: SubmitHandler<FormInput> = (data) => {
|
||||
console.log("Deleting... " + JSON.stringify(data));
|
||||
};
|
||||
|
||||
const handleAddToCycle: SubmitHandler<FormInput> = (data) => {
|
||||
console.log("Adding to cycle...");
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener("keydown", handleKeyDown);
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
|
|
@ -137,7 +165,6 @@ const CommandPalette: React.FC = () => {
|
|||
setIsOpen={setIsIssueModalOpen}
|
||||
projectId={activeProject?.id}
|
||||
/>
|
||||
|
||||
<Transition.Root
|
||||
show={isPaletteOpen}
|
||||
as={React.Fragment}
|
||||
|
|
@ -168,129 +195,152 @@ const CommandPalette: React.FC = () => {
|
|||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="mx-auto max-w-2xl transform divide-y divide-gray-500 divide-opacity-10 overflow-hidden rounded-xl bg-white bg-opacity-80 shadow-2xl ring-1 ring-black ring-opacity-5 backdrop-blur backdrop-filter transition-all">
|
||||
<Combobox
|
||||
onChange={(item: ItemType) => {
|
||||
const { url, onClick } = item;
|
||||
if (url) router.push(url);
|
||||
else if (onClick) onClick();
|
||||
handleCommandPaletteClose();
|
||||
}}
|
||||
>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
|
||||
placeholder="Search..."
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
<form>
|
||||
<Combobox
|
||||
// onChange={(item: ItemType) => {
|
||||
// const { url, onClick } = item;
|
||||
// if (url) router.push(url);
|
||||
// else if (onClick) onClick();
|
||||
// handleCommandPaletteClose();
|
||||
// }}
|
||||
>
|
||||
{filteredIssues.length > 0 && (
|
||||
<>
|
||||
<div className="relative m-1">
|
||||
<MagnifyingGlassIcon
|
||||
className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<Combobox.Input
|
||||
className="h-12 w-full border-0 bg-transparent pl-11 pr-4 text-gray-900 placeholder-gray-500 focus:ring-0 sm:text-sm outline-none"
|
||||
placeholder="Search..."
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Combobox.Options
|
||||
static
|
||||
className="max-h-80 scroll-py-2 divide-y divide-gray-500 divide-opacity-10 overflow-y-auto"
|
||||
>
|
||||
{filteredIssues.length > 0 && (
|
||||
<>
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
Issues
|
||||
</h2>
|
||||
)}
|
||||
<ul className="text-sm text-gray-700">
|
||||
{filteredIssues.map((issue) => (
|
||||
<Combobox.Option
|
||||
key={issue.id}
|
||||
value={{
|
||||
name: issue.name,
|
||||
url: `/projects/${issue.project}/issues/${issue.id}`,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
"flex cursor-pointer select-none items-center rounded-md px-3 py-2",
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<>
|
||||
{/* <FolderIcon
|
||||
className={classNames(
|
||||
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
||||
active ? "text-opacity-100" : ""
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/> */}
|
||||
<input
|
||||
type="checkbox"
|
||||
{...register("issue")}
|
||||
value={issue.id}
|
||||
/>
|
||||
<span className="ml-3 flex-auto truncate">{issue.name}</span>
|
||||
{active && (
|
||||
<span className="ml-3 flex-none text-gray-500">
|
||||
Jump to...
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{query === "" && (
|
||||
<li className="p-2">
|
||||
{query === "" && (
|
||||
<h2 className="mt-4 mb-2 px-3 text-xs font-semibold text-gray-900">
|
||||
Issues
|
||||
</h2>
|
||||
)}
|
||||
<h2 className="sr-only">Quick actions</h2>
|
||||
<ul className="text-sm text-gray-700">
|
||||
{filteredIssues.map((issue) => (
|
||||
{quickActions.map((action) => (
|
||||
<Combobox.Option
|
||||
key={issue.id}
|
||||
key={action.shortcut}
|
||||
value={{
|
||||
name: issue.name,
|
||||
url: `/projects/${issue.project}/issues/${issue.id}`,
|
||||
name: action.name,
|
||||
onClick: action.onClick,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
"flex cursor-pointer select-none items-center rounded-md px-3 py-2",
|
||||
"flex cursor-default select-none items-center rounded-md px-3 py-2",
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<>
|
||||
<FolderIcon
|
||||
<action.icon
|
||||
className={classNames(
|
||||
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
||||
active ? "text-opacity-100" : ""
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="ml-3 flex-auto truncate">{issue.name}</span>
|
||||
{active && (
|
||||
<span className="ml-3 flex-none text-gray-500">
|
||||
Jump to...
|
||||
</span>
|
||||
)}
|
||||
<span className="ml-3 flex-auto truncate">{action.name}</span>
|
||||
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
|
||||
<kbd className="font-sans">⌘</kbd>
|
||||
<kbd className="font-sans">{action.shortcut}</kbd>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
</>
|
||||
)}
|
||||
{query === "" && (
|
||||
<li className="p-2">
|
||||
<h2 className="sr-only">Quick actions</h2>
|
||||
<ul className="text-sm text-gray-700">
|
||||
{quickActions.map((action) => (
|
||||
<Combobox.Option
|
||||
key={action.shortcut}
|
||||
value={{
|
||||
name: action.name,
|
||||
onClick: action.onClick,
|
||||
}}
|
||||
className={({ active }) =>
|
||||
classNames(
|
||||
"flex cursor-default select-none items-center rounded-md px-3 py-2",
|
||||
active ? "bg-gray-900 bg-opacity-5 text-gray-900" : ""
|
||||
)
|
||||
}
|
||||
>
|
||||
{({ active }) => (
|
||||
<>
|
||||
<action.icon
|
||||
className={classNames(
|
||||
"h-6 w-6 flex-none text-gray-900 text-opacity-40",
|
||||
active ? "text-opacity-100" : ""
|
||||
)}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className="ml-3 flex-auto truncate">{action.name}</span>
|
||||
<span className="ml-3 flex-none text-xs font-semibold text-gray-500">
|
||||
<kbd className="font-sans">⌘</kbd>
|
||||
<kbd className="font-sans">{action.shortcut}</kbd>
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Combobox.Option>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
)}
|
||||
</Combobox.Options>
|
||||
)}
|
||||
</Combobox.Options>
|
||||
|
||||
{query !== "" && filteredIssues.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<FolderIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
We couldn{"'"}t find any issue with that term. Please try again.
|
||||
</p>
|
||||
{query !== "" && filteredIssues.length === 0 && (
|
||||
<div className="py-14 px-6 text-center sm:px-14">
|
||||
<FolderIcon
|
||||
className="mx-auto h-6 w-6 text-gray-900 text-opacity-40"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<p className="mt-4 text-sm text-gray-900">
|
||||
We couldn{"'"}t find any issue with that term. Please try again.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Combobox>
|
||||
|
||||
<div className="flex justify-between items-center gap-2 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={handleSubmit(handleAddToCycle)} size="sm">
|
||||
Add to Cycle
|
||||
</Button>
|
||||
<Button onClick={handleSubmit(handleDelete)} theme="danger" size="sm">
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Combobox>
|
||||
<div>
|
||||
<Button type="button" size="sm" onClick={handleCommandPaletteClose}>
|
||||
Close
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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" : ""
|
||||
}`}
|
||||
>
|
||||
|
|
|
|||
77
apps/app/components/workspace/SingleInvitation.tsx
Normal file
77
apps/app/components/workspace/SingleInvitation.tsx
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
// next
|
||||
import Image from "next/image";
|
||||
// react
|
||||
import { useState } from "react";
|
||||
// types
|
||||
import { IWorkspaceInvitation } from "types";
|
||||
|
||||
type Props = {
|
||||
invitation: IWorkspaceInvitation;
|
||||
invitationsRespond: string[];
|
||||
handleInvitation: any;
|
||||
};
|
||||
|
||||
const SingleInvitation: React.FC<Props> = ({
|
||||
invitation,
|
||||
invitationsRespond,
|
||||
handleInvitation,
|
||||
}) => {
|
||||
const [isChecked, setIsChecked] = useState(invitationsRespond.includes(invitation.id));
|
||||
|
||||
return (
|
||||
<>
|
||||
<li>
|
||||
<label
|
||||
className={`group relative flex border-2 border-transparent items-start space-x-3 cursor-pointer px-4 py-4 ${
|
||||
isChecked ? "border-theme rounded-lg" : ""
|
||||
}`}
|
||||
htmlFor={invitation.id}
|
||||
>
|
||||
<div className="flex-shrink-0">
|
||||
<span className="inline-flex items-center justify-center h-10 w-10 rounded-lg">
|
||||
{invitation.workspace.logo && invitation.workspace.logo !== "" ? (
|
||||
<Image
|
||||
src={invitation.workspace.logo}
|
||||
height="100%"
|
||||
width="100%"
|
||||
className="rounded"
|
||||
alt={invitation.workspace.name}
|
||||
/>
|
||||
) : (
|
||||
<span className="h-full w-full p-4 flex items-center justify-center bg-gray-500 text-white rounded uppercase">
|
||||
{invitation.workspace.name.charAt(0)}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-sm font-medium text-gray-900">{invitation.workspace.name}</div>
|
||||
<p className="text-sm text-gray-500">
|
||||
Invited by {invitation.workspace.owner.first_name}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0 self-center">
|
||||
<input
|
||||
id={invitation.id}
|
||||
aria-describedby="workspaces"
|
||||
name={invitation.id}
|
||||
checked={invitationsRespond.includes(invitation.id)}
|
||||
value={invitation.workspace.name}
|
||||
onChange={(e) => {
|
||||
handleInvitation(
|
||||
invitation,
|
||||
invitationsRespond.includes(invitation.id) ? "withdraw" : "accepted"
|
||||
);
|
||||
setIsChecked(e.target.checked);
|
||||
}}
|
||||
type="checkbox"
|
||||
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SingleInvitation;
|
||||
|
|
@ -16,7 +16,6 @@ import {
|
|||
CURRENT_USER,
|
||||
PROJECTS_LIST,
|
||||
USER_WORKSPACES,
|
||||
USER_WORKSPACE_INVITATIONS,
|
||||
PROJECT_ISSUES_LIST,
|
||||
STATE_LIST,
|
||||
CYCLE_LIST,
|
||||
|
|
@ -24,7 +23,8 @@ import {
|
|||
|
||||
// types
|
||||
import type { KeyedMutator } from "swr";
|
||||
import type { IUser, IWorkspace, IProject, IIssue, IssueResponse, ICycle, IState } from "types";
|
||||
import type { IUser, IWorkspace, IProject, IssueResponse, ICycle, IState } from "types";
|
||||
|
||||
interface IUserContextProps {
|
||||
user?: IUser;
|
||||
isUserLoading: boolean;
|
||||
|
|
@ -38,8 +38,8 @@ interface IUserContextProps {
|
|||
activeProject?: IProject;
|
||||
issues?: IssueResponse;
|
||||
mutateIssues: KeyedMutator<IssueResponse>;
|
||||
sprints?: ICycle[];
|
||||
mutateSprints: KeyedMutator<ICycle[]>;
|
||||
cycles?: ICycle[];
|
||||
mutateCycles: KeyedMutator<ICycle[]>;
|
||||
states?: IState[];
|
||||
mutateStates: KeyedMutator<IState[]>;
|
||||
}
|
||||
|
|
@ -92,7 +92,7 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
|
|||
: null
|
||||
);
|
||||
|
||||
const { data: sprints, mutate: mutateSprints } = useSWR<ICycle[]>(
|
||||
const { data: cycles, mutate: mutateCycles } = useSWR<ICycle[]>(
|
||||
activeWorkspace && activeProject ? CYCLE_LIST(activeProject.id) : null,
|
||||
activeWorkspace && activeProject
|
||||
? () => sprintsServices.getCycles(activeWorkspace.slug, activeProject.id)
|
||||
|
|
@ -141,8 +141,8 @@ export const UserProvider = ({ children }: { children: ReactElement }) => {
|
|||
activeProject,
|
||||
issues,
|
||||
mutateIssues,
|
||||
sprints,
|
||||
mutateSprints,
|
||||
cycles,
|
||||
mutateCycles,
|
||||
states,
|
||||
mutateStates,
|
||||
setActiveProject,
|
||||
|
|
|
|||
|
|
@ -28,11 +28,13 @@ import {
|
|||
XMarkIcon,
|
||||
ArrowLongLeftIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
ClipboardDocumentIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// constants
|
||||
import { classNames } from "constants/common";
|
||||
import { classNames, copyTextToClipboard } from "constants/common";
|
||||
// ui
|
||||
import { Spinner, Tooltip } from "ui";
|
||||
import { CustomListbox, Spinner, Tooltip } from "ui";
|
||||
// types
|
||||
import type { IUser } from "types";
|
||||
|
||||
|
|
@ -423,23 +425,66 @@ const Sidebar: React.FC = () => {
|
|||
<Disclosure key={project?.id} defaultOpen={projectId === project?.id}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
{!sidebarCollapse && (
|
||||
<span className="flex items-center justify-between w-full">
|
||||
{project?.name}
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${open ? "rotate-180" : ""}`}
|
||||
/>
|
||||
<div className="flex items-center">
|
||||
<Disclosure.Button
|
||||
className={`w-full flex items-center gap-2 font-medium rounded-md p-2 text-sm ${
|
||||
sidebarCollapse ? "justify-center" : ""
|
||||
}`}
|
||||
>
|
||||
<span className="bg-gray-700 text-white rounded h-7 w-7 grid place-items-center uppercase flex-shrink-0">
|
||||
{project?.name.charAt(0)}
|
||||
</span>
|
||||
{!sidebarCollapse && (
|
||||
<span className="flex items-center justify-between w-full">
|
||||
{project?.name}
|
||||
<span>
|
||||
<ChevronDownIcon
|
||||
className={`h-4 w-4 duration-300 ${
|
||||
open ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
{!sidebarCollapse && (
|
||||
<Menu as="div" className="relative inline-block">
|
||||
<Menu.Button className="grid relative place-items-center focus: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="origin-top-right absolute right-0 mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||
<div className="p-1">
|
||||
<Menu.Item as="div">
|
||||
{(active) => (
|
||||
<button
|
||||
className="flex items-center gap-2 p-2 text-left text-gray-900 hover:bg-theme hover:text-white rounded-md text-xs whitespace-nowrap"
|
||||
onClick={() =>
|
||||
copyTextToClipboard(
|
||||
`https://app.plane.so/projects/${project?.id}/issues/`
|
||||
)
|
||||
}
|
||||
>
|
||||
<ClipboardDocumentIcon className="h-3 w-3" />
|
||||
Copy Link
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
)}
|
||||
</Disclosure.Button>
|
||||
</div>
|
||||
<Transition
|
||||
enter="transition duration-100 ease-out"
|
||||
enterFrom="transform scale-95 opacity-0"
|
||||
|
|
@ -509,21 +554,21 @@ const Sidebar: React.FC = () => {
|
|||
)}
|
||||
</div>
|
||||
<div className="px-2 py-2 bg-gray-50 w-full self-baseline flex items-center gap-x-2">
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${
|
||||
sidebarCollapse ? "justify-center w-full" : ""
|
||||
}`}
|
||||
onClick={() => toggleCollapsed()}
|
||||
>
|
||||
<Tooltip content="Click to toggle sidebar" position="right">
|
||||
<Tooltip content="Click to toggle sidebar" position="right">
|
||||
<button
|
||||
type="button"
|
||||
className={`flex items-center gap-3 px-2 py-2 text-xs font-medium rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 outline-none ${
|
||||
sidebarCollapse ? "justify-center w-full" : ""
|
||||
}`}
|
||||
onClick={() => toggleCollapsed()}
|
||||
>
|
||||
<ArrowLongLeftIcon
|
||||
className={`h-4 w-4 text-gray-500 group-hover:text-gray-900 flex-shrink-0 duration-300 ${
|
||||
sidebarCollapse ? "rotate-180" : ""
|
||||
}`}
|
||||
/>
|
||||
</Tooltip>
|
||||
</button>
|
||||
</button>
|
||||
</Tooltip>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -92,8 +92,6 @@ class ProjectIssuesServices extends APIService {
|
|||
issue: string;
|
||||
}
|
||||
) {
|
||||
console.log(data);
|
||||
|
||||
return this.post(CYCLE_DETAIL(workspace_slug, projectId, cycleId), data)
|
||||
.then((response) => {
|
||||
return response?.data;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,26 @@
|
|||
import React, { useEffect, useRef } from "react";
|
||||
// next
|
||||
import type { NextPage } from "next";
|
||||
// prose mirror
|
||||
import { EditorState } from "prosemirror-state";
|
||||
import { EditorView } from "prosemirror-view";
|
||||
import { Schema, DOMParser } from "prosemirror-model";
|
||||
import { schema } from "prosemirror-schema-basic";
|
||||
import { addListNodes } from "prosemirror-schema-list";
|
||||
import { exampleSetup } from "prosemirror-example-setup";
|
||||
import React from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const Editor: NextPage = () => {
|
||||
const editorRef = useRef<HTMLDivElement>(null);
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
const RichTextEditor = dynamic(() => import("../components/lexical/editor"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (!editorRef.current || !contentRef.current) return;
|
||||
|
||||
const mySchema = new Schema({
|
||||
nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
|
||||
marks: schema.spec.marks,
|
||||
});
|
||||
|
||||
const myEditorView = new EditorView(editorRef.current, {
|
||||
state: EditorState.create({
|
||||
doc: DOMParser.fromSchema(mySchema)?.parse(contentRef.current),
|
||||
plugins: exampleSetup({ schema: mySchema }),
|
||||
}),
|
||||
});
|
||||
|
||||
return () => myEditorView.destroy();
|
||||
}, []);
|
||||
const LexicalViewer = dynamic(() => import("../components/lexical/viewer"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const Home = () => {
|
||||
const [value, setValue] = React.useState("");
|
||||
const onChange: any = (value: any) => {
|
||||
console.log(value);
|
||||
setValue(value);
|
||||
};
|
||||
return (
|
||||
<div id="editor" ref={editorRef}>
|
||||
<div id="content" ref={contentRef} />
|
||||
</div>
|
||||
<>
|
||||
<RichTextEditor onChange={onChange} value={value} id="editor" />
|
||||
<LexicalViewer id="institution_viewer" value={value} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Editor;
|
||||
export default Home;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
// next
|
||||
import type { NextPage } from "next";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
// swr
|
||||
import useSWR from "swr";
|
||||
|
|
@ -14,12 +13,19 @@ import useUser from "lib/hooks/useUser";
|
|||
import { USER_WORKSPACE_INVITATIONS } from "constants/api-routes";
|
||||
// layouts
|
||||
import DefaultLayout from "layouts/DefaultLayout";
|
||||
// components
|
||||
import SingleInvitation from "components/workspace/SingleInvitation";
|
||||
// ui
|
||||
import { Button, Spinner } from "ui";
|
||||
import { Button, Spinner, EmptySpace, EmptySpaceItem } from "ui";
|
||||
// icons
|
||||
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { IWorkspaceInvitation } from "types";
|
||||
<<<<<<< Updated upstream
|
||||
import { CubeIcon, PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
||||
=======
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
const OnBoard: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -66,10 +72,15 @@ const OnBoard: NextPage = () => {
|
|||
};
|
||||
|
||||
useEffect(() => {
|
||||
<<<<<<< Updated upstream
|
||||
userService.updateUserOnBoard().then((response) => {
|
||||
console.log(response);
|
||||
});
|
||||
}, []);
|
||||
=======
|
||||
if (workspaces && workspaces.length === 0) setCanRedirect(false);
|
||||
}, [workspaces]);
|
||||
>>>>>>> Stashed changes
|
||||
|
||||
return (
|
||||
<DefaultLayout
|
||||
|
|
@ -85,9 +96,11 @@ const OnBoard: NextPage = () => {
|
|||
<p className="text-sm text-center">logged in as {user.email}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="w-full md:w-2/3 lg:w-1/3 p-8 rounded-lg">
|
||||
{invitations && workspaces ? (
|
||||
invitations.length > 0 ? (
|
||||
<<<<<<< Updated upstream
|
||||
<div className="mt-3 sm:mt-5">
|
||||
<div className="mt-2">
|
||||
<h2 className="text-2xl font-medium mb-4">Join your workspaces</h2>
|
||||
|
|
@ -128,10 +141,32 @@ const OnBoard: NextPage = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
=======
|
||||
<div className="max-w-lg">
|
||||
<div className="mb-4">
|
||||
<CubeIcon className="h-14 w-14 text-gray-400" />
|
||||
>>>>>>> Stashed changes
|
||||
</div>
|
||||
<div className="flex justify-between mt-4">
|
||||
<h2 className="text-lg font-medium text-gray-900">Workspace Invitations</h2>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Select invites that you want to accept.
|
||||
</p>
|
||||
<ul
|
||||
role="list"
|
||||
className="mt-6 divide-y divide-gray-200 border-t border-b border-gray-200"
|
||||
>
|
||||
{invitations.map((invitation) => (
|
||||
<SingleInvitation
|
||||
key={invitation.id}
|
||||
invitation={invitation}
|
||||
invitationsRespond={invitationsRespond}
|
||||
handleInvitation={handleInvitation}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-6">
|
||||
<Button className="w-full" onClick={submitInvitations}>
|
||||
Continue to Dashboard
|
||||
Accept and Continue
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -145,7 +145,9 @@ const MyIssues: NextPage = () => {
|
|||
<a>{myIssue.name}</a>
|
||||
</Link>
|
||||
</td>
|
||||
<td className="px-3 py-4 max-w-[15rem]">{myIssue.description}</td>
|
||||
<td className="px-3 py-4 max-w-[15rem] truncate">
|
||||
{myIssue.description}
|
||||
</td>
|
||||
<td className="px-3 py-4">
|
||||
{myIssue.project_detail?.name}
|
||||
<br />
|
||||
|
|
|
|||
|
|
@ -14,21 +14,18 @@ import { CYCLE_ISSUES, CYCLE_LIST } from "constants/fetch-keys";
|
|||
// layouts
|
||||
import AdminLayout from "layouts/AdminLayout";
|
||||
// components
|
||||
import SprintView from "components/project/cycles/CycleView";
|
||||
import CycleView from "components/project/cycles/CycleView";
|
||||
import ConfirmIssueDeletion from "components/project/issues/ConfirmIssueDeletion";
|
||||
import ConfirmSprintDeletion from "components/project/cycles/ConfirmCycleDeletion";
|
||||
import CreateUpdateIssuesModal from "components/project/issues/CreateUpdateIssueModal";
|
||||
import CreateUpdateSprintsModal from "components/project/cycles/CreateUpdateCyclesModal";
|
||||
// ui
|
||||
import { Spinner } from "ui";
|
||||
import { BreadcrumbItem, Breadcrumbs, HeaderButton, Spinner, EmptySpace, EmptySpaceItem } from "ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/20/solid";
|
||||
import { ArrowPathIcon } from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import { IIssue, ICycle, SelectSprintType, SelectIssue } from "types";
|
||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
||||
import { ArrowPathIcon } from "@heroicons/react/24/outline";
|
||||
import HeaderButton from "ui/HeaderButton";
|
||||
import { BreadcrumbItem, Breadcrumbs } from "ui/Breadcrumbs";
|
||||
|
||||
const ProjectSprints: NextPage = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
|
@ -44,7 +41,7 @@ const ProjectSprints: NextPage = () => {
|
|||
|
||||
const { projectId } = router.query;
|
||||
|
||||
const { data: sprints } = useSWR<ICycle[]>(
|
||||
const { data: cycles } = useSWR<ICycle[]>(
|
||||
projectId && activeWorkspace ? CYCLE_LIST(projectId as string) : null,
|
||||
activeWorkspace && projectId
|
||||
? () => sprintService.getCycles(activeWorkspace.slug, projectId as string)
|
||||
|
|
@ -52,14 +49,14 @@ const ProjectSprints: NextPage = () => {
|
|||
);
|
||||
|
||||
const openIssueModal = (
|
||||
sprintId: string,
|
||||
cycleId: string,
|
||||
issue?: IIssue,
|
||||
actionType: "create" | "edit" | "delete" = "create"
|
||||
) => {
|
||||
const sprint = sprints?.find((sprint) => sprint.id === sprintId);
|
||||
if (sprint) {
|
||||
const cycle = cycles?.find((cycle) => cycle.id === cycleId);
|
||||
if (cycle) {
|
||||
setSelectedSprint({
|
||||
...sprint,
|
||||
...cycle,
|
||||
actionType: "create-issue",
|
||||
});
|
||||
if (issue) setSelectedIssues({ ...issue, actionType });
|
||||
|
|
@ -67,16 +64,16 @@ const ProjectSprints: NextPage = () => {
|
|||
}
|
||||
};
|
||||
|
||||
const addIssueToSprint = (sprintId: string, issueId: string) => {
|
||||
const addIssueToSprint = (cycleId: string, issueId: string) => {
|
||||
if (!activeWorkspace || !projectId) return;
|
||||
|
||||
issuesServices
|
||||
.addIssueToSprint(activeWorkspace.slug, projectId as string, sprintId, {
|
||||
.addIssueToSprint(activeWorkspace.slug, projectId as string, cycleId, {
|
||||
issue: issueId,
|
||||
})
|
||||
.then((response) => {
|
||||
console.log(response);
|
||||
mutate(CYCLE_ISSUES(sprintId));
|
||||
mutate(CYCLE_ISSUES(cycleId));
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
|
|
@ -134,8 +131,8 @@ const ProjectSprints: NextPage = () => {
|
|||
setIsOpen={setIsOpen}
|
||||
projectId={projectId as string}
|
||||
/>
|
||||
{sprints ? (
|
||||
sprints.length > 0 ? (
|
||||
{cycles ? (
|
||||
cycles.length > 0 ? (
|
||||
<div className="h-full w-full space-y-5">
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link="/projects" />
|
||||
|
|
@ -146,15 +143,15 @@ const ProjectSprints: NextPage = () => {
|
|||
<HeaderButton Icon={PlusIcon} label="Add Cycle" onClick={() => setIsOpen(true)} />
|
||||
</div>
|
||||
<div className="h-full w-full">
|
||||
{sprints.map((sprint) => (
|
||||
<SprintView
|
||||
sprint={sprint}
|
||||
{cycles.map((cycle) => (
|
||||
<CycleView
|
||||
key={cycle.id}
|
||||
sprint={cycle}
|
||||
selectSprint={setSelectedSprint}
|
||||
projectId={projectId as string}
|
||||
workspaceSlug={activeWorkspace?.slug as string}
|
||||
openIssueModal={openIssueModal}
|
||||
addIssueToSprint={addIssueToSprint}
|
||||
key={sprint.id}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -162,12 +162,14 @@ const IssueDetail: NextPage = () => {
|
|||
/>
|
||||
</Breadcrumbs>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<h2 className="text-2xl font-medium">{`${activeProject?.name}/${activeProject?.identifier}-${issueDetail?.sequence_id}`}</h2>
|
||||
<h2 className="text-lg font-medium">{`${activeProject?.name ?? "Project"}/${
|
||||
activeProject?.identifier ?? "..."
|
||||
}-${issueDetail?.sequence_id ?? "..."}`}</h2>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<HeaderButton
|
||||
Icon={ChevronLeftIcon}
|
||||
disabled={!prevIssue}
|
||||
label="Previous"
|
||||
className={`${!prevIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
||||
onClick={() => {
|
||||
if (!prevIssue) return;
|
||||
router.push(`/projects/${prevIssue.project}/issues/${prevIssue.id}`);
|
||||
|
|
@ -177,6 +179,7 @@ const IssueDetail: NextPage = () => {
|
|||
Icon={ChevronRightIcon}
|
||||
disabled={!nextIssue}
|
||||
label="Next"
|
||||
className={`${!nextIssue ? "cursor-not-allowed opacity-70" : ""}`}
|
||||
onClick={() => {
|
||||
if (!nextIssue) return;
|
||||
router.push(`/projects/${nextIssue.project}/issues/${nextIssue?.id}`);
|
||||
|
|
@ -188,7 +191,7 @@ const IssueDetail: NextPage = () => {
|
|||
{issueDetail && activeProject ? (
|
||||
<div className="grid grid-cols-4 gap-5">
|
||||
<div className="col-span-3 space-y-5">
|
||||
<div className="bg-secondary rounded-lg p-5">
|
||||
<div className="bg-secondary rounded-lg p-4">
|
||||
<TextArea
|
||||
id="name"
|
||||
placeholder="Enter issue name"
|
||||
|
|
@ -200,7 +203,7 @@ const IssueDetail: NextPage = () => {
|
|||
handleSubmit(submitChanges)();
|
||||
}, 5000)}
|
||||
mode="transparent"
|
||||
className="text-3xl sm:text-3xl"
|
||||
className="text-xl font-medium"
|
||||
/>
|
||||
<TextArea
|
||||
id="description"
|
||||
|
|
@ -217,7 +220,7 @@ const IssueDetail: NextPage = () => {
|
|||
register={register}
|
||||
/>
|
||||
</div>
|
||||
<div className="bg-secondary rounded-lg p-5">
|
||||
<div className="bg-secondary rounded-lg p-4">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||
<div className="w-full border-t border-gray-300" />
|
||||
|
|
@ -233,7 +236,7 @@ const IssueDetail: NextPage = () => {
|
|||
<Tab
|
||||
key={item}
|
||||
className={({ selected }) =>
|
||||
`px-3 py-1 text-sm rounded-md border border-gray-700 ${
|
||||
`px-3 py-1 text-sm rounded-md border-2 border-gray-700 ${
|
||||
selected ? "bg-gray-700 text-white" : ""
|
||||
}`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -141,152 +141,154 @@ const ProjectIssues: NextPage = () => {
|
|||
<Spinner />
|
||||
</div>
|
||||
) : projectIssues.count > 0 ? (
|
||||
<div className="w-full space-y-5">
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link="/projects" />
|
||||
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
|
||||
</Breadcrumbs>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<h2 className="text-2xl font-medium">Project Issues</h2>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<div className="flex items-center gap-x-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||
issueView === "list" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIssueView("list");
|
||||
setGroupByProperty(null);
|
||||
}}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||
issueView === "kanban" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIssueView("kanban");
|
||||
setGroupByProperty("state_detail.name");
|
||||
}}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<Menu as="div" className="relative inline-block w-40">
|
||||
<div className="w-full">
|
||||
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none">
|
||||
<span className="flex gap-x-1 items-center">
|
||||
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
|
||||
"No Grouping"}
|
||||
</span>
|
||||
<div className="flex-grow flex justify-end">
|
||||
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</div>
|
||||
</Menu.Button>
|
||||
<>
|
||||
<div className="w-full space-y-5 mb-5">
|
||||
<Breadcrumbs>
|
||||
<BreadcrumbItem title="Projects" link="/projects" />
|
||||
<BreadcrumbItem title={`${activeProject?.name ?? "Project"} Issues`} />
|
||||
</Breadcrumbs>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<h2 className="text-2xl font-medium">Project Issues</h2>
|
||||
<div className="flex items-center gap-x-3">
|
||||
<div className="flex items-center gap-x-1">
|
||||
<button
|
||||
type="button"
|
||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||
issueView === "list" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIssueView("list");
|
||||
setGroupByProperty(null);
|
||||
}}
|
||||
>
|
||||
<ListBulletIcon className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`h-7 w-7 p-1 grid place-items-center rounded hover:bg-gray-200 duration-300 outline-none ${
|
||||
issueView === "kanban" ? "bg-gray-200" : ""
|
||||
}`}
|
||||
onClick={() => {
|
||||
setIssueView("kanban");
|
||||
setGroupByProperty("state_detail.name");
|
||||
}}
|
||||
>
|
||||
<Squares2X2Icon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<Menu as="div" className="relative inline-block w-40">
|
||||
<div className="w-full">
|
||||
<Menu.Button className="inline-flex justify-between items-center w-full rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none">
|
||||
<span className="flex gap-x-1 items-center">
|
||||
{groupByOptions.find((option) => option.key === groupByProperty)?.name ??
|
||||
"No Grouping"}
|
||||
</span>
|
||||
<div className="flex-grow flex justify-end">
|
||||
<ChevronDownIcon className="h-4 w-4" aria-hidden="true" />
|
||||
</div>
|
||||
</Menu.Button>
|
||||
</div>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||
<div className="p-1">
|
||||
{groupByOptions.map((option) => (
|
||||
<Menu.Item key={option.key}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={`${
|
||||
active ? "bg-theme text-white" : "text-gray-900"
|
||||
} group flex w-full items-center rounded-md p-2 text-xs`}
|
||||
onClick={() => setGroupByProperty(option.key)}
|
||||
>
|
||||
{option.name}
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
{issueView === "list" ? (
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-theme hover:text-white ${
|
||||
active ? "bg-theme text-white" : "text-gray-900"
|
||||
} group flex w-full items-center rounded-md p-2 text-xs`}
|
||||
onClick={() => setGroupByProperty(null)}
|
||||
>
|
||||
No grouping
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
) : null}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none w-40">
|
||||
<span>Properties</span>
|
||||
<ChevronDownIcon className="h-4 w-4" />
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
|
||||
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
||||
<div className="relative grid bg-white p-1">
|
||||
{Object.keys(properties).map((key) => (
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="origin-top-left absolute left-0 mt-2 w-full rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50">
|
||||
<div className="p-1">
|
||||
{groupByOptions.map((option) => (
|
||||
<Menu.Item key={option.key}>
|
||||
{({ active }) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`}
|
||||
onClick={() => setProperties(key as keyof Properties)}
|
||||
type="button"
|
||||
className={`${
|
||||
active ? "bg-theme text-white" : "text-gray-900"
|
||||
} group flex w-full items-center rounded-md p-2 text-xs`}
|
||||
onClick={() => setGroupByProperty(option.key)}
|
||||
>
|
||||
<p className="capitalize">{key.replace("_", " ")}</p>
|
||||
<span className="self-end">
|
||||
{properties[key as keyof Properties] ? (
|
||||
<EyeIcon width="18" height="18" />
|
||||
) : (
|
||||
<EyeSlashIcon width="18" height="18" />
|
||||
)}
|
||||
</span>
|
||||
{option.name}
|
||||
</button>
|
||||
))}
|
||||
)}
|
||||
</Menu.Item>
|
||||
))}
|
||||
{issueView === "list" ? (
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<button
|
||||
type="button"
|
||||
className={`hover:bg-theme hover:text-white ${
|
||||
active ? "bg-theme text-white" : "text-gray-900"
|
||||
} group flex w-full items-center rounded-md p-2 text-xs`}
|
||||
onClick={() => setGroupByProperty(null)}
|
||||
>
|
||||
No grouping
|
||||
</button>
|
||||
)}
|
||||
</Menu.Item>
|
||||
) : null}
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
<Popover className="relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Popover.Button className="inline-flex justify-between items-center rounded-md shadow-sm p-2 border border-gray-300 text-xs font-semibold text-gray-700 hover:bg-gray-100 focus:outline-none w-40">
|
||||
<span>Properties</span>
|
||||
<ChevronDownIcon className="h-4 w-4" />
|
||||
</Popover.Button>
|
||||
|
||||
<Transition
|
||||
as={React.Fragment}
|
||||
enter="transition ease-out duration-200"
|
||||
enterFrom="opacity-0 translate-y-1"
|
||||
enterTo="opacity-100 translate-y-0"
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100 translate-y-0"
|
||||
leaveTo="opacity-0 translate-y-1"
|
||||
>
|
||||
<Popover.Panel className="absolute left-1/2 z-10 mt-1 -translate-x-1/2 transform px-2 sm:px-0 w-full">
|
||||
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
||||
<div className="relative grid bg-white p-1">
|
||||
{Object.keys(properties).map((key) => (
|
||||
<button
|
||||
key={key}
|
||||
className={`text-gray-900 hover:bg-theme hover:text-white flex justify-between w-full items-center rounded-md p-2 text-xs`}
|
||||
onClick={() => setProperties(key as keyof Properties)}
|
||||
>
|
||||
<p className="capitalize">{key.replace("_", " ")}</p>
|
||||
<span className="self-end">
|
||||
{properties[key as keyof Properties] ? (
|
||||
<EyeIcon width="18" height="18" />
|
||||
) : (
|
||||
<EyeSlashIcon width="18" height="18" />
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<HeaderButton
|
||||
Icon={PlusIcon}
|
||||
label="Add Issue"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", {
|
||||
key: "i",
|
||||
ctrlKey: true,
|
||||
});
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
/>
|
||||
</Popover.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Popover>
|
||||
<HeaderButton
|
||||
Icon={PlusIcon}
|
||||
label="Add Issue"
|
||||
onClick={() => {
|
||||
const e = new KeyboardEvent("keydown", {
|
||||
key: "i",
|
||||
ctrlKey: true,
|
||||
});
|
||||
document.dispatchEvent(e);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{issueView === "list" ? (
|
||||
|
|
@ -298,14 +300,16 @@ const ProjectIssues: NextPage = () => {
|
|||
handleDeleteIssue={setDeleteIssue}
|
||||
/>
|
||||
) : (
|
||||
<BoardView
|
||||
properties={properties}
|
||||
selectedGroup={groupByProperty}
|
||||
groupedByIssues={groupedByIssues}
|
||||
members={members}
|
||||
/>
|
||||
<div className="h-full pb-7 mb-7">
|
||||
<BoardView
|
||||
properties={properties}
|
||||
selectedGroup={groupByProperty}
|
||||
groupedByIssues={groupedByIssues}
|
||||
members={members}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="h-full w-full grid place-items-center px-4 sm:px-0">
|
||||
<EmptySpace
|
||||
|
|
|
|||
|
|
@ -33,6 +33,8 @@ import {
|
|||
CheckIcon,
|
||||
PlusIcon,
|
||||
PencilSquareIcon,
|
||||
RectangleGroupIcon,
|
||||
PencilIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
// types
|
||||
import type { IProject, IState, IWorkspace, WorkspaceMember } from "types";
|
||||
|
|
@ -58,6 +60,7 @@ const ProjectSettings: NextPage = () => {
|
|||
|
||||
const [isCreateStateModalOpen, setIsCreateStateModalOpen] = useState(false);
|
||||
const [selectedState, setSelectedState] = useState<string | undefined>();
|
||||
const [newGroupForm, setNewGroupForm] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -414,8 +417,8 @@ const ProjectSettings: NextPage = () => {
|
|||
<div className="w-full space-y-5">
|
||||
{states?.map((state) => (
|
||||
<div
|
||||
className="border p-1 px-4 rounded flex justify-between items-center"
|
||||
key={state.id}
|
||||
className="bg-white px-4 py-2 rounded flex justify-between items-center"
|
||||
>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<div
|
||||
|
|
@ -433,25 +436,69 @@ const ProjectSettings: NextPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
className="flex items-center gap-x-1"
|
||||
onClick={() => setIsCreateStateModalOpen(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 text-gray-400" />
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<span>Add State</span>
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-5">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Manage the labels of this project.
|
||||
</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium leading-6 text-gray-900">Labels</h3>
|
||||
<p className="mt-1 text-sm text-gray-500">
|
||||
Manage the labels of this project.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
className="flex items-center gap-x-1"
|
||||
onClick={() => setNewGroupForm(true)}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
New group
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-5">
|
||||
<div
|
||||
className={`bg-white px-4 py-2 flex items-center gap-2 ${
|
||||
newGroupForm ? "" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<Input type="text" name="groupName" />
|
||||
<Button
|
||||
type="button"
|
||||
theme="secondary"
|
||||
onClick={() => setNewGroupForm(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="button">Save</Button>
|
||||
</div>
|
||||
{["", ""].map((group, index) => (
|
||||
<div key={index} className="bg-white p-4 text-gray-900 rounded-md">
|
||||
<h3 className="font-medium leading-5 flex items-center gap-2">
|
||||
<RectangleGroupIcon className="h-5 w-5" />
|
||||
This is the label group title
|
||||
</h3>
|
||||
<div className="pl-5 mt-4">
|
||||
<div className="group text-sm flex justify-between items-center p-2 hover:bg-gray-100 rounded">
|
||||
<h5 className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-red-600 rounded-full"></div>
|
||||
This is the label title
|
||||
</h5>
|
||||
<div className="hidden group-hover:block">
|
||||
<PencilIcon className="h-3 w-3" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div></div>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ const SignIn: NextPage = () => {
|
|||
>
|
||||
{isGoogleAuthenticationLoading && (
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-white z-50 flex items-center justify-center">
|
||||
<h2 className="text-2xl text-black">Sign in with Google. Please wait...</h2>
|
||||
<h2 className="text-2xl text-black">Signing in with Google. Please wait...</h2>
|
||||
</div>
|
||||
)}
|
||||
<div className="w-full h-screen flex justify-center items-center bg-gray-50 overflow-auto">
|
||||
|
|
|
|||
|
|
@ -18,11 +18,13 @@ import { Button } from "ui";
|
|||
// icons
|
||||
import {
|
||||
ChartBarIcon,
|
||||
CheckIcon,
|
||||
ChevronRightIcon,
|
||||
CubeIcon,
|
||||
ShareIcon,
|
||||
StarIcon,
|
||||
UserIcon,
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { EmptySpace, EmptySpaceItem } from "ui/EmptySpace";
|
||||
|
||||
|
|
@ -60,87 +62,75 @@ const WorkspaceInvitation: NextPage = () => {
|
|||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="bg-gray-50 rounded shadow-2xl border px-4 py-8 w-full md:w-1/3 space-y-4 flex flex-col justify-between">
|
||||
{invitationDetail.accepted ? (
|
||||
<>
|
||||
<h2 className="text-2xl">
|
||||
You are already a member of {invitationDetail.workspace.name}
|
||||
</h2>
|
||||
<div className="w-full flex gap-x-4">
|
||||
<Link href="/signin">
|
||||
<a className="w-full">
|
||||
<Button className="w-full">Go To Login Page</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<h2 className="text-2xl">
|
||||
You have been invited to{" "}
|
||||
<span className="font-semibold italic">
|
||||
{invitationDetail.workspace.name}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="w-full flex gap-x-4">
|
||||
<Link href="/">
|
||||
<a className="w-full">
|
||||
<Button theme="secondary" className="w-full">
|
||||
Ignore
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
<Button className="w-full" onClick={handleAccept}>
|
||||
Accept
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{invitationDetail.accepted ? (
|
||||
<>
|
||||
<EmptySpace
|
||||
title={`You are already a member of ${invitationDetail.workspace.name}`}
|
||||
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||
>
|
||||
<EmptySpaceItem
|
||||
Icon={CubeIcon}
|
||||
title="Continue to Dashboard"
|
||||
action={() => router.push("/")}
|
||||
/>
|
||||
</EmptySpace>
|
||||
</>
|
||||
) : (
|
||||
<EmptySpace
|
||||
title={`You have been invited to ${invitationDetail.workspace.name}`}
|
||||
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||
>
|
||||
<EmptySpaceItem Icon={CheckIcon} title="Accept" action={handleAccept} />
|
||||
<EmptySpaceItem
|
||||
Icon={XMarkIcon}
|
||||
title="Ignore"
|
||||
action={() => {
|
||||
router.push("/");
|
||||
}}
|
||||
/>
|
||||
</EmptySpace>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<EmptySpace
|
||||
title="This invitation link is not active anymore."
|
||||
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||
link={{ text: "Or start from an empty project", href: "/" }}
|
||||
>
|
||||
{!user ? (
|
||||
<EmptySpaceItem
|
||||
Icon={UserIcon}
|
||||
title="Sign in to continue"
|
||||
action={() => {
|
||||
router.push("/signin");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<EmptySpaceItem
|
||||
Icon={CubeIcon}
|
||||
title="Continue to Dashboard"
|
||||
action={() => {
|
||||
router.push("/");
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<EmptySpace
|
||||
title="This invitation link is not active anymore."
|
||||
description="Your workspace is where you'll create projects, collaborate on your issues, and organize different streams of work in your Plane account."
|
||||
link={{ text: "Or start from an empty project", href: "/" }}
|
||||
>
|
||||
{!user ? (
|
||||
<EmptySpaceItem
|
||||
Icon={StarIcon}
|
||||
title="Star us on GitHub"
|
||||
Icon={UserIcon}
|
||||
title="Sign in to continue"
|
||||
action={() => {
|
||||
router.push("https://github.com/makeplane");
|
||||
router.push("/signin");
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<EmptySpaceItem
|
||||
Icon={ShareIcon}
|
||||
title="Join our community of active creators"
|
||||
Icon={CubeIcon}
|
||||
title="Continue to Dashboard"
|
||||
action={() => {
|
||||
router.push("https://discord.com/invite/8SR2N9PAcJ");
|
||||
router.push("/");
|
||||
}}
|
||||
/>
|
||||
</EmptySpace>
|
||||
</>
|
||||
)}
|
||||
<EmptySpaceItem
|
||||
Icon={StarIcon}
|
||||
title="Star us on GitHub"
|
||||
action={() => {
|
||||
router.push("https://github.com/makeplane");
|
||||
}}
|
||||
/>
|
||||
<EmptySpaceItem
|
||||
Icon={ShareIcon}
|
||||
title="Join our community of active creators"
|
||||
action={() => {
|
||||
router.push("https://discord.com/invite/8SR2N9PAcJ");
|
||||
}}
|
||||
/>
|
||||
</EmptySpace>
|
||||
)}
|
||||
</div>
|
||||
</DefaultLayout>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4 KiB After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 267 B After Width: | Height: | Size: 287 B |
Binary file not shown.
|
Before Width: | Height: | Size: 584 B After Width: | Height: | Size: 366 B |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
1
apps/app/public/favicon/site.webmanifest
Normal file
1
apps/app/public/favicon/site.webmanifest
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
|
|
@ -19,7 +19,7 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
|
|||
children,
|
||||
onClick,
|
||||
type = "button",
|
||||
size = "rg",
|
||||
size = "sm",
|
||||
className,
|
||||
theme = "primary",
|
||||
disabled = false,
|
||||
|
|
@ -36,12 +36,12 @@ const Button = React.forwardRef<HTMLButtonElement, Props>(
|
|||
"inline-flex items-center rounded justify-center font-medium",
|
||||
theme === "primary"
|
||||
? `${
|
||||
disabled ? "bg-indigo-700 hover:bg-indigo-800" : "bg-theme hover:bg-indigo-700"
|
||||
disabled ? "opacity-70" : "bg-theme hover:bg-indigo-700"
|
||||
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 border border-transparent`
|
||||
: theme === "secondary"
|
||||
? "border border-gray-300 bg-white"
|
||||
: `${
|
||||
disabled ? "bg-red-700 hover:bg-red-800" : "bg-red-600 hover:bg-red-700"
|
||||
disabled ? "opacity-70" : "bg-red-600 hover:bg-red-700"
|
||||
} text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 border border-transparent`,
|
||||
size === "sm"
|
||||
? "p-2 text-xs"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ const SearchListbox: React.FC<Props> = ({
|
|||
value,
|
||||
multiple: canSelectMultiple,
|
||||
icon,
|
||||
width,
|
||||
width = "sm",
|
||||
optionsFontsize,
|
||||
buttonClassName,
|
||||
optionsClassName,
|
||||
|
|
@ -83,7 +83,9 @@ const SearchListbox: React.FC<Props> = ({
|
|||
>
|
||||
<Combobox.Options
|
||||
className={`absolute mt-1 bg-white shadow-lg rounded-md py-1 ring-1 ring-black ring-opacity-5 focus:outline-none max-h-32 overflow-auto z-10 ${
|
||||
width === "sm"
|
||||
width === "xs"
|
||||
? "w-20"
|
||||
: width === "sm"
|
||||
? "w-32"
|
||||
: width === "md"
|
||||
? "w-48"
|
||||
|
|
|
|||
2
apps/app/ui/SearchListbox/types.d.ts
vendored
2
apps/app/ui/SearchListbox/types.d.ts
vendored
|
|
@ -9,6 +9,6 @@ export type Props = {
|
|||
icon?: JSX.Element;
|
||||
buttonClassName?: string;
|
||||
optionsClassName?: string;
|
||||
width?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
width?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const Tooltip: React.FC<Props> = ({ children, content, position = "top" }) => {
|
|||
: "top-14"
|
||||
}`}
|
||||
>
|
||||
<p className="truncate text-sx">{content}</p>
|
||||
<p className="truncate text-xs">{content}</p>
|
||||
<span
|
||||
className={`absolute w-2 h-2 bg-black ${
|
||||
position === "top"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue