forked from Gitlink/forgeplus-react
修改仓库设置的协作者页面
This commit is contained in:
parent
ac39faceca
commit
f21ad1199f
File diff suppressed because one or more lines are too long
|
|
@ -1,208 +1,423 @@
|
|||
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';
|
||||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
Input,
|
||||
AutoComplete,
|
||||
Dropdown,
|
||||
Menu,
|
||||
Icon,
|
||||
Spin,
|
||||
Pagination,
|
||||
Button,
|
||||
Table,
|
||||
Tooltip
|
||||
} from "antd";
|
||||
import NoneData from "../Nodata";
|
||||
import axios from "axios";
|
||||
import { getImageUrl } from "educoder";
|
||||
const { Search } = Input;
|
||||
|
||||
const { Option } = AutoComplete;
|
||||
const MENU_LIST = [{
|
||||
id:"Manager",
|
||||
name:'管理员'
|
||||
},{
|
||||
id:"Developer",
|
||||
name:'可写权限'
|
||||
},{
|
||||
id:"Reporter",
|
||||
name:'可读权限'
|
||||
}];
|
||||
const MENU_LIST = [
|
||||
{
|
||||
id: "Manager",
|
||||
name: "管理员",
|
||||
},
|
||||
{
|
||||
id: "Developer",
|
||||
name: "开发者",
|
||||
},
|
||||
{
|
||||
id: "Reporter",
|
||||
name: "报告者",
|
||||
},
|
||||
];
|
||||
const LIMIT = 15;
|
||||
class Collaborator extends Component{
|
||||
constructor(props){
|
||||
class Collaborator extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
listData:undefined,
|
||||
user:undefined,
|
||||
user_id:undefined,
|
||||
userDataSource:undefined,
|
||||
page:1,
|
||||
total_count:undefined,
|
||||
isSpin:true,
|
||||
searchKey: undefined
|
||||
}
|
||||
this.state = {
|
||||
listData: undefined,
|
||||
user: undefined,
|
||||
user_id: undefined,
|
||||
userDataSource: undefined,
|
||||
page: 1,
|
||||
total_count: undefined,
|
||||
isSpin: true,
|
||||
searchKey: undefined,
|
||||
search: undefined,
|
||||
role: undefined,
|
||||
otherSpin: false,
|
||||
searchSpin: false,
|
||||
roleName: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount=()=>{
|
||||
if(this.props.project_id){
|
||||
const { page } = this.state;
|
||||
this.getMember(this.props.project_id,page);
|
||||
componentDidMount = () => {
|
||||
if (this.props.project_id) {
|
||||
this.getMember();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
componentDidUpdate=(prevState)=>{
|
||||
if(this.props.project_id && this.props.project_id !== prevState.project_id){
|
||||
const { page } = this.state;
|
||||
this.getMember(this.props.project_id,page);
|
||||
componentDidUpdate = (prevState) => {
|
||||
if (
|
||||
this.props.project_id &&
|
||||
this.props.project_id !== prevState.project_id
|
||||
) {
|
||||
this.getMember();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 获取项目协作者
|
||||
getMember=(project_id,page)=>{
|
||||
const url = `/projects/${project_id}/members.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
page,limit:LIMIT
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
getMember = () => {
|
||||
const { page, search, role } = this.state;
|
||||
console.log("search", search);
|
||||
console.log("role", role);
|
||||
const url = `/projects/${this.props.project_id}/members.json`;
|
||||
axios
|
||||
.get(url, {
|
||||
params: {
|
||||
page,
|
||||
search: search,
|
||||
role: role,
|
||||
limit: LIMIT,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
listData: result.data.members,
|
||||
isSpin: false,
|
||||
otherSpin: false,
|
||||
searchSpin: false,
|
||||
total_count: result.data.total_count,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.setState({
|
||||
listData:result.data.members,
|
||||
isSpin:false,
|
||||
total_count:result.data.total_count
|
||||
})
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
isSpin: false,
|
||||
otherSpin: false,
|
||||
searchSpin: false,
|
||||
});
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
// 输入用户
|
||||
changeInputUser=(e)=>{
|
||||
changeInputUser = (e) => {
|
||||
this.setState({
|
||||
searchKey: e
|
||||
})
|
||||
searchKey: e,
|
||||
});
|
||||
this.getUserList(e);
|
||||
}
|
||||
// 选择用户
|
||||
selectInputUser=(e,option)=>{
|
||||
};
|
||||
searchMember = (e) => {
|
||||
this.state.search = e;
|
||||
this.setState({
|
||||
user_id:e,
|
||||
searchKey: option.props.searchValue
|
||||
searchSpin: true,
|
||||
});
|
||||
this.getMember();
|
||||
};
|
||||
orderMember = (id, name) => {
|
||||
this.setState({
|
||||
isSpin: true
|
||||
})
|
||||
this.state.role = id;
|
||||
this.state.roleName = name;
|
||||
this.getMember();
|
||||
};
|
||||
// 选择用户
|
||||
selectInputUser = (e, option) => {
|
||||
this.setState({
|
||||
user_id: e,
|
||||
searchKey: option.props.searchValue,
|
||||
});
|
||||
this.getUserList(option.props.searchValue);
|
||||
}
|
||||
getUserList=(e)=>{
|
||||
};
|
||||
getUserList = (e) => {
|
||||
const url = `/users/list.json`;
|
||||
axios.get(url,{
|
||||
params:{
|
||||
search:e
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
userDataSource:result.data.users
|
||||
})
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
axios
|
||||
.get(url, {
|
||||
params: {
|
||||
search: e,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
userDataSource: result.data.users,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
// 增加协作者
|
||||
addCollaborator=()=>{
|
||||
const { project_id } = this.props;
|
||||
addCollaborator = () => {
|
||||
// const { project_id } = this.props;
|
||||
this.setState({
|
||||
otherSpin: true,
|
||||
});
|
||||
const { user_id } = this.state;
|
||||
const url = `/projects/${project_id}/members.json`;
|
||||
axios.post(url,{
|
||||
user_id
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
isSpin:true
|
||||
})
|
||||
this.getMember(project_id);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
const url = `/projects/${this.props.project_id}/members.json`;
|
||||
axios
|
||||
.post(url, {
|
||||
user_id,
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
isSpin: true,
|
||||
otherSpin: false,
|
||||
});
|
||||
this.getMember();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
// 修改权限
|
||||
changeOperaiton=(e,id)=>{
|
||||
const { project_id , page } = this.props;
|
||||
changeOperaiton = (e, id) => {
|
||||
// const { project_id, page } = this.state;
|
||||
this.setState({
|
||||
isSpin:true
|
||||
})
|
||||
const url = `/projects/${project_id}/members/change_role.json`;
|
||||
axios.put(url,{
|
||||
user_id:id,
|
||||
role:e.key
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
isSpin:true
|
||||
})
|
||||
this.props.showNotification('权限修改成功!');
|
||||
this.getMember(project_id,page);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
isSpin: true,
|
||||
});
|
||||
const url = `/projects/${this.props.project_id}/members/change_role.json`;
|
||||
axios
|
||||
.put(url, {
|
||||
user_id: id,
|
||||
role: e.key,
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
isSpin: true,
|
||||
});
|
||||
this.props.showNotification("权限修改成功!");
|
||||
this.getMember();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
// 删除协作者
|
||||
deleteUser=(id)=>{
|
||||
deleteUser = (id) => {
|
||||
const { page } = this.state;
|
||||
this.props.confirm({
|
||||
content:"确认将此成员从项目中移除？",
|
||||
onOk:()=>{
|
||||
content: "确认将此成员从项目中移除？",
|
||||
onOk: () => {
|
||||
const { project_id } = this.props;
|
||||
const url = `/projects/${project_id}/members/remove.json`;
|
||||
axios.delete(url,{ data: {
|
||||
user_id:id
|
||||
}
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.setState({
|
||||
isSpin:true
|
||||
})
|
||||
this.props.showNotification("成员删除成功！");
|
||||
this.getMember(project_id,page);
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
changePage=(page)=>{
|
||||
axios
|
||||
.delete(url, {
|
||||
data: {
|
||||
user_id: id,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.setState({
|
||||
isSpin: true,
|
||||
});
|
||||
this.props.showNotification("成员删除成功！");
|
||||
this.getMember();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
changePage = (page) => {
|
||||
this.state.page = page;
|
||||
this.setState({
|
||||
page
|
||||
})
|
||||
const { project_id } = this.props;
|
||||
this.getMember(project_id,page);
|
||||
}
|
||||
render(){
|
||||
const { userDataSource , listData , isSpin , page , total_count,searchKey } = this.state;
|
||||
isSpin: true,
|
||||
});
|
||||
this.getMember();
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
userDataSource,
|
||||
listData,
|
||||
isSpin,
|
||||
page,
|
||||
total_count,
|
||||
searchKey,
|
||||
otherSpin,
|
||||
searchSpin,
|
||||
roleName,
|
||||
} = this.state;
|
||||
// 获取当前项目的拥有者
|
||||
const { author } = this.props;
|
||||
const menu =(id)=> (
|
||||
<Menu>
|
||||
{
|
||||
MENU_LIST.map((item,key)=>{
|
||||
return(
|
||||
<Menu.Item key={item.id} value={item.id} onClick={(e)=>this.changeOperaiton(e,id)}>{item.name}</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
)
|
||||
|
||||
const source = userDataSource && userDataSource.map((item,key)=>{
|
||||
return(
|
||||
<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(
|
||||
<div>
|
||||
<div className="normalBox">
|
||||
<div className="normalBox-title font-16">
|
||||
协作者
|
||||
const get_color = (role) => {
|
||||
if (role === "Manager") {
|
||||
return "text-green";
|
||||
} else if (role === "Developer") {
|
||||
return "text-primary";
|
||||
} else {
|
||||
return "text-yellow";
|
||||
}
|
||||
};
|
||||
const member_roles = (item) => {
|
||||
const operation = MENU_LIST.filter((i) => i.id === item.role);
|
||||
return (
|
||||
<span>
|
||||
{author && author.login === item.login ? (
|
||||
<label className={get_color(item.role)}>
|
||||
{operation && operation[0].name}
|
||||
</label>
|
||||
) : (
|
||||
<Dropdown overlay={setRoles(`${item.id}`)} placement={"bottomCenter"}>
|
||||
<span className={get_color(item.role)}>
|
||||
{operation && operation[0].name}
|
||||
<Icon type="caret-down" className="ml2" size="13" />
|
||||
</span>
|
||||
</Dropdown>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
const roleTitle = (
|
||||
<div><span className="mr3">角色</span>
|
||||
<Tooltip placement='bottom' title={<div>
|
||||
<div className="mb3">管理员：拥有仓库设置功能、代码库读、写操作</div>
|
||||
<div className="mb3">开发人员：只拥有代码库读、写操作</div>
|
||||
<div className="mb3">报告者：只拥有代码库读操作</div>
|
||||
</div>
|
||||
}>
|
||||
<Icon type="question-circle"></Icon>
|
||||
</Tooltip>
|
||||
</div>
|
||||
);
|
||||
const columns = [
|
||||
{
|
||||
title: "头像",
|
||||
dataIndex: "image_url",
|
||||
render: (text, item) => (
|
||||
<span className="f-wrap-alignCenter">
|
||||
<Link
|
||||
to={`/users/${item.login}/projects`}
|
||||
className="show-user-link"
|
||||
>
|
||||
<img
|
||||
src={getImageUrl(`images/${text}`)}
|
||||
alt=""
|
||||
width="32px"
|
||||
height="32px"
|
||||
className="mr3 radius"
|
||||
/>
|
||||
</Link>
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "用户名",
|
||||
dataIndex: "name",
|
||||
render: (text, item) => (
|
||||
<Link to={`/users/${item.login}/projects`} className="show-user-link">
|
||||
{text}
|
||||
</Link>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "邮箱",
|
||||
dataIndex: "email",
|
||||
render: (text) => <span>{text}</span>,
|
||||
},
|
||||
{
|
||||
title: roleTitle,
|
||||
dataIndex: "role_name",
|
||||
render: (text, item) => member_roles(item),
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "action",
|
||||
render: (text, item) => (
|
||||
<span style={{ justifyContent: "center" }}>
|
||||
{author && author.login !== item.login && (
|
||||
<a
|
||||
className="text-delete"
|
||||
onClick={() => this.deleteUser(item.id)}
|
||||
>
|
||||
删除
|
||||
</a>
|
||||
)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
const roles = (id) => (
|
||||
<Menu>
|
||||
<Menu.Item
|
||||
key={0}
|
||||
value={undefined}
|
||||
onClick={(e) => this.orderMember(undefined, "角色筛选")}
|
||||
>
|
||||
全部
|
||||
</Menu.Item>
|
||||
{MENU_LIST.map((item, key) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
key={item.id}
|
||||
value={item.id}
|
||||
onClick={(e) => this.orderMember(item.id, item.name)}
|
||||
>
|
||||
{item.name}
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
);
|
||||
const setRoles = (id) => (
|
||||
<Menu>
|
||||
{MENU_LIST.map((item, key) => {
|
||||
return (
|
||||
<Menu.Item
|
||||
key={item.id}
|
||||
value={item.id}
|
||||
onClick={(e) => this.changeOperaiton(e,id)}
|
||||
>
|
||||
{item.name}
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const source =
|
||||
userDataSource &&
|
||||
userDataSource.map((item, key) => {
|
||||
return (
|
||||
<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 (
|
||||
<div>
|
||||
<div className="flex-a-center baseForm bbr">
|
||||
<span className="font-18 fwb text-black">协作者管理</span>
|
||||
<div className="addPanel">
|
||||
<AutoComplete
|
||||
dataSource={source}
|
||||
|
|
@ -210,63 +425,64 @@ class Collaborator extends Component{
|
|||
style={{ width: 300 }}
|
||||
onChange={this.changeInputUser}
|
||||
onSelect={this.selectInputUser}
|
||||
placeholder="用户名或邮箱搜索..."
|
||||
placeholder="搜索需要添加的用户..."
|
||||
/>
|
||||
<a className="small_submitBtn ml20" onClick={this.addCollaborator}>增加协作者</a>
|
||||
<Button
|
||||
type="primary"
|
||||
ghost
|
||||
onClick={this.addCollaborator}
|
||||
className="ml15"
|
||||
loading={otherSpin}
|
||||
>
|
||||
<Icon type="plus" size="16"></Icon>
|
||||
添加成员
|
||||
</Button>
|
||||
</div>
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="collaboratorList">
|
||||
{
|
||||
listData && listData.map((item,key)=>{
|
||||
const operation = MENU_LIST.filter(i=>i.id === item.role);
|
||||
return(
|
||||
<div className="collaboratorItem">
|
||||
<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 ?
|
||||
<label>{operation && operation[0].name}</label>
|
||||
:
|
||||
<Dropdown overlay={menu(`${item.id}`)} placement={"bottomCenter"}>
|
||||
<span>{operation && operation[0].name}<Icon type="down" /></span>
|
||||
</Dropdown>
|
||||
}
|
||||
|
||||
</span>
|
||||
<span style={{justifyContent:"center"}}>
|
||||
{
|
||||
author && author.login !== item.login &&
|
||||
<a className="red_btn" onClick={()=>this.deleteUser(item.id)}>删除</a>
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
</Spin>
|
||||
|
||||
</div>
|
||||
{
|
||||
total_count && total_count > LIMIT ?
|
||||
<div className="edu-txt-center mt20 mb20">
|
||||
<Pagination showQuickJumper pageSize={LIMIT} current={page} total={total_count} onChange={this.changePage}></Pagination>
|
||||
<div className="grid-item-left baseForm">
|
||||
<Search
|
||||
placeholder="搜索项目成员..."
|
||||
enterButton="搜索"
|
||||
loading={searchSpin}
|
||||
onSearch={(value) => this.searchMember(value)}
|
||||
/>
|
||||
<Dropdown overlay={roles} placement={"bottomCenter"}>
|
||||
<a className="ml180 text-primary">
|
||||
{roleName ? roleName : "角色筛选"}
|
||||
<Icon type="caret-down" size="16"></Icon>
|
||||
</a>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
||||
<Spin spinning={isSpin}>
|
||||
<div className="collaboratorList baseForm">
|
||||
{listData ? (
|
||||
<Table
|
||||
pagination={false}
|
||||
columns={columns}
|
||||
dataSource={listData}
|
||||
rowKey={(record) => record.id}
|
||||
></Table>
|
||||
) : (
|
||||
<NoneData _html="暂时还没有相关数据哦!" />
|
||||
)}
|
||||
</div>
|
||||
:""
|
||||
}
|
||||
</Spin>
|
||||
{total_count && total_count > LIMIT ? (
|
||||
<div className="edu-txt-center mt20 mb20">
|
||||
<Pagination
|
||||
showQuickJumper
|
||||
pageSize={LIMIT}
|
||||
current={page}
|
||||
total={total_count}
|
||||
onChange={this.changePage}
|
||||
></Pagination>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Collaborator;
|
||||
|
|
|
|||
|
|
@ -1,67 +1,124 @@
|
|||
import React , { Component } from 'react';
|
||||
import { Link , Route , Switch } from 'react-router-dom';
|
||||
import React, { Component } from "react";
|
||||
import { Link, Route, Switch } from "react-router-dom";
|
||||
|
||||
import '../css/index.css';
|
||||
import './setting.css';
|
||||
import "../css/index.css";
|
||||
import "./setting.css";
|
||||
|
||||
import Loadable from 'react-loadable';
|
||||
import Loading from '../../Loading';
|
||||
import Loadable from "react-loadable";
|
||||
import Loading from "../../Loading";
|
||||
|
||||
const Branch = Loadable({
|
||||
loader: () => import('./Branch'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Setting = Loadable({
|
||||
loader: () => import('./Setting'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Collaborator = Loadable({
|
||||
loader: () => import('./Collaborator'),
|
||||
loading: Loading,
|
||||
})
|
||||
const Tags = Loadable({
|
||||
loader: () => import('./new_tags'),
|
||||
loader: () => import("./Branch"),
|
||||
loading: Loading,
|
||||
})
|
||||
class Index extends Component{
|
||||
render(){
|
||||
});
|
||||
const Setting = Loadable({
|
||||
loader: () => import("./Setting"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Collaborator = Loadable({
|
||||
loader: () => import("./Collaborator"),
|
||||
loading: Loading,
|
||||
});
|
||||
const Tags = Loadable({
|
||||
loader: () => import("./new_tags"),
|
||||
loading: Loading,
|
||||
});
|
||||
class Index extends Component {
|
||||
render() {
|
||||
const { projectsId } = this.props.match.params;
|
||||
const { pathname } = this.props.history.location;
|
||||
|
||||
const flag = (pathname === `/projects/${projectsId}/setting`);
|
||||
return(
|
||||
<div>
|
||||
<ul className="settingNav">
|
||||
<li className={flag?"active":""}><Link to={`/projects/${projectsId}/setting`}>仓库</Link></li>
|
||||
<li className={pathname.indexOf('setting/collaborator')>-1?"active":""}><Link to={`/projects/${projectsId}/setting/collaborator`}>协作者</Link></li>
|
||||
<li className={pathname.indexOf('setting/tags')>-1?"active":""}><Link to={`/projects/${projectsId}/setting/tags`}>项目标签</Link></li>
|
||||
{/* <li className={pathname.indexOf('setting/branch')>-1?"active":""}><Link to={`/projects/${projectsId}/setting/branch`}>分支列表</Link></li> */}
|
||||
</ul>
|
||||
<div className="main">
|
||||
<Switch {...this.props}>
|
||||
{/* 协作者 */}
|
||||
<Route path="/projects/:projectsId/setting/collaborator"
|
||||
render={
|
||||
(props) => (<Collaborator {...this.props} {...props} {...this.state}/>)
|
||||
const flag = pathname === `/projects/${projectsId}/setting`;
|
||||
return (
|
||||
<div className="ProjectListIndex">
|
||||
<div className="list-left">
|
||||
<ul className="list-l-Menu">
|
||||
<li className={flag ? "active" : ""}>
|
||||
<p>
|
||||
<Link to={`/projects/${projectsId}/setting`} className="w-100">
|
||||
|
||||
<i className="iconfont icon-huabanfuben font-18 mr10"></i>基本设置
|
||||
</Link>
|
||||
</p>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
pathname.indexOf("setting/collaborator") > -1 ? "active" : ""
|
||||
}
|
||||
></Route>
|
||||
{/* 修改仓库信息 */}
|
||||
<Route path="/projects/:projectsId/setting/tags"
|
||||
render={
|
||||
(props) => (<Tags {...this.props} {...props} {...this.state}/>)
|
||||
}
|
||||
></Route>
|
||||
{/* 修改仓库信息 */}
|
||||
<Route path="/projects/:projectsId/setting"
|
||||
render={
|
||||
(props) => (<Setting {...this.props} {...props} {...this.state}/>)
|
||||
>
|
||||
<p>
|
||||
<Link to={`/projects/${projectsId}/setting/collaborator`} className="w-100">
|
||||
<i className="iconfont icon-chengyuan font-18 mr10"></i>
|
||||
协作者管理
|
||||
</Link>
|
||||
</p>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
pathname.indexOf("setting/branch") > -1 ? "active" : ""
|
||||
}
|
||||
></Route>
|
||||
>
|
||||
<p>
|
||||
<Link to={`/projects/${projectsId}/setting/branch`} className="w-100">
|
||||
<i className="iconfont icon-fenzhi font-20 mr10"></i>
|
||||
分支设置
|
||||
</Link>
|
||||
</p>
|
||||
</li>
|
||||
<li
|
||||
className={pathname.indexOf("setting/tags") > -1 ? "active" : ""}
|
||||
>
|
||||
<p>
|
||||
<Link to={`/projects/${projectsId}/setting/tags`} className="w-100">
|
||||
<i className="iconfont icon-biaoqian3 font-18 mr10"></i>
|
||||
项目标签
|
||||
</Link>
|
||||
</p>
|
||||
</li>
|
||||
|
||||
</Switch>
|
||||
<li
|
||||
className={
|
||||
pathname.indexOf("setting/hooks") > -1 ? "active" : ""
|
||||
}
|
||||
>
|
||||
<p>
|
||||
<Link to={`/projects/${projectsId}/setting/hooks`} className="w-100">
|
||||
<i className="iconfont icon-zhongqingdianxinicon10 font-18 mr10"></i>
|
||||
管理Web钩子
|
||||
</Link>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="list-right">
|
||||
<div>
|
||||
<Switch {...this.props}>
|
||||
{/* 协作者 */}
|
||||
<Route
|
||||
path="/projects/:projectsId/setting/collaborator"
|
||||
render={(props) => (
|
||||
<Collaborator {...this.props} {...props} {...this.state} />
|
||||
)}
|
||||
></Route>
|
||||
{/* 修改仓库信息 */}
|
||||
<Route
|
||||
path="/projects/:projectsId/setting/tags"
|
||||
render={(props) => (
|
||||
<Tags {...this.props} {...props} {...this.state} />
|
||||
)}
|
||||
></Route>
|
||||
{/* 修改仓库信息 */}
|
||||
<Route
|
||||
path="/projects/:projectsId/setting"
|
||||
render={(props) => (
|
||||
<Setting {...this.props} {...props} {...this.state} />
|
||||
)}
|
||||
></Route>
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Index;
|
||||
export default Index;
|
||||
|
|
|
|||
|
|
@ -1,196 +1,212 @@
|
|||
import React , { Component } from 'react';
|
||||
import { Form , Input , Checkbox , Select } from 'antd';
|
||||
import React, { Component } from "react";
|
||||
import { Form, Input, Checkbox, Select } from "antd";
|
||||
|
||||
import axios from 'axios';
|
||||
import axios from "axios";
|
||||
const { TextArea } = Input;
|
||||
const { Option } = Select;
|
||||
class Setting extends Component{
|
||||
constructor(props){
|
||||
class Setting extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
CategoryList:undefined,
|
||||
LanguageList:undefined,
|
||||
private_check:undefined
|
||||
}
|
||||
this.state = {
|
||||
CategoryList: undefined,
|
||||
LanguageList: undefined,
|
||||
private_check: undefined,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount=()=>{
|
||||
componentDidMount = () => {
|
||||
this.getCategory();
|
||||
this.getLanguage();
|
||||
this.getInfo();
|
||||
}
|
||||
getLanguage=()=>{
|
||||
const url = `/project_languages.json`
|
||||
axios.get(url).then((result)=>{
|
||||
if(result){
|
||||
let LanguageList = this.setOptionsList(result.data.project_languages)
|
||||
this.setState({
|
||||
LanguageList
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{})
|
||||
}
|
||||
};
|
||||
getLanguage = () => {
|
||||
const url = `/project_languages.json`;
|
||||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
let LanguageList = this.setOptionsList(result.data.project_languages);
|
||||
this.setState({
|
||||
LanguageList,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {});
|
||||
};
|
||||
|
||||
getInfo=()=>{
|
||||
getInfo = () => {
|
||||
const { projectsId } = this.props.match.params;
|
||||
const url = `/repositories/${projectsId}/edit.json`;
|
||||
axios.get(url).then(result=>{
|
||||
if(result){
|
||||
this.props.form.setFieldsValue({
|
||||
...result.data
|
||||
})
|
||||
this.setState({
|
||||
private_check:result.data.private
|
||||
})
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
|
||||
getCategory=()=>{
|
||||
const url = `/project_categories.json`
|
||||
axios.get(url).then((result)=>{
|
||||
if(result){
|
||||
let CategoryList = this.setOptionsList(result.data.project_categories)
|
||||
this.setState({
|
||||
CategoryList
|
||||
})
|
||||
}
|
||||
}).catch((error)=>{})
|
||||
}
|
||||
|
||||
setOptionsList = (data) =>{
|
||||
let list = undefined;
|
||||
if(data && data.length > 0){
|
||||
list = data.map((item,key)=>{
|
||||
return(
|
||||
<Option key={item.id} value={item.id}>{item.name}</Option>
|
||||
)
|
||||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.props.form.setFieldsValue({
|
||||
...result.data,
|
||||
});
|
||||
this.setState({
|
||||
private_check: result.data.private,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
};
|
||||
|
||||
getCategory = () => {
|
||||
const url = `/project_categories.json`;
|
||||
axios
|
||||
.get(url)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
let CategoryList = this.setOptionsList(
|
||||
result.data.project_categories
|
||||
);
|
||||
this.setState({
|
||||
CategoryList,
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {});
|
||||
};
|
||||
|
||||
setOptionsList = (data) => {
|
||||
let list = undefined;
|
||||
if (data && data.length > 0) {
|
||||
list = data.map((item, key) => {
|
||||
return (
|
||||
<Option key={item.id} value={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
);
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}
|
||||
};
|
||||
|
||||
// 更新仓库设置
|
||||
resetSetting=()=>{
|
||||
this.props.form.validateFields((err,values)=>{
|
||||
if(!err){
|
||||
resetSetting = () => {
|
||||
this.props.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
const { project_id } = this.props;
|
||||
const { private_check } = this.state;
|
||||
const url = `/projects/${project_id}.json`;
|
||||
axios.put(url,{
|
||||
name:values.project_name,
|
||||
description:values.project_description,
|
||||
private:private_check,
|
||||
...values
|
||||
}).then(result=>{
|
||||
if(result){
|
||||
this.props.showNotification(`仓库信息修改成功！`);
|
||||
const { getDetail } = this.props;
|
||||
getDetail && getDetail();
|
||||
}
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
axios
|
||||
.put(url, {
|
||||
name: values.project_name,
|
||||
description: values.project_description,
|
||||
private: private_check,
|
||||
...values,
|
||||
})
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
this.props.showNotification(`仓库信息修改成功！`);
|
||||
const { getDetail } = this.props;
|
||||
getDetail && getDetail();
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 删除本仓库
|
||||
deleteProject=()=>{
|
||||
deleteProject = () => {
|
||||
this.props.confirm({
|
||||
content:"删除后无法恢复，是否确认删除本仓库？",
|
||||
onOk:()=>{
|
||||
content: "删除后无法恢复，是否确认删除本仓库？",
|
||||
onOk: () => {
|
||||
const { project_id } = this.props;
|
||||
const url = `/projects/${project_id}.json`;
|
||||
axios.delete(url).then(result=>{
|
||||
this.props.showNotification("仓库删除成功！");
|
||||
this.props.history.push("/projects");
|
||||
}).catch(error=>{
|
||||
console.log(error);
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
changePrivate=(e)=>{
|
||||
axios
|
||||
.delete(url)
|
||||
.then((result) => {
|
||||
this.props.showNotification("仓库删除成功！");
|
||||
this.props.history.push("/projects");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
changePrivate = (e) => {
|
||||
console.log(e);
|
||||
this.setState({
|
||||
private_check:e.target.checked
|
||||
})
|
||||
}
|
||||
private_check: e.target.checked,
|
||||
});
|
||||
};
|
||||
|
||||
render(){
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
|
||||
const { CategoryList , LanguageList , private_check } = this.state;
|
||||
return(
|
||||
const { CategoryList, LanguageList, private_check } = this.state;
|
||||
return (
|
||||
<div>
|
||||
<div className="normalBox">
|
||||
<div className="normalBox-title font-16">
|
||||
基本设置
|
||||
</div>
|
||||
<div className="normalBox-title font-16">基本设置</div>
|
||||
<Form className="baseForm">
|
||||
<Form.Item
|
||||
label="项目名称"
|
||||
>
|
||||
{getFieldDecorator('project_name', {
|
||||
rules: [{
|
||||
required: true, message: '请输入项目名称'
|
||||
}],
|
||||
})(
|
||||
<Input placeholder="请输入项目名称"/>
|
||||
)}
|
||||
</Form.Item >
|
||||
<div className="df" style={{alignItems:"center"}}>
|
||||
<Form.Item label="项目名称">
|
||||
{getFieldDecorator("project_name", {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请输入项目名称",
|
||||
},
|
||||
],
|
||||
})(<Input placeholder="请输入项目名称" />)}
|
||||
</Form.Item>
|
||||
<div className="df" style={{ alignItems: "center" }}>
|
||||
<span className="mr20 mb15 font-16">可见性</span>
|
||||
<Form.Item
|
||||
label=""
|
||||
>
|
||||
{getFieldDecorator('private', {
|
||||
<Form.Item label="">
|
||||
{getFieldDecorator("private", {
|
||||
rules: [],
|
||||
})(
|
||||
<Checkbox checked={private_check} onChange={this.changePrivate}>将仓库设为私有</Checkbox>
|
||||
<Checkbox
|
||||
checked={private_check}
|
||||
onChange={this.changePrivate}
|
||||
>
|
||||
将仓库设为私有
|
||||
</Checkbox>
|
||||
)}
|
||||
</Form.Item >
|
||||
</Form.Item>
|
||||
</div>
|
||||
<Form.Item
|
||||
label="仓库描述"
|
||||
>
|
||||
{getFieldDecorator('project_description', {
|
||||
rules: [],
|
||||
})(
|
||||
<TextArea placeholder="请输入仓库描述" style={{height:"80px"}}/>
|
||||
)}
|
||||
</Form.Item >
|
||||
<Form.Item
|
||||
label="项目类别"
|
||||
>
|
||||
{getFieldDecorator('project_category_id', {
|
||||
rules: [{
|
||||
required: true, message: '请选择大类别'
|
||||
}],
|
||||
<Form.Item label="仓库描述">
|
||||
{getFieldDecorator("project_description", {
|
||||
rules: [],
|
||||
})(
|
||||
<Select>
|
||||
{CategoryList}
|
||||
</Select>
|
||||
<TextArea
|
||||
placeholder="请输入仓库描述"
|
||||
style={{ height: "80px" }}
|
||||
/>
|
||||
)}
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
label="项目语言"
|
||||
>
|
||||
{getFieldDecorator('project_language_id', {
|
||||
rules: [{
|
||||
required: true, message: '请选择项目语言'
|
||||
}],
|
||||
})(
|
||||
<Select>
|
||||
{LanguageList}
|
||||
</Select>
|
||||
)}
|
||||
<Form.Item label="项目类别">
|
||||
{getFieldDecorator("project_category_id", {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择大类别",
|
||||
},
|
||||
],
|
||||
})(<Select>{CategoryList}</Select>)}
|
||||
</Form.Item>
|
||||
<Form.Item label="项目语言">
|
||||
{getFieldDecorator("project_language_id", {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: "请选择项目语言",
|
||||
},
|
||||
],
|
||||
})(<Select>{LanguageList}</Select>)}
|
||||
</Form.Item>
|
||||
<p className="clearfix">
|
||||
<a className="submitBtn" onClick={this.resetSetting}>更新仓库设置</a>
|
||||
<a className="submitBtn" onClick={this.resetSetting}>
|
||||
更新仓库设置
|
||||
</a>
|
||||
</p>
|
||||
</Form>
|
||||
</div>
|
||||
|
|
@ -199,14 +215,19 @@ class Setting extends Component{
|
|||
<div className="flex-a-center padding15-10">
|
||||
<div>
|
||||
<p className="font-bd font-16">删除本仓库</p>
|
||||
<p className="mt10">删除仓库是永久性的, 无法撤消，且删除后，与仓库关联的项目/任务/合并请求/版本发布等，均会被删除</p>
|
||||
<p className="mt10">
|
||||
删除仓库是永久性的,
|
||||
无法撤消，且删除后，与仓库关联的项目/任务/合并请求/版本发布等，均会被删除
|
||||
</p>
|
||||
</div>
|
||||
<a onClick={this.deleteProject} className="red_deleteBtn">删除本仓库</a>
|
||||
<a onClick={this.deleteProject} className="red_deleteBtn">
|
||||
删除本仓库
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
const WrappedSettingIndexForm = Form.create({ name: 'settingForm' })(Setting);
|
||||
export default WrappedSettingIndexForm;
|
||||
const WrappedSettingIndexForm = Form.create({ name: "settingForm" })(Setting);
|
||||
export default WrappedSettingIndexForm;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@
|
|||
}
|
||||
.addPanel{
|
||||
display: flex;
|
||||
padding:15px;
|
||||
/* padding:15px; */
|
||||
}
|
||||
.red_btn{
|
||||
display: block;
|
||||
|
|
@ -101,4 +101,17 @@
|
|||
}
|
||||
.padding15-10{
|
||||
padding:15px 10px;
|
||||
}
|
||||
}
|
||||
.w-100{width: 100%;}
|
||||
.fwb{font-weight: 600;}
|
||||
.text-black{color: #333;}
|
||||
.bbr{border-bottom: 1px solid #f6f6f6;}
|
||||
.ant-input-group-addon{border: 0 !important;}
|
||||
.grid-item-left{display: grid; align-items: center; grid-template-columns: 1fr max-content;}
|
||||
.text-primary{color: #1890ff !important;}
|
||||
.ant-dropdown-menu{min-width: 90px ; text-align: center !important;}
|
||||
.text-green{color: #28BD6C !important;}
|
||||
.text-yellow{color: #FF6E21 !important;}
|
||||
.text-delete{color: #BBBBBB; }
|
||||
.text-delete:hover{color: #db2828; }
|
||||
|
||||
|
|
|
|||
|
|
@ -112,4 +112,4 @@ ul,ol,dl{
|
|||
.normal{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue