Merge pull request #2136 from visuddhinanda/agile

✨ 添加 refresh 功能

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

@@ -4,7 +4,7 @@ import { ReloadOutlined } from "@ant-design/icons";
 
 import { get } from "../../../request";
 import { TChannelType } from "../../api/Channel";
-import { ISentenceListResponse } from "../../api/Corpus";
+import { ISentenceData, ISentenceListResponse } from "../../api/Corpus";
 
 import { ISentence } from "../SentEdit";
 import SentCell from "./SentCell";
@@ -13,6 +13,26 @@ import { useAppSelector } from "../../../hooks";
 import { currentUser as _currentUser } from "../../../reducers/current-user";
 import { IChannel } from "../../channel/Channel";
 
+export const toISentence = (item: ISentenceData, channelsId?: string[]) => {
+  return {
+    id: item.id,
+    content: item.content,
+    html: item.html,
+    book: item.book,
+    para: item.paragraph,
+    wordStart: item.word_start,
+    wordEnd: item.word_end,
+    editor: item.editor,
+    studio: item.studio,
+    channel: item.channel,
+    contentType: item.content_type,
+    suggestionCount: item.suggestionCount,
+    translationChannels: channelsId,
+    forkAt: item.fork_at,
+    updateAt: item.updated_at,
+  };
+};
+
 interface IWidget {
   book: number;
   para: number;
@@ -56,23 +76,7 @@ const SentCanReadWidget = ({
           );
           setChannels(channels);
           const newData: ISentence[] = json.data.rows.map((item) => {
-            return {
-              id: item.id,
-              content: item.content,
-              html: item.html,
-              book: item.book,
-              para: item.paragraph,
-              wordStart: item.word_start,
-              wordEnd: item.word_end,
-              editor: item.editor,
-              studio: item.studio,
-              channel: item.channel,
-              contentType: item.content_type,
-              suggestionCount: item.suggestionCount,
-              translationChannels: channelsId,
-              forkAt: item.fork_at,
-              updateAt: item.updated_at,
-            };
+            return toISentence(item, channelsId);
           });
           console.log("new data", newData);
           setSentData(newData);

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import { Divider, message as AntdMessage, Modal } from "antd";
-import { ExclamationCircleOutlined } from "@ant-design/icons";
+import { ExclamationCircleOutlined, LoadingOutlined } from "@ant-design/icons";
 
 import { ISentence } from "../SentEdit";
 import SentEditMenu from "./SentEditMenu";
@@ -28,6 +28,8 @@ import CopyToModal from "../../channel/CopyToModal";
 import store from "../../../store";
 import { randomString } from "../../../utils";
 import User from "../../auth/User";
+import { ISentenceListResponse } from "../../api/Corpus";
+import { toISentence } from "./SentCanRead";
 
 interface ISnowFlakeResponse {
   ok: boolean;
@@ -67,6 +69,7 @@ const SentCellWidget = ({
   const [isEditMode, setIsEditMode] = useState(editMode);
   const [sentData, setSentData] = useState<ISentence | undefined>(initValue);
   const [bgColor, setBgColor] = useState<string>();
+  const [loading, setLoading] = useState(false);
   const [uuid] = useState(randomString());
   const endings = useAppSelector(getEnding);
   const acceptPr = useAppSelector(sentence);
@@ -78,7 +81,7 @@ const SentCellWidget = ({
   const [copyOpen, setCopyOpen] = useState<boolean>(false);
 
   const sentId = `${sentData?.book}-${sentData?.para}-${sentData?.wordStart}-${sentData?.wordEnd}`;
-  const sid = `${sentData?.book}_${sentData?.para}_${sentData?.wordStart}_${sentData?.wordEnd}_${sentData?.channel.id}`;
+  const sid = `${sentData?.book}_${sentData?.para}_${sentData?.wordStart}_${sentData?.wordEnd}_${sentData?.channel?.id}`;
 
   useEffect(() => {
     if (
@@ -158,8 +161,31 @@ const SentCellWidget = ({
       .catch((e) => console.log("Oops errors!", e));
   };
 
+  const refresh = () => {
+    if (typeof sentData === "undefined") {
+      return;
+    }
+    let url = `/v2/sentence?view=channel&sentence=${sentId}&html=true`;
+    url += `&channel=${sentData.channel.id}`;
+    console.debug("api request", url);
+    setLoading(true);
+    get<ISentenceListResponse>(url)
+      .then((json) => {
+        console.debug("api response", json);
+
+        if (json.ok && json.data.count > 0) {
+          const newData: ISentence[] = json.data.rows.map((item) => {
+            return toISentence(item, [sentData.channel.id]);
+          });
+          setSentData(newData[0]);
+        }
+      })
+      .finally(() => setLoading(false));
+  };
+
   return (
     <div style={{ marginBottom: "8px", backgroundColor: bgColor }}>
+      {loading ? <LoadingOutlined /> : <></>}
       {isPr ? undefined : (
         <div
           dangerouslySetInnerHTML={{
@@ -177,6 +203,9 @@ const SentCellWidget = ({
         }}
         onMenuClick={(key: string) => {
           switch (key) {
+            case "refresh":
+              refresh();
+              break;
             case "copy-to":
               setCopyOpen(true);
               break;

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

@@ -8,6 +8,7 @@ import {
   LinkOutlined,
   FileMarkdownOutlined,
   DeleteOutlined,
+  ReloadOutlined,
 } from "@ant-design/icons";
 import type { MenuProps } from "antd";
 import { ISentence } from "../SentEdit";
@@ -60,6 +61,8 @@ const SentEditMenuWidget = ({
       case "timeline":
         setTimelineOpen(true);
         break;
+      case "refresh":
+        break;
       case "copy-link":
         if (data) {
           let link = `/article/para/${data.book}-${data.para}?mode=edit`;
@@ -77,6 +80,13 @@ const SentEditMenuWidget = ({
     }
   };
   const items: MenuProps["items"] = [
+    {
+      key: "refresh",
+      label: intl.formatMessage({
+        id: "buttons.refresh",
+      }),
+      icon: <ReloadOutlined />,
+    },
     {
       key: "timeline",
       label: intl.formatMessage({

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

@@ -23,10 +23,6 @@ const SentMenuWidget = ({
 }: IWidget) => {
   const intl = useIntl();
   const items: MenuProps["items"] = [
-    {
-      key: "magic-dict-current",
-      label: intl.formatMessage({ id: "buttons.magic-dict" }),
-    },
     {
       key: "show-commentary",
       label: <RelatedPara book={book} para={para} />,

dashboard/src/components/template/Wbw/RelaGraphic.tsx

@@ -1,8 +1,12 @@
+import { Button, Tooltip, Typography } from "antd";
+import { CopyOutlined } from "@ant-design/icons";
+
 import Mermaid from "../../general/Mermaid";
 import { useAppSelector } from "../../../hooks";
 import { getTerm } from "../../../reducers/term-vocabulary";
 import { IWbwRelation } from "./WbwDetailRelation";
 import { IWbw } from "./WbwWord";
+const { Text } = Typography;
 
 interface IWidget {
   wbwData?: IWbw[];
@@ -41,10 +45,18 @@ const RelaGraphicWidget = ({ wbwData }: IWidget) => {
     console.log("mermaid", mermaid);
     return mermaid;
   }
-
+  const mermaidText = sent_show_rel_map(wbwData);
   return (
     <div>
-      <Mermaid text={sent_show_rel_map(wbwData)} />
+      <div style={{ display: "flex", justifyContent: "space-between" }}>
+        <div>
+          <Text copyable={{ text: mermaidText, tooltips: "复制mermaid代码" }} />
+        </div>
+        <div></div>
+      </div>
+      <div>
+        <Mermaid text={mermaidText} />
+      </div>
     </div>
   );
 };

dashboard/src/components/template/Wbw/WbwDetailBasicRelation.tsx

@@ -6,6 +6,7 @@ import { grammar } from "../../../reducers/command";
 import { IWbw, IWbwField } from "./WbwWord";
 import { useIntl } from "react-intl";
 import { useState } from "react";
+import { openPanel } from "../../../reducers/right-panel";
 
 interface IWidget {
   data: IWbw;
@@ -48,6 +49,7 @@ const WbwDetailBasicRelationWidget = ({
                       .join(",");
                     console.debug("from", fromList, endCase);
                     store.dispatch(grammar(endCase));
+                    store.dispatch(openPanel("grammar"));
                   }
                 }}
                 icon={<QuestionCircleOutlined />}

dashboard/src/components/template/Wbw/WbwDetailRelation.tsx

@@ -14,6 +14,8 @@ import { useIntl } from "react-intl";
 import store from "../../../store";
 import { add, relationAddParam } from "../../../reducers/relation-add";
 import { IRelation } from "../../../pages/admin/relation/list";
+import { grammar } from "../../../reducers/command";
+import { openPanel } from "../../../reducers/right-panel";
 
 interface IOptions {
   value: string;
@@ -69,6 +71,7 @@ const WbwDetailRelationWidget = ({
       onFromList(fromList);
     }
   }, [fromList]);
+
   useEffect(() => {
     if (
       addParam?.command === "apply" &&
@@ -270,7 +273,14 @@ const WbwDetailRelationWidget = ({
               }}
               options={options}
             />
-            <Button type="link" icon={<InfoCircleOutlined />} />
+            <Button
+              type="link"
+              icon={<InfoCircleOutlined />}
+              onClick={() => {
+                store.dispatch(grammar(relation[index].relation));
+                store.dispatch(openPanel("grammar"));
+              }}
+            />
             {item.dest_spell ? item.dest_spell : addButton}
           </Space>
         </List.Item>