diff --git a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx index c8728b70..d7bb285c 100644 --- a/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx +++ b/src/app/(protected)/workorders/_components/detail/tabs/slide-over-extras-tab.tsx @@ -11,6 +11,7 @@ import { } from "lucide-react"; import { toast } from "react-toastify"; import { Text } from "@/components/ui/text"; +import { workOrdersApi } from "@/domain/work-orders/api/work-orders-api"; import type { UploadableMediaCategory } from "@/domain/work-orders/mappers/work-order-board-detail-mapper"; import type { FileCategory, MediaFile } from "@/domain/work-orders/types/work-order-media"; import { @@ -43,21 +44,36 @@ type SlideOverExtrasTabProps = { isReadOnly: boolean; pending?: boolean; avetaRequired?: boolean; + workOrderId?: string | number; onUpload: (files: File[]) => void; onRemove: (id: string) => void; onCategorize?: (id: string, category: UploadableMediaCategory) => void; }; +let lastExtraDocObjectUrl: string | null = null; + +async function openExtraDocContent(workOrderId: string | number, mediaId: string): Promise { + const blob = await workOrdersApi.getMediaContent(workOrderId, mediaId); + if (lastExtraDocObjectUrl) { + URL.revokeObjectURL(lastExtraDocObjectUrl); + } + const objectUrl = URL.createObjectURL(blob); + lastExtraDocObjectUrl = objectUrl; + window.open(objectUrl, "_blank", "noopener,noreferrer"); +} + function ExtraDocRow({ file, isReadOnly, pending, + workOrderId, onRemove, onCategorize, }: { file: MediaFile; isReadOnly: boolean; pending: boolean; + workOrderId?: string | number; onRemove: (id: string) => void; onCategorize?: (id: string, category: UploadableMediaCategory) => void; }) { @@ -75,15 +91,19 @@ function ExtraDocRow({ className="shrink-0" style={{ color: isAveta ? "var(--warning)" : "var(--color-text-muted)" }} /> - { + if (workOrderId == null) return; + void openExtraDocContent(workOrderId, file.id).catch(() => { + toast.error("Unable to open this document."); + }); + }} + className="min-w-0 flex-1 truncate text-left hover:underline" style={{ fontSize: 12, color: "var(--foreground)" }} > {file.name} - + {showCategory ? (