feat: add public id field to resource (#1451)

* feat: add public id field to resource

* feat: support reset resource link

web/src/components/ResourceItemDropdown.tsx

@@ -1,24 +1,77 @@
+import copy from "copy-to-clipboard";
 import React from "react";
+import toast from "react-hot-toast";
 import { useTranslation } from "react-i18next";
+import { useResourceStore } from "@/store/module";
+import { getResourceUrl } from "@/utils/resource";
 import Dropdown from "./base/Dropdown";
 import Icon from "./Icon";
+import { showCommonDialog } from "./Dialog/CommonDialog";
+import showChangeResourceFilenameDialog from "./ChangeResourceFilenameDialog";
+import showPreviewImageDialog from "./PreviewImageDialog";
 
-interface ResourceItemDropdown {
+interface Props {
   resource: Resource;
-  handleRenameBtnClick: (resource: Resource) => void;
-  handleDeleteResourceBtnClick: (resource: Resource) => void;
-  handlePreviewBtnClick: (resource: Resource) => void;
-  handleCopyResourceLinkBtnClick: (resource: Resource) => void;
 }
 
-const ResourceItemDropdown = ({
-  resource,
-  handlePreviewBtnClick,
-  handleCopyResourceLinkBtnClick,
-  handleRenameBtnClick,
-  handleDeleteResourceBtnClick,
-}: ResourceItemDropdown) => {
+const ResourceItemDropdown = ({ resource }: Props) => {
   const { t } = useTranslation();
+  const resourceStore = useResourceStore();
+  const resources = resourceStore.state.resources;
+
+  const handlePreviewBtnClick = (resource: Resource) => {
+    const resourceUrl = getResourceUrl(resource);
+    if (resource.type.startsWith("image")) {
+      showPreviewImageDialog(
+        resources.filter((r) => r.type.startsWith("image")).map((r) => getResourceUrl(r)),
+        resources.findIndex((r) => r.id === resource.id)
+      );
+    } else {
+      window.open(resourceUrl);
+    }
+  };
+
+  const handleCopyResourceLinkBtnClick = (resource: Resource) => {
+    const url = getResourceUrl(resource);
+    copy(url);
+    toast.success(t("message.succeed-copy-resource-link"));
+  };
+
+  const handleResetResourceLinkBtnClick = (resource: Resource) => {
+    showCommonDialog({
+      title: "Reset resource link",
+      content: "Are you sure to reset the resource link?",
+      style: "warning",
+      dialogName: "reset-resource-link-dialog",
+      onConfirm: async () => {
+        await resourceStore.patchResource({
+          id: resource.id,
+          resetPublicId: true,
+        });
+      },
+    });
+  };
+
+  const handleRenameBtnClick = (resource: Resource) => {
+    showChangeResourceFilenameDialog(resource.id, resource.filename);
+  };
+
+  const handleDeleteResourceBtnClick = (resource: Resource) => {
+    let warningText = t("resources.warning-text");
+    if (resource.linkedMemoAmount > 0) {
+      warningText = warningText + `\n${t("resources.linked-amount")}: ${resource.linkedMemoAmount}`;
+    }
+
+    showCommonDialog({
+      title: t("resources.delete-resource"),
+      content: warningText,
+      style: "warning",
+      dialogName: "delete-resource-dialog",
+      onConfirm: async () => {
+        await resourceStore.deleteResourceById(resource.id);
+      },
+    });
+  };
 
   return (
     <Dropdown
@@ -38,6 +91,12 @@ const ResourceItemDropdown = ({
           >
             {t("resources.copy-link")}
           </button>
+          <button
+            className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
+            onClick={() => handleResetResourceLinkBtnClick(resource)}
+          >
+            Reset link
+          </button>
           <button
             className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
             onClick={() => handleRenameBtnClick(resource)}