Merge pull request #1236 from visuddhinanda/agile

术语 添加Card

dashboard/src/components/article/ArticleView.tsx

@@ -96,7 +96,7 @@ const ArticleViewWidget = ({
         ? html.map((item, id) => {
             return (
               <div key={id}>
-                <MdView html={item} />
+                <MdView className="pcd_article" html={item} />
               </div>
             );
           })

dashboard/src/components/article/article.css

@@ -1,4 +1,4 @@
-h1,
+.pcd_article h1,
 h2,
 h3,
 h4,
@@ -6,25 +6,30 @@ h5,
 h6 {
   font-weight: 700;
 }
-h2 {
+.pcd_article h2 {
   margin-top: 1em;
-  font-size: 180%;
+  font-size: 200%;
   border-bottom: 1px solid gray;
 }
-h3 {
-  margin-top: 0.5em;
+.pcd_article h2 {
+  margin-top: 1em;
   font-size: 150%;
+  border-bottom: 1px solid gray;
 }
-h4 {
-  font-size: 120%;
+.pcd_article h3 {
+  margin-top: 0.5em;
+  font-size: 130%;
 }
-h5 {
+.pcd_article h4 {
   font-size: 110%;
 }
-h6 {
+.pcd_article h5 {
+  font-size: 100%;
+}
+.pcd_article h6 {
   font-size: 100%;
 }
-blockquote {
+.pcd_article blockquote {
   margin-left: 1em;
   border-left: 4px solid #dad9d9;
   padding-left: 0.5em;

dashboard/src/components/template/MdView.tsx

@@ -1,21 +1,23 @@
 import { Typography } from "antd";
 import { TCodeConvertor, XmlToReact } from "./utilities";
-const { Text } = Typography;
+const { Paragraph } = Typography;
 
 interface IWidget {
   html?: string;
+  className?: string;
   placeholder?: string;
   wordWidget?: boolean;
   convertor?: TCodeConvertor;
 }
 const Widget = ({
   html,
+  className,
   wordWidget = false,
   placeholder,
   convertor,
 }: IWidget) => {
   const jsx = html ? XmlToReact(html, wordWidget, convertor) : placeholder;
-  return <Text>{jsx}</Text>;
+  return <Paragraph className={className}>{jsx}</Paragraph>;
 };
 
 export default Widget;

dashboard/src/components/term/TermEdit.tsx

@@ -135,7 +135,7 @@ const TermEditWidget = ({
             newValue
           );
         }
-        console.log("term ", res);
+
         if (res.ok) {
           message.success("提交成功");
           if (typeof onUpdate !== "undefined") {

dashboard/src/components/term/TermItem.tsx

@@ -1,20 +1,86 @@
-import { Typography } from "antd";
+import { Button, Card, Dropdown, Space, Typography } from "antd";
+import { MoreOutlined, EditOutlined } from "@ant-design/icons";
+
 import { ITermDataResponse } from "../api/Term";
 import MdView from "../template/MdView";
+import UserName from "../auth/UserName";
+import TimeShow from "../general/TimeShow";
+import TermModal from "./TermModal";
+import { useState } from "react";
 
-const { Title, Text, Paragraph } = Typography;
+const { Text } = Typography;
 
 interface IWidget {
   data?: ITermDataResponse;
 }
-const Widget = ({ data }: IWidget) => {
+const TermItemWidget = ({ data }: IWidget) => {
+  const [openTermModal, setOpenTermModal] = useState(false);
   return (
-    <Paragraph>
-      <Title level={4}>{data?.meaning}</Title>
-      <Text>{data?.other_meaning}</Text>
-      <MdView html={data?.html} />
-    </Paragraph>
+    <>
+      <Card
+        title={
+          <Space direction="vertical" size={3}>
+            <Space>
+              <Text strong>{data?.meaning}</Text>
+              <Text type="secondary">{data?.other_meaning}</Text>
+            </Space>
+            <Space style={{ fontSize: "80%" }}>
+              <Text type="secondary">
+                <UserName {...data?.editor} />
+              </Text>
+              <Text type="secondary">update at</Text>
+              <TimeShow time={data?.updated_at} />
+            </Space>
+          </Space>
+        }
+        extra={
+          <Dropdown
+            key={1}
+            trigger={["click"]}
+            menu={{
+              items: [
+                {
+                  key: "edit",
+                  label: "edit",
+                  icon: <EditOutlined />,
+                },
+                {
+                  key: "translate",
+                  label: "translate",
+                  icon: <EditOutlined />,
+                },
+              ],
+              onClick: (e) => {
+                console.log("click ", e);
+                switch (e.key) {
+                  case "edit":
+                    setOpenTermModal(true);
+                    break;
+
+                  default:
+                    break;
+                }
+              },
+            }}
+            placement="bottomRight"
+          >
+            <Button
+              size="small"
+              shape="circle"
+              icon={<MoreOutlined />}
+            ></Button>
+          </Dropdown>
+        }
+      >
+        <MdView html={data?.html} />
+      </Card>
+      <TermModal
+        id={data?.guid}
+        open={openTermModal}
+        onClose={() => setOpenTermModal(false)}
+      />
+    </>
   );
 };
 
-export default Widget;
+export default TermItemWidget;

dashboard/src/components/term/TermModal.tsx

@@ -1,10 +1,11 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Modal } from "antd";
 import TermEdit from "./TermEdit";
 import { ITermDataResponse } from "../api/Term";
 
 interface IWidget {
   trigger?: React.ReactNode;
+  open?: boolean;
   id?: string;
   word?: string;
   studioName?: string;
@@ -16,6 +17,7 @@ interface IWidget {
 }
 const TermModalWidget = ({
   trigger,
+  open = false,
   id,
   word,
   studioName,
@@ -25,9 +27,17 @@ const TermModalWidget = ({
   onUpdate,
   onClose,
 }: IWidget) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(open);
 
-  const modalClone = () => {
+  useEffect(() => {
+    if (open) {
+      showModal();
+    } else {
+      modalClose();
+    }
+  }, [open]);
+
+  const modalClose = () => {
     setIsModalOpen(false);
     if (document.getElementsByTagName("body")[0].hasAttribute("style")) {
       document.getElementsByTagName("body")[0].removeAttribute("style");
@@ -38,14 +48,14 @@ const TermModalWidget = ({
   };
 
   const handleOk = () => {
-    modalClone();
+    modalClose();
     if (typeof onClose !== "undefined") {
       onClose();
     }
   };
 
   const handleCancel = () => {
-    modalClone();
+    modalClose();
     if (typeof onClose !== "undefined") {
       onClose();
     }

dashboard/src/components/term/TermSearch.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Col, List, Row } from "antd";
+import { Col, List, Row, Typography } from "antd";
 
 import { get } from "../../request";
 import {
@@ -8,6 +8,7 @@ import {
   ITermResponse,
 } from "../api/Term";
 import TermItem from "./TermItem";
+const { Title } = Typography;
 
 interface IWidget {
   word?: string;
@@ -43,23 +44,25 @@ const TermSearchWidget = ({ word, wordId, compact = false }: IWidget) => {
   }, [word, wordId]);
 
   return (
-    <Row>
-      <Col flex="200px">{compact ? <></> : <></>}</Col>
-      <Col flex="760px">
-        <List
-          itemLayout="vertical"
-          size="large"
-          dataSource={tableData}
-          header={word}
-          renderItem={(item) => (
-            <List.Item>
-              <TermItem data={item} />
-            </List.Item>
-          )}
-        />
-      </Col>
-      <Col flex="200px"></Col>
-    </Row>
+    <>
+      <Row>
+        <Col flex="200px">{compact ? <></> : <></>}</Col>
+        <Col flex="760px">
+          <Title>{word}</Title>
+          <List
+            itemLayout="vertical"
+            size="large"
+            dataSource={tableData}
+            renderItem={(item) => (
+              <List.Item>
+                <TermItem data={item} />
+              </List.Item>
+            )}
+          />
+        </Col>
+        <Col flex="200px"></Col>
+      </Row>
+    </>
   );
 };
 

dashboard/src/request.ts

@@ -93,19 +93,15 @@ export const patch = <Request, Response>(
   });
 };
 
-export const put = <Request, Response>(
+export const put = async <Request, Response>(
   path: string,
   body: Request
 ): Promise<Response> => {
   const data = options("PUT");
   data.body = JSON.stringify(body);
-  return fetch(backend(path), data).then((res) =>
-    res.status === 200
-      ? res.json()
-      : res.json().then((err) => {
-          throw err;
-        })
-  );
+  const response = await fetch(backend(path), data);
+  const res: Response = await response.json();
+  return res;
 };
 
 export const download = (path: string, name: string) => {