From 7e5cc3a6b0f1ff6f96a35ce101186015428e3229 Mon Sep 17 00:00:00 2001
From: airslice <icesunex@hotmail.com>
Date: Mon, 18 Nov 2024 19:07:06 +0800
Subject: [PATCH] feat: support duplicate template

---
 .../common/commonTemplate/TemplateHeader.tsx  | 57 +++++++++++++++++++
 .../containers/component-template/index.tsx   | 38 +++++++++++++
 .../emphasis-property-template/index.tsx      | 32 +++++++++++
 3 files changed, 127 insertions(+)

diff --git a/extension/src/editor/containers/common/commonTemplate/TemplateHeader.tsx b/extension/src/editor/containers/common/commonTemplate/TemplateHeader.tsx
index e262c6518..1e15b0e2a 100644
--- a/extension/src/editor/containers/common/commonTemplate/TemplateHeader.tsx
+++ b/extension/src/editor/containers/common/commonTemplate/TemplateHeader.tsx
@@ -17,6 +17,7 @@ type TemplateHeaderProps = {
   templateNames: string[];
   onTemplateRename?: (templateName: string) => void;
   onTemplateRemove?: (templateId: string) => void;
+  onTemplateDuplicate?: (templateName: string) => void;
 };
 
 export const TemplateHeader: React.FC<TemplateHeaderProps> = ({
@@ -25,6 +26,7 @@ export const TemplateHeader: React.FC<TemplateHeaderProps> = ({
   templateNames,
   onTemplateRename,
   onTemplateRemove,
+  onTemplateDuplicate,
 }) => {
   const [menuOpen, setMenuOpen] = useState(false);
   const anchorRef = useRef<HTMLButtonElement>(null);
@@ -85,6 +87,38 @@ export const TemplateHeader: React.FC<TemplateHeaderProps> = ({
     setRenameTemplateOpen(false);
   }, [newTemplateName, onTemplateRename]);
 
+  const [duplicateTemplateOpen, setDuplicateTemplateOpen] = useState(false);
+  const handleOpenDuplicateTemplate = useCallback(() => {
+    setDuplicateTemplateOpen(true);
+    setMenuOpen(false);
+  }, []);
+  const handleCloseDuplicateTemplate = useCallback(() => {
+    setDuplicateTemplateOpen(false);
+    setDuplicatedTemplateName(generateDuplicateTemplateName(templateName));
+  }, [templateName]);
+
+  const [duplicatedTemplateName, setDuplicatedTemplateName] = useState(
+    generateDuplicateTemplateName(templateName),
+  );
+  const handleDuplicatedTemplateNameChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setDuplicatedTemplateName(e.target.value);
+    },
+    [],
+  );
+  const duplicatedTemplateNameValid = useMemo(() => {
+    return (
+      templateNames.includes(duplicatedTemplateName) ||
+      duplicatedTemplateName === "" ||
+      duplicatedTemplateName.endsWith("/") ||
+      duplicatedTemplateName.split("/").some(p => p === "")
+    );
+  }, [duplicatedTemplateName, templateNames]);
+  const handleTemplateDuplicate = useCallback(() => {
+    onTemplateDuplicate?.(duplicatedTemplateName);
+    setDuplicateTemplateOpen(false);
+  }, [duplicatedTemplateName, onTemplateDuplicate]);
+
   return (
     <EditorClickAwayListener onClickAway={handleClickAway}>
       <Wrapper>
@@ -102,6 +136,9 @@ export const TemplateHeader: React.FC<TemplateHeaderProps> = ({
             <EditorPopperListItemButton onClick={handleOpenRenameTemplate}>
               Rename
             </EditorPopperListItemButton>
+            <EditorPopperListItemButton onClick={handleOpenDuplicateTemplate}>
+              Duplicate
+            </EditorPopperListItemButton>
             <EditorPopperListItemButton onClick={handleOpenRemoveTemplate}>
               Delete
             </EditorPopperListItemButton>
@@ -138,6 +175,22 @@ export const TemplateHeader: React.FC<TemplateHeaderProps> = ({
             onChange={handleNewTemplateNameChange}
           />
         </EditorDialog>
+        <EditorDialog
+          title="Duplicate Template"
+          open={duplicateTemplateOpen}
+          fullWidth
+          primaryButtonText="Duplicate"
+          onClose={handleCloseDuplicateTemplate}
+          onSubmit={handleTemplateDuplicate}
+          submitDisabled={duplicatedTemplateNameValid}>
+          <EditorTextField
+            autoFocus
+            label="Full path:"
+            fullWidth
+            value={duplicatedTemplateName}
+            onChange={handleDuplicatedTemplateNameChange}
+          />
+        </EditorDialog>
       </Wrapper>
     </EditorClickAwayListener>
   );
@@ -167,3 +220,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
     borderRadius: "0",
   },
 }));
+
+function generateDuplicateTemplateName(ori: string) {
+  return `${ori} (copy-${new Date().getTime()})`;
+}
diff --git a/extension/src/editor/containers/component-template/index.tsx b/extension/src/editor/containers/component-template/index.tsx
index 242c46d0d..b80a098c7 100644
--- a/extension/src/editor/containers/component-template/index.tsx
+++ b/extension/src/editor/containers/component-template/index.tsx
@@ -197,6 +197,43 @@ export const EditorFieldComponentsTemplateSection: React.FC<
     [editorNoticeRef, removeTemplate],
   );
 
+  const handleTemplateDuplicate = useCallback(
+    async (newTemplateName: string) => {
+      if (!template) return;
+      const newTemplate = {
+        name: newTemplateName,
+        type: "component",
+        groups: template.groups.map(g => ({
+          ...g,
+          id: generateID(),
+          components: g.components.map(c => ({
+            ...c,
+            id: generateID(),
+          })),
+        })),
+      } as unknown as ComponentTemplate;
+
+      setIsSaving(true);
+      await saveTemplate(newTemplate)
+        .then(() => {
+          editorNoticeRef?.current?.show({
+            severity: "success",
+            message: "Template duplicated!",
+          });
+        })
+        .catch(() => {
+          editorNoticeRef?.current?.show({
+            severity: "error",
+            message: "Template duplicate failed!",
+          });
+        })
+        .finally(() => {
+          setIsSaving(false);
+        });
+    },
+    [editorNoticeRef, saveTemplate, template],
+  );
+
   return (
     <EditorSection
       sidebarMain={
@@ -230,6 +267,7 @@ export const EditorFieldComponentsTemplateSection: React.FC<
             templateNames={templateNames}
             onTemplateRename={handleTemplateRename}
             onTemplateRemove={handleTemplateRemove}
+            onTemplateDuplicate={handleTemplateDuplicate}
           />
         )
       }
diff --git a/extension/src/editor/containers/emphasis-property-template/index.tsx b/extension/src/editor/containers/emphasis-property-template/index.tsx
index 301cea5ce..1adcf4da9 100644
--- a/extension/src/editor/containers/emphasis-property-template/index.tsx
+++ b/extension/src/editor/containers/emphasis-property-template/index.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState, useCallback, useEffect } from "react";
 
 import { useTemplateAPI } from "../../../shared/api";
 import { EmphasisPropertyTemplate } from "../../../shared/api/types";
+import { generateID } from "../../../shared/utils";
 import { TemplateAddButton } from "../common/commonTemplate/TemplateAddButton";
 import { TemplateHeader } from "../common/commonTemplate/TemplateHeader";
 import { EditorSection, EditorTree, EditorTreeSelection } from "../ui-components";
@@ -188,6 +189,36 @@ export const EditorInspectorEmphasisPropertyTemplateSection: React.FC<
     [editorNoticeRef, removeTemplate],
   );
 
+  const handleTemplateDuplicate = useCallback(
+    async (newTemplateName: string) => {
+      if (!template) return;
+      const newTemplate = {
+        name: newTemplateName,
+        type: "emphasis",
+        properties: template.properties.map(p => ({ ...p, id: generateID() })),
+      } as unknown as EmphasisPropertyTemplate;
+
+      setIsSaving(true);
+      await saveTemplate(newTemplate)
+        .then(() => {
+          editorNoticeRef?.current?.show({
+            severity: "success",
+            message: "Template duplicated!",
+          });
+        })
+        .catch(() => {
+          editorNoticeRef?.current?.show({
+            severity: "error",
+            message: "Template duplicate failed!",
+          });
+        })
+        .finally(() => {
+          setIsSaving(false);
+        });
+    },
+    [editorNoticeRef, saveTemplate, template],
+  );
+
   return (
     <EditorSection
       sidebarMain={
@@ -223,6 +254,7 @@ export const EditorInspectorEmphasisPropertyTemplateSection: React.FC<
             templateNames={templateNames}
             onTemplateRename={handleTemplateRename}
             onTemplateRemove={handleTemplateRemove}
+            onTemplateDuplicate={handleTemplateDuplicate}
           />
         )
       }