Merge pull request #159 from crupest/dev

Development on front end.

1 files changed, 72 insertions, 0 deletions

diff --git a/Timeline/ClientApp/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
new file mode 100644
index 00000000..87638f31
--- /dev/null
+++ b/Timeline/ClientApp/src/app/views/timeline-common/TimelinePropertyChangeDialog.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+
+import {
+  TimelineVisibility,
+  kTimelineVisibilities,
+  TimelineChangePropertyRequest,
+} from "@/services/timeline";
+
+import OperationDialog, {
+  OperationSelectInputInfoOption,
+} from "../common/OperationDialog";
+
+export interface TimelinePropertyInfo {
+  visibility: TimelineVisibility;
+  description: string;
+}
+
+export interface TimelinePropertyChangeDialogProps {
+  open: boolean;
+  close: () => void;
+  oldInfo: TimelinePropertyInfo;
+  onProcess: (request: TimelineChangePropertyRequest) => Promise<void>;
+}
+
+const labelMap: { [key in TimelineVisibility]: string } = {
+  Private: "timeline.visibility.private",
+  Public: "timeline.visibility.public",
+  Register: "timeline.visibility.register",
+};
+
+const TimelinePropertyChangeDialog: React.FC<TimelinePropertyChangeDialogProps> = (
+  props
+) => {
+  return (
+    <OperationDialog
+      title={"timeline.dialogChangeProperty.title"}
+      titleColor="default"
+      inputScheme={[
+        {
+          type: "select",
+          label: "timeline.dialogChangeProperty.visibility",
+          options: kTimelineVisibilities.map<OperationSelectInputInfoOption>(
+            (v) => ({
+              label: labelMap[v],
+              value: v,
+            })
+          ),
+          initValue: props.oldInfo.visibility,
+        },
+        {
+          type: "text",
+          label: "timeline.dialogChangeProperty.description",
+          initValue: props.oldInfo.description,
+        },
+      ]}
+      open={props.open}
+      close={props.close}
+      onProcess={([newVisibility, newDescription]) => {
+        const req: TimelineChangePropertyRequest = {};
+        if (newVisibility !== props.oldInfo.visibility) {
+          req.visibility = newVisibility as TimelineVisibility;
+        }
+        if (newDescription !== props.oldInfo.description) {
+          req.description = newDescription as string;
+        }
+        return props.onProcess(req);
+      }}
+    />
+  );
+};
+
+export default TimelinePropertyChangeDialog;