Gitlink
/
forgeplus-react
0
0
Fork 37
Code Issues Pull Requests 5 Releases 1 Wiki Activity

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

This commit is contained in:
sylor_huang@126.com 2020-04-28 14:52:53 +08:00
parent 14ff9e24b4
commit 6d14b0280a
1 changed files with 30 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/forge/Settings/Collaborator.js
View File

@ -2,6 +2,7 @@ import React , { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Input , AutoComplete , Dropdown , Menu , Icon , Spin , Pagination } from 'antd'; import { Input , AutoComplete , Dropdown , Menu , Icon , Spin , Pagination } from 'antd';
import axios from 'axios'; import axios from 'axios';
import { getImageUrl } from 'educoder';
const { Option } = AutoComplete; const { Option } = AutoComplete;
const MENU_LIST = [{ const MENU_LIST = [{
@ -25,7 +26,8 @@ class Collaborator extends Component{
userDataSource:undefined, userDataSource:undefined,
page:1, page:1,
total_count:undefined, total_count:undefined,
isSpin:true isSpin:true,
searchKey: undefined
} }
} }
@ -64,14 +66,18 @@ class Collaborator extends Component{
} }
// 输入用户 // 输入用户
changeInputUser=(e)=>{ changeInputUser=(e)=>{
this.setState({
searchKey: e
})
this.getUserList(e); this.getUserList(e);
} }
// 选择用户 // 选择用户
selectInputUser=(e,option)=>{ selectInputUser=(e,option)=>{
this.setState({ this.setState({
user_id:e user_id:e,
searchKey: option.props.searchValue
}) })
this.getUserList(option.props.children); this.getUserList(option.props.searchValue);
} }
getUserList=(e)=>{ getUserList=(e)=>{
const url = `/users/list.json`; const url = `/users/list.json`;
@ -165,7 +171,7 @@ class Collaborator extends Component{
this.getMember(project_id,page); this.getMember(project_id,page);
} }
render(){ 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 { author } = this.props;
const menu =(id)=> ( const menu =(id)=> (
@ -182,7 +188,13 @@ class Collaborator extends Component{
const source = userDataSource && userDataSource.map((item,key)=>{ const source = userDataSource && userDataSource.map((item,key)=>{
return( 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( return(
@ -194,10 +206,11 @@ class Collaborator extends Component{
<div className="addPanel"> <div className="addPanel">
<AutoComplete <AutoComplete
dataSource={source} dataSource={source}
style={{ width: 200 }} value={searchKey}
style={{ width: 300 }}
onChange={this.changeInputUser} onChange={this.changeInputUser}
onSelect={this.selectInputUser} onSelect={this.selectInputUser}
placeholder="搜索用户" placeholder="用户名或邮箱搜索..."
/> />
<a className="small_submitBtn ml20" onClick={this.addCollaborator}>增加协作者</a> <a className="small_submitBtn ml20" onClick={this.addCollaborator}>增加协作者</a>
</div> </div>
@ -208,7 +221,16 @@ class Collaborator extends Component{
const operation = MENU_LIST.filter(i=>i.id === item.role); const operation = MENU_LIST.filter(i=>i.id === item.role);
return( return(
<div className="collaboratorItem"> <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> <span>
{ {
author && author.login === item.login ? author && author.login === item.login ?