393 lines
13 KiB
JavaScript
393 lines
13 KiB
JavaScript
import React, { Component } from "react";
|
||
import { Form, Input, Checkbox, Select , Spin } from "antd";
|
||
import Title from '../Component/Title';
|
||
import {WhiteBack} from '../Component/layout';
|
||
import DivertModal from '../Divert/DivertModal';
|
||
import { Link } from 'react-router-dom';
|
||
import axios from "axios";
|
||
import "./setting.scss";
|
||
const { TextArea } = Input;
|
||
const { Option } = Select;
|
||
|
||
const menu = [
|
||
{name:"主页",index:"home"},
|
||
{name:"代码库",index:"code"},
|
||
{name:"易修 (Issue)",index:"issues"},
|
||
{name:"合并请求",index:"pulls"},
|
||
{name:"Wiki",index:"wiki"},
|
||
{name:"工作流(beta版)",index:"devops"},
|
||
{name:"资源库",index:"resources"},
|
||
{name:"里程碑",index:"versions"},
|
||
{name:"动态",index:"activity"},
|
||
]
|
||
class Setting extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
this.state = {
|
||
CategoryList: undefined,
|
||
LanguageList: undefined,
|
||
private_check: undefined,
|
||
loading:true,
|
||
project_units:['home',"activity","code"],
|
||
divertVisible:false,
|
||
is_transfering:undefined,
|
||
projectName:undefined
|
||
};
|
||
}
|
||
|
||
componentDidUpdate=(prevPros)=>{
|
||
|
||
if(prevPros && this.props && !this.props.checkIfLogin()){
|
||
this.props.history.push("/403")
|
||
return;
|
||
}
|
||
}
|
||
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) => {});
|
||
};
|
||
|
||
getInfo = () => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const url = `/${owner}/${projectsId}/edit.json`;
|
||
axios
|
||
.get(url)
|
||
.then((result) => {
|
||
if (result) {
|
||
const { project_units } = this.state;
|
||
let units = result.data.project_units;
|
||
units.push(...project_units);
|
||
|
||
this.props.form.setFieldsValue({
|
||
...result.data,
|
||
project_units:units
|
||
});
|
||
this.setState({
|
||
projectName:result.data.project_name,
|
||
private_check: result.data.private,
|
||
loading:false,
|
||
project_units:units,
|
||
transfer:result.data.transfer,
|
||
is_transfering:result.data.is_transfering,
|
||
});
|
||
}
|
||
})
|
||
.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) {
|
||
this.setState({
|
||
loading:true
|
||
})
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const navUrl = `/${owner}/${projectsId}/project_units.json`;
|
||
|
||
let unit = values.project_units.filter(item => (item !== "home" && item!== "activity" && item!== "code"));
|
||
axios.post(navUrl, {
|
||
unit_types:unit
|
||
}).then((result) => {
|
||
if (result) {
|
||
this.update(values);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
});
|
||
};
|
||
|
||
update=(values)=>{
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const { private_check } = this.state;
|
||
const url = `/${owner}/${projectsId}.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();
|
||
this.setState({
|
||
loading:false
|
||
})
|
||
}
|
||
}).catch((error) => {
|
||
console.log(error);
|
||
this.setState({
|
||
loading:false
|
||
})
|
||
});
|
||
}
|
||
|
||
// 删除本仓库
|
||
deleteProject = () => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const { projectName } = this.state;
|
||
this.props.confirm({
|
||
content: <span style={{display:"block",textAlign:"left"}}>该操作无法撤销！且将会一并删除相关的易修、合并请求、工作流、里程碑、动态等数据。<br/>是否确认删除 <span style={{fontWeight:"bold"}}>{owner}/{projectName}({projectsId})</span>？</span>,
|
||
onOk: () => {
|
||
const url = `/${owner}/${projectsId}.json`;
|
||
axios.delete(url).then((result) => {
|
||
this.props.showNotification("仓库删除成功！");
|
||
this.props.history.push(`/${owner}`);
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
},
|
||
});
|
||
};
|
||
changePrivate = (e) => {
|
||
this.setState({
|
||
private_check: e.target.checked,
|
||
});
|
||
};
|
||
|
||
// 转移仓库
|
||
DivertProject=()=>{
|
||
this.setState({
|
||
divertVisible:true
|
||
})
|
||
}
|
||
// 取消仓库转移
|
||
CancelDivertProject=()=>{
|
||
this.props.confirm({
|
||
content: "是否确认取消将此项目转移给他人？",
|
||
onOk: () => {
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const url = `/${owner}/${projectsId}/applied_transfer_projects/cancel.json`;
|
||
axios.post(url).then(result=>{
|
||
if(result && result.data){
|
||
this.setState({
|
||
is_transfering:false
|
||
})
|
||
}
|
||
}).catch(error=>{})
|
||
},
|
||
});
|
||
|
||
}
|
||
// 确定转移仓库
|
||
onSuccess=(owner)=>{
|
||
if(owner){
|
||
this.setState({
|
||
is_transfering:true,
|
||
transfer:owner
|
||
})
|
||
}
|
||
this.setState({
|
||
divertVisible:false
|
||
})
|
||
}
|
||
|
||
render() {
|
||
const { getFieldDecorator } = this.props.form;
|
||
const { projectsId , owner } = this.props.match.params;
|
||
const { projectDetail } = this.props;
|
||
|
||
const { CategoryList, LanguageList, private_check ,loading , divertVisible , is_transfering, transfer } = this.state;
|
||
let mirror = projectDetail && projectDetail.mirror;
|
||
let type = projectDetail && projectDetail.type;
|
||
const forked_from_project_id = this.props && this.props.projectDetail && this.props.projectDetail.forked_from_project_id;
|
||
return (
|
||
<div>
|
||
<DivertModal
|
||
owner={owner}
|
||
repo={projectsId}
|
||
visible={divertVisible}
|
||
onSuccess={this.onSuccess}
|
||
onCancel={()=>{this.setState({divertVisible:false})}}
|
||
/>
|
||
<Spin spinning={loading}>
|
||
<WhiteBack>
|
||
<Title>基本设置</Title>
|
||
<Form className="baseForm">
|
||
<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", {
|
||
rules: [],
|
||
})(
|
||
<Checkbox
|
||
checked={private_check}
|
||
onChange={this.changePrivate}
|
||
disabled={forked_from_project_id}
|
||
>
|
||
<span className="color-grey-9">将仓库设为私有</span>
|
||
<span className="color-grey-6">
|
||
{ forked_from_project_id ?`（Fork仓库的可见性实时同步自源仓库，不支持直接修改）`:`（修改仓库的可见性，将会影响到该仓库下所有Fork仓库的可见性）`}
|
||
</span>
|
||
</Checkbox>
|
||
)}
|
||
</Form.Item>
|
||
</div>
|
||
<Form.Item label="项目简介">
|
||
{getFieldDecorator("project_description", {
|
||
rules: [],
|
||
})(
|
||
<TextArea
|
||
placeholder="请输入项目简介"
|
||
style={{ height: "80px" }} maxLength={200}
|
||
/>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="项目类别">
|
||
{getFieldDecorator("project_category_id", {
|
||
rules: [],
|
||
})(
|
||
<Select>
|
||
<Option key={0} value={""}>未选择项目类别</Option>
|
||
{CategoryList}
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="项目语言">
|
||
{getFieldDecorator("project_language_id", {
|
||
rules: [],
|
||
})(
|
||
<Select>
|
||
<Option key={0} value={""}>未选择项目语言</Option>
|
||
{LanguageList}
|
||
</Select>
|
||
)}
|
||
</Form.Item>
|
||
<Form.Item label="项目导航">
|
||
{getFieldDecorator("project_units", {
|
||
rules: [],
|
||
})(
|
||
<Checkbox.Group>
|
||
{
|
||
menu.map((item,key)=>{
|
||
return(
|
||
<Checkbox
|
||
key={key}
|
||
value={item.index}
|
||
disabled={item.index === "home" || item.index === "activity" || item.index === "code" || (mirror && (type && type===2) && item.index === "pulls")}
|
||
>{item.name}</Checkbox>
|
||
)
|
||
})
|
||
}
|
||
</Checkbox.Group>
|
||
)}
|
||
</Form.Item>
|
||
<p className="clearfix">
|
||
<a className="submitBtn" onClick={this.resetSetting}>
|
||
更新仓库设置
|
||
</a>
|
||
</p>
|
||
</Form>
|
||
{/* 镜像设置部分，暂无接口，先不显示 */}
|
||
{/* <Mirror /> */}
|
||
</WhiteBack>
|
||
{
|
||
projectDetail && projectDetail.permission && (projectDetail.permission === "Admin" || projectDetail.permission === "Owner")?
|
||
<WhiteBack className="dangerousBox mb20">
|
||
<div>
|
||
<div className="dangerousTitle">危险操作区</div>
|
||
<div className="flex-a-center padding15-10" style={{borderBottom:"1px solid #f9edbe"}}>
|
||
<div>
|
||
<p className="font-bd font-16">转移仓库</p>
|
||
<p className="mt10">
|
||
{
|
||
is_transfering ?
|
||
<span>此仓库正在转移给【
|
||
{transfer && <Link to={transfer.login}>{transfer.name}</Link>}
|
||
】，请联系对方接收此仓库。</span>
|
||
:
|
||
`将此仓库转移给其他用户或组织`
|
||
}
|
||
</p>
|
||
</div>
|
||
{
|
||
is_transfering ?
|
||
<a onClick={this.CancelDivertProject} className="red_deleteBtn">取消转移</a>
|
||
:
|
||
<a onClick={this.DivertProject} className="red_deleteBtn">转移</a>
|
||
}
|
||
</div>
|
||
<div className="flex-a-center padding15-10">
|
||
<div>
|
||
<p className="font-bd font-16">删除本仓库</p>
|
||
<p className="mt10">
|
||
删除仓库是永久性的,
|
||
无法撤消，且删除后，与仓库关联的项目/任务/合并请求/版本发布等，均会被删除
|
||
</p>
|
||
</div>
|
||
<a onClick={this.deleteProject} className="red_deleteBtn">
|
||
删除本仓库
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</WhiteBack>
|
||
:""
|
||
}
|
||
</Spin>
|
||
</div>
|
||
);
|
||
}
|
||
}
|
||
const WrappedSettingIndexForm = Form.create({ name: "settingForm" })(Setting);
|
||
export default WrappedSettingIndexForm;
|