Merge pull request #2009 from visuddhinanda/agile

#1990

dashboard/src/components/dict/DictContent.tsx

@@ -13,6 +13,7 @@ import DictGroupTitle from "./DictGroupTitle";
 import UserDictList from "./UserDictList";
 import { useAppSelector } from "../../hooks";
 import { currentUser } from "../../reducers/current-user";
+import { useState } from "react";
 
 export interface IDictWords {
   pass: string;
@@ -41,6 +42,50 @@ interface IWidget {
 const DictContentWidget = ({ word, data, compact }: IWidget) => {
   const intl = useIntl();
   const user = useAppSelector(currentUser);
+  const [myRefresh, setMyRefresh] = useState(false);
+
+  const MyDict = () => {
+    const [myTab, setMyTab] = useState<string>("list");
+    return (
+      <div>
+        <Tabs
+          size="small"
+          type="card"
+          style={{ backgroundColor: "white" }}
+          activeKey={myTab}
+          onChange={(activeKey: string) => setMyTab(activeKey)}
+          items={[
+            {
+              label: "列表",
+              key: "list",
+              children: (
+                <UserDictList
+                  studioName={user?.realName}
+                  word={word}
+                  compact={true}
+                  refresh={myRefresh}
+                  onRefresh={(value: boolean) => setMyRefresh(value)}
+                />
+              ),
+            },
+            {
+              label: "新建",
+              key: "new",
+              children: (
+                <MyCreate
+                  word={word}
+                  onSave={() => {
+                    setMyRefresh(true);
+                    setMyTab("list");
+                  }}
+                />
+              ),
+            },
+          ]}
+        />
+      </div>
+    );
+  };
 
   return (
     <>
@@ -106,17 +151,7 @@ const DictContentWidget = ({ word, data, compact }: IWidget) => {
               {
                 label: `单词本`,
                 key: "my",
-                children: (
-                  <div>
-                    <UserDictList
-                      studioName={user?.realName}
-                      word={word}
-                      compact={true}
-                    />
-                    <Divider>新建</Divider>
-                    <MyCreate word={word} />
-                  </div>
-                ),
+                children: <MyDict />,
               },
             ]}
           />

dashboard/src/components/dict/MyCreate.tsx

@@ -1,4 +1,4 @@
-import { Button, Col, Divider, Input, message, Row } from "antd";
+import { Button, Col, Divider, Input, message, notification, Row } from "antd";
 import { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 import { SaveOutlined } from "@ant-design/icons";
@@ -17,6 +17,7 @@ import { useAppSelector } from "../../hooks";
 import { add, updateIndex, wordIndex } from "../../reducers/inline-dict";
 import store from "../../store";
 import { get as getUiLang } from "../../locales";
+import { myDictDirty } from "../../reducers/command";
 
 export const UserWbwPost = (data: IDictRequest[], view: string) => {
   let wordData: IDictRequest[] = data;
@@ -98,9 +99,11 @@ export const UserWbwPost = (data: IDictRequest[], view: string) => {
 
 interface IWidget {
   word?: string;
+  onSave?: Function;
 }
-const MyCreateWidget = ({ word }: IWidget) => {
+const MyCreateWidget = ({ word, onSave }: IWidget) => {
   const intl = useIntl();
+  const [dirty, setDirty] = useState(false);
   const [wordSpell, setWordSpell] = useState(word);
   const [editWord, setEditWord] = useState<IWbw>({
     word: { value: word ? word : "", status: 7 },
@@ -134,6 +137,11 @@ const MyCreateWidget = ({ word }: IWidget) => {
     );
   }, [inlineWordIndex, wordSpell]);
 
+  const setDataDirty = (dirty: boolean) => {
+    store.dispatch(myDictDirty(dirty));
+    setDirty(dirty);
+  };
+
   function fieldChanged(field: TFieldName, value: string) {
     let mData: IWbw = JSON.parse(JSON.stringify(editWord));
     switch (field) {
@@ -175,7 +183,17 @@ const MyCreateWidget = ({ word }: IWidget) => {
     }
     console.debug("field changed", mData);
     setEditWord(mData);
+    setDataDirty(true);
   }
+
+  const reset = () => {
+    fieldChanged("meaning", "");
+    fieldChanged("note", "");
+    fieldChanged("type", "");
+    fieldChanged("grammar", "");
+    fieldChanged("factors", "");
+    fieldChanged("factorMeaning", "");
+  };
   return (
     <div style={{ padding: "0 5px" }}>
       <Row>
@@ -225,10 +243,18 @@ const MyCreateWidget = ({ word }: IWidget) => {
       <div
         style={{ display: "flex", justifyContent: "space-between", padding: 5 }}
       >
-        <Button>重置</Button>
+        <Button
+          onClick={() => {
+            reset();
+            setDataDirty(false);
+          }}
+        >
+          重置
+        </Button>
         <Button
           loading={loading}
           icon={<SaveOutlined />}
+          disabled={!dirty}
           onClick={() => {
             setLoading(true);
             const data: IDictRequest[] = [
@@ -251,9 +277,15 @@ const MyCreateWidget = ({ word }: IWidget) => {
               })
               .then((json) => {
                 if (json.ok) {
-                  message.success(
-                    intl.formatMessage({ id: "flashes.success" })
-                  );
+                  setDataDirty(false);
+                  reset();
+                  notification.info({
+                    message: intl.formatMessage({ id: "flashes.success" }),
+                  });
+
+                  if (typeof onSave !== "undefined") {
+                    onSave();
+                  }
                 } else {
                   message.error(json.message);
                 }

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

@@ -89,6 +89,7 @@ const WbwDetailBasicWidget = ({
               <Input
                 value={_meaning}
                 allowClear
+                placeholder="请输入"
                 onChange={(e) => {
                   console.log("meaning input", e.target.value);
                   setMeaning(e.target.value);

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

@@ -85,7 +85,7 @@ const WbwDetailFactorWidget = ({ data, onChange }: IWidget) => {
         }
       }}
     >
-      <Input allowClear />
+      <Input placeholder="请输入" allowClear />
     </AutoComplete>
   );
 };

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

@@ -212,6 +212,7 @@ const WbwDetailFmWidget = ({
           allowClear
           hidden={!factorInputEnable}
           value={currValue.join("+")}
+          placeholder="请输入"
           onChange={(e) => {
             console.log(e.target.value);
             const newData = resizeArray(e.target.value.split("+"), factors);

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

@@ -84,7 +84,7 @@ const WbwDetailParentWidget = ({ data, onChange }: IWidget) => {
         }
       }}
     >
-      <Input allowClear />
+      <Input allowClear placeholder="请输入" />
     </AutoComplete>
   );
 };

dashboard/src/reducers/command.ts

@@ -19,6 +19,7 @@ interface IState {
   lookup?: string;
   grammar?: string;
   grammarId?: string;
+  myDictDirty?: boolean;
 }
 
 const initialState: IState = {};
@@ -34,6 +35,9 @@ export const slice = createSlice({
     lookup: (state, action: PayloadAction<string | undefined>) => {
       state.lookup = action.payload;
     },
+    myDictDirty: (state, action: PayloadAction<boolean | undefined>) => {
+      state.myDictDirty = action.payload;
+    },
     grammar: (state, action: PayloadAction<string | undefined>) => {
       state.grammar = action.payload;
     },
@@ -45,6 +49,7 @@ export const slice = createSlice({
 
 export const { command } = slice.actions;
 export const { lookup } = slice.actions;
+export const { myDictDirty } = slice.actions;
 export const { grammar } = slice.actions;
 export const { grammarId } = slice.actions;
 
@@ -58,5 +63,7 @@ export const grammarWord = (state: RootState): string | undefined =>
   state.command.grammar;
 export const grammarWordId = (state: RootState): string | undefined =>
   state.command.grammarId;
+export const myDictIsDirty = (state: RootState): boolean | undefined =>
+  state.command.myDictDirty;
 
 export default slice.reducer;