makeplane · sriramveeraghanta · Sep 14, 2023 · Sep 14, 2023 · Sep 14, 2023 · Sep 14, 2023
diff --git a/web/components/core/views/all-views.tsx b/web/components/core/views/all-views.tsx
@@ -49,7 +49,7 @@ type Props = {
     };
     secondaryButton?: React.ReactNode;
   };
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit" | "updateDraft") => void;
   handleOnDragEnd: (result: DropResult) => Promise<void>;
   openIssuesListModal: (() => void) | null;
   removeIssue: ((bridgeId: string, issueId: string) => void) | null;

diff --git a/web/components/core/views/board-view/all-boards.tsx b/web/components/core/views/board-view/all-boards.tsx
@@ -19,7 +19,7 @@ type Props = {
   disableUserActions: boolean;
   disableAddIssueOption?: boolean;
   dragDisabled: boolean;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit" | "updateDraft") => void;
   handleTrashBox: (isDragging: boolean) => void;
   openIssuesListModal?: (() => void) | null;
   removeIssue: ((bridgeId: string, issueId: string) => void) | null;

diff --git a/web/components/core/views/issues-view.tsx b/web/components/core/views/issues-view.tsx
@@ -19,7 +19,12 @@ import useIssuesProperties from "hooks/use-issue-properties";
 import useProjectMembers from "hooks/use-project-members";
 // components
 import { FiltersList, AllViews } from "components/core";
-import { CreateUpdateIssueModal, DeleteIssueModal, IssuePeekOverview } from "components/issues";
+import {
+  CreateUpdateIssueModal,
+  DeleteIssueModal,
+  IssuePeekOverview,
+  CreateUpdateDraftIssueModal,
+} from "components/issues";
 import { CreateUpdateViewModal } from "components/views";
 // ui
 import { PrimaryButton, SecondaryButton } from "components/ui";
@@ -70,6 +75,9 @@ export const IssuesView: React.FC<Props> = ({
   // trash box
   const [trashBox, setTrashBox] = useState(false);
 
+  // selected draft issue
+  const [selectedDraftIssue, setSelectedDraftIssue] = useState<IIssue | null>(null);
+
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, viewId } = router.query;
 
@@ -106,6 +114,8 @@ export const IssuesView: React.FC<Props> = ({
     [setDeleteIssueModal, setIssueToDelete]
   );
 
+  const handleDraftIssueClick = (issue: any) => setSelectedDraftIssue(issue);
+
   const handleOnDragEnd = useCallback(
     async (result: DropResult) => {
       setTrashBox(false);
@@ -335,10 +345,11 @@ export const IssuesView: React.FC<Props> = ({
   );
 
   const handleIssueAction = useCallback(
-    (issue: IIssue, action: "copy" | "edit" | "delete") => {
+    (issue: IIssue, action: "copy" | "edit" | "delete" | "updateDraft") => {
       if (action === "copy") makeIssueCopy(issue);
       else if (action === "edit") handleEditIssue(issue);
       else if (action === "delete") handleDeleteIssue(issue);
+      else if (action === "updateDraft") handleDraftIssueClick(issue);
     },
     [makeIssueCopy, handleEditIssue, handleDeleteIssue]
   );
@@ -451,6 +462,27 @@ export const IssuesView: React.FC<Props> = ({
           ...preloadedData,
         }}
       />
+      <CreateUpdateDraftIssueModal
+        isOpen={selectedDraftIssue !== null}
+        handleClose={() => setSelectedDraftIssue(null)}
+        data={
+          selectedDraftIssue
+            ? {
+                ...selectedDraftIssue,
+                is_draft: true,
+              }
+            : null
+        }
+        fieldsToShow={[
+          "name",
+          "description",
+          "label",
+          "assignee",
+          "priority",
+          "dueDate",
+          "priority",
+        ]}
+      />
       <CreateUpdateIssueModal
         isOpen={editIssueModal && issueToEdit?.actionType !== "delete"}
         handleClose={() => setEditIssueModal(false)}

diff --git a/web/components/core/views/list-view/all-lists.tsx b/web/components/core/views/list-view/all-lists.tsx
@@ -14,7 +14,7 @@ import { ICurrentUserResponse, IIssue, IIssueViewProps, IState, UserAuth } from
 type Props = {
   states: IState[] | undefined;
   addIssueToGroup: (groupTitle: string) => void;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit" | "updateDraft") => void;
   openIssuesListModal?: (() => void) | null;
   myIssueProjectId?: string | null;
   handleMyIssueOpen?: (issue: IIssue) => void;

diff --git a/web/components/core/views/list-view/single-issue.tsx b/web/components/core/views/list-view/single-issue.tsx
@@ -61,6 +61,7 @@ type Props = {
   makeIssueCopy: () => void;
   removeIssue?: (() => void) | null;
   handleDeleteIssue: (issue: IIssue) => void;
+  handleDraftIssueSelect?: (issue: IIssue) => void;
   handleMyIssueOpen?: (issue: IIssue) => void;
   disableUserActions: boolean;
   user: ICurrentUserResponse | undefined;
@@ -82,6 +83,7 @@ export const SingleListIssue: React.FC<Props> = ({
   user,
   userAuth,
   viewProps,
+  handleDraftIssueSelect,
 }) => {
   // context menu
   const [contextMenu, setContextMenu] = useState(false);
@@ -90,6 +92,7 @@ export const SingleListIssue: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug, projectId, cycleId, moduleId, userId } = router.query;
   const isArchivedIssues = router.pathname.includes("archived-issues");
+  const isDraftIssues = router.pathname?.split("/")?.[4] === "draft-issues";
 
   const { setToastAlert } = useToast();
 
@@ -178,6 +181,8 @@ export const SingleListIssue: React.FC<Props> = ({
 
   const issuePath = isArchivedIssues
     ? `/${workspaceSlug}/projects/${issue.project}/archived-issues/${issue.id}`
+    : isDraftIssues
+    ? `#`
     : `/${workspaceSlug}/projects/${issue.project}/issues/${issue.id}`;
 
   const openPeekOverview = (issue: IIssue) => {
@@ -247,7 +252,11 @@ export const SingleListIssue: React.FC<Props> = ({
               <button
                 type="button"
                 className="truncate text-[0.825rem] text-custom-text-100"
-                onClick={() => openPeekOverview(issue)}
+                onClick={() => {
+                  if (!isDraftIssues) openPeekOverview(issue);
+
+                  if (handleDraftIssueSelect) handleDraftIssueSelect(issue);
+                }}
               >
                 {issue.name}
               </button>

diff --git a/web/components/core/views/list-view/single-list.tsx b/web/components/core/views/list-view/single-list.tsx
@@ -39,7 +39,7 @@ type Props = {
   currentState?: IState | null;
   groupTitle: string;
   addIssueToGroup: () => void;
-  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
+  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit" | "updateDraft") => void;
   openIssuesListModal?: (() => void) | null;
   handleMyIssueOpen?: (issue: IIssue) => void;
   removeIssue: ((bridgeId: string, issueId: string) => void) | null;
@@ -253,6 +253,7 @@ export const SingleList: React.FC<Props> = ({
                       editIssue={() => handleIssueAction(issue, "edit")}
                       makeIssueCopy={() => handleIssueAction(issue, "copy")}
                       handleDeleteIssue={() => handleIssueAction(issue, "delete")}
+                      handleDraftIssueSelect={() => handleIssueAction(issue, "updateDraft")}
                       handleMyIssueOpen={handleMyIssueOpen}
                       removeIssue={() => {
                         if (removeIssue !== null && issue.bridge_id)

diff --git a/web/components/issues/confirm-issue-discard.tsx b/web/components/issues/confirm-issue-discard.tsx
@@ -0,0 +1,93 @@
+import React, { useState } from "react";
+
+// headless ui
+import { Dialog, Transition } from "@headlessui/react";
+// ui
+import { SecondaryButton, PrimaryButton } from "components/ui";
+
+type Props = {
+  isOpen: boolean;
+  handleClose: () => void;
+  onDiscard: () => void;
+  onConfirm: () => Promise<void>;
+};
+
+export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
+  const { isOpen, handleClose, onDiscard, onConfirm } = props;
+
+  const [isLoading, setIsLoading] = useState(false);
+
+  const onClose = () => {
+    handleClose();
+    setIsLoading(false);
+  };
+
+  const handleDeletion = async () => {
+    setIsLoading(true);
+    await onConfirm();
+    setIsLoading(false);
+  };
+
+  return (
+    <Transition.Root show={isOpen} as={React.Fragment}>
+      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Transition.Child
+          as={React.Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 z-10 overflow-y-auto">
+          <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:my-8 sm:w-[40rem]">
+                <div className="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                  <div className="sm:flex sm:items-start">
+                    <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
+                      <Dialog.Title
+                        as="h3"
+                        className="text-lg font-medium leading-6 text-custom-text-100"
+                      >
+                        Draft Issue
+                      </Dialog.Title>
+                      <div className="mt-2">
+                        <p className="text-sm text-custom-text-200">
+                          Would you like to save this issue in drafts?
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex justify-between gap-2 p-4 sm:px-6">
+                  <div>
+                    <SecondaryButton onClick={onDiscard}>Discard</SecondaryButton>
+                  </div>
+                  <div className="space-x-2">
+                    <SecondaryButton onClick={onClose}>Cancel</SecondaryButton>
+                    <PrimaryButton onClick={handleDeletion} loading={isLoading}>
+                      {isLoading ? "Saving..." : "Save Draft"}
+                    </PrimaryButton>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition.Root>
+  );
+};