feat: view document support

mrevanzak · Jun 29, 2024 · 980aae7 · 980aae7
1 parent 7957e60
commit 980aae7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/apps/web/public/locales/en.json b/apps/web/public/locales/en.json
@@ -17,6 +17,7 @@
       "search": "Search document...",
       "empty": "No documents found",
       "hint": "Drag and drop a document to upload",
+      "view": "View document",
       "delete": "Delete document",
       "download": "Download document",
       "columns": {

diff --git a/apps/web/public/locales/id.json b/apps/web/public/locales/id.json
@@ -17,6 +17,7 @@
       "search": "Cari dokumen...",
       "empty": "Tidak ada dokumen",
       "hint": "Seret dan lepas dokumen di sini untuk mengunggah",
+      "view": "Lihat dokumen",
       "delete": "Hapus dokumen",
       "download": "Unduh dokumen",
       "columns": {

diff --git a/apps/web/src/app/(app)/@admin/documents/table.tsx b/apps/web/src/app/(app)/@admin/documents/table.tsx
@@ -2,6 +2,7 @@
 
 import type { Document } from "@/server/api/routers/documents/documents.schema";
 import React, { useMemo } from "react";
+import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { api } from "@/trpc/react";
 import {
@@ -25,6 +26,7 @@ import {
 } from "@nextui-org/react";
 import moment from "moment";
 import { useTranslations } from "next-intl";
+import { IoOpenOutline } from "react-icons/io5";
 import { MdOutlineDownloadForOffline } from "react-icons/md";
 import { RiDeleteBin2Line } from "react-icons/ri";
 
@@ -110,6 +112,18 @@ export function DocumentsTable() {
         case "actions":
           return (
             <div className="flex items-center gap-2">
+              <Tooltip content={t("view")} color="default" className="p-2">
+                <Link href={`/api/documents/${file.id}`} target="_blank">
+                  <Button
+                    className="pointer-events-auto"
+                    isIconOnly
+                    variant="light"
+                    color="default"
+                  >
+                    <IoOpenOutline />
+                  </Button>
+                </Link>
+              </Tooltip>
               <Tooltip content={t("download")} color="primary" className="p-2">
                 <Button
                   className="pointer-events-auto"

diff --git a/apps/web/src/app/api/documents/[fileId]/route.ts b/apps/web/src/app/api/documents/[fileId]/route.ts
@@ -13,5 +13,19 @@ export async function GET(_: Request, context: { params: { fileId: string } }) {
   const res = await fetch(
     env.BACKEND_URL + "/files/download/" + context.params.fileId,
   );
-  return res;
+
+  if (!res.ok) {
+    return await res.json();
+  }
+
+  return new Response(await res.arrayBuffer(), {
+    headers: {
+      "Content-Type": "application/pdf",
+      "Content-Disposition":
+        res.headers
+          .get("Content-Disposition")
+          ?.replace("attachment", "inline") ??
+        'inline; filename="document.pdf"',
+    },
+  });
 }