Merge pull request #1539 from visuddhinanda/agile

修改建议改为侧边栏显示

dashboard/src/components/article/RightPanel.tsx

@@ -13,8 +13,15 @@ import store from "../../store";
 import DiscussionBox from "../discussion/DiscussionBox";
 import { show } from "../../reducers/discussion";
 import { useIntl } from "react-intl";
+import SuggestionBox from "../template/SentEdit/SuggestionBox";
 
-export type TPanelName = "dict" | "channel" | "discussion" | "close" | "open";
+export type TPanelName =
+  | "dict"
+  | "channel"
+  | "discussion"
+  | "suggestion"
+  | "close"
+  | "open";
 
 interface IWidget {
   curr?: TPanelName;
@@ -76,6 +83,10 @@ const RightPanelWidget = ({
         setOpen(true);
         setActiveTab(curr);
         break;
+      case "suggestion":
+        setOpen(true);
+        setActiveTab(curr);
+        break;
       case "close":
         setOpen(false);
         break;
@@ -182,6 +193,17 @@ const RightPanelWidget = ({
                 </div>
               ),
             },
+            {
+              label: intl.formatMessage({
+                id: "buttons.suggestion",
+              }),
+              key: "suggestion",
+              children: (
+                <div style={tabInnerStyle}>
+                  <SuggestionBox />
+                </div>
+              ),
+            },
           ]}
         />
       </div>

dashboard/src/components/template/SentEdit/PrAcceptButton.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useIntl } from "react-intl";
-import { Button, message } from "antd";
+import { Button, message, Tooltip } from "antd";
 import { CheckOutlined } from "@ant-design/icons";
 
 import { put } from "../../../request";
@@ -72,13 +72,15 @@ const PrAcceptButtonWidget = ({ data, onAccept }: IWidget) => {
   };
 
   return (
-    <Button
-      size="small"
-      type="text"
-      icon={<CheckOutlined />}
-      loading={saving}
-      onClick={() => save()}
-    />
+    <Tooltip title="采纳此修改建议">
+      <Button
+        size="small"
+        type="text"
+        icon={<CheckOutlined />}
+        loading={saving}
+        onClick={() => save()}
+      />
+    </Tooltip>
   );
 };
 

dashboard/src/components/template/SentEdit/SuggestionAdd.tsx

