From 3fd4375920c7692082f6e8e91d763ec5c0a1d72a Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 16 Apr 2021 17:43:16 +0800
Subject: ...

---
 .../src/app/views/center/TimelineCreateDialog.tsx  | 53 ++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 FrontEnd/src/app/views/center/TimelineCreateDialog.tsx

(limited to 'FrontEnd/src/app/views/center/TimelineCreateDialog.tsx')

diff --git a/FrontEnd/src/app/views/center/TimelineCreateDialog.tsx b/FrontEnd/src/app/views/center/TimelineCreateDialog.tsx
new file mode 100644
index 00000000..b4e25ba1
--- /dev/null
+++ b/FrontEnd/src/app/views/center/TimelineCreateDialog.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { useHistory } from "react-router";
+
+import { validateTimelineName } from "@/services/timeline";
+import OperationDialog from "../common/OperationDialog";
+import { getHttpTimelineClient, HttpTimelineInfo } from "@/http/timeline";
+
+interface TimelineCreateDialogProps {
+  open: boolean;
+  close: () => void;
+}
+
+const TimelineCreateDialog: React.FC<TimelineCreateDialogProps> = (props) => {
+  const history = useHistory();
+
+  return (
+    <OperationDialog
+      open={props.open}
+      close={props.close}
+      themeColor="success"
+      title="home.createDialog.title"
+      inputScheme={
+        [
+          {
+            type: "text",
+            label: "home.createDialog.name",
+            helperText: "home.createDialog.nameFormat",
+          },
+        ] as const
+      }
+      inputValidator={([name]) => {
+        if (name.length === 0) {
+          return { 0: "home.createDialog.noEmpty" };
+        } else if (name.length > 26) {
+          return { 0: "home.createDialog.tooLong" };
+        } else if (!validateTimelineName(name)) {
+          return { 0: "home.createDialog.badFormat" };
+        } else {
+          return null;
+        }
+      }}
+      onProcess={([name]): Promise<HttpTimelineInfo> =>
+        getHttpTimelineClient().postTimeline({ name })
+      }
+      onSuccessAndClose={(timeline: HttpTimelineInfo) => {
+        history.push(`timelines/${timeline.name}`);
+      }}
+      failurePrompt={(e) => `${e as string}`}
+    />
+  );
+};
+
+export default TimelineCreateDialog;
-- 
cgit v1.2.3

