Merge pull request #1892 from visuddhinanda/agile

#1883

dashboard/src/components/article/ArticleView.tsx

@@ -91,7 +91,7 @@ const ArticleViewWidget = ({
       <Space direction="vertical">
         <TocPath
           data={path}
-          channel={channels}
+          channels={channels}
           onChange={(
             node: ITocPathNode,
             e: React.MouseEvent<HTMLSpanElement | HTMLAnchorElement, MouseEvent>

dashboard/src/components/article/TypePali.tsx

@@ -2,7 +2,11 @@ import { useEffect, useState } from "react";
 import { Divider, message, Space, Tag } from "antd";
 
 import { get, post } from "../../request";
-import { IArticleDataResponse, IArticleResponse } from "../api/Article";
+import {
+  IArticleDataResponse,
+  IArticleResponse,
+  IChapterToc,
+} from "../api/Article";
 import ArticleView from "./ArticleView";
 import TocTree from "./TocTree";
 import PaliText from "../template/Wbw/PaliText";
@@ -47,7 +51,7 @@ const TypePaliWidget = ({
 }: IWidget) => {
   const [articleData, setArticleData] = useState<IArticleDataResponse>();
   const [articleHtml, setArticleHtml] = useState<string[]>(["<span />"]);
-  const [extra, setExtra] = useState(<></>);
+  const [toc, setToc] = useState<IChapterToc[]>();
   const [loading, setLoading] = useState(false);
   const [errorCode, setErrorCode] = useState<number>();
 
@@ -106,38 +110,8 @@ const TypePaliWidget = ({
           if (json.data.from) {
             setRemains(true);
           }
-          setExtra(
-            <TocTree
-              treeData={json.data.toc?.map((item) => {
-                const strTitle = item.title ? item.title : item.pali_title;
-                const key = item.key
-                  ? item.key
-                  : `${item.book}-${item.paragraph}`;
-                const progress = item.progress?.map((item, id) => (
-                  <Tag key={id}>{Math.round(item * 100) + "%"}</Tag>
-                ));
-                return {
-                  key: key,
-                  title: (
-                    <Space>
-                      <PaliText
-                        text={strTitle === "" ? "[unnamed]" : strTitle}
-                      />
-                      {progress}
-                    </Space>
-                  ),
-                  level: item.level,
-                };
-              })}
-              onSelect={(keys: string[]) => {
-                console.log(keys);
-                if (typeof onArticleChange !== "undefined" && keys.length > 0) {
-                  onArticleChange("chapter", keys[0]);
-                }
-              }}
-            />
-          );
 
+          setToc(json.data.toc);
           switch (type) {
             case "chapter":
               if (typeof articleId === "string" && channelId) {
@@ -202,8 +176,6 @@ const TypePaliWidget = ({
             return [...origin, content];
           });
         }
-
-        //getNextPara(json.data);
       }
     });
     return;
@@ -264,7 +236,39 @@ const TypePaliWidget = ({
             }}
           />
           <Divider />
-          {extra}
+          <TocTree
+            treeData={toc?.map((item) => {
+              const strTitle = item.title ? item.title : item.pali_title;
+              const key = item.key
+                ? item.key
+                : `${item.book}-${item.paragraph}`;
+              const progress = item.progress?.map((item, id) => (
+                <Tag key={id}>{Math.round(item * 100) + "%"}</Tag>
+              ));
+              return {
+                key: key,
+                title: (
+                  <Space>
+                    <PaliText text={strTitle === "" ? "[unnamed]" : strTitle} />
+                    {progress}
+                  </Space>
+                ),
+                level: item.level,
+              };
+            })}
+            onClick={(
+              id: string,
+              e: React.MouseEvent<HTMLSpanElement, MouseEvent>
+            ) => {
+              if (typeof onArticleChange !== "undefined") {
+                if (e.ctrlKey || e.metaKey) {
+                  onArticleChange("chapter", id, "_blank");
+                } else {
+                  onArticleChange("chapter", id, "_self");
+                }
+              }
+            }}
+          />
           <Divider />
           {hideNav ? (
             <></>

dashboard/src/components/corpus/TocPath.tsx

@@ -21,7 +21,7 @@ interface IWidgetTocPath {
   data?: ITocPathNode[];
   trigger?: React.ReactNode;
   link?: ELinkType;
-  channel?: string[];
+  channels?: string[];
   style?: React.CSSProperties;
   onChange?: Function;
   onMenuClick?: Function;
@@ -30,7 +30,7 @@ const TocPathWidget = ({
   data = [],
   trigger,
   link = "self",
-  channel,
+  channels,
   style,
   onChange,
   onMenuClick,
@@ -74,7 +74,9 @@ const TocPathWidget = ({
                     type === "para"
                       ? `&book=${item.book}&par=${item.paragraph}`
                       : "";
-                  const channel = searchParams.get("channel");
+                  const channel = channels
+                    ? channels.join("_")
+                    : searchParams.get("channel");
                   const mode = searchParams.get("mode");
                   const urlMode = mode ? mode : "read";
                   let url = `/article/${type}/${item.book}-${item.paragraph}?mode=${urlMode}${param}`;

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

@@ -122,6 +122,7 @@ const SentTabWidget = ({
           <TocPath
             link="none"
             data={mPath}
+            channels={channelsId}
             trigger={path ? path.length > 0 ? path[0].title : <></> : <></>}
           />
           <Text>{sentId[0]}</Text>