@@ -38,6 +38,7 @@ const SuggestionAddWidget = ({ data, onCreate }: IWidget) => {
               setIsEditMode(false);
             }}
             onCreate={() => {
+              setIsEditMode(false);
               if (typeof onCreate !== "undefined") {
                 onCreate();
               }

dashboard/src/components/template/SentEdit/SuggestionBox.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from "react";
-import { Button, Card, Drawer, Space } from "antd";
+import { Alert, Button, Space } from "antd";
 
 import SuggestionList from "./SuggestionList";
 import SuggestionAdd from "./SuggestionAdd";
 import { ISentence } from "../SentEdit";
 import Marked from "../../general/Marked";
+import { useAppSelector } from "../../../hooks";
+import { message } from "../../../reducers/discussion";
 
 interface ISuggestionWidget {
   data: ISentence;
@@ -21,33 +23,37 @@ const Suggestion = ({
   onPrChange,
 }: ISuggestionWidget) => {
   const [reload, setReload] = useState(false);
+
   return (
     <Space direction="vertical" style={{ width: "100%" }}>
-      <Card
-        title="温馨提示"
-        size="small"
-        style={{
-          width: "100%",
-          display: openNotification ? "block" : "none",
-        }}
-      >
-        <Marked
-          text="此处专为提交修改建议译文。您输入的应该是**译文**
+      {openNotification ? (
+        <Alert
+          message="温馨提示"
+          type="info"
+          showIcon
+          description={
+            <Marked
+              text="此处专为提交修改建议译文。您输入的应该是**译文**
   而不是评论和问题。其他内容，请在讨论页面提交。"
+            />
+          }
+          action={
+            <Button
+              type="text"
+              onClick={() => {
+                localStorage.setItem("read_pr_Notification", "ok");
+                if (typeof onNotificationChange !== "undefined") {
+                  onNotificationChange(false);
+                }
+              }}
+            >
+              知道了
+            </Button>
+          }
+          closable
         />
-        <p style={{ textAlign: "center" }}>
-          <Button
-            onClick={() => {
-              localStorage.setItem("read_pr_Notification", "ok");
-              if (typeof onNotificationChange !== "undefined") {
-                onNotificationChange(false);
-              }
-            }}
-          >
-            知道了
-          </Button>
-        </p>
-      </Card>
+      ) : undefined}
+
       <SuggestionAdd
         data={data}
         onCreate={() => {
@@ -75,25 +81,17 @@ export interface IAnswerCount {
   id: string;
   count: number;
 }
-interface IWidget {
-  data: ISentence;
-  trigger?: JSX.Element;
-  open?: boolean;
-  openInDrawer?: boolean;
-  onClose?: Function;
-}
-const SuggestionBoxWidget = ({
-  trigger,
-  data,
-  open = false,
-  openInDrawer = true,
-  onClose,
-}: IWidget) => {
-  const [isOpen, setIsOpen] = useState(open);
+
+const SuggestionBoxWidget = () => {
   const [openNotification, setOpenNotification] = useState(false);
-  const [prNumber, setPrNumber] = useState(data.suggestionCount?.suggestion);
+  const [sentData, setSentData] = useState<ISentence>();
+  const discussionMessage = useAppSelector(message);
+  useEffect(() => {
+    if (discussionMessage?.type === "pr") {
+      setSentData(discussionMessage.sent);
+    }
+  }, [discussionMessage]);
 
-  useEffect(() => setIsOpen(open), [open]);
   useEffect(() => {
     if (localStorage.getItem("read_pr_Notification") === "ok") {
       setOpenNotification(false);
@@ -101,70 +99,17 @@ const SuggestionBoxWidget = ({
       setOpenNotification(true);
     }
   }, []);
-  const showDrawer = () => {
-    setIsOpen(true);
-  };
-
-  const onBoxClose = () => {
-    setIsOpen(false);
-    if (typeof onClose !== "undefined") {
-      onClose();
-    }
-  };
-
-  return (
-    <>
-      <Space
-        onClick={showDrawer}
-        style={{
-          cursor: "pointer",
-          color: prNumber && prNumber > 0 ? "#1890ff" : "unset",
-        }}
-      >
-        {trigger}
-        {prNumber}
-      </Space>
 
-      {openInDrawer ? (
-        <Drawer
-          title="修改建议"
-          width={520}
-          onClose={onBoxClose}
-          open={isOpen}
-          maskClosable={false}
-        >
-          <Suggestion
-            data={data}
-            enable={isOpen}
-            openNotification={openNotification}
-            onNotificationChange={(value: boolean) =>
-              setOpenNotification(value)
-            }
-            onPrChange={(value: number) => setPrNumber(value)}
-          />
-        </Drawer>
-      ) : (
-        <div
-          style={{
-            position: "absolute",
-            display: isOpen ? "none" : "none",
-            zIndex: 1030,
-            marginLeft: 300,
-            marginTop: -250,
-          }}
-        >
-          <Suggestion
-            data={data}
-            enable={isOpen}
-            openNotification={openNotification}
-            onNotificationChange={(value: boolean) =>
-              setOpenNotification(value)
-            }
-            onPrChange={(value: number) => setPrNumber(value)}
-          />
-        </div>
-      )}
-    </>
+  return sentData ? (
+    <Suggestion
+      data={sentData}
+      enable={true}
+      openNotification={openNotification}
+      onNotificationChange={(value: boolean) => setOpenNotification(value)}
+      onPrChange={(value: number) => {}}
+    />
+  ) : (
+    <></>
   );
 };
 

dashboard/src/components/template/SentEdit/SuggestionList.tsx

@@ -1,4 +1,4 @@
-import { message } from "antd";
+import { message, Skeleton } from "antd";
 import { useEffect, useState } from "react";
 
 import { get } from "../../../request";
@@ -29,13 +29,14 @@ const SuggestionListWidget = ({
   onChange,
 }: IWidget) => {
   const [sentData, setSentData] = useState<ISentence[]>([]);
-
+  const [loading, setLoading] = useState(false);
   const load = () => {
     if (!enable) {
       return;
     }
     const url = `/v2/sentpr?view=sent-info&book=${book}&para=${para}&start=${wordStart}&end=${wordEnd}&channel=${channel.id}`;
     console.log("url", url);
+    setLoading(true);
     get<ISuggestionListResponse>(url)
       .then((json) => {
         if (json.ok) {
@@ -62,6 +63,7 @@ const SuggestionListWidget = ({
         }
       })
       .finally(() => {
+        setLoading(false);
         if (reload && typeof onReload !== "undefined") {
           onReload();
         }
@@ -69,7 +71,7 @@ const SuggestionListWidget = ({
   };
   useEffect(() => {
     load();
-  }, []);
+  }, [book, channel.id, para, reload, wordEnd, wordStart]);
   useEffect(() => {
     if (reload) {
       load();
@@ -77,9 +79,17 @@ const SuggestionListWidget = ({
   }, [reload]);
   return (
     <>
-      {sentData.map((item, id) => {
-        return <SentCell initValue={item} key={id} isPr={true} />;
-      })}
+      {loading ? (
+        <Skeleton />
+      ) : (
+        <>
+          {sentData.length > 0
+            ? sentData.map((item, id) => {
+                return <SentCell value={item} key={id} isPr={true} />;
+              })
+            : "没有修改建议"}
+        </>
+      )}
     </>
   );
 };

dashboard/src/components/template/SentEdit/SuggestionToolbar.tsx

@@ -44,7 +44,7 @@ const SuggestionToolbarWidget = ({
       setCommentCount(discussionCount.count);
     }
   }, [data.id, discussionCount]);
-
+  const prNumber = data.suggestionCount?.suggestion;
   return (
     <Paragraph type="secondary" style={style}>
       {isPr ? (
@@ -62,20 +62,26 @@ const SuggestionToolbarWidget = ({
         </Space>
       ) : (
         <Space size={"small"}>
-          <SuggestionBox
-            open={prOpen}
-            onClose={() => {
-              if (typeof onPrClose !== "undefined") {
-                onPrClose();
-              }
+          <Space
+            style={{
+              cursor: "pointer",
+              color: prNumber && prNumber > 0 ? "#1890ff" : "unset",
             }}
-            data={data}
-            trigger={
-              <Tooltip title="修改建议">
-                <HandOutlinedIcon />
-              </Tooltip>
-            }
-          />
+            onClick={(event) => {
+              store.dispatch(
+                show({
+                  type: "pr",
+                  sent: data,
+                })
+              );
+              store.dispatch(openPanel("suggestion"));
+            }}
+          >
+            <Tooltip title="修改建议">
+              <HandOutlinedIcon />
+            </Tooltip>
+            {prNumber}
+          </Space>
           {compact ? undefined : <Divider type="vertical" />}
           <Tooltip title="讨论">
             <Space

dashboard/src/locales/zh-Hans/buttons.ts

@@ -70,6 +70,7 @@ const items = {
   "buttons.refresh": "刷新",
   "buttons.timeline": "时间线",
   "buttons.discussion": "讨论",
+  "buttons.suggestion": "修改建议",
 };
 
 export default items;

dashboard/src/pages/library/article/show.tsx

@@ -414,6 +414,7 @@ const Widget = () => {
                 }
                 console.log("url", url);
                 navigate(url);
+                scrollToTop();
               }}
             />
           </div>

dashboard/src/reducers/discussion.ts

@@ -4,6 +4,7 @@
 import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 import { TResType } from "../components/discussion/DiscussionListCard";
+import { ISentence } from "../components/template/SentEdit";
 
 import type { RootState } from "../store";
 
@@ -15,6 +16,7 @@ export interface IShowDiscussion {
   resId?: string;
   topic?: string;
   comment?: string;
+  sent?: ISentence;
 }
 export interface ICount {
   count: number;