chore: init web project

2025-12-16 05:29:20 +00:00 · 2022-09-12 09:53:15 +08:00
parent e82c821396
commit 5a96e67c6d
66 changed files with 5101 additions and 0 deletions
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -0,0 +1,108 @@
+import { useEffect, useState } from "react";
+import { shortcutService } from "../services";
+import useLoading from "../hooks/useLoading";
+import Icon from "./Icon";
+import { generateDialog } from "./Dialog";
+import toastHelper from "./Toast";
+
+interface Props extends DialogProps {
+  workspaceId: WorkspaceId;
+  shortcutId?: ShortcutId;
+}
+
+const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
+  const { destroy, workspaceId, shortcutId } = props;
+  const [name, setName] = useState<string>("");
+  const [link, setLink] = useState<string>("");
+  const requestState = useLoading(false);
+
+  useEffect(() => {
+    if (shortcutId) {
+      const shortcutTemp = shortcutService.getShortcutById(shortcutId);
+      if (shortcutTemp) {
+        setName(shortcutTemp.name);
+        setLink(shortcutTemp.link);
+      }
+    }
+  }, [shortcutId]);
+
+  const handleNameInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setName(text);
+  };
+
+  const handleLinkInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setLink(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (!name) {
+      toastHelper.error("Name is required");
+      return;
+    }
+
+    try {
+      if (shortcutId) {
+        await shortcutService.patchShortcut({
+          id: shortcutId,
+          name,
+          link,
+        });
+      } else {
+        await shortcutService.createShortcut({
+          workspaceId,
+          name,
+          link,
+          visibility: "PRIVATE",
+        });
+      }
+    } catch (error: any) {
+      console.error(error);
+      toastHelper.error(error.response.data.message);
+    }
+    destroy();
+  };
+
+  return (
+    <>
+      <div className="w-full flex flex-row justify-between items-center mb-4">
+        <p className="text-base">{shortcutId ? "Edit Shortcut" : "Create Shortcut"}</p>
+        <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
+          <Icon.X className="w-5 h-auto text-gray-600" />
+        </button>
+      </div>
+      <div className="w-full flex flex-col justify-start items-start">
+        <div className="w-full flex flex-row justify-start items-center mb-2">
+          <input className="rounded border px-2 py-2" type="text" placeholder="Name" value={name} onChange={handleNameInputChange} />
+        </div>
+        <div className="w-full flex flex-row justify-start items-center mb-2">
+          <input className="rounded border px-2 py-2" type="text" placeholder="Link" value={link} onChange={handleLinkInputChange} />
+        </div>
+      </div>
+      <div className="w-full flex flex-row justify-end items-center mt-2">
+        <div className="flex flex-row justify-start items-center">
+          <button
+            className={`border rounded px-2 py-1 border-green-600 text-green-600 ${requestState.isLoading ? "opacity-80" : ""}`}
+            onClick={handleSaveBtnClick}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default function showCreateShortcutDialog(workspaceId: WorkspaceId, shortcutId?: ShortcutId): void {
+  generateDialog(
+    {
+      className: "px-2 sm:px-0",
+    },
+    CreateShortcutDialog,
+    {
+      workspaceId,
+      shortcutId,
+    }
+  );
+}