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

96
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,45 +32,63 @@ export default function CaseAttachmentsEditor({
}); });
return ( return (
<> <>
{images.map((image, index) => ( <div className="flex flex-wrap mt-3">
<div key={index} className="flex"> {images.map((image, index) => (
<Image <Card key={index} radius="sm" className="mt-2 me-2 max-w-md">
alt={image.title} <CardBody>
src={image.path} <Image
className="object-cover h-40 w-40" alt={image.title}
/> src={image.path}
<div className="mt-3 ms-1"> className="object-cover h-40 w-40"
<Tooltip content="Delete this image file" placement="left"> />
<Button <div className="flex items-center justify-between">
isIconOnly <p>{image.title}</p>
size="sm" <Tooltip content="Delete">
className="bg-transparent rounded-full" <Button
onPress={() => onAttachmentDelete(image.id)} isIconOnly
> size="sm"
<Trash size={16} /> className="bg-transparent rounded-full"
</Button> onPress={() => onAttachmentDelete(image.id)}
</Tooltip> >
</div> <Trash size={16} />
</div> </Button>
))} </Tooltip>
</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>
<Button <Tooltip content="Download">
isIconOnly <Button
size="sm" isIconOnly
className="bg-transparent rounded-full" size="sm"
onPress={() => onAttachmentDelete(file.id)} className="bg-transparent rounded-full"
> onPress={() => console.log("download")}
<Trash size={16} /> >
</Button> <ArrowDownToLine size={16} />
</Tooltip> </Button>
</div> </Tooltip>
</div> <Tooltip content="Delete">
<Button
isIconOnly
size="sm"
className="bg-transparent rounded-full"
onPress={() => onAttachmentDelete(file.id)}
>
<Trash size={16} />
</Button>
</Tooltip>
</div>
</div>
</CardBody>
</Card>
))} ))}
</> </>
); );