add group setting pages
This commit is contained in:
parent
7a2d1b7db1
commit
bd85703412
|
|
@ -154,3 +154,12 @@ export const Content = styled.div`{
|
||||||
background-color:#fff;
|
background-color:#fff;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}`
|
}`
|
||||||
|
export const RadioList = styled.span`{
|
||||||
|
color:#888888;
|
||||||
|
margin-left: 8px;
|
||||||
|
}`
|
||||||
|
export const RadioListBold = styled.span`{
|
||||||
|
color:#333 !important;
|
||||||
|
margin: 0 2px;
|
||||||
|
}`
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
import React, { forwardRef , useCallback , useEffect, useState } from 'react';
|
import React, { forwardRef, useCallback, useEffect, useState } from 'react';
|
||||||
import { Form , Input , Radio ,Checkbox , Divider , Button } from 'antd';
|
import { Form, Input, Radio, Switch, Divider, Button } from 'antd';
|
||||||
import { WhiteBack , FlexAJ } from '../../Component/layout';
|
import { WhiteBack, RadioList, RadioListBold } from '../../Component/layout';
|
||||||
import Title from '../../Component/Title';
|
import Title from '../../Component/Title';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import UploadImage from '../Component/UploadImage';
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { getImageUrl } from 'educoder';
|
|
||||||
const TextArea = Input.TextArea;
|
const TextArea = Input.TextArea;
|
||||||
|
|
||||||
const Div = styled.div`{
|
const Div = styled.div`{
|
||||||
|
|
@ -17,28 +15,28 @@ const radioStyle = {
|
||||||
lineHeight: '30px',
|
lineHeight: '30px',
|
||||||
};
|
};
|
||||||
export default Form.create()(
|
export default Form.create()(
|
||||||
forwardRef(({ form , organizeDetail , showNotification , history , current_user })=>{
|
forwardRef(({ form, organizeDetail, showNotification, history, current_user }) => {
|
||||||
const [ image , setImage ] = useState(undefined);
|
const [image, setImage] = useState(undefined);
|
||||||
const [ imageFlag , setImageFlag ] = useState(false);
|
const [imageFlag, setImageFlag] = useState(false);
|
||||||
const [ password , setPassword ] = useState(undefined);
|
const [password, setPassword] = useState(undefined);
|
||||||
const [ passwordFlag , setPasswordFlag ] = useState(false);
|
const [passwordFlag, setPasswordFlag] = useState(false);
|
||||||
const { getFieldDecorator , validateFields , setFieldsValue } = form;
|
const { getFieldDecorator, validateFields, setFieldsValue } = form;
|
||||||
|
|
||||||
useEffect(()=>{
|
useEffect(() => {
|
||||||
if(organizeDetail){
|
if (organizeDetail) {
|
||||||
setFieldsValue({
|
setFieldsValue({
|
||||||
...organizeDetail
|
...organizeDetail
|
||||||
})
|
})
|
||||||
setImage(organizeDetail.avatar_url);
|
setImage(organizeDetail.avatar_url);
|
||||||
}
|
}
|
||||||
},[organizeDetail])
|
}, [organizeDetail])
|
||||||
|
|
||||||
const helper = useCallback(
|
const helper = useCallback(
|
||||||
(label, name, rules, widget , isRequired , flag ) => (
|
(label, name, rules, widget, isRequired, flag) => (
|
||||||
<div>
|
<div>
|
||||||
<span className={isRequired?"required":""}>{label}</span>
|
<span className={isRequired ? "required" : ""}>{label}</span>
|
||||||
<Form.Item>
|
<Form.Item>
|
||||||
{getFieldDecorator(name, { rules, validateFirst: true , valuePropName:flag ? "checked":"value" })(widget)}
|
{getFieldDecorator(name, { rules, validateFirst: true, valuePropName: flag ? "checked" : "value" })(widget)}
|
||||||
</Form.Item>
|
</Form.Item>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
|
|
@ -46,45 +44,45 @@ export default Form.create()(
|
||||||
);
|
);
|
||||||
|
|
||||||
// 更新
|
// 更新
|
||||||
function updateDetail(){
|
function updateDetail() {
|
||||||
validateFields((error,values)=>{
|
validateFields((error, values) => {
|
||||||
if(!error){
|
if (!error) {
|
||||||
const url = `/organizations/${organizeDetail.id}.json`;
|
const url = `/organizations/${organizeDetail.id}.json`;
|
||||||
axios.patch(url,{
|
axios.patch(url, {
|
||||||
...values,image:imageFlag ? image : undefined
|
...values, image: imageFlag ? image : undefined
|
||||||
}).then(result=>{
|
}).then(result => {
|
||||||
if(result && result.data){
|
if (result && result.data) {
|
||||||
showNotification("组织信息更新成功！");
|
showNotification("组织信息更新成功！");
|
||||||
history.push(`/organize/${values.name}/setting`);
|
history.push(`/organize/${values.name}/setting`);
|
||||||
}
|
}
|
||||||
}).catch(error=>{})
|
}).catch(error => { })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
function getImage(image){
|
function getImage(image) {
|
||||||
setImageFlag(true);
|
setImageFlag(true);
|
||||||
setImage(image);
|
setImage(image);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除组织
|
// 删除组织
|
||||||
function deleteOrganize(){
|
function deleteOrganize() {
|
||||||
if(!password){
|
if (!password) {
|
||||||
setPasswordFlag(true);
|
setPasswordFlag(true);
|
||||||
return
|
return
|
||||||
}else{
|
} else {
|
||||||
setPasswordFlag(false);
|
setPasswordFlag(false);
|
||||||
const url = `/organizations/${organizeDetail.id}.json`;
|
const url = `/organizations/${organizeDetail.id}.json`;
|
||||||
axios.delete(url,{
|
axios.delete(url, {
|
||||||
params:{ password }
|
params: { password }
|
||||||
}).then(result=>{
|
}).then(result => {
|
||||||
if(result && result.data){
|
if (result && result.data) {
|
||||||
// 删除后跳转到个人中心的组织页面
|
// 删除后跳转到个人中心的组织页面
|
||||||
history.push(`/users/${current_user && current_user.login}/organizes`);
|
history.push(`/users/${current_user && current_user.login}/organizes`);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return(
|
return (
|
||||||
<div>
|
<div>
|
||||||
<WhiteBack>
|
<WhiteBack>
|
||||||
<Title primary>基本设置</Title>
|
<Title primary>基本设置</Title>
|
||||||
|
|
@ -94,22 +92,25 @@ export default Form.create()(
|
||||||
"团队名称：",
|
"团队名称：",
|
||||||
"name",
|
"name",
|
||||||
[{ required: true, message: "请输入团队名称：" }],
|
[{ required: true, message: "请输入团队名称：" }],
|
||||||
<Input placeholder="请输入团队名称：" />,true
|
<Input placeholder="请输入团队名称：" />, true
|
||||||
)}
|
)}
|
||||||
{helper(
|
{helper(
|
||||||
"团队描述：",
|
"团队描述：",
|
||||||
"description",
|
"description",
|
||||||
[],
|
[],
|
||||||
<TextArea placeholder="请输入团队描述团队的目的或作用" />
|
<div style={{ marginTop: '4px' }}>
|
||||||
|
<TextArea placeholder="请输入团队描述团队的目的或作用" />
|
||||||
|
</div>
|
||||||
|
|
||||||
)}
|
)}
|
||||||
{helper(
|
{helper(
|
||||||
'项目权限：',
|
'项目权限：',
|
||||||
"visibility",
|
"visibility",
|
||||||
[],
|
[],
|
||||||
<Radio.Group>
|
<Radio.Group>
|
||||||
<Radio value="common" style={radioStyle}>指定项目 <span className="">(团队成员将只能访问添加到团队的项目。 选择此项 将不会 自动删除已经添加的项目)</span></Radio>
|
<Radio value="common" style={radioStyle}><span className="color-black">指定项目</span><RadioList>(团队成员将只能访问添加到团队的项目。 选择此项<RadioListBold>将不会</RadioListBold>自动删除已经添加的项目)</RadioList></Radio>
|
||||||
<Radio value="limited" style={radioStyle}>所有项目<span>(团队可以访问所有项目。选择此选项将 添加所有现有的 项目到指定团队)</span></Radio>
|
<Radio value="limited" style={radioStyle}><span className="color-black">所有项目</span><RadioList>(团队可以访问所有项目。选择此选项将 <RadioListBold>添加所有现有的</RadioListBold>项目到指定团队)</RadioList></Radio>
|
||||||
<Radio value="privacy" style={radioStyle}>新建项目<span>(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限。)</span></Radio>
|
<Radio value="privacy" style={radioStyle}><span className="color-black">新建项目</span><RadioList>(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限。)</RadioList></Radio>
|
||||||
</Radio.Group>
|
</Radio.Group>
|
||||||
)}
|
)}
|
||||||
{helper(
|
{helper(
|
||||||
|
|
@ -117,21 +118,39 @@ export default Form.create()(
|
||||||
"repo_admin_change_team_access",
|
"repo_admin_change_team_access",
|
||||||
[],
|
[],
|
||||||
<Radio.Group>
|
<Radio.Group>
|
||||||
<Radio value="common" style={radioStyle}>读取权限 <span className="">(成员可以查看和克隆团队项目)</span></Radio>
|
<Radio value="common" style={radioStyle}><span className="color-black">读取权限</span><RadioList>(成员可以查看和克隆团队项目)</RadioList></Radio>
|
||||||
<Radio value="limited" style={radioStyle}>写入权限<span>(成员可以查看和推送提交到团队项目)</span></Radio>
|
<Radio value="limited" style={radioStyle}><span className="color-black">写入权限</span><RadioList>(成员可以查看和推送提交到团队项目)</RadioList></Radio>
|
||||||
<Radio value="privacy" style={radioStyle}>管理员权限<span>(成员可以拉取和推送到团队项目同时可以添加协作者)</span></Radio>
|
<Radio value="privacy" style={radioStyle}><span className="color-black">管理员权限</span><RadioList>(成员可以拉取和推送到团队项目同时可以添加协作者)</RadioList></Radio>
|
||||||
</Radio.Group>
|
</Radio.Group>
|
||||||
)}
|
)}
|
||||||
<Divider/>
|
<Divider />
|
||||||
{helper(
|
{helper(
|
||||||
'允许访问项目单元：',
|
'允许访问项目单元：',
|
||||||
"max_repo_creation",
|
"max_repo_creation",
|
||||||
[],
|
[{ required: true, message: "请至少选择一项" }],
|
||||||
<Input value="-1" style={{width:"350px"}}/>
|
<div>
|
||||||
|
<div>
|
||||||
|
<Switch defaultChecked className="group-setting-switch"/>
|
||||||
|
<span><span className="color-black ml15">代码库</span><RadioList>(查看源码、文件、提交和分支)</RadioList></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Switch className="group-setting-switch"/>
|
||||||
|
<span><span className="color-black ml15">任务</span><RadioList>(组织 bug 报告、任务和里程碑)</RadioList></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Switch className="group-setting-switch"/>
|
||||||
|
<span><span className="color-black ml15">合并请求</span><RadioList>(启用合并请求和代码评审)</RadioList></span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Switch className="group-setting-switch"/>
|
||||||
|
<span><span className="color-black ml15">版本发布</span><RadioList>(跟踪项目版本和下载)</RadioList></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>,
|
||||||
|
true
|
||||||
)}
|
)}
|
||||||
<p>选择头像:</p>
|
<Button type={"primary"} onClick={updateDetail}>更新团队设置</Button>
|
||||||
<UploadImage url={getImageUrl(`images/${image}`)} getImage={getImage}/>
|
<Button type={"text"} onClick={updateDetail} className="ml30"><span className="pl30 pr30">取消</span></Button>
|
||||||
<Button type={"primary"} onClick={updateDetail}>更新仓库设置</Button>
|
|
||||||
</Form>
|
</Form>
|
||||||
</Div>
|
</Div>
|
||||||
</WhiteBack>
|
</WhiteBack>
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,8 @@ ul,ol,dl{
|
||||||
.newMain{
|
.newMain{
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
.font-bold{
|
.color-black{
|
||||||
font-weight: bold;
|
color: #333;
|
||||||
}
|
}
|
||||||
.main{
|
.main{
|
||||||
width: 1200px;
|
width: 1200px;
|
||||||
|
|
@ -220,3 +220,7 @@ form{
|
||||||
padding:0px;
|
padding:0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.group-setting-switch{
|
||||||
|
border: 1px solid #DDDDDD !important;
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue