aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/pages/timeline/TimelinePropertyChangeDialog.tsx
blob: b57135bbe25f23a80397cb74f58fc545325b9b96 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import * as React from "react";

import {
  getHttpTimelineClient,
  HttpTimelineInfo,
  HttpTimelinePatchRequest,
  kTimelineVisibilities,
  TimelineVisibility,
} from "@/http/timeline";

import OperationDialog from "@/views/common/dialog/OperationDialog";

export interface TimelinePropertyChangeDialogProps {
  open: boolean;
  onClose: () => void;
  timeline: HttpTimelineInfo;
  onChange: () => 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) => {
  const { timeline, onChange } = props;

  return (
    <OperationDialog
      title={"timeline.dialogChangeProperty.title"}
      inputs={{
        scheme: {
          inputs: [
            {
              key: "title",
              type: "text",
              label: "timeline.dialogChangeProperty.titleField",
            },
            {
              key: "visibility",
              type: "select",
              label: "timeline.dialogChangeProperty.visibility",
              options: kTimelineVisibilities.map((v) => ({
                label: labelMap[v],
                value: v,
              })),
            },
            {
              key: "description",
              type: "text",
              label: "timeline.dialogChangeProperty.description",
            },
          ],
        },
        dataInit: {
          values: {
            title: timeline.title,
            visibility: timeline.visibility,
            description: timeline.description,
          },
        },
      }}
      open={props.open}
      onClose={props.onClose}
      onProcess={({ title, visibility, description }) => {
        const req: HttpTimelinePatchRequest = {};
        if (title !== timeline.title) {
          req.title = title as string;
        }
        if (visibility !== timeline.visibility) {
          req.visibility = visibility as TimelineVisibility;
        }
        if (description !== timeline.description) {
          req.description = description as string;
        }
        return getHttpTimelineClient()
          .patchTimeline(timeline.owner.username, timeline.nameV2, req)
          .then(onChange);
      }}
    />
  );
};

export default TimelinePropertyChangeDialog;