forked from github/plane
380b00c1a2
* fix: upgrading next package and removed unused deps * chore: unused variable removed * chore: next image icon fix * chore: unused component removed * chore: next image icon fix * chore: replace use-debounce with lodash debounce * chore: unused component removed * resolved: fixed issue with next link component * fix: updates in next config * fix: updating types pages --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
104 lines
4.0 KiB
TypeScript
104 lines
4.0 KiB
TypeScript
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import useSWR from "swr";
|
|
// ui
|
|
import { Tooltip } from "@plane/ui";
|
|
import { DeleteAttachmentModal } from "./delete-attachment-modal";
|
|
// icons
|
|
import { getFileIcon } from "components/icons";
|
|
import { AlertCircle, X } from "lucide-react";
|
|
// services
|
|
import { IssueAttachmentService } from "services/issue";
|
|
import { ProjectMemberService } from "services/project";
|
|
// fetch-key
|
|
import { ISSUE_ATTACHMENTS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
|
// helper
|
|
import { truncateText } from "helpers/string.helper";
|
|
import { renderLongDateFormat } from "helpers/date-time.helper";
|
|
import { convertBytesToSize, getFileExtension, getFileName } from "helpers/attachment.helper";
|
|
// type
|
|
import { IIssueAttachment } from "types";
|
|
|
|
// services
|
|
const issueAttachmentService = new IssueAttachmentService();
|
|
const projectMemberService = new ProjectMemberService();
|
|
|
|
export const IssueAttachments = () => {
|
|
const [deleteAttachment, setDeleteAttachment] = useState<IIssueAttachment | null>(null);
|
|
const [attachmentDeleteModal, setAttachmentDeleteModal] = useState<boolean>(false);
|
|
|
|
const router = useRouter();
|
|
const { workspaceSlug, projectId, issueId } = router.query;
|
|
|
|
const { data: attachments } = useSWR<IIssueAttachment[]>(
|
|
workspaceSlug && projectId && issueId ? ISSUE_ATTACHMENTS(issueId as string) : null,
|
|
workspaceSlug && projectId && issueId
|
|
? () => issueAttachmentService.getIssueAttachment(workspaceSlug as string, projectId as string, issueId as string)
|
|
: null
|
|
);
|
|
|
|
const { data: people } = useSWR(
|
|
workspaceSlug && projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
|
workspaceSlug && projectId
|
|
? () => projectMemberService.fetchProjectMembers(workspaceSlug as string, projectId as string)
|
|
: null
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<DeleteAttachmentModal
|
|
isOpen={attachmentDeleteModal}
|
|
setIsOpen={setAttachmentDeleteModal}
|
|
data={deleteAttachment}
|
|
/>
|
|
{attachments &&
|
|
attachments.length > 0 &&
|
|
attachments.map((file) => (
|
|
<div
|
|
key={file.id}
|
|
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={file.asset} target="_blank">
|
|
<span>
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-7 w-7">{getFileIcon(getFileExtension(file.asset))}</div>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center gap-2">
|
|
<Tooltip tooltipContent={getFileName(file.attributes.name)}>
|
|
<span className="text-sm">{truncateText(`${getFileName(file.attributes.name)}`, 10)}</span>
|
|
</Tooltip>
|
|
<Tooltip
|
|
tooltipContent={`${
|
|
people?.find((person) => person.member.id === file.updated_by)?.member.display_name ?? ""
|
|
} uploaded on ${renderLongDateFormat(file.updated_at)}`}
|
|
>
|
|
<span>
|
|
<AlertCircle className="h-3 w-3" />
|
|
</span>
|
|
</Tooltip>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 text-xs text-custom-text-200">
|
|
<span>{getFileExtension(file.asset).toUpperCase()}</span>
|
|
<span>{convertBytesToSize(file.attributes.size)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</Link>
|
|
|
|
<button
|
|
onClick={() => {
|
|
setDeleteAttachment(file);
|
|
setAttachmentDeleteModal(true);
|
|
}}
|
|
>
|
|
<X className="h-4 w-4 text-custom-text-200 hover:text-custom-text-100" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
};
|