[WEB-1154] fix: delete attachment modal logic (#4338)

* fix: delete attachment modal logic

* chore: remove console log

* chore: update delete attachment button type
This commit is contained in:
Aaryan Khandelwal 2024-05-02 16:13:04 +05:30 committed by GitHub
parent 6918393b63
commit 42c4c46939
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 37 deletions

View File

@ -2,19 +2,19 @@ import { FC } from "react";
import { observer } from "mobx-react";
import Link from "next/link";
import { AlertCircle, X } from "lucide-react";
// ui
import { Tooltip } from "@plane/ui";
import { getFileIcon } from "@/components/icons/attachment";
// icons
import { getFileIcon } from "@/components/icons";
// components
import { IssueAttachmentDeleteModal } from "@/components/issues";
// helpers
import { convertBytesToSize, getFileExtension, getFileName } from "@/helpers/attachment.helper";
import { renderFormattedDate } from "@/helpers/date-time.helper";
import { truncateText } from "@/helpers/string.helper";
// hooks
import { useIssueDetail, useMember } from "@/hooks/store";
import { usePlatformOS } from "@/hooks/use-platform-os";
// hooks
// ui
// components
// icons
// helper
import { IssueAttachmentDeleteModal } from "./delete-attachment-confirmation-modal";
// types
import { TAttachmentOperations } from "./root";
@ -36,24 +36,24 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
isDeleteAttachmentModalOpen,
toggleDeleteAttachmentModal,
} = useIssueDetail();
// states
// derived values
const attachment = attachmentId ? getAttachmentById(attachmentId) : undefined;
// hooks
const { isMobile } = usePlatformOS();
const attachment = attachmentId && getAttachmentById(attachmentId);
if (!attachment) return <></>;
return (
<>
<IssueAttachmentDeleteModal
isOpen={isDeleteAttachmentModalOpen}
setIsOpen={() => toggleDeleteAttachmentModal(false)}
handleAttachmentOperations={handleAttachmentOperations}
data={attachment}
/>
<div
key={attachmentId}
className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm"
>
{isDeleteAttachmentModalOpen === attachment.id && (
<IssueAttachmentDeleteModal
isOpen={!!isDeleteAttachmentModalOpen}
onClose={() => toggleDeleteAttachmentModal(null)}
handleAttachmentOperations={handleAttachmentOperations}
data={attachment}
/>
)}
<div className="flex h-[60px] items-center justify-between gap-1 rounded-md border-[2px] border-custom-border-200 bg-custom-background-100 px-4 py-2 text-sm">
<Link href={attachment.asset} target="_blank" rel="noopener noreferrer">
<div className="flex items-center gap-3">
<div className="h-7 w-7">{getFileIcon(getFileExtension(attachment.asset))}</div>
@ -83,7 +83,7 @@ export const IssueAttachmentsDetail: FC<TIssueAttachmentsDetail> = observer((pro
</Link>
{!disabled && (
<button onClick={() => toggleDeleteAttachmentModal(true)}>
<button type="button" onClick={() => toggleDeleteAttachmentModal(attachment.id)}>
<X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
</button>
)}

View File

@ -1,4 +1,4 @@
import { FC, Fragment, Dispatch, SetStateAction, useState } from "react";
import { FC, Fragment, useState } from "react";
import { AlertTriangle } from "lucide-react";
import { Dialog, Transition } from "@headlessui/react";
import type { TIssueAttachment } from "@plane/types";
@ -14,18 +14,18 @@ export type TAttachmentOperationsRemoveModal = Exclude<TAttachmentOperations, "c
type Props = {
isOpen: boolean;
setIsOpen: Dispatch<SetStateAction<boolean>>;
onClose: () => void;
data: TIssueAttachment;
handleAttachmentOperations: TAttachmentOperationsRemoveModal;
};
export const IssueAttachmentDeleteModal: FC<Props> = (props) => {
const { isOpen, setIsOpen, data, handleAttachmentOperations } = props;
// state
const { isOpen, onClose, data, handleAttachmentOperations } = props;
// states
const [loader, setLoader] = useState(false);
const handleClose = () => {
setIsOpen(false);
onClose();
setLoader(false);
};

View File

@ -1,7 +1,5 @@
export * from "./root";
export * from "./attachment-upload";
export * from "./delete-attachment-confirmation-modal";
export * from "./attachments-list";
export * from "./attachment-detail";
export * from "./attachment-upload";
export * from "./attachments-list";
export * from "./delete-attachment-modal";
export * from "./root";

View File

@ -51,7 +51,7 @@ export interface IIssueDetail
isArchiveIssueModalOpen: boolean;
isRelationModalOpen: TIssueRelationTypes | null;
isSubIssuesModalOpen: boolean;
isDeleteAttachmentModalOpen: boolean;
isDeleteAttachmentModalOpen: string | null;
// computed
isAnyModalOpen: boolean;
// helper actions
@ -65,7 +65,7 @@ export interface IIssueDetail
toggleArchiveIssueModal: (value: boolean) => void;
toggleRelationModal: (relationType: TIssueRelationTypes | null) => void;
toggleSubIssuesModal: (value: boolean) => void;
toggleDeleteAttachmentModal: (value: boolean) => void;
toggleDeleteAttachmentModal: (attachmentId: string | null) => void;
// store
rootIssueStore: IIssueRootStore;
issue: IIssueStore;
@ -90,7 +90,7 @@ export class IssueDetail implements IIssueDetail {
isArchiveIssueModalOpen: boolean = false;
isRelationModalOpen: TIssueRelationTypes | null = null;
isSubIssuesModalOpen: boolean = false;
isDeleteAttachmentModalOpen: boolean = false;
isDeleteAttachmentModalOpen: string | null = null;
// store
rootIssueStore: IIssueRootStore;
issue: IIssueStore;
@ -154,7 +154,7 @@ export class IssueDetail implements IIssueDetail {
this.isArchiveIssueModalOpen ||
!!this.isRelationModalOpen ||
this.isSubIssuesModalOpen ||
this.isDeleteAttachmentModalOpen
!!this.isDeleteAttachmentModalOpen
);
}
@ -170,7 +170,7 @@ export class IssueDetail implements IIssueDetail {
toggleArchiveIssueModal = (value: boolean) => (this.isArchiveIssueModalOpen = value);
toggleRelationModal = (relationType: TIssueRelationTypes | null) => (this.isRelationModalOpen = relationType);
toggleSubIssuesModal = (value: boolean) => (this.isSubIssuesModalOpen = value);
toggleDeleteAttachmentModal = (value: boolean) => (this.isDeleteAttachmentModalOpen = value);
toggleDeleteAttachmentModal = (attachmentId: string | null) => (this.isDeleteAttachmentModalOpen = attachmentId);
// issue
fetchIssue = async (