From 18b289b84c36d4a4d64ef538844cc6744cb7e9bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Thu, 21 Oct 2021 09:41:17 +0800
Subject: [PATCH] =?UTF-8?q?@who=EF=BC=88=E7=BC=BA=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/forge/Merge/merge_form.js                 |  20 ++-
 src/forge/Order/order_form.js                 |  24 ++-
 src/forge/comments/comments.js                |  24 ++-
 .../tpm/challengesnew/tpm-md-editor.js        | 150 ++++++++++--------
 4 files changed, 151 insertions(+), 67 deletions(-)

diff --git a/src/forge/Merge/merge_form.js b/src/forge/Merge/merge_form.js
index 5df9794bb..7bdfc04e5 100644
--- a/src/forge/Merge/merge_form.js
+++ b/src/forge/Merge/merge_form.js
@@ -25,6 +25,7 @@ class MergeForm extends Component {
       issue_tags: undefined,
       issue_versions: undefined,
       issue_priories: undefined,
+      atWhoLoginList:undefined
     };
   }
 
@@ -146,7 +147,15 @@ class MergeForm extends Component {
         } else {
           values.issue_tag_ids = [];
         }
-        const { desc } = this.state;        
+        const { desc , atWhoLoginList } = this.state;
+        //发送消息
+        if(atWhoLoginList.length != 0){
+          axios.post(`/users/${owner}/messages.json`,{
+            type:"atme",
+            receivers_login:atWhoLoginList,
+            atmeable_type:"PullRequest"
+          })
+        }    
         if (merge_type === "new") {
           let url = `/${owner}/${projectsId}/pulls.json`;
           axios.post(url, {
@@ -224,6 +233,13 @@ class MergeForm extends Component {
     });
   };
 
+  //合并请求中at谁列表（存储：login）
+  changeAtWhoLoginList = (loginList) =>{
+    this.setState({
+      atWhoLoginList:loginList,
+    });
+  };
+
   render() {
     const { merge_type } = this.props;
     const { getFieldDecorator } = this.props.form;
@@ -272,6 +288,8 @@ class MergeForm extends Component {
                   mdID={"merge-new-description"}
                   initValue={desc}
                   onChange={this.onContentChange}
+                  isCanAtme = {true}
+                  changeAtWhoLoginList = {this.changeAtWhoLoginList}
                 ></MDEditor>
                 <p className="clearfix mt20">
                   <Button
diff --git a/src/forge/Order/order_form.js b/src/forge/Order/order_form.js
index 0858ac527..b019c0988 100644
--- a/src/forge/Order/order_form.js
+++ b/src/forge/Order/order_form.js
@@ -35,7 +35,8 @@ class order_form extends Component {
       get_attachments: undefined,
       show_token: false,
       cannot_edit: false,
-      issue_current_user: true
+      issue_current_user: true,
+      atWhoLoginList:undefined
     };
   }
   componentDidUpdate=(prevPros)=>{
@@ -152,7 +153,16 @@ class order_form extends Component {
         if (values.issue_tag_ids.length > 0) {
           values.issue_tag_ids = [values.issue_tag_ids];
         }
-        const { description, start_date, due_date, issue_type } = this.state;
+        const { description, start_date, due_date, issue_type , atWhoLoginList } = this.state;
+        //发送消息
+        if(atWhoLoginList.length != 0){
+          console.log('issue发送消息',atWhoLoginList);
+          axios.post(`/users/${owner}/messages.json`,{
+            type:"atme",
+            receivers_login:atWhoLoginList,
+            atmeable_type:"Issue"
+          })
+        }
         if (form_type !== "edit") {
           const url = `/${owner}/${projectsId}/issues.json`;
           axios.post(url, {
@@ -221,6 +231,14 @@ class order_form extends Component {
       description: value,
     });
   };
+
+  //issue中at谁列表（存储：login）
+  changeAtWhoLoginList = (loginList) =>{
+    this.setState({
+      atWhoLoginList:loginList,
+    });
+  };
+
   // 修改开始时间
   changeBeginTime = (start_date, value) => {
     this.setState({
@@ -329,6 +347,8 @@ class order_form extends Component {
                     mdID={"order-new-description"}
                     initValue={description}
                     onChange={this.onContentChange}
+                    isCanAtme = {true}
+                    changeAtWhoLoginList = {this.changeAtWhoLoginList}
                   ></MDEditor>
                 </div>
                 {get_attachments && get_attachments.length > 0 ? (
diff --git a/src/forge/comments/comments.js b/src/forge/comments/comments.js
index c27bb12af..aeb592244 100644
--- a/src/forge/comments/comments.js
+++ b/src/forge/comments/comments.js
@@ -30,6 +30,7 @@ class comments extends Component {
       reply_id: undefined,
       reply_content: undefined,
       new_journal_id: undefined,
+      atWhoLoginList:undefined
     };
   }
 
@@ -49,6 +50,7 @@ class comments extends Component {
       });
       return;
     }
+
     this.props.form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         const {
@@ -58,10 +60,21 @@ class comments extends Component {
           orderId,
           reply_id,
           is_reply,
+          atWhoLoginList,
         } = this.state;
 
-        const url = `/issues/${orderId}/journals.json`;
+        const { owner } = this.props.match.params;
 
+        //发送消息
+        if(atWhoLoginList.length != 0){
+          axios.post(`/users/${owner}/messages.json`,{
+            type:"atme",
+            receivers_login:atWhoLoginList,
+            atmeable_type:"Issue"
+          })
+        }
+
+        const url = `/issues/${orderId}/journals.json`;
         axios
           .post(url, {
             ...values,
@@ -258,6 +271,13 @@ class comments extends Component {
     }
   };
 
+  //评论中at谁列表（存储：login）
+  changeAtWhoLoginList = (loginList) =>{
+    this.setState({
+      atWhoLoginList:loginList,
+    });
+  };
+
   onRef = (ref) => {
     this.child = ref;
   };
@@ -335,6 +355,8 @@ class comments extends Component {
               onChange={
                 is_reply ? this.replyContentChange : this.onContentChange
               }
+              isCanAtme = {true}
+              changeAtWhoLoginList = {this.changeAtWhoLoginList}
             ></MDEditor>
             <p className="quillFlag">
               {quillFlag && <span className="">请输入评论内容</span>}
diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js
index f3455fe40..f6c4d66df 100644
--- a/src/modules/tpm/challengesnew/tpm-md-editor.js
+++ b/src/modules/tpm/challengesnew/tpm-md-editor.js
@@ -73,12 +73,14 @@ function md_elocalStorage(editor, mdu, id) {
   return tid
 }
 
-export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true }) => {
+export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, className = '', noStorage = false, imageExpand = true, placeholder = '', width = '100%', height = 400, initValue = '', emoji, watch, showNullButton = false, showResizeBar = false, startInit = true , forMember = true , isCanAtme = false ,changeAtWhoLoginList }) => {
 
   const editorEl = useRef();
   const resizeBarEl = useRef();
   const [editorInstance, setEditorInstance] = useState();
   const [atWhoVisible, setAtWhoVisible] = useState(false);
+  const [atWhoLoginListState, setAtWhoLoginListState] = useState([]);
+  const atWhoLoginList = useRef([]);
   const containerId = `mdEditor_${mdID}`;
   const editorBodyId = `mdEditors_${mdID}`;
   const tipId = `e_tips_mdEditor_${mdID}`;
@@ -86,7 +88,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
   const users = [{image_url: "system/lets/letter_avatars/2/J/241_157_191/120.png",login: "jasonjun",profile_completed: false,user_id: 84965,username: "jasonjun"},
   {image_url: "system/lets/letter_avatars/2/E/122_185_146/120.png",login: "Eo9ygbqns",profile_completed: false,user_id: 84963,username: "Eo9ygbqns"},
   {image_url: "system/lets/letter_avatars/2/P/238_117_19/120.png",login: "postwoman",profile_completed: true,user_id: 84961,username: "PostWoman"},
-  {image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准"},
+  {image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "xuzhun",profile_completed: false,user_id: 89516,username: "徐准"},
   {image_url: "system/lets/letter_avatars/2/X/70_163_90/120.png",login: "Es5ghtfik",profile_completed: false,user_id: 89516,username: "徐准1"}]
 
   function onLayout() {
@@ -115,53 +117,23 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
     const ch = cursor.ch;//列
     //替换最后的内容
     cm.replaceRange(username+" ",{line,ch},{line,ch});
+    //将此user的login存储到atWhoLoginList集合中
+    atWhoLoginListState
+    const list = new Set(atWhoLoginList.current);
+    users.map((item)=>{
+      item.username === username && list.add(item.login);
+    })
+    atWhoLoginList.current = Array.from(list);
+    setAtWhoLoginListState(Array.from(list));
   }
 
-  // useEffect (()=>{
-  //   //监听上下键和enter键 选中atwo
-  //   atWhoVisible && document.onkeydown((e)=>{
-  //     //上
-  //     if(e.key === "ArrowUp"){
-  //       console.log('上');
-  //     }
-  //     //下
-  //     if(e.key === "ArrowDown"){
-  //       console.log('下');
-  //     }
-  //     //enter
-  //     if(e.key === "Enter"){
-  //       console.log('Enter');
-  //     }
-  //   })
-  // },[])
-
-  // function handleKeyDown(e){
-  //   //上
-  //   if(e.key === "ArrowUp"){
-  //     console.log('上');
-  //   }
-  //   //下
-  //   if(e.key === "ArrowDown"){
-  //     console.log('下');
-  //   }
-  //   //enter
-  //   if(e.key === "Enter"){
-  //     console.log('Enter');
-  //   }
-  // }
+  useEffect(()=>{
+    console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current,'atWhoLoginListState: ',atWhoLoginListState);
+    changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState);
+  },[atWhoLoginListState])
 
   const atWhoList = (
-    // <Menu className="at_who_list" id="at_who_list">
-    //   {users && users.map((item,key)=>{
-    //     return(
-    //       <Menu.item>
-    //         { item.image_url && <img src={getImageUrl(item.image_url)}></img> }
-    //         <span>{item.username}</span>
-    //       </Menu.item>
-    //     )
-    //   })}
-    // </Menu>
-    <div className="at_who_list" id="at_who_list" onkeydown ={(e)=>{handleKeyDown(e)}}>
+    <div className="at_who_list" id="at_who_list" >
       {users && users.map((item,key)=>{
         return(
           <div key={key} className="at_who" onClick={()=>{selectAtWho(item.username)}}>
@@ -274,24 +246,78 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       if (!noStorage) {
         tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId)
       }
+      //isCanAtme:只有issue和合并请求以及评论部分可以@他人操作
       //当光标或选中内容时触发绑定@事件
-      editorInstance.cm.on("focus", () => {
-        if (forMember) {
-          document.onkeydown = (e) => {
-            // console.log('e',e);
-            if (e.key === "@") {
-              // 输入@键后在对应的位置显示可选的项目成员
-              setAtWhoVisible(true);
-              //获取光标位置
-              const cssStyle = document.getElementsByClassName("CodeMirror cm-s-default CodeMirror-wrap")[0].firstChild.style;
-              //设置弹框位置
-              document.getElementById("at_who_list").style.top = (parseInt(cssStyle.getPropertyValue("top").replace("px",""))+60)+"px";
-              document.getElementById("at_who_list").style.left = (parseInt(cssStyle.getPropertyValue("left").replace("px",""))+20)+"px";
-            } else {
-              setAtWhoVisible(false);
+      isCanAtme && editorInstance.cm.on("focus", () => {
+        document.onkeydown = (e) => {
+          if (e.key === "@") {
+            // 输入@键后在对应的位置显示可选的项目成员
+            setAtWhoVisible(true);
+            //获取光标位置
+            const cssStyle = document.getElementsByClassName("CodeMirror cm-s-default CodeMirror-wrap")[0].firstChild.style;
+            //设置弹框位置
+            document.getElementById("at_who_list").style.top = (parseInt(cssStyle.getPropertyValue("top").replace("px",""))+60)+"px";
+            document.getElementById("at_who_list").style.left = (parseInt(cssStyle.getPropertyValue("left").replace("px",""))+20)+"px";
+          } else {
+            setAtWhoVisible(false);
+          }
+          if(atWhoLoginList.current.length != 0){
+            console.log('initValue',initValue);
+            const codemirror  = editorInstance.cm;
+            const value = codemirror.getValue();
+            //处理初始内容就自带@谁的情况
+            if(initValue){
+              users.map(item=>{
+                if(initValue.indexOf(item.username)!=-1 && initValue.charAt(initValue.indexOf(item.username)-1) === "@" && initValue.indexOf(`@${item.username}`)===value.indexOf(`@${item.username}`)){
+                  //初始内容中有符合@+名字的格式并且当前内容未删除初始内容
+                  value.replace(`@${username}`,"");
+                }
+              })
+              Array.from(atWhoMap.keys()).map(username=>{
+                if(initValue.indexOf(username)!=-1 && value.charAt(value.indexOf(username)-1) === "@"){
+                  
+                }
+              })
+              console.log('剔除初始内容中的@who',value);
             }
-          };
-        }
+            //以username为主键，login为value的map集合
+            let atWhoMap = new Map();
+            Array.from(atWhoLoginList.current).map(item=>{
+              users.map(i=>{
+                if(i.login === item){
+                  atWhoMap.set(i.username,i.login);
+                }
+              })
+            });
+            if(value.indexOf("@") === -1){
+              //已经有要@的列表，但是没有@符号 -> 清空@集合
+              atWhoLoginList.current = [];
+              setAtWhoLoginListState([]);
+              return;
+            }
+            const cursor = codemirror.doc.getCursor();
+            const line = cursor.line;
+            const ch = cursor.ch;
+            const lineContent = codemirror.getLine(line);
+            if(lineContent && lineContent.indexOf("@") != -1){//此行有@谁
+              Array.from(atWhoMap.keys()).map(username=>{
+                //判断lineContent是不是以列表中的某个username结尾
+                if(lineContent.endsWith(username)){
+                  codemirror.setSelection({line,ch:ch-username.length-1},{line,ch});
+                  return;
+                }
+                //处理有名字但是无@符号，有@但是名字对不上的情况
+                if(value.indexOf(username)===-1 || value.charAt(value.indexOf(username)-1) !="@"){
+                  //符合任意一种情况->踢掉这个人 不给他发消息
+                  const list = new Set(atWhoLoginList.current);
+                  list.delete(atWhoMap.get(username));
+                  atWhoLoginList.current = Array.from(list);
+                  setAtWhoLoginListState(Array.from(list));
+                }
+              })
+            }
+          }
+        };
       });
       editorInstance.cm.on("blur", () => {
         document.onkeydown = null ;
@@ -299,8 +325,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       editorInstance.cm.on("change", (cm) => {
         onChange && onChange(cm.getValue());
       });
-      if (onChange) {
-      }
       ro = onLayout()
       return () => {
         if (!noStorage) {