Merge pull request #1258 from visuddhinanda/agile

Agile

dashboard/src/components/admin/relation/GrammarSelect.tsx

@@ -0,0 +1,86 @@
+import { ProFormSelect } from "@ant-design/pro-components";
+
+import { useIntl } from "react-intl";
+
+interface IWidget {
+  trigger?: JSX.Element;
+  id?: string;
+  hidden?: boolean;
+  onSuccess?: Function;
+}
+const GrammarSelectWidget = ({
+  trigger = <>{"trigger"}</>,
+  id,
+  hidden = false,
+  onSuccess,
+}: IWidget) => {
+  const intl = useIntl();
+  const _verb = [
+    "n",
+    "ti",
+    "v",
+    "v:ind",
+    "ind",
+    "sg",
+    "pl",
+    "nom",
+    "acc",
+    "gen",
+    "dat",
+    "inst",
+    "voc",
+    "abl",
+    "loc",
+    "base",
+    "imp",
+    "opt",
+    "pres",
+    "aor",
+    "fut",
+    "1p",
+    "2p",
+    "3p",
+    "prp",
+    "pp",
+    "grd",
+    "fpp",
+    "vdn",
+    "ger",
+    "inf",
+    "adj",
+    "pron",
+    "caus",
+    "num",
+    "adv",
+    "conj",
+    "pre",
+    "suf",
+    "ti:base",
+    "n:base",
+    "v:base",
+    "vdn",
+  ];
+  const verbOptions = _verb.map((item) => {
+    return {
+      value: item,
+      label: intl.formatMessage({
+        id: `dict.fields.type.${item}.label`,
+      }),
+    };
+  });
+  return (
+    <ProFormSelect
+      hidden={hidden}
+      options={verbOptions}
+      fieldProps={{
+        mode: "tags",
+      }}
+      width="md"
+      name="fromCase"
+      allowClear={false}
+      label={intl.formatMessage({ id: "forms.fields.case.label" })}
+    />
+  );
+};
+
+export default GrammarSelectWidget;

dashboard/src/components/admin/relation/NissayaEndingEdit.tsx

@@ -10,7 +10,7 @@ import {
 } from "../../../pages/admin/nissaya-ending/list";
 import { get, post, put } from "../../../request";
 import LangSelect from "../../general/LangSelect";
-import CaseSelect from "./CaseSelect";
+import GrammarSelect from "./GrammarSelect";
 
 interface IWidget {
   trigger?: JSX.Element;
@@ -37,17 +37,21 @@ const NissayaEndingWidget = ({
       }}
       submitTimeout={2000}
       onFinish={async (values) => {
-        console.log(values.ending);
+        let data = values;
+        data.from = {
+          spell: values.fromSpell,
+          case: values.fromCase ? values.fromCase : undefined,
+        };
         let res: INissayaEndingResponse;
         if (typeof id === "undefined") {
           res = await post<INissayaEndingRequest, INissayaEndingResponse>(
             `/v2/nissaya-ending`,
-            values
+            data
           );
         } else {
           res = await put<INissayaEndingRequest, INissayaEndingResponse>(
             `/v2/nissaya-ending/${id}`,
-            values
+            data
           );
         }
         console.log(res);
@@ -76,6 +80,9 @@ const NissayaEndingWidget = ({
                   id: id,
                   ending: res.data.ending,
                   relation: res.data.relation,
+                  from: res.data.from,
+                  fromCase: res.data.from?.case,
+                  fromSpell: res.data.from?.spell,
                   lang: res.data.lang,
                 };
               } else {
@@ -97,16 +104,22 @@ const NissayaEndingWidget = ({
           label={intl.formatMessage({ id: "forms.fields.ending.label" })}
           tooltip="最长为 24 位"
         />
-
+        <LangSelect width="md" />
+      </ProForm.Group>
+      <ProForm.Group>
+        <GrammarSelect />
         <ProFormText
           width="md"
-          name="relation"
-          label={intl.formatMessage({ id: "forms.fields.relation.label" })}
+          name="fromSpell"
+          label={intl.formatMessage({ id: "buttons.spell" })}
         />
       </ProForm.Group>
       <ProForm.Group>
-        <CaseSelect width="md" name="case" />
-        <LangSelect width="md" />
+        <ProFormText
+          width="md"
+          name="relation"
+          label={intl.formatMessage({ id: "forms.fields.relation.label" })}
+        />
       </ProForm.Group>
     </ModalForm>
   );

dashboard/src/components/admin/relation/RelationEdit.tsx

@@ -16,7 +16,53 @@ import {
   IRelationResponse,
 } from "../../../pages/admin/relation/list";
 import { get, post, put } from "../../../request";
+import GrammarSelect from "./GrammarSelect";
 
+export const _verb = [
+  "n",
+  "ti",
+  "v",
+  "v:ind",
+  "ind",
+  "sg",
+  "pl",
+  "nom",
+  "acc",
+  "gen",
+  "dat",
+  "inst",
+  "voc",
+  "abl",
+  "loc",
+  "base",
+  "imp",
+  "opt",
+  "pres",
+  "aor",
+  "fut",
+  "1p",
+  "2p",
+  "3p",
+  "prp",
+  "pp",
+  "grd",
+  "fpp",
+  "vdn",
+  "ger",
+  "inf",
+  "adj",
+  "pron",
+  "caus",
+  "num",
+  "adv",
+  "conj",
+  "pre",
+  "suf",
+  "ti:base",
+  "n:base",
+  "v:base",
+  "vdn",
+];
 interface IWidget {
   trigger?: JSX.Element;
   id?: string;
@@ -32,51 +78,6 @@ const RelationEditWidget = ({
   const formRef = useRef<ProFormInstance>();
   const intl = useIntl();
 
-  const _verb = [
-    "n",
-    "ti",
-    "v",
-    "v:ind",
-    "ind",
-    "sg",
-    "pl",
-    "nom",
-    "acc",
-    "gen",
-    "dat",
-    "inst",
-    "voc",
-    "abl",
-    "loc",
-    "base",
-    "imp",
-    "opt",
-    "pres",
-    "aor",
-    "fut",
-    "1p",
-    "2p",
-    "3p",
-    "prp",
-    "pp",
-    "grd",
-    "fpp",
-    "vdn",
-    "ger",
-    "inf",
-    "adj",
-    "pron",
-    "caus",
-    "num",
-    "adv",
-    "conj",
-    "pre",
-    "suf",
-    "ti:base",
-    "n:base",
-    "v:base",
-    "vdn",
-  ];
   const verbOptions = _verb.map((item) => {
     return {
       value: item,
@@ -98,10 +99,8 @@ const RelationEditWidget = ({
       }}
       submitTimeout={3000}
       onFinish={async (values) => {
-        console.log("submit", values);
         let data = values;
         data.from = { spell: values.fromSpell, case: values.fromCase };
-        console.log("data", data);
         let res: IRelationResponse;
         if (typeof id === "undefined") {
           res = await post<IRelationRequest, IRelationResponse>(
@@ -161,49 +160,13 @@ const RelationEditWidget = ({
           label={intl.formatMessage({ id: "forms.fields.name.label" })}
         />
       </ProForm.Group>
-      <ProForm.Group>
-        <ProFormSelect
-          options={[
-            {
-              value: "case",
-              label: intl.formatMessage({ id: "forms.fields.case.label" }),
-            },
-            {
-              value: "spell",
-              label: intl.formatMessage({ id: "buttons.spell" }),
-            },
-          ]}
+      <ProForm.Group title="from">
+        <GrammarSelect />
+        <ProFormText
           width="md"
-          name="fromType"
-          allowClear={false}
-          label={intl.formatMessage({ id: "forms.fields.from.label" })}
+          name="fromSpell"
+          label={intl.formatMessage({ id: "buttons.spell" })}
         />
-        <ProFormDependency name={["fromType"]}>
-          {({ fromType }) => {
-            console.log("from type", fromType);
-            return (
-              <>
-                <ProFormSelect
-                  hidden={fromType === "spell"}
-                  options={verbOptions}
-                  fieldProps={{
-                    mode: "tags",
-                  }}
-                  width="md"
-                  name="fromCase"
-                  allowClear={false}
-                  label={intl.formatMessage({ id: "forms.fields.case.label" })}
-                />
-                <ProFormText
-                  hidden={fromType === "case"}
-                  width="md"
-                  name="fromSpell"
-                  label={intl.formatMessage({ id: "buttons.spell" })}
-                />
-              </>
-            );
-          }}
-        </ProFormDependency>
       </ProForm.Group>
       <ProForm.Group>
         <ProFormSelect

dashboard/src/components/general/LangSelect.tsx

@@ -32,8 +32,8 @@ const LangSelectWidget = ({ width, label }: IWidget) => {
 
   const langOptions = [
     {
-      value: "English",
-      label: "en-US",
+      value: "en-US",
+      label: "English",
     },
     {
       value: "zh-Hans",

dashboard/src/components/term/TermModal.tsx

@@ -81,7 +81,7 @@ const TermModalWidget = ({
           parentChannelId={parentChannelId}
           parentStudioId={parentStudioId}
           onUpdate={(value: ITermDataResponse) => {
-            setIsModalOpen(false);
+            modalClose();
             if (typeof onUpdate !== "undefined") {
               onUpdate(value);
             }

dashboard/src/pages/admin/nissaya-ending/list.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from "react-intl";
-import { Button, Dropdown, Modal, message, Space } from "antd";
+import { Button, Dropdown, Modal, message, Space, Tag } from "antd";
 import { ActionType, ProTable } from "@ant-design/pro-components";
 import {
   PlusOutlined,
@@ -20,7 +20,7 @@ import NissayaEndingEdit from "../../../components/admin/relation/NissayaEndingE
 import { LangValueEnum } from "../../../components/general/LangSelect";
 import { NissayaCardModal } from "../../../components/general/NissayaCard";
 import DataImport from "../../../components/admin/relation/DataImport";
-import { CaseValueEnum, getSorterUrl } from "../relation/list";
+import { getSorterUrl, IFrom } from "../relation/list";
 import TermModal from "../../../components/term/TermModal";
 import { ITermDataResponse } from "../../../components/api/Term";
 import TimeShow from "../../../components/general/TimeShow";
@@ -31,6 +31,7 @@ export interface INissayaEndingRequest {
   lang?: string;
   relation?: string;
   case?: string;
+  from?: IFrom | null;
   editor?: IUser;
   count?: number;
   term_id?: string;
@@ -58,6 +59,9 @@ export interface INissayaEnding {
   lang?: string;
   relation?: string;
   case?: string;
+  from?: IFrom | null;
+  fromCase?: string[];
+  fromSpell?: string;
   count?: number;
   termId?: string;
   termChannel?: string;
@@ -173,23 +177,37 @@ const Widget = () => {
             filters: true,
             valueEnum: LangValueEnum(),
           },
+
           {
             title: intl.formatMessage({
-              id: "forms.fields.relation.label",
+              id: "forms.fields.from.label",
             }),
-            dataIndex: "relation",
-            key: "relation",
-            sorter: true,
+            dataIndex: "from",
+            key: "from",
+            render: (text, row, index, action) => {
+              const spell = row.from?.spell;
+              const fromCase = row.from?.case?.map((item, id) => (
+                <Tag key={id}>
+                  {intl.formatMessage({
+                    id: `dict.fields.type.${item}.label`,
+                  })}
+                </Tag>
+              ));
+              return (
+                <>
+                  {spell}
+                  {fromCase}
+                </>
+              );
+            },
           },
           {
             title: intl.formatMessage({
-              id: "forms.fields.case.label",
+              id: "forms.fields.relation.label",
             }),
-            dataIndex: "case",
-            key: "case",
-            search: false,
-            filters: true,
-            valueEnum: CaseValueEnum(),
+            dataIndex: "relation",
+            key: "relation",
+            sorter: true,
           },
           {
             title: intl.formatMessage({
@@ -300,6 +318,7 @@ const Widget = () => {
               lang: item.lang,
               relation: item.relation,
               case: item.case,
+              from: item.from,
               count: item.count,
               termId: item.term_id,
               termChannel: item.term_channel,

dashboard/src/pages/admin/relation/list.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from "react-intl";
-import { Button, Dropdown, Modal, message, Tag, Space, Typography } from "antd";
+import { Button, Dropdown, Modal, message, Tag, Space } from "antd";
 import { ActionType, ProTable } from "@ant-design/pro-components";
 import {
   PlusOutlined,
@@ -7,6 +7,7 @@ import {
   ExclamationCircleOutlined,
   ImportOutlined,
   ExportOutlined,
+  TranslationOutlined,
 } from "@ant-design/icons";
 
 import { API_HOST, delete_, get } from "../../../request";
@@ -25,8 +26,6 @@ import TimeShow from "../../../components/general/TimeShow";
 import { ITerm } from "../../../components/term/TermEdit";
 import TermModal from "../../../components/term/TermModal";
 
-const { Text } = Typography;
-
 export const getSorterUrl = (sorter?: Record<string, SortOrder>): string => {
   let url: string = "";
   for (const key in sorter) {
@@ -43,53 +42,11 @@ export const getSorterUrl = (sorter?: Record<string, SortOrder>): string => {
   return url;
 };
 
-export const CaseValueEnum = () => {
-  const intl = useIntl();
-  return {
-    all: {
-      text: "all",
-    },
-    nom: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.nom.label",
-      }),
-    },
-    acc: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.acc.label",
-      }),
-    },
-    gen: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.gen.label",
-      }),
-    },
-    dat: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.dat.label",
-      }),
-    },
-    inst: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.inst.label",
-      }),
-    },
-    abl: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.abl.label",
-      }),
-    },
-    loc: {
-      text: intl.formatMessage({
-        id: "dict.fields.type.loc.label",
-      }),
-    },
-  };
-};
-
 export interface IRelationRequest {
   id?: string;
   name: string;
+  name_channel?: string;
+  name_term?: ITerm;
   case?: string | null;
   from?: IFrom | null;
   to?: string[];
@@ -113,7 +70,7 @@ export interface IRelationResponse {
   message: string;
   data: IRelationRequest;
 }
-interface IFrom {
+export interface IFrom {
   spell?: string;
   case?: string[];
 }
@@ -121,6 +78,8 @@ export interface IRelation {
   sn?: number;
   id?: string;
   name: string;
+  name_channel?: string;
+  name_term?: ITerm;
   case?: string | null;
   from?: IFrom | null;
   fromCase?: string[];
@@ -217,10 +176,29 @@ const Widget = () => {
             dataIndex: "name1",
             key: "name1",
             render: (text, row, index, action) => {
-              const localName = terms?.find(
-                (item) => item.word === row.name
-              )?.meaning;
-              return localName;
+              return row.name_term ? (
+                <TermModal
+                  trigger={
+                    <Button type="link" icon={<TranslationOutlined />}>
+                      {row.name_term?.meaning}
+                    </Button>
+                  }
+                  id={row.name_term.id}
+                  channelId={row.category_channel}
+                  onUpdate={() => ref.current?.reload()}
+                />
+              ) : row.name_channel && row.name ? (
+                <TermModal
+                  trigger={
+                    <Button type="link" key="button" icon={<PlusOutlined />}>
+                      {intl.formatMessage({ id: "buttons.create" })}
+                    </Button>
+                  }
+                  word={row.name}
+                  channelId={row.name_channel}
+                  onUpdate={() => ref.current?.reload()}
+                />
+              ) : undefined;
             },
           },
           {
@@ -270,12 +248,12 @@ const Widget = () => {
             key: "category",
             render: (text, row, index, action) => {
               return (
-                <Space direction="vertical">
+                <Space>
                   {row.category}
                   {row.category_term ? (
                     <TermModal
                       trigger={
-                        <Button type="link">
+                        <Button type="link" icon={<TranslationOutlined />}>
                           {row.category_term?.meaning}
                         </Button>
                       }
@@ -394,6 +372,8 @@ const Widget = () => {
               sn: offset + id + 1,
               id: item.id,
               name: item.name,
+              name_channel: item.name_channel,
+              name_term: item.name_term,
               case: item.case,
               from: item.from,
               to: item.to,