yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix Uploaded file display

Browse Source
This commit is contained in:
Takeshi Kimata
2024-03-17 21:09:49 +09:00
parent 52046992f0
commit 1634cfc252
1 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/app/projects/[projectId]/folders/[folderId]/cases/[caseId]/case-attachments-editor.tsx
View File

@@ -1,6 +1,6 @@
import { Image, Button, Tooltip } from "@nextui-org/react"; import { Image, Button, Tooltip, Card, CardBody } from "@nextui-org/react";
import { AttachmentType } from "./caseTypes"; import { AttachmentType } from "./caseTypes";
import { Trash } from "lucide-react"; import { Trash, ArrowDownToLine } from "lucide-react";
type Props = { type Props = {
attachments: AttachmentType[]; attachments: AttachmentType[];
@@ -32,15 +32,18 @@ export default function CaseAttachmentsEditor({
}); });
return ( return (
<> <>
<div className="flex flex-wrap mt-3">
{images.map((image, index) => ( {images.map((image, index) => (
<div key={index} className="flex"> <Card key={index} radius="sm" className="mt-2 me-2 max-w-md">
<CardBody>
<Image <Image
alt={image.title} alt={image.title}
src={image.path} src={image.path}
className="object-cover h-40 w-40" className="object-cover h-40 w-40"
/> />
<div className="mt-3 ms-1"> <div className="flex items-center justify-between">
<Tooltip content="Delete this image file" placement="left"> <p>{image.title}</p>
<Tooltip content="Delete">
<Button <Button
isIconOnly isIconOnly
size="sm" size="sm"
@@ -51,15 +54,28 @@ export default function CaseAttachmentsEditor({
</Button> </Button>
</Tooltip> </Tooltip>
</div> </div>
</div> </CardBody>
</Card>
))} ))}
</div>
{others.map((file, index) => ( {others.map((file, index) => (
<div key={index} className="flex"> <Card key={index} radius="sm" className="mt-2 max-w-md">
<div>{file.title}</div> <CardBody>
<div>{file.path}</div> <div className="flex items-center justify-between">
<div className="mt-3 ms-1"> <p>{file.title}</p>
<Tooltip content="Delete this attachment file" placement="left"> <div>
<Tooltip content="Download">
<Button
isIconOnly
size="sm"
className="bg-transparent rounded-full"
onPress={() => console.log("download")}
>
<ArrowDownToLine size={16} />
</Button>
</Tooltip>
<Tooltip content="Delete">
<Button <Button
isIconOnly isIconOnly
size="sm" size="sm"
@@ -71,6 +87,8 @@ export default function CaseAttachmentsEditor({
</Tooltip> </Tooltip>
</div> </div>
</div> </div>
</CardBody>
</Card>
))} ))}
</> </>
); );