(dokumen ui) pakai gview frame & tambah informasi ukuran file

bolsel · Oct 1, 2024 · d6c7aae · d6c7aae
1 parent e07ec5c
commit d6c7aae
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 15 deletions.
diff --git a/src/ui/dokumen/item-detail.tsx b/src/ui/dokumen/item-detail.tsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { IUICreateCustomizableDefine, UICreateCustomizable } from '../create';
 import DocumentIcon from '@/components/icons/document-icon';
 import BaseIcon from '@/components/icons/base-icon';
-import { documentMimeTypeLabel } from '@/lib/utils';
+import { documentMimeTypeLabel, humanFileSize } from '@/lib/utils';
 import ShareItem from '@/components/share/item';
 
 export type UIDocumentItemDetailType<Item extends Record<string, any>> =
@@ -120,6 +120,22 @@ hover:text-primary-700 hover:bg-primary-100"
               </p>
             </div>
           </section>
+          <section className="flex gap-4">
+            <div className="w-6">
+              <BaseIcon
+                icon="document-file"
+                className="self-start text-primary w-6 h-6"
+              />
+            </div>
+            <div>
+              <h2 className="font-default text-xs text-blue-gray-400 mb-1 leading-5">
+                Ukuran Dokumen
+              </h2>
+              <p className="text-gray-800 font-normal text-sm leading-relaxed mb-4">
+                {humanFileSize(fields.file.filesize, true, 0)}
+              </p>
+            </div>
+          </section>
           <div className="w-full grid grid-cols-1 md:grid-cols-2 gap-6">
             <section className="flex gap-4">
               <div className="w-6">

diff --git a/src/ui/dokumen/item-frame.tsx b/src/ui/dokumen/item-frame.tsx
@@ -11,25 +11,31 @@ const UIDocumentItemFrame = (props: UIDocumentFrameType['props']) =>
     props,
     defaults: {},
     Component({ item }) {
-      const [show, setShow] = useState(false);
+      const [skeleton, setSkeleton] = useState(true);
       return (
         <div className="mb-5 lg:mb-0 w-full h-[80vh]">
           {item.file.type === 'application/pdf' ? (
-            show ? (
+            <>
+              {skeleton ? (
+                <div className="w-12 h-12 w-full h-full bg-gray-200 animate-pulse rounded-md text-center py-5">
+                  <div className="font-bold">Dokumen sedang dimuat...</div>
+                  <div>
+                    Jika viewer dokumen tidak merespon, silahkan unduh dokumen.
+                  </div>
+                </div>
+              ) : (
+                ''
+              )}
               <iframe
-                src={item.file.url}
+                onLoad={() => {
+                  setSkeleton(false);
+                }}
+                src={`https://docs.google.com/gview?url=${item.file.url}&embedded=true`}
                 className="w-full h-full rounded-lg"
-              ></iframe>
-            ) : (
-              <div className="w-full h-full bg-base-200 rounded-lg flex justify-center items-center">
-                <button
-                  onClick={() => setShow(true)}
-                  className="btn btn-primary"
-                >
-                  Lihat Dokumen
-                </button>
-              </div>
-            )
+              >
+                Memuat dokumen...
+              </iframe>
+            </>
           ) : (
             <div className="w-full h-full bg-base-200 rounded-lg flex justify-center items-center">
               Hanya Dokumen jenis PDF yang bisa dilihat langsung