add group setting

src/forge/Team/Group/SettingCommon.jsx

@@ -1,67 +1,141 @@
-import React , { useState } from 'react';
-import { AutoComplete , Pagination } from 'antd';
-import { Banner , Blueline , FlexAJ , Greenback , Redback } from '../../Component/layout';
+import React, { forwardRef , useCallback , useEffect, useState } from 'react';
+import { Form , Input , Radio ,Checkbox , Divider , Button } from 'antd';
+import { WhiteBack , FlexAJ } 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 Option = AutoComplete.Option;
-const Div =  styled.div`{
-  padding:18px 30px;
-}`;
-const LIMIT = 15;
-const demoData=[{name:"Python相关",id:1},{name:"Python相关",id:2}];
-export default ()=>{
-  const [ searchKey , setSearchKey ] = useState(undefined);
-  const [ page , setPage ] = useState(1);
-  const [ total , setTotal ] = useState(0);
+const Div = styled.div`{
+  padding:20px 30px;
+}`
+const radioStyle = {
+  display: 'block',
+  height: '30px',
+  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;
 
-  function changeInputUser(){}
-  function selectInputUser(){}
+    useEffect(()=>{
+      if(organizeDetail){
+        setFieldsValue({
+          ...organizeDetail
+        })
+        setImage(organizeDetail.avatar_url);
+      }
+    },[organizeDetail])
 
-  // 切换分页
-  function ChangePage(page){
-    setPage(page);
-  }
-  const source = demoData && demoData.map((item,key)=>{
+    const helper = useCallback(
+      (label, name, rules, widget , isRequired , flag ) => (
+        <div>
+          <span className={isRequired?"required":""}>{label}</span>
+          <Form.Item>
+            {getFieldDecorator(name, { rules, validateFirst: true , valuePropName:flag ? "checked":"value"  })(widget)}
+          </Form.Item>
+        </div>
+      ),
+      []
+    );
+
+    // 更新
+    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){
+              showNotification("组织信息更新成功！");
+              history.push(`/organize/${values.name}/setting`);
+            }
+          }).catch(error=>{})
+        }
+      })
+    }
+    function getImage(image){
+      setImageFlag(true);
+      setImage(image);
+    }
+
+    // 删除组织
+    function deleteOrganize(){
+      if(!password){
+        setPasswordFlag(true);
+        return
+      }else{
+        setPasswordFlag(false);
+        const url = `/organizations/${organizeDetail.id}.json`;
+        axios.delete(url,{
+          params:{ password }
+        }).then(result=>{
+          if(result && result.data){
+            // 删除后跳转到个人中心的组织页面
+            history.push(`/users/${current_user && current_user.login}/organizes`);
+          }
+        })
+      }
+    }
     return(
-    <Option key={key} value={`${item.id}`}>{item.name}</Option>
+      <div>
+        <WhiteBack>
+          <Title primary>基本设置</Title>
+          <Div>
+            <Form>
+              {helper(
+                "团队名称：",
+                "name",
+                [{ required: true, message: "请输入团队名称：" }],
+                <Input placeholder="请输入团队名称：" />,true
+              )}
+              {helper(
+                "团队描述：",
+                "description",
+                [],
+                <TextArea placeholder="请输入团队描述团队的目的或作用" />
+              )}
+              {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.Group>
+              )}
+              {helper(
+                '权限：',
+                "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.Group>
+              )}
+              <Divider/>
+              {helper(
+                '允许访问项目单元：',
+                "max_repo_creation",
+                [],
+                <Input value="-1" style={{width:"350px"}}/>
+              )}
+              <p>选择头像:</p>
+              <UploadImage url={getImageUrl(`images/${image}`)} getImage={getImage}/>
+              <Button type={"primary"} onClick={updateDetail}>更新仓库设置</Button>
+            </Form>
+          </Div>
+        </WhiteBack>
+      </div>
     )
   })
-  return(
-    <div>
-      <Banner>团队项目管理</Banner>
-      <Div>
-        <FlexAJ className="actionNav">
-          <div>
-            <AutoComplete
-              dataSource={source}
-              value={searchKey}
-              style={{ width: 270 }}
-              onChange={changeInputUser}
-              onSelect={selectInputUser}
-              placeholder="搜索项目…"
-            />
-            <Blueline className="ml30">+&nbsp;添加项目</Blueline>
-          </div>
-          <span>
-            <Greenback>添加所有</Greenback>
-            <Redback className="ml20">移除所有</Redback>
-          </span>
-        </FlexAJ>
-        <div className="GSlist">
-          <div>
-            <span>
-              caishi/前端v0.1
-            </span>
-            <a style={{color:"#F73030"}}>移除</a>
-          </div>
-        </div>
-        {
-          total > LIMIT ? 
-          <div className="edu-txt-center mt30 mb20">
-            <Pagination simple defaultCurrent={page} total={total} pageSize={LIMIT} onChange={ChangePage}></Pagination>
-          </div>:""
-        }
-      </Div>
-    </div>
-  )
-}
+)

src/forge/css/index.scss

@@ -4,6 +4,9 @@ ul,ol,dl{
 .newMain{
   background-color: #f5f5f5;
 }
+.font-bold{
+  font-weight: bold;
+}
 .main{
   width: 1200px;
   padding:20px;