From ac4488a90711a42c1841627c3a9f7b8a6c2e8f14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E6=80=9D?= <2897217417@qq.com>
Date: Mon, 8 Nov 2021 15:14:04 +0800
Subject: [PATCH] atwho

---
 src/forge/Merge/merge_form.js                 |  2 +
 src/forge/Order/order_form.js                 |  2 +
 src/forge/UsersList/fork_users.js             |  2 +-
 src/forge/comments/comments.js                |  5 ++-
 .../tpm/challengesnew/css/newquestion.css     |  5 +++
 .../tpm/challengesnew/tpm-md-editor.js        | 37 ++++++++++++-------
 6 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/forge/Merge/merge_form.js b/src/forge/Merge/merge_form.js
index 141e585d8..d050116f4 100644
--- a/src/forge/Merge/merge_form.js
+++ b/src/forge/Merge/merge_form.js
@@ -285,6 +285,8 @@ class MergeForm extends Component {
                   onChange={this.onContentChange}
                   isCanAtme = {true}
                   changeAtWhoLoginList = {this.changeAtWhoLoginList}
+                  owner = {owner}
+                  projectsId = {projectsId}
                 ></MDEditor>
                 <p className="clearfix mt20">
                   <Button
diff --git a/src/forge/Order/order_form.js b/src/forge/Order/order_form.js
index cf7454f88..d3282d6df 100644
--- a/src/forge/Order/order_form.js
+++ b/src/forge/Order/order_form.js
@@ -342,6 +342,8 @@ class order_form extends Component {
                     onChange={this.onContentChange}
                     isCanAtme = {true}
                     changeAtWhoLoginList = {this.changeAtWhoLoginList}
+                    owner = {owner}
+                    projectsId = {projectsId}
                   ></MDEditor>
                 </div>
                 {get_attachments && get_attachments.length > 0 ? (
diff --git a/src/forge/UsersList/fork_users.js b/src/forge/UsersList/fork_users.js
index 23cd5bead..a3d9c2a2d 100644
--- a/src/forge/UsersList/fork_users.js
+++ b/src/forge/UsersList/fork_users.js
@@ -27,7 +27,7 @@ class ForkUsers extends Component {
     });
     const { projectsId , owner } = this.props.match.params;
 
-    const url = `/${owner}/${projectsId}/members.json`;
+    const url = `/${owner}/${projectsId}/forks.json`;
     axios
       .get(url, {
         params: {
diff --git a/src/forge/comments/comments.js b/src/forge/comments/comments.js
index e070d5493..8e514e163 100644
--- a/src/forge/comments/comments.js
+++ b/src/forge/comments/comments.js
@@ -65,7 +65,7 @@ class comments extends Component {
           atWhoLoginList,
         } = this.state;
 
-        const { owner } = this.props.match.params;
+        
 
         const url = `/issues/${orderId}/journals.json`;
         axios
@@ -320,6 +320,7 @@ class comments extends Component {
       new_journal_id,
     } = this.state;
     const { current_user, only_show_content } = this.props;
+    const { projectsId ,owner } = this.props.match.params;
 
     const new_comment = (is_reply, item_id) => {
       return (
@@ -353,6 +354,8 @@ class comments extends Component {
               }
               isCanAtme = {true}
               changeAtWhoLoginList = {this.changeAtWhoLoginList}
+              owner = {owner}
+              projectsId = {projectsId}
             ></MDEditor>
             <p className="quillFlag">
               {quillFlag && <span className="">请输入评论内容</span>}
diff --git a/src/modules/tpm/challengesnew/css/newquestion.css b/src/modules/tpm/challengesnew/css/newquestion.css
index c6359f525..81d7afcba 100644
--- a/src/modules/tpm/challengesnew/css/newquestion.css
+++ b/src/modules/tpm/challengesnew/css/newquestion.css
@@ -35,6 +35,11 @@
     border-radius:50%;
     margin-right: 10px;
 }
+.at_who span{
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 .blur_atWho{
     position: absolute;
     top: -100px;
diff --git a/src/modules/tpm/challengesnew/tpm-md-editor.js b/src/modules/tpm/challengesnew/tpm-md-editor.js
index 9b50415df..ae9f10e28 100644
--- a/src/modules/tpm/challengesnew/tpm-md-editor.js
+++ b/src/modules/tpm/challengesnew/tpm-md-editor.js
@@ -74,7 +74,7 @@ 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 , isCanAtme = false ,changeAtWhoLoginList }) => {
+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, owner, projectsId }) => {
 
   const editorEl = useRef();
   const resizeBarEl = useRef();
@@ -82,17 +82,18 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
   const [atWhoVisible, setAtWhoVisible] = useState(false);
   const [atWhoLoginListState, setAtWhoLoginListState] = useState([]);
   const [users, setUsers] = useState([]);
+  //用户输入的@之后的搜索词
+  const [search, setSeacrch] = useState(undefined);
   const atWhoLoginList = useRef([]);
   const containerId = `mdEditor_${mdID}`;
   const editorBodyId = `mdEditors_${mdID}`;
   const tipId = `e_tips_mdEditor_${mdID}`;
 
-  //todo：需要替换成可@用户列表接口,由于forge接口名称冲突，src\forge\UsersList\fork_users.js接口/members.json需要换成/forks.json
   useEffect(()=>{
-    isCanAtme && axios.get('/users/list.json',{
-      params: {
-        search: 'admin',
-      },
+    isCanAtme && axios.get(`/${owner}/${projectsId}/members.json`,{
+      // params: {
+      //   search: 'admin',
+      // },
     }).then(response=>{
       if(response && response.status === 200){
         setUsers(response.data.users);
@@ -147,10 +148,13 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
 
   //markdown编辑器中输入的键盘监听事件
   function mdKeyDown(e){
-    console.log("11111111111");
+    const cm = editorInstance.cm;
+    //获取鼠标所在行的行数和ch
+    const line = cm.doc.getCursor().line;//行
+    atWhoVisible && console.log('cmaa',cm.getLine(line));
+    console.log("markdown编辑器--------键盘监听事件");
     // document.onkeydown = e=>{
       if (e.shiftKey && e.key === "@") {
-        console.log("markdown编辑器的鼠标事件",e);
         // 输入@键后在对应的位置显示可选的项目成员
         setAtWhoVisible(true);
         //获取光标位置
@@ -161,8 +165,6 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
         //将第一个用户默认选中
         const at_who_divs = document.getElementsByClassName("at_who");
         at_who_divs[0].className = "at_who active";
-      } else {
-        setAtWhoVisible(false);
       }
       //处理本来@了某人 -> 删掉 -> 撤回 的情况
       if(e.ctrlKey && e.code === "KeyZ" && users.length != 0){
@@ -287,7 +289,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
   },[])
 
   useEffect(()=>{
-    console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current,'atWhoLoginListState: ',atWhoLoginListState);
+    console.log('@谁列表发生变化,atWhoLoginList.current：',atWhoLoginList.current);
     changeAtWhoLoginList && changeAtWhoLoginList(atWhoLoginListState);
   },[atWhoLoginListState])
 
@@ -307,6 +309,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
   useEffect(()=>{
     //当atWhoVisible为true的时候，失焦，监听上下和enter键
     if(atWhoVisible){
+      const cm = editorInstance.cm;
+      //获取鼠标所在行的行数和ch
+      const line = cm.doc.getCursor().line;//行
+      // console.log('cmaa',cm.getLine(line));
       // document.activeElement.id !== "blur_atWho" && document.getElementById("blur_atWho").focus();
       // const atWhoDivs = document.getElementsByClassName("at_who");
       // let index = 0;
@@ -314,7 +320,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       //   atWhoDivs[i].className === "at_who active" && (index = i);
       // }
       // const atWhoListDiv = document.getElementById("at_who_list");
-      document.addEventListener("keydown",atWhoKeyDown);
+      // document.addEventListener("keydown",atWhoKeyDown);
     }
   },[atWhoVisible])
 
@@ -416,7 +422,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
         tid = md_elocalStorage(editorInstance, `MDEditor__${containerId}`, containerId)
       }
       //isCanAtme:只有issue和合并请求以及评论部分可以@他人操作
-      //当光标或选中内容时触发绑定@事件
+      //绑定@事件
       isCanAtme && editorInstance.cm.on("focus", () => {
         document.addEventListener("keydown", mdKeyDown);
       });
@@ -425,6 +431,7 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
       });
       editorInstance.cm.on("change", (cm) => {
         onChange && onChange(cm.getValue());
+        //当内容发生改变并且有已@列表时
         if(atWhoLoginList.current.length != 0){
           const codemirror  = editorInstance.cm;
           let value = codemirror.getValue();
@@ -480,6 +487,10 @@ export default ({ mdID, onChange, onCMBeforeChange, onCMBlur, error = false, cla
             })
           }
         }
+        // const cm = editorInstance.cm;
+    //获取鼠标所在行的行数和ch
+    const line = cmEl.doc.getCursor().line;//行
+    atWhoVisible && console.log('cmaa',cmEl.getLine(line));
       });
       ro = onLayout()
       return () => {