From bd8570341200f088044f396ea4619d316d1e5e92 Mon Sep 17 00:00:00 2001
From: Sylor-huang <sylor_huang@126.com>
Date: Sat, 30 Jan 2021 22:06:52 +0800
Subject: [PATCH] add group setting pages

---
 src/forge/Component/layout.jsx         |   9 ++
 src/forge/Team/Group/SettingCommon.jsx | 115 ++++++++++++++-----------
 src/forge/css/index.scss               |   8 +-
 3 files changed, 82 insertions(+), 50 deletions(-)

diff --git a/src/forge/Component/layout.jsx b/src/forge/Component/layout.jsx
index 50cdffad7..c532934a7 100644
--- a/src/forge/Component/layout.jsx
+++ b/src/forge/Component/layout.jsx
@@ -154,3 +154,12 @@ export const Content = styled.div`{
   background-color:#fff;
   justify-content: center;
 }`
+export const RadioList = styled.span`{
+  color:#888888;
+  margin-left: 8px;
+}`
+export const RadioListBold = styled.span`{
+  color:#333 !important;
+  margin: 0 2px;
+}`
+
diff --git a/src/forge/Team/Group/SettingCommon.jsx b/src/forge/Team/Group/SettingCommon.jsx
index 885c62fed..afe1e4113 100644
--- a/src/forge/Team/Group/SettingCommon.jsx
+++ b/src/forge/Team/Group/SettingCommon.jsx
@@ -1,11 +1,9 @@
-import React, { forwardRef , useCallback , useEffect, useState } from 'react';
-import { Form , Input , Radio ,Checkbox , Divider , Button } from 'antd';
-import { WhiteBack , FlexAJ } from '../../Component/layout';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
+import { Form, Input, Radio, Switch, Divider, Button } from 'antd';
+import { WhiteBack, RadioList, RadioListBold } from '../../Component/layout';
 import Title from '../../Component/Title';
 import styled from 'styled-components';
-import UploadImage from '../Component/UploadImage';
 import axios from 'axios';
-import { getImageUrl } from 'educoder';
 const TextArea = Input.TextArea;
 
 const Div = styled.div`{
@@ -17,28 +15,28 @@ const radioStyle = {
   lineHeight: '30px',
 };
 export default Form.create()(
-  forwardRef(({ form , organizeDetail , showNotification , history , current_user })=>{
-    const [ image , setImage ] = useState(undefined);
-    const [ imageFlag , setImageFlag ] = useState(false);
-    const [ password , setPassword ] = useState(undefined);
-    const [ passwordFlag , setPasswordFlag ] = useState(false);
-    const { getFieldDecorator , validateFields , setFieldsValue } = form;
+  forwardRef(({ form, organizeDetail, showNotification, history, current_user }) => {
+    const [image, setImage] = useState(undefined);
+    const [imageFlag, setImageFlag] = useState(false);
+    const [password, setPassword] = useState(undefined);
+    const [passwordFlag, setPasswordFlag] = useState(false);
+    const { getFieldDecorator, validateFields, setFieldsValue } = form;
 
-    useEffect(()=>{
-      if(organizeDetail){
+    useEffect(() => {
+      if (organizeDetail) {
         setFieldsValue({
           ...organizeDetail
         })
         setImage(organizeDetail.avatar_url);
       }
-    },[organizeDetail])
+    }, [organizeDetail])
 
     const helper = useCallback(
-      (label, name, rules, widget , isRequired , flag ) => (
+      (label, name, rules, widget, isRequired, flag) => (
         <div>
-          <span className={isRequired?"required":""}>{label}</span>
+          <span className={isRequired ? "required" : ""}>{label}</span>
           <Form.Item>
-            {getFieldDecorator(name, { rules, validateFirst: true , valuePropName:flag ? "checked":"value"  })(widget)}
+            {getFieldDecorator(name, { rules, validateFirst: true, valuePropName: flag ? "checked" : "value" })(widget)}
           </Form.Item>
         </div>
       ),
@@ -46,45 +44,45 @@ export default Form.create()(
     );
 
     // 更新
-    function updateDetail(){
-      validateFields((error,values)=>{
-        if(!error){
+    function updateDetail() {
+      validateFields((error, values) => {
+        if (!error) {
           const url = `/organizations/${organizeDetail.id}.json`;
-          axios.patch(url,{
-            ...values,image:imageFlag ? image : undefined
-          }).then(result=>{
-            if(result && result.data){
+          axios.patch(url, {
+            ...values, image: imageFlag ? image : undefined
+          }).then(result => {
+            if (result && result.data) {
               showNotification("组织信息更新成功！");
               history.push(`/organize/${values.name}/setting`);
             }
-          }).catch(error=>{})
+          }).catch(error => { })
         }
       })
     }
-    function getImage(image){
+    function getImage(image) {
       setImageFlag(true);
       setImage(image);
     }
 
     // 删除组织
-    function deleteOrganize(){
-      if(!password){
+    function deleteOrganize() {
+      if (!password) {
         setPasswordFlag(true);
         return
-      }else{
+      } else {
         setPasswordFlag(false);
         const url = `/organizations/${organizeDetail.id}.json`;
-        axios.delete(url,{
-          params:{ password }
-        }).then(result=>{
-          if(result && result.data){
+        axios.delete(url, {
+          params: { password }
+        }).then(result => {
+          if (result && result.data) {
             // 删除后跳转到个人中心的组织页面
             history.push(`/users/${current_user && current_user.login}/organizes`);
           }
         })
       }
     }
-    return(
+    return (
       <div>
         <WhiteBack>
           <Title primary>基本设置</Title>
@@ -94,22 +92,25 @@ export default Form.create()(
                 "团队名称：",
                 "name",
                 [{ required: true, message: "请输入团队名称：" }],
-                <Input placeholder="请输入团队名称：" />,true
+                <Input placeholder="请输入团队名称：" />, true
               )}
               {helper(
                 "团队描述：",
                 "description",
                 [],
-                <TextArea placeholder="请输入团队描述团队的目的或作用" />
+                <div style={{ marginTop: '4px' }}>
+                  <TextArea placeholder="请输入团队描述团队的目的或作用" />
+                </div>
+
               )}
               {helper(
                 '项目权限：',
                 "visibility",
                 [],
                 <Radio.Group>
-                  <Radio value="common" style={radioStyle}>指定项目 <span className="">(团队成员将只能访问添加到团队的项目。 选择此项 将不会 自动删除已经添加的项目)</span></Radio>
-                  <Radio value="limited" style={radioStyle}>所有项目<span>(团队可以访问所有项目。选择此选项将 添加所有现有的 项目到指定团队)</span></Radio>
-                  <Radio value="privacy" style={radioStyle}>新建项目<span>(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限。)</span></Radio>
+                  <Radio value="common" style={radioStyle}><span className="color-black">指定项目</span><RadioList>(团队成员将只能访问添加到团队的项目。 选择此项<RadioListBold>将不会</RadioListBold>自动删除已经添加的项目)</RadioList></Radio>
+                  <Radio value="limited" style={radioStyle}><span className="color-black">所有项目</span><RadioList>(团队可以访问所有项目。选择此选项将 <RadioListBold>添加所有现有的</RadioListBold>项目到指定团队)</RadioList></Radio>
+                  <Radio value="privacy" style={radioStyle}><span className="color-black">新建项目</span><RadioList>(成员可以在组织中新建项目。创建者将自动获得新建的项目的管理员权限。)</RadioList></Radio>
                 </Radio.Group>
               )}
               {helper(
@@ -117,21 +118,39 @@ export default Form.create()(
                 "repo_admin_change_team_access",
                 [],
                 <Radio.Group>
-                  <Radio value="common" style={radioStyle}>读取权限 <span className="">(成员可以查看和克隆团队项目)</span></Radio>
-                  <Radio value="limited" style={radioStyle}>写入权限<span>(成员可以查看和推送提交到团队项目)</span></Radio>
-                  <Radio value="privacy" style={radioStyle}>管理员权限<span>(成员可以拉取和推送到团队项目同时可以添加协作者)</span></Radio>
+                  <Radio value="common" style={radioStyle}><span className="color-black">读取权限</span><RadioList>(成员可以查看和克隆团队项目)</RadioList></Radio>
+                  <Radio value="limited" style={radioStyle}><span className="color-black">写入权限</span><RadioList>(成员可以查看和推送提交到团队项目)</RadioList></Radio>
+                  <Radio value="privacy" style={radioStyle}><span className="color-black">管理员权限</span><RadioList>(成员可以拉取和推送到团队项目同时可以添加协作者)</RadioList></Radio>
                 </Radio.Group>
               )}
-              <Divider/>
+              <Divider />
               {helper(
                 '允许访问项目单元：',
                 "max_repo_creation",
-                [],
-                <Input value="-1" style={{width:"350px"}}/>
+                [{ required: true, message: "请至少选择一项" }],
+                <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>
-              <UploadImage url={getImageUrl(`images/${image}`)} getImage={getImage}/>
-              <Button type={"primary"} onClick={updateDetail}>更新仓库设置</Button>
+              <Button type={"primary"} onClick={updateDetail}>更新团队设置</Button>
+              <Button type={"text"} onClick={updateDetail} className="ml30"><span className="pl30 pr30">取消</span></Button>
             </Form>
           </Div>
         </WhiteBack>
diff --git a/src/forge/css/index.scss b/src/forge/css/index.scss
index 03e16741e..85df33244 100644
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@@ -4,8 +4,8 @@ ul,ol,dl{
 .newMain{
   background-color: #f5f5f5;
 }
-.font-bold{
-  font-weight: bold;
+.color-black{
+  color: #333;
 }
 .main{
   width: 1200px;
@@ -220,3 +220,7 @@ form{
     padding:0px;
   }
 }
+.group-setting-switch{
+  border: 1px solid #DDDDDD !important;
+  background-color: #fff !important;
+}
\ No newline at end of file