add group setting pages

2021-01-30 22:06:52 +08:00 · 2021-01-30 22:06:52 +08:00 · bd85703412
parent 7a2d1b7db1
commit bd85703412
3 changed files with 82 additions and 50 deletions
--- 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;
+}`
+
--- 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>
--- 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;
+}