From 5a96a88121f3ecb846c5cd55c3f51624b4e21402 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Thu, 3 Jun 2021 23:20:22 +0800
Subject: feat: Add change post property dialog.

---
 .../timeline-common/PostPropertyChangeDialog.tsx   | 36 +++++++++++++++++
 .../views/timeline-common/TimelinePostListView.tsx |  1 +
 .../app/views/timeline-common/TimelinePostView.tsx | 46 +++++++++++++++++-----
 3 files changed, 73 insertions(+), 10 deletions(-)
 create mode 100644 FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx

(limited to 'FrontEnd/src/app/views/timeline-common')

diff --git a/FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx b/FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx
new file mode 100644
index 00000000..001e52d7
--- /dev/null
+++ b/FrontEnd/src/app/views/timeline-common/PostPropertyChangeDialog.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+
+import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
+
+import OperationDialog from "../common/OperationDialog";
+
+function PostPropertyChangeDialog(props: {
+  onClose: () => void;
+  post: HttpTimelinePostInfo;
+  onSuccess: (post: HttpTimelinePostInfo) => void;
+}): React.ReactElement | null {
+  const { onClose, post, onSuccess } = props;
+
+  return (
+    <OperationDialog
+      title="timeline.changePostPropertyDialog.title"
+      close={onClose}
+      open
+      inputScheme={[
+        {
+          label: "timeline.changePostPropertyDialog.time",
+          type: "datetime",
+          initValue: post.time,
+        },
+      ]}
+      onProcess={([time]) => {
+        return getHttpTimelineClient().patchPost(post.timelineName, post.id, {
+          time: time === "" ? undefined : new Date(time).toISOString(),
+        });
+      }}
+      onSuccessAndClose={onSuccess}
+    />
+  );
+}
+
+export default PostPropertyChangeDialog;
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
index d9c45a4c..ba204b72 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostListView.tsx
@@ -64,6 +64,7 @@ const TimelinePostListView: React.FC<TimelinePostListViewProps> = (props) => {
                   key={post.id}
                   post={post}
                   current={posts.length - 1 === post.index}
+                  onChanged={onReload}
                   onDeleted={onReload}
                 />
               );
diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
index 2f778ab1..a008d8e5 100644
--- a/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
+++ b/FrontEnd/src/app/views/timeline-common/TimelinePostView.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import classnames from "classnames";
 import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 
 import { getHttpTimelineClient, HttpTimelinePostInfo } from "@/http/timeline";
 
@@ -10,6 +11,7 @@ import UserAvatar from "../common/user/UserAvatar";
 import TimelineLine from "./TimelineLine";
 import TimelinePostContentView from "./TimelinePostContentView";
 import TimelinePostDeleteConfirmDialog from "./TimelinePostDeleteConfirmDialog";
+import PostPropertyChangeDialog from "./PostPropertyChangeDialog";
 
 export interface TimelinePostViewProps {
   post: HttpTimelinePostInfo;
@@ -17,16 +19,20 @@ export interface TimelinePostViewProps {
   className?: string;
   style?: React.CSSProperties;
   cardStyle?: React.CSSProperties;
-  onDeleted?: () => void;
+  onChanged: (post: HttpTimelinePostInfo) => void;
+  onDeleted: () => void;
 }
 
 const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
-  const { post, className, style, cardStyle, onDeleted } = props;
+  const { post, className, style, cardStyle, onChanged, onDeleted } = props;
   const current = props.current === true;
 
+  const { t } = useTranslation();
+
   const [operationMaskVisible, setOperationMaskVisible] =
     React.useState<boolean>(false);
-  const [deleteDialog, setDeleteDialog] = React.useState<boolean>(false);
+  const [dialog, setDialog] =
+    React.useState<"delete" | "changeproperty" | null>(null);
 
   const cardRef = React.useRef<HTMLDivElement>(null);
   React.useEffect(() => {
@@ -84,25 +90,36 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
         </div>
         {operationMaskVisible ? (
           <div
-            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-center align-items-center"
+            className="position-absolute position-lt w-100 h-100 mask d-flex justify-content-around align-items-center"
             onClick={() => {
               setOperationMaskVisible(false);
             }}
           >
-            <i
-              className="bi-trash text-danger icon-button large"
+            <span
+              className="tl-color-primary"
+              onClick={(e) => {
+                setDialog("changeproperty");
+                e.stopPropagation();
+              }}
+            >
+              {t("changeProperty")}
+            </span>
+            <span
+              className="tl-color-danger"
               onClick={(e) => {
-                setDeleteDialog(true);
+                setDialog("delete");
                 e.stopPropagation();
               }}
-            />
+            >
+              {t("delete")}
+            </span>
           </div>
         ) : null}
       </div>
-      {deleteDialog ? (
+      {dialog === "delete" ? (
         <TimelinePostDeleteConfirmDialog
           onClose={() => {
-            setDeleteDialog(false);
+            setDialog(null);
             setOperationMaskVisible(false);
           }}
           onConfirm={() => {
@@ -116,6 +133,15 @@ const TimelinePostView: React.FC<TimelinePostViewProps> = (props) => {
               });
           }}
         />
+      ) : dialog === "changeproperty" ? (
+        <PostPropertyChangeDialog
+          onClose={() => {
+            setDialog(null);
+            setOperationMaskVisible(false);
+          }}
+          post={post}
+          onSuccess={onChanged}
+        />
       ) : null}
     </div>
   );
-- 
cgit v1.2.3