修改协作者页面的链接及搜索方式

src/forge/Settings/Collaborator.js

@@ -2,6 +2,7 @@ import React , { Component } from 'react';
 import { Link } from 'react-router-dom';
 import { Input , AutoComplete , Dropdown , Menu , Icon , Spin , Pagination } from 'antd';
 import axios from 'axios';
+import { getImageUrl } from 'educoder';
 
 const { Option } = AutoComplete;
 const MENU_LIST = [{
@@ -25,7 +26,8 @@ class Collaborator extends Component{
       userDataSource:undefined,
       page:1,
       total_count:undefined,
-      isSpin:true
+      isSpin:true,
+      searchKey: undefined
     }
   }
 
@@ -64,14 +66,18 @@ class Collaborator extends Component{
   }
   // 输入用户
   changeInputUser=(e)=>{
+    this.setState({
+      searchKey: e
+    })
     this.getUserList(e);
   }
   // 选择用户
   selectInputUser=(e,option)=>{
     this.setState({
-      user_id:e
+      user_id:e,
+      searchKey: option.props.searchValue
     })
-    this.getUserList(option.props.children);
+    this.getUserList(option.props.searchValue);
   }
   getUserList=(e)=>{
     const url = `/users/list.json`;
@@ -165,7 +171,7 @@ class Collaborator extends Component{
     this.getMember(project_id,page);
   }
   render(){
-    const { userDataSource , listData , isSpin , page , total_count } = this.state;
+    const { userDataSource , listData , isSpin , page , total_count,searchKey } = this.state;
     // 获取当前项目的拥有者
     const { author } = this.props;
     const menu =(id)=> (
@@ -182,7 +188,13 @@ class Collaborator extends Component{
 
     const source = userDataSource && userDataSource.map((item,key)=>{
       return(
-        <Option key={key} value={`${item.user_id}`}>{item.username}</Option>
+        <Option key={key} value={`${item.user_id}`} searchValue={`${item.username}`}>
+          <img className="user_img radius" width="28" height="28"  src={getImageUrl(`images/${item && item.image_url}`)} alt=""/>
+          <span className="ml10" style={{'vertical-align':'middle'}}>
+            {item.username}
+            <span className="color-grey ml10">({item.login})</span>
+          </span>
+        </Option>
       )
     })
     return(
@@ -194,10 +206,11 @@ class Collaborator extends Component{
           <div className="addPanel">
             <AutoComplete
               dataSource={source}
-              style={{ width: 200 }}
+              value={searchKey}
+              style={{ width: 300 }}
               onChange={this.changeInputUser}
               onSelect={this.selectInputUser}
-              placeholder="搜索用户"
+              placeholder="用户名或邮箱搜索..."
             />
             <a className="small_submitBtn ml20" onClick={this.addCollaborator}>增加协作者</a>
           </div>
@@ -208,7 +221,16 @@ class Collaborator extends Component{
                   const operation = MENU_LIST.filter(i=>i.id === item.role);
                   return(
                     <div className="collaboratorItem">
-                      <span><Link to={``} className="color-blue">{item.name}</Link></span>
+                      <span>
+                      <Link to={`/users/${item && item.login}/projects`} className="show-user-link">
+                        <img className="user_img radius" width="28" height="28"  src={getImageUrl(`images/${item && item.image_url}`)} alt=""/>
+                        <span className="ml10" style={{'vertical-align':'middle'}}>
+                          {item.name}
+                          <span className="color-grey ml10">({item.login})</span>
+                          </span>
+                        
+                      </Link>
+                        </span>
                       <span>
                         {
                           author && author.login === item.login ?