Merge pull request #1846 from visuddhinanda/agile

#1819 #1821

dashboard/src/components/anthology/AnthologyTocTree.tsx

@@ -9,12 +9,14 @@ interface IWidget {
   anthologyId?: string;
   channels?: string[];
   onSelect?: Function;
+  onClick?: Function;
   onArticleSelect?: Function;
 }
 const AnthologyTocTreeWidget = ({
   anthologyId,
   channels,
   onSelect,
+  onClick,
   onArticleSelect,
 }: IWidget) => {
   const [tocData, setTocData] = useState<ListNodeData[]>([]);
@@ -63,6 +65,18 @@ const AnthologyTocTreeWidget = ({
           onArticleSelect(anthologyId, keys);
         }
       }}
+      onClick={(
+        id: string,
+        e: React.MouseEvent<HTMLSpanElement, MouseEvent>
+      ) => {
+        const target = e.ctrlKey || e.metaKey ? "_blank" : "self";
+        if (
+          typeof onClick !== "undefined" &&
+          typeof anthologyId !== "undefined"
+        ) {
+          onClick(anthologyId, id, target);
+        }
+      }}
     />
   );
 };

dashboard/src/components/article/AnthologyDetail.tsx

@@ -19,6 +19,7 @@ interface IWidgetAnthologyDetail {
   channels?: string[];
   visible?: boolean;
   onArticleSelect?: Function;
+  onArticleClick?: Function;
   onLoad?: Function;
   onTitle?: Function;
   onLoading?: Function;
@@ -29,6 +30,7 @@ const AnthologyDetailWidget = ({
   channels,
   visible = true,
   onArticleSelect,
+  onArticleClick,
   onLoading,
   onTitle,
   onError,
@@ -102,9 +104,9 @@ const AnthologyDetailWidget = ({
       <AnthologyTocTree
         anthologyId={aid}
         channels={channels}
-        onArticleSelect={(anthologyId: string, keys: string[]) => {
-          if (typeof onArticleSelect !== "undefined") {
-            onArticleSelect(anthologyId, keys);
+        onClick={(anthologyId: string, id: string, target: string) => {
+          if (typeof onArticleClick !== "undefined") {
+            onArticleClick(anthologyId, id, target);
           }
         }}
       />

dashboard/src/components/article/TocTree.tsx

@@ -5,6 +5,7 @@ import type { ListNodeData } from "./EditableTree";
 import PaliText from "../template/Wbw/PaliText";
 import { Key } from "antd/lib/table/interface";
 import { randomString } from "../../utils";
+import { DataNode, EventDataNode } from "antd/es/tree";
 
 const { Text } = Typography;
 
@@ -132,6 +133,7 @@ interface IWidgetTocTree {
   expandedKeys?: Key[];
   selectedKeys?: Key[];
   onSelect?: Function;
+  onClick?: Function;
 }
 
 const TocTreeWidget = ({
@@ -139,6 +141,7 @@ const TocTreeWidget = ({
   expandedKeys,
   selectedKeys,
   onSelect,
+  onClick,
 }: IWidgetTocTree) => {
   const [tree, setTree] = useState<TreeNodeData[]>();
   const [expanded, setExpanded] = useState<Key[]>();
@@ -229,6 +232,19 @@ const TocTreeWidget = ({
       onExpand={(expandedKeys: Key[]) => {
         setExpanded(expandedKeys);
       }}
+      onClick={(
+        e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
+        node: EventDataNode<DataNode>
+      ) => {
+        if (typeof onClick !== "undefined") {
+          const selectedId = keyIdMap?.find(
+            (value) => node.key === value.key
+          )?.id;
+          if (selectedId) {
+            onClick(selectedId, e);
+          }
+        }
+      }}
       onSelect={(selectedKeys: Key[]) => {
         setSelected(selectedKeys);
         if (typeof onSelect !== "undefined") {

dashboard/src/components/article/TypeAnthology.tsx

@@ -36,9 +36,13 @@ const TypeAnthologyWidget = ({
       )}
       <AnthologyDetail
         visible={!loading}
-        onArticleSelect={(anthologyId: string, keys: string[]) => {
-          if (typeof onArticleChange !== "undefined" && keys.length > 0) {
-            onArticleChange("article", keys[0], {
+        onArticleClick={(
+          anthologyId: string,
+          articleId: string,
+          target: string
+        ) => {
+          if (typeof onArticleChange !== "undefined" && articleId) {
+            onArticleChange("article", articleId, target, {
               anthologyId: anthologyId,
             });
           }

dashboard/src/components/article/TypeArticle.tsx

@@ -106,10 +106,13 @@ const TypeArticleWidget = ({
                   level: item.level,
                 };
               })}
-              onSelect={(keys: string[]) => {
-                console.log(keys);
-                if (typeof onArticleChange !== "undefined" && keys.length > 0) {
-                  onArticleChange("article", keys[0]);
+              onClick={(
+                id: string,
+                e: React.MouseEvent<HTMLSpanElement, MouseEvent>
+              ) => {
+                const target = e.ctrlKey || e.metaKey ? "_blank" : "self";
+                if (typeof onArticleChange !== "undefined") {
+                  onArticleChange("article", id, target);
                 }
               }}
             />

dashboard/src/components/corpus/ChapterInChannel.tsx

@@ -7,10 +7,11 @@ import { IChannelApiData } from "../api/Channel";
 import ChannelListItem from "../channel/ChannelListItem";
 import TimeShow from "../general/TimeShow";
 import { useIntl } from "react-intl";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { IStudio } from "../auth/StudioName";
 import { useState } from "react";
 import { ProgressOutlinedIcon } from "../../assets/icon";
+import { ArticleMode } from "../article/Article";
 
 const { Text } = Typography;
 
@@ -38,6 +39,7 @@ const ChapterInChannelWidget = ({
   openTarget = "_blank",
 }: IWidgetChapterInChannel) => {
   const intl = useIntl(); //i18n
+  const [searchParams, setSearchParams] = useSearchParams();
   const [open, setOpen] = useState(false);
   const ChannelList = (channels: IChapterChannelData[]): JSX.Element => {
     return channels.length ? (
@@ -61,15 +63,15 @@ const ChapterInChannelWidget = ({
               }
         }
         renderItem={(item, id) => {
-          const channel = item.channel.id ? `?channel=${item.channel.id}` : "";
+          let url = `/article/chapter/${book}-${para}`;
+          const currMode = searchParams.get("mode");
+          url += currMode ? `?mode=${currMode}` : "?mode=read";
+          url += item.channel.id ? `&channel=${item.channel.id}` : "";
           return (
             <List.Item key={id}>
               <Row>
                 <Col span={12}>
-                  <Link
-                    to={`/article/chapter/${book}-${para}${channel}`}
-                    target={openTarget}
-                  >
+                  <Link to={url}>
                     <ChannelListItem
                       channel={item.channel}
                       studio={item.studio}

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

@@ -2,6 +2,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import { Col, Row } from "antd";
 
 import AnthologyDetail from "../../../components/article/AnthologyDetail";
+import { fullUrl } from "../../../utils";
 
 const Widget = () => {
   // TODO
@@ -15,14 +16,19 @@ const Widget = () => {
         <Col flex="auto"></Col>
         <Col flex={pageMaxWidth}>
           <AnthologyDetail
-            onArticleSelect={(anthologyId: string, keys: string[]) => {
-              if (keys[0]) {
-                navigate(
-                  `/article/article/${keys[0]}?mode=read&anthology=${anthologyId}`
-                );
+            aid={id}
+            onArticleClick={(
+              anthologyId: string,
+              articleId: string,
+              target: string
+            ) => {
+              let url = `/article/article/${articleId}?mode=read&anthology=${anthologyId}`;
+              if (target === "_blank") {
+                window.open(fullUrl(url), "_blank");
+              } else {
+                navigate(url);
               }
             }}
-            aid={id}
           />
         </Col>
         <Col flex="auto"></Col>