From e61b8980b27bc6abd5490bf20313e116ff0b0622 Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Sat, 10 Aug 2024 00:20:28 -0700
Subject: [PATCH] fix file preview

---
 comps/form/field/type/FilePreview.tsx     | 162 +++++++++++++++-------
 comps/form/field/type/TypeUploadMulti.tsx |  84 ++++++-----
 comps/form/utils/init.tsx                 |   2 +
 3 files changed, 157 insertions(+), 91 deletions(-)

diff --git a/comps/form/field/type/FilePreview.tsx b/comps/form/field/type/FilePreview.tsx
index 8d88d4b..aaf333e 100755
--- a/comps/form/field/type/FilePreview.tsx
+++ b/comps/form/field/type/FilePreview.tsx
@@ -1,12 +1,102 @@
 import { ExternalLink } from "lucide-react";
+import { ReactElement } from "react";
 
-export const FilePreview = ({
+export const ThumbPreview = ({
   url,
-  variant,
+  del,
 }: {
   url: string;
-  variant?: "thumb";
+  del: ReactElement;
 }) => {
+  const file = getFileName(url);
+  if (typeof file === "string") return;
+
+  const color = darkenColor(generateRandomColor(file.extension));
+  let content = (
+    <div
+      className={cx(
+        css`
+          background: white;
+          color: ${color};
+          border: 1px solid ${color};
+          color: ${color};
+          border-radius: 3px;
+          text-transform: uppercase;
+          font-size: 14px;
+          font-weight: black;
+          padding: 3px 7px;
+          height: 26px;
+        `,
+        "c-flex c-items-center"
+      )}
+    >
+      {file.extension}
+
+      <div className="c-ml-1">
+        <ExternalLink size="12px" />
+      </div>
+    </div>
+  );
+
+  let is_image = false;
+  if (url.startsWith("_file/")) {
+    if ([".png", ".jpeg", ".jpg", ".webp"].find((e) => url.endsWith(e))) {
+      is_image = true;
+      content = (
+        <img
+          className={cx(
+            "c-rounded-md",
+            css`
+              width: 60px;
+              height: 60px;
+              background-image: linear-gradient(
+                  45deg,
+                  #ccc 25%,
+                  transparent 25%
+                ),
+                linear-gradient(135deg, #ccc 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #ccc 75%),
+                linear-gradient(135deg, transparent 75%, #ccc 75%);
+              background-size: 25px 25px; /* Must be a square */
+              background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
+            `
+          )}
+          src={siteurl(
+            `/_img/${url.substring("_file/".length)}?${"w=60&h=60&fit=cover"}`
+          )}
+        />
+      );
+    }
+  }
+
+  return (
+    <>
+      {file.extension && (
+        <div
+          className={cx(
+            "c-flex c-border c-rounded c-items-start c-px-1 c-relative c-bg-white c-cursor-pointer",
+            css`
+              &:hover {
+                border: 1px solid #1c4ed8;
+                outline: 1px solid #1c4ed8;
+              }
+            `,
+            "c-space-x-1 c-py-1"
+          )}
+          onClick={() => {
+            let _url = siteurl(url || "");
+            window.open(_url, "_blank");
+          }}
+        >
+          {content}
+          {del}
+        </div>
+      )}
+    </>
+  );
+};
+
+export const FilePreview = ({ url }: { url: string }) => {
   const file = getFileName(url);
   if (typeof file === "string")
     return (
@@ -49,62 +139,40 @@ export const FilePreview = ({
     </div>
   );
 
-  if (variant === "thumb") {
-    content = (
-      <div
-        className={cx(
-          css`
-            background: white;
-            color: ${color};
-            border: 1px solid ${color};
-            color: ${color};
-            border-radius: 3px;
-            text-transform: uppercase;
-            font-size: 16px;
-            font-weight: black;
-            padding: 3px 7px;
-            margin-left: 5px;
-            height: 30px;
-          `,
-          "c-flex c-items-center"
-        )}
-      >
-        {file.extension}
-
-        <div className="c-ml-1">
-          <ExternalLink size="12px" />
-        </div>
-      </div>
-    );
-  }
-
   if (url.startsWith("_file/")) {
     if ([".png", ".jpeg", ".jpg", ".webp"].find((e) => url.endsWith(e))) {
       content = (
         <img
-          className="c-py-1 c-rounded-md"
+          className={cx(
+            "c-my-1 c-rounded-md",
+            css`
+              background-image: linear-gradient(
+                  45deg,
+                  #ccc 25%,
+                  transparent 25%
+                ),
+                linear-gradient(135deg, #ccc 25%, transparent 25%),
+                linear-gradient(45deg, transparent 75%, #ccc 75%),
+                linear-gradient(135deg, transparent 75%, #ccc 75%);
+              background-size: 25px 25px; /* Must be a square */
+              background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
+            `
+          )}
           src={siteurl(
-            `/_img/${url.substring("_file/".length)}?${
-              variant === "thumb" ? "w=95&h=95" : "w=100&h=20"
-            }`
+            `/_img/${url.substring("_file/".length)}?${"w=100&h=20"}`
           )}
         />
       );
     }
   }
+
   return (
     <>
       {file.extension && (
         <div
           className={cx(
             "c-flex c-border c-rounded c-items-center c-px-1  c-bg-white c-cursor-pointer",
-            variant !== "thumb"
-              ? "c-pr-2"
-              : css`
-                  width: 95px;
-                  max-height: 95px;
-                  min-height: 50px;
-                `,
+            "c-pr-2",
             css`
               &:hover {
                 border: 1px solid #1c4ed8;
@@ -118,11 +186,9 @@ export const FilePreview = ({
           }}
         >
           {content}
-          {variant !== "thumb" && (
-            <div className="c-ml-2">
-              <ExternalLink size="12px" />
-            </div>
-          )}
+          <div className="c-ml-2">
+            <ExternalLink size="12px" />
+          </div>
         </div>
       )}
     </>
diff --git a/comps/form/field/type/TypeUploadMulti.tsx b/comps/form/field/type/TypeUploadMulti.tsx
index d70df46..132fc13 100755
--- a/comps/form/field/type/TypeUploadMulti.tsx
+++ b/comps/form/field/type/TypeUploadMulti.tsx
@@ -4,7 +4,7 @@ import { Trash2, Upload } from "lucide-react";
 import { ChangeEvent, FC } from "react";
 import { FMLocal, FieldLocal, FieldProp } from "../../typings";
 import { PropTypeInput } from "./TypeInput";
-import { FilePreview } from "./FilePreview";
+import { FilePreview, ThumbPreview } from "./FilePreview";
 import { Spinner } from "lib/comps/ui/field-loading";
 const w = window as unknown as {
   serverurl: string;
@@ -123,50 +123,46 @@ export const FieldUploadMulti: FC<{
                 e.preventDefault();
               }}
             >
-              <div
-                className={cx(
-                  "c-relative",
-                  css`
-                    .del {
-                      opacity: 0;
-                    }
-                    &:hover {
-                      .del {
-                        opacity: 1;
-                      }
-                    }
-                  `
-                )}
-              >
-                <FilePreview url={value || ""} variant="thumb" />
-                <div
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    if (confirm("Remove this file ?")) {
-                      list.splice(idx, 1);
-                      fm.data[field.name] = JSON.stringify(list);
-                      fm.render();
-                    }
-                  }}
-                  className={cx(
-                    "c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-red-100 c-absolute c-top-0 c-right-0 del transition-all",
-                    css`
-                      border: 1px solid red;
-                      width: 25px;
-                      height: 25px;
-                      margin: 5px;
-                    `
-                  )}
-                >
-                  <Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
-                </div>
+              <div className={cx("c-relative")}>
+                <ThumbPreview
+                  url={value || ""}
+                  del={
+                    <div
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        if (confirm("Remove this file ?")) {
+                          list.splice(idx, 1);
+                          fm.data[field.name] = JSON.stringify(list);
+                          fm.render();
+                        }
+                      }}
+                      className={cx(
+                        "c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-red-100 transition-all",
+                        css`
+                          border: 1px solid red;
+                          width: 25px;
+                          height: 25px;
+                        `
+                      )}
+                    >
+                      <Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
+                    </div>
+                  }
+                />
               </div>
             </div>
           );
         })}
         {input.uploading.size > 0 && (
-          <div className="c-flex c-space-x-1 c-p-2 c-border">
+          <div
+            className={cx(
+              "c-flex c-space-x-1 c-p-2 c-border",
+              css`
+                height: 30px;
+              `
+            )}
+          >
             <Spinner /> <div>Uploading</div>
           </div>
         )}
@@ -175,8 +171,10 @@ export const FieldUploadMulti: FC<{
         <div className={cx("c-flex c-border c-rounded ")}>
           <div
             className={cx(
-              "c-flex c-flex-row c-relative c-py-1 c-flex-grow c-pr-2 c-items-center c-cursor-pointer hover:c-bg-blue-50",
+              "c-flex c-flex-row c-relative c-flex-grow c-pr-2 c-items-center c-cursor-pointer hover:c-bg-blue-50",
               css`
+                padding-top: 3px;
+                padding-bottom: 2px;
                 input[type="file"],
                 input[type="file"]::-webkit-file-upload-button {
                   cursor: pointer;
@@ -200,12 +198,12 @@ export const FieldUploadMulti: FC<{
                 )}
               />
             )}
-            <div className="c-items-center c-flex c-text-base c-px-1 c-outline-none c-rounded c-cursor-pointer ">
+            <div className="c-items-center c-flex c-text-base c-px-1 c-outline-none c-rounded c-cursor-pointer">
               <div className="c-flex c-flex-row c-items-center c-px-2">
                 <Upload className="c-h-4 c-w-4" />
               </div>
               <div className="c-flex c-flex-row c-items-center c-text-sm">
-                Upload File
+                Upload Multiple Files
               </div>
             </div>
           </div>
diff --git a/comps/form/utils/init.tsx b/comps/form/utils/init.tsx
index c749f79..a6fff78 100755
--- a/comps/form/utils/init.tsx
+++ b/comps/form/utils/init.tsx
@@ -81,6 +81,8 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
               className={cx(
                 css`
                   color: green;
+                  border: 1px solid green !important;
+                  background: #f1fff6 !important;
                 `,
                 "c-cursor-pointer"
               )}