forked from Gitlink/forgeplus-react
209 lines
8.3 KiB
JavaScript
209 lines
8.3 KiB
JavaScript
import React, { forwardRef, useCallback, useEffect, useState } from 'react';
|
||
import { Form, Input, Radio, Checkbox, Switch, Button, Spin } from 'antd';
|
||
import { Banner, WhiteBack, AlignCenter, Cancel } from '../../Component/layout';
|
||
import styled from 'styled-components';
|
||
import axios from 'axios';
|
||
const TextArea = Input.TextArea;
|
||
const Div = styled.div`{
|
||
padding:20px 30px;
|
||
}`
|
||
const OptionStyle = {
|
||
lineHeight: "25px",
|
||
height: '25px',
|
||
display: 'block'
|
||
}
|
||
const addStyle = {
|
||
...OptionStyle,
|
||
marginBottom: "7px"
|
||
}
|
||
|
||
export default Form.create()(
|
||
forwardRef(({ form , match, showNotification, history, GroupDetail }) => {
|
||
|
||
const [isSpin, setIsSpin] = useState(false);
|
||
const [check_box, setGroupDetail] = useState(false);
|
||
const [switch_box, setSwtichBox] = useState([]);
|
||
const [switch_box_code, setSwtichBoxCode] = useState(false);
|
||
const [switch_box_pull, setSwtichBoxPull] = useState(false);
|
||
const [switch_box_issue, setSwtichBoxIssue] = useState(false);
|
||
const [switch_box_release, setSwtichBoxRelease] = useState(false);
|
||
const { getFieldDecorator, validateFields, setFieldsValue } = form;
|
||
const { OIdentifier, groupId } = match.params;
|
||
|
||
useEffect(() => {
|
||
if (GroupDetail) {
|
||
setGroupDetail(GroupDetail.can_create_org_project)
|
||
setSwtichBox(GroupDetail.units)
|
||
setFieldsValue({
|
||
...GroupDetail
|
||
})
|
||
}
|
||
}, [GroupDetail])
|
||
|
||
useEffect(() => {
|
||
if (switch_box && switch_box.length > 0) {
|
||
setSwtichBoxCode(switch_checked("code"))
|
||
setSwtichBoxPull(switch_checked("pulls"))
|
||
setSwtichBoxIssue(switch_checked("issues"))
|
||
setSwtichBoxRelease(switch_checked("releases"))
|
||
}
|
||
}, [switch_box])
|
||
|
||
const helper = useCallback(
|
||
(label, name, rules, widget, isRequired, mbValue) => (
|
||
<React.Fragment>
|
||
<span className={isRequired ? "required" : ""}>{label}</span>
|
||
<Form.Item style={{ marginBottom: `${mbValue}px` || "20px" }}>
|
||
{getFieldDecorator(name, { rules, validateFirst: true })(widget)}
|
||
</Form.Item>
|
||
</React.Fragment>
|
||
),
|
||
[]
|
||
);
|
||
function saveGroupFrom() {
|
||
setIsSpin(true)
|
||
validateFields((error, values) => {
|
||
if (!error) {
|
||
values.unit_types = switch_box
|
||
if (groupId) { // 表示编辑，否则为新建
|
||
const url = `/organizations/${OIdentifier}/teams/${groupId}.json`;
|
||
axios.put(url, {
|
||
...values
|
||
}).then(result => {
|
||
if (result && result.data) {
|
||
showNotification("基本设置更新成功！");
|
||
history.push(`/organize/${OIdentifier}/group/${groupId}`);
|
||
}
|
||
}).catch(error => { })
|
||
} else {
|
||
const url = `/organizations/${OIdentifier}/teams.json`;
|
||
axios.post(url, {
|
||
...values
|
||
}).then(result => {
|
||
if (result && result.data) {
|
||
showNotification("团队创建成功！");
|
||
history.push(`/organize/${OIdentifier}/group/${result.data.id}`);
|
||
}
|
||
}).catch(error => { })
|
||
}
|
||
}
|
||
});
|
||
setIsSpin(false)
|
||
}
|
||
|
||
function change_check_box_status() {
|
||
setGroupDetail(!check_box)
|
||
}
|
||
|
||
function switch_checked(code) {
|
||
return switch_box.indexOf(code) > -1
|
||
}
|
||
|
||
function switch_unit_types(checked, code) {
|
||
const switch_index = switch_box.indexOf(code)
|
||
if (checked) {
|
||
switch_box.push(code)
|
||
} else {
|
||
switch_box.splice(switch_index, 1)
|
||
}
|
||
}
|
||
|
||
function switch_code_types(checked, event) {
|
||
switch_unit_types(checked, "code")
|
||
setSwtichBoxCode(checked)
|
||
}
|
||
|
||
function switch_issue_types(checked, event) {
|
||
switch_unit_types(checked, "issues")
|
||
setSwtichBoxIssue(checked)
|
||
}
|
||
|
||
function switch_pull_types(checked, event) {
|
||
switch_unit_types(checked, "pulls")
|
||
setSwtichBoxPull(checked)
|
||
}
|
||
|
||
function switch_releas_types(checked, event) {
|
||
switch_unit_types(checked, "releases")
|
||
setSwtichBoxRelease(checked)
|
||
}
|
||
|
||
function cancelEdit(){
|
||
if(groupId){
|
||
history.push(`/organize/${OIdentifier}/group/${groupId}`);
|
||
}else{
|
||
history.push(`/organize/${OIdentifier}`);
|
||
}
|
||
}
|
||
return (
|
||
<Spin spinning={isSpin}>
|
||
<WhiteBack className="mb30">
|
||
<Banner>{groupId ? "基本设置" : "新建团队"}</Banner>
|
||
<Div>
|
||
<Form>
|
||
{helper(
|
||
'团队名称：',
|
||
"name",
|
||
[{ required: true, message: "请输入团队名称" }],
|
||
<Input placeholder="请输入团队名称" />, true
|
||
)}
|
||
{helper(
|
||
<span className="mb5">团队描述：<span className="color-grey-8">(描述团队的目的或作用)</span></span>,
|
||
"description",
|
||
[],
|
||
<TextArea
|
||
placeholder="请输入团队描述"
|
||
/>
|
||
)}
|
||
{helper(
|
||
'项目权限：',
|
||
"includes_all_project",
|
||
[],
|
||
<Radio.Group>
|
||
<Radio value={true} style={addStyle}>指定项目<span className="color-grey-8 ml10">(团队成员将只能访问添加到团队的项目。 选择此项 <span className="color-grey-3">将不会</span> 自动删除已经添加的项目)</span></Radio>
|
||
<Radio value={false} style={OptionStyle}>所有项目<span className="color-grey-8 ml10">(团队可以访问所有项目。选择此选项将 <span className="color-grey-3">添加所有现有的</span> 项目到指定团队)</span></Radio>
|
||
</Radio.Group>, false, 0
|
||
)}
|
||
{helper(
|
||
'',
|
||
"can_create_org_project",
|
||
[],
|
||
<Checkbox checked={check_box} onChange={change_check_box_status} style={OptionStyle}>新建项目<span className="color-grey-8 ml10">(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限)</span></Checkbox>, false
|
||
)}
|
||
{helper(
|
||
'权限：',
|
||
"authorize",
|
||
[],
|
||
<Radio.Group>
|
||
<Radio value="read" style={addStyle}>读取权限<span className="color-grey-8 ml10">(成员可以查看和克隆团队项目)</span></Radio>
|
||
<Radio value="write" style={addStyle}>写入权限<span className="color-grey-8 ml10">(成员可以查看和推送提交到团队项目)</span></Radio>
|
||
<Radio value="admin" style={OptionStyle}>管理员权限<span className="color-grey-8 ml10">(成员可以拉取和推送到团队项目同时可以添加协作者)</span></Radio>
|
||
</Radio.Group>, false
|
||
)}
|
||
</Form>
|
||
{/* <p className="required">允许访问项目单元：</p>
|
||
<AlignCenter className="mb10">
|
||
<Switch checked={switch_box_code} onClick={switch_code_types} />
|
||
<span className="ml30 color-grey-3">代码库<span className="color-grey-8 ml15">(查看源码、文件、提交和分支)</span></span>
|
||
</AlignCenter>
|
||
<AlignCenter className="mb10">
|
||
<Switch checked={switch_box_issue} onClick={switch_issue_types} />
|
||
<span className="ml30 color-grey-3">任务<span className="color-grey-8 ml15">(组织 bug 报告、任务和里程碑)</span></span>
|
||
</AlignCenter>
|
||
<AlignCenter className="mb10">
|
||
<Switch checked={switch_box_pull} onClick={switch_pull_types} />
|
||
<span className="ml30 color-grey-3">合并请求<span className="color-grey-8 ml15">(启用合并请求和代码评审)</span></span>
|
||
</AlignCenter>
|
||
<AlignCenter className="mb20">
|
||
<Switch checked={switch_box_release} onClick={switch_releas_types} />
|
||
<span className="ml30 color-grey-3">版本发布<span className="color-grey-8 ml15">(跟踪项目版本和下载)</span></span>
|
||
</AlignCenter>
|
||
*/}
|
||
<Button type={"primary"} onClick={saveGroupFrom}>{groupId ? "更新团队设置" : "新建团队"}</Button>
|
||
<Cancel className="ml30" onClick={() => cancelEdit()}><span className="pl30 pr30">取消</span></Cancel>
|
||
</Div>
|
||
</WhiteBack>
|
||
</Spin>
|
||
)
|
||
})
|
||
) |