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

feat: quick-add placement in spreadsheet and gantt (#2259)

Browse Source 
* feat: sticking quick-add at the bottom of the screen

fix: opening create issue modal instead of quick-add in draft-issues, my-issue and profile page

* fix: build error due to dynamic import
This commit is contained in:
Dakshesh Jain 2023-09-25 19:08:26 +05:30 committed by GitHub
parent de7a672b79
commit 5e8d523ed4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 121 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/core/views/board-view/single-board.tsx
View File

@ -63,6 +63,10 @@ export const SingleBoard: React.FC<Props> = (props) => {
const router = useRouter();
const { cycleId, moduleId } = router.query;
const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
const isDraftIssuesPage = router.pathname.split("/")[4] === "draft-issues";
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
// Check if it has at least 4 tickets since it is enough to accommodate the Calendar height
@ -214,7 +218,11 @@ export const SingleBoard: React.FC<Props> = (props) => {
<button
type="button"
className="flex items-center gap-2 font-medium text-custom-primary outline-none p-1"
onClick={() => onCreateClick()}
onClick={() => {
if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
addIssueToGroup();
} else onCreateClick();
}}
>
<PlusIcon className="h-4 w-4" />
Add Issue

9
web/components/core/views/inline-issue-create-wrapper.tsx
View File

@ -154,15 +154,6 @@ export const InlineCreateIssueFormWrapper: React.FC<Props> = (props) => {
if (!isOpen) reset({ ...defaultValues });
}, [isOpen, reset]);
useEffect(() => {
if (isSubmitting)
setToastAlert({
type: "info",
title: "Creating issue...",
message: "Please wait while we create your issue.",
});
}, [isSubmitting, setToastAlert]);
useEffect(() => {
if (!errors) return;

7
web/components/core/views/list-view/inline-create-issue-form.tsx
View File

@ -46,10 +46,17 @@ const InlineInput = () => {
};
export const ListInlineCreateIssueForm: React.FC<Props> = (props) => (
<>
<InlineCreateIssueFormWrapper
className="flex py-3 px-4 items-center gap-x-5 bg-custom-background-100 shadow-custom-shadow-md"
{...props}
>
<InlineInput />
</InlineCreateIssueFormWrapper>
{props.isOpen && (
<p className="text-xs ml-3 mt-3 italic text-custom-text-200">
Press {"'"}Enter{"'"} to add another issue
</p>
)}
</>
);

15
web/components/core/views/list-view/single-list.tsx
View File

@ -62,6 +62,7 @@ export const SingleList: React.FC<Props> = (props) => {
openIssuesListModal,
handleDraftIssueAction,
handleMyIssueOpen,
addIssueToGroup,
removeIssue,
disableUserActions,
disableAddIssueOption = false,
@ -75,6 +76,10 @@ export const SingleList: React.FC<Props> = (props) => {
const [isCreateIssueFormOpen, setIsCreateIssueFormOpen] = useState(false);
const isMyIssuesPage = router.pathname.split("/")[3] === "my-issues";
const isProfileIssuesPage = router.pathname.split("/")[2] === "profile";
const isDraftIssuesPage = router.pathname.split("/")[4] === "draft-issues";
const isArchivedIssues = router.pathname.includes("archived-issues");
const type = cycleId ? "cycle" : moduleId ? "module" : "issue";
@ -295,7 +300,7 @@ export const SingleList: React.FC<Props> = (props) => {
)}
<ListInlineCreateIssueForm
isOpen={isCreateIssueFormOpen}
isOpen={isCreateIssueFormOpen && !disableAddIssueOption}
handleClose={() => setIsCreateIssueFormOpen(false)}
prePopulatedData={{
...(cycleId && { cycle: cycleId.toString() }),
@ -304,11 +309,15 @@ export const SingleList: React.FC<Props> = (props) => {
}}
/>
{!isCreateIssueFormOpen && (
{!disableAddIssueOption && !isCreateIssueFormOpen && (
<div className="w-full bg-custom-background-100 px-6 py-3">
<button
type="button"
onClick={() => setIsCreateIssueFormOpen(true)}
onClick={() => {
if (isDraftIssuesPage || isMyIssuesPage || isProfileIssuesPage) {
addIssueToGroup();
} else setIsCreateIssueFormOpen(true);
}}
className="flex items-center gap-x-[6px] text-custom-primary-100 px-2 py-1 rounded-md"
>
<PlusIcon className="h-4 w-4" />

24
web/components/core/views/spreadsheet-view/spreadsheet-view.tsx
View File

@ -90,6 +90,7 @@ export const SpreadsheetView: React.FC<Props> = ({
/>
))}
<div className="absolute bottom-0 left-0 z-10 group pb-2 hover:rounded-sm bg-custom-background-100 hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max">
<ListInlineCreateIssueForm
isOpen={isInlineCreateIssueFormOpen}
handleClose={() => setIsInlineCreateIssueFormOpen(false)}
@ -99,27 +100,24 @@ export const SpreadsheetView: React.FC<Props> = ({
}}
/>
<div
className="relative group grid auto-rows-[minmax(44px,1fr)] hover:rounded-sm hover:bg-custom-background-80 border-b border-custom-border-200 w-full min-w-max"
style={{ gridTemplateColumns }}
>
{!isInlineCreateIssueFormOpen && (
<>
{type === "issue" ? (
{type === "issue"
? !disableUserActions &&
!isInlineCreateIssueFormOpen && (
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
onClick={() => setIsInlineCreateIssueFormOpen(true)}
>
<PlusIcon className="h-4 w-4" />
Add Issue
</button>
) : (
!disableUserActions && (
)
: !disableUserActions &&
!isInlineCreateIssueFormOpen && (
<CustomMenu
className="sticky left-0 z-[1]"
customButton={
<button
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 bg-custom-background-100 group-hover:text-custom-text-100 group-hover:bg-custom-background-80 border-custom-border-200 w-full"
className="flex gap-1.5 items-center pl-7 py-2.5 text-sm sticky left-0 z-[1] text-custom-text-200 border-custom-border-200 w-full"
type="button"
>
<PlusIcon className="h-4 w-4" />
@ -127,6 +125,7 @@ export const SpreadsheetView: React.FC<Props> = ({
</button>
}
position="left"
verticalPosition="top"
optionsClassName="left-5 !w-36"
noBorder
>
@ -139,9 +138,6 @@ export const SpreadsheetView: React.FC<Props> = ({
</CustomMenu.MenuItem>
)}
</CustomMenu>
)
)}
</>
)}
</div>
</div>

7
web/components/gantt-chart/sidebar.tsx
View File

@ -155,7 +155,10 @@ export const GanttSidebar: React.FC<Props> = (props) => {
)}
{droppableProvided.placeholder}
</>
</div>
)}
</StrictModeDroppable>
<div className="pl-2.5">
<GanttInlineCreateIssueForm
isOpen={isCreateIssueFormOpen}
handleClose={() => setIsCreateIssueFormOpen(false)}
@ -178,8 +181,6 @@ export const GanttSidebar: React.FC<Props> = (props) => {
</button>
)}
</div>
)}
</StrictModeDroppable>
</DragDropContext>
);
};

3
web/components/profile/profile-issues-view.tsx
View File

@ -227,7 +227,8 @@ export const ProfileIssuesView = () => {
router.pathname.includes("my-issues")) ??
false;
const disableAddIssueOption = isSubscribedIssuesRoute || isMySubscribedIssues;
const disableAddIssueOption =
isSubscribedIssuesRoute || isMySubscribedIssues || user?.id !== userId;
return (
<>

13
web/layouts/app-layout/app-sidebar.tsx
View File

@ -1,3 +1,4 @@
import dynamic from "next/dynamic";
// hooks
import useTheme from "hooks/use-theme";
// components
@ -5,8 +6,18 @@ import {
WorkspaceHelpSection,
WorkspaceSidebarDropdown,
WorkspaceSidebarMenu,
WorkspaceSidebarQuickAction,
} from "components/workspace";
const WorkspaceSidebarQuickAction = dynamic<{}>(
() =>
import("components/workspace/sidebar-quick-action").then(
(mod) => mod.WorkspaceSidebarQuickAction
),
{
ssr: false,
}
);
import { ProjectSidebarList } from "components/project";
import { PublishProjectModal } from "components/project/publish-project/modal";
import { ConfirmProjectLeaveModal } from "components/project/confirm-project-leave-modal";

2
web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -189,11 +189,13 @@ const SingleCycle: React.FC = () => {
{cycleStatus === "completed" && (
<TransferIssues handleClick={() => setTransferIssuesModal(true)} />
)}
<div className="relative overflow-y-auto">
<IssuesView
openIssuesListModal={openIssuesListModal}
disableUserActions={cycleStatus === "completed" ?? false}
/>
</div>
</div>
<CycleDetailsSidebar
cycleStatus={cycleStatus}
cycle={cycleDetails}

6
web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -181,9 +181,9 @@ const SingleModule: React.FC = () => {
onClose={() => setAnalyticsModal(false)}
/>
<div
className={`h-full flex flex-col ${moduleSidebar ? "mr-[24rem]" : ""} ${
analyticsModal ? "mr-[50%]" : ""
} duration-300`}
className={`relative overflow-y-auto h-full flex flex-col ${
moduleSidebar ? "mr-[24rem]" : ""
} ${analyticsModal ? "mr-[50%]" : ""} duration-300`}
>
<IssuesView openIssuesListModal={openIssuesListModal} />
</div>