项目邀请码-第一版测试版上线

src/AppConfig.js

@@ -25,7 +25,7 @@ if (isDev) {
   }
   debugType = window.location.search.indexOf('debug=t') !== -1 ? 'teacher' :
   window.location.search.indexOf('debug=s') !== -1 ? 'student' :
-  window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'admin'
+  window.location.search.indexOf('debug=a') !== -1 ? 'admin' : parsed.debug || 'student'
 }                 
 window._debugType = debugType;
 export function initAxiosInterceptors(props) {

src/forge/Head/AddProjectModal.jsx

@@ -0,0 +1,84 @@
+import React, { useState , forwardRef, useEffect } from 'react';
+import { Form , Modal , Input , Radio } from 'antd';
+import Axios from 'axios';
+
+export default Form.create()(
+  forwardRef((props)=>{
+    const { getFieldDecorator, validateFields , setFieldsValue } = props && props.form;
+    const [ visible , setVisible ] = useState(false);
+
+    useEffect(()=>{
+      if(!visible){
+        setFieldsValue({
+          code:undefined,
+          role:"developer"
+        })
+      }
+    },[visible])
+
+    function onOk() {
+      validateFields((error,values)=>{
+        if(!error){
+          const url = `/applied_projects.json`;
+          Axios.post(url,{
+            applied_project:{
+              ...values
+            }
+          }).then(result=>{
+            if(result && result.data){
+              setVisible(false);
+              props.showNotification("申请加入项目成功，等待审核!");
+            }
+          }).catch(error=>{})
+        }
+      })
+    }
+    function checkValue(rule, value, callback){
+      if(!value){
+        callback();
+      }
+      if(value.length < 6 || value.length > 6){
+        callback("请输入6位数的邀请码");
+      }
+      callback();
+    }       
+
+    return(
+      <React.Fragment>
+        <Modal
+          title="加入项目"
+          width="480px"
+          visible={visible}
+          centered={true}
+          onOk={onOk}
+          onCancel={()=>setVisible(false)}
+        >
+          <Form layout={'inline'} className="inviteForm">
+            <Form.Item label="项目邀请码">
+              {getFieldDecorator("code",{
+                rules:[
+                  {required:true,message:"请输入6位项目邀请码"},
+                  {validator:checkValue}
+                ]
+              })(
+                <Input placeholder="请输入6位项目邀请码" autoComplete={"off"} maxLength="6" style={{width:"300px"}}/>
+              )}
+            </Form.Item>
+            <Form.Item label="选择角色">
+              {getFieldDecorator("role",{
+                rules:[{required:true,message:"请选择角色"}]
+              })(
+                <Radio.Group defaultValue={"developer"}>
+                  <Radio value="manager">管理员</Radio>
+                  <Radio value="developer">开发者</Radio>
+                  <Radio value="reporter">报告者</Radio>
+                </Radio.Group>
+              )}
+            </Form.Item>
+          </Form>
+        </Modal>
+        <a onClick={()=>setVisible(true)}>加入项目</a>
+      </React.Fragment>
+    )
+  })
+)

src/forge/Head/Header.js

@@ -5,8 +5,7 @@ import axios from 'axios';
 import { Input , notification , Dropdown , Menu } from 'antd';
 
 import LoginDialog from '../../modules/login/LoginDialog';
-import GotoQQgroup from '../../modal/GotoQQgroup'
+import AddProjectModal from './AddProjectModal';
-
 import '../../modules/tpm/TPMIndex.css';
 
 import './header.scss';
@@ -268,11 +267,11 @@ class NewHeader extends Component {
               )
             })
           }
+          <Menu.Item><AddProjectModal showNotification={this.props.showNotification}/></Menu.Item>
         </Menu>
       </div>
     )
   }
-
   renderMenu=(personal)=>{
     const { current_user } = this.props;
     return(

src/forge/Head/header.scss

@@ -1,7 +1,6 @@
 
 .dropdownFlex{
   display:flex;
-  padding:5px;
   background:#fff;
   border-radius: 3px;
   .ant-menu-vertical > .ant-menu-item{
@@ -9,6 +8,13 @@
     height: 35px;
     line-height: 35px;
     margin:0px;
+    &.ant-menu-item-selected{
+      background-color: #fff;
+      a{color: rgba(0, 0, 0, 0.65)!important;}
+    }
+    &.ant-menu-item-active{
+      a{color: #4cacff!important;}
+    }
   }
   .ant-menu-vertical{
     border:none;
@@ -104,4 +110,13 @@
       }
     }
   }
+}
+.inviteForm{
+  .ant-form-item{
+    margin-right: 0px;
+  }
+  .ant-form-item-label{
+    width: 110px;
+    text-align: right;
+  }
 }

src/forge/Notice/Apply.jsx

@@ -0,0 +1,114 @@
+import React, { useEffect , useState } from 'react';
+import Axios from 'axios';
+import { Pagination , Spin , Popconfirm }from 'antd';
+import { Link } from 'react-router-dom';
+import { getImageUrl } from 'educoder';
+import Nodata from '../Nodata';
+import { FlexAJ } from '../Component/layout';
+
+const limit = 15;
+function Apply(props) {
+  const username = props.match.params.username;
+  const [ list , setList ] = useState(undefined);
+  const [ page , setPage ] = useState(1);
+  const [ total , setTotal ] = useState(0);
+  const [ isSpin , setIsSpin ] = useState(true);
+
+  useEffect(()=>{
+    if(username){
+      setIsSpin(true);
+      getList();
+    }
+  },[username])
+
+  function getList() {
+    const url =  `/users/${username}/applied_projects.json`;
+    Axios.get(url).then(result=>{
+      if(result){
+        setList(result.data.applied_projects);
+        setTotal(result.data.total_count);
+        setIsSpin(false);
+      }
+    }).catch(error=>{})
+  }
+
+  // 接受
+  function acceptDivert(id){
+    const url =  `/users/${username}/applied_projects/${id}/accept.json`;
+    Axios.post(url).then(result=>{
+      if(result && result.data){
+        getList();
+        props && props.deleteEvent("apply",1);
+      }
+    }).catch(error=>{})
+  }
+
+  // 拒绝
+  function revertDivert(id){
+    const url =  `/users/${username}/applied_projects/${id}/refuse.json`;
+    Axios.post(url).then(result=>{
+      if(result && result.data){
+        getList();
+        props && props.deleteEvent("apply",1);
+      }
+    }).catch(error=>{})
+  }
+  return(
+    <div>
+      <Spin spinning={isSpin}>
+        <div style={{minHeight:"400px"}}>
+          {
+            list && list.length > 0 ? 
+            <ul className="notifyList">
+              {
+                list.map((i,k)=>{
+                  return(
+                    <li>
+                      <Link to={`/users/${i.user && i.user.login}`}><img src={getImageUrl(`/${i.user && i.user.image_url}`)} alt="" className="notifyImg"/></Link>
+                      <div className="notifyFlex">
+                        <p className="notifyInfos">
+                          <Link to={`/users/${i.user && i.user.login}`} className="font-15 mr20">{i.user && i.user.name}</Link>
+                          <span className="color-grey-9">{i.time_ago}</span>
+                        </p>
+                        <FlexAJ>
+                          <p>申请以【{i.role === "developer" ?"开发者":i.role === "manager" ? "管理者":"报告者"}】身份加入【{i.project && i.project.name}】项目。是否同意？</p>
+                          {
+                            i.status === "common" &&
+                            <span>
+                              <Popconfirm title={`确定同意${i.user && i.user.name}加入【${i.project && i.project.name}】项目？`} okText="确定" cancelText="取消" onConfirm={()=>acceptDivert(i.id)}>
+                                <a className="color-blue">同意</a>
+                              </Popconfirm>
+                              <Popconfirm title={`确定拒绝${i.user && i.user.name}加入【${i.project && i.project.name}】项目？`} okText="确定" cancelText="取消" onConfirm={()=>revertDivert(i.id)}>
+                                <a className="color-red ml20">拒绝</a>
+                              </Popconfirm>
+                            </span>
+                          }
+                          {
+                            i.status === "accepted" && <span className="color-grey-9">已接受</span>
+                          }
+                          {
+                            i.status === "refused" && <span className="color-grey-9">已拒绝</span>
+                          }
+                        </FlexAJ>
+                      </div>
+                    </li>
+                  )
+                })
+              }
+            </ul>
+            :
+            ""
+          }
+          {list && list.length === 0 && <Nodata _html="暂无成员申请" />}
+          {
+            total > limit && 
+            <div className="edu-txt-center pt20 pb20">
+              <Pagination simple pageSize={limit} total={total} current={page} onChange={(p)=>{setPage(p)}}/>
+            </div>
+          }
+        </div>
+      </Spin>
+    </div>
+  )
+}
+export default Apply;

src/forge/Notice/Index.jsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useState } from "react";
+import { Link } from 'react-router-dom';
+import './Index.scss';
+
+import Loadable from "react-loadable";
+import Loading from "../../Loading";
+import { Route, Switch } from "react-router-dom";
+
+const Apply = Loadable({
+  loader: () => import("./Apply"),
+  loading: Loading,
+});
+const Notify = Loadable({
+  loader: () => import("./Notify"),
+  loading: Loading,
+});
+const UndoEvent = Loadable({
+  loader: () => import("./UndoEvent"),
+  loading: Loading,
+});
+function Index(props){
+  const username = props.match.params.username;
+  const pathname = props.history.location.pathname;
+  const user = props.user;
+
+  const [ menu , setMenu ] = useState("notify");
+  const [ messagesCount , setMessagesCount ] = useState(0);
+  const [ transferCount , setTransferCount ] = useState(0);
+  const [ applyCount , setApplyCount ] = useState(0);
+
+  const [ flag , setFlag ] = useState(true);
+  const { current_user } = props;
+
+  useEffect(()=>{
+    if((username && current_user && (current_user.login !== username))){
+      props.history.push(`/users/${username}`);
+    }
+  },[current_user,username])
+
+  useEffect(()=>{
+    if(user){
+      setTransferCount(user.undo_transfer_projects);
+      setApplyCount(user.undo_join_projects);
+      setMessagesCount(user.undo_messages);
+    }
+  },[user])
+
+  useEffect(()=>{
+    if(pathname && username){
+      if(pathname === `/users/${username}/notice`){
+        setMenu("notify");
+        changeNum(user.undo_messages);
+      }
+      if(pathname === `/users/${username}/notice/undo`){
+        setMenu("undo");
+      }
+      if(pathname === `/users/${username}/notice/apply`){
+        setMenu("apply");
+      }
+    }
+  },[pathname,user])
+
+  function changeNum(){
+    if(flag){
+      messagesCount && props.deleteUndoEvent(messagesCount);
+      setFlag(false);
+    }
+  }
+
+  function deleteEvent(type,count) {
+    let c = count;
+    if(type==="apply"){
+      setApplyCount(applyCount-count);
+    }else if(type==="undo"){
+      setTransferCount(applyCount-count);
+    }else{
+      setMessagesCount(0);
+      c = messagesCount;
+    }
+    (c || c===0) && props.deleteUndoEvent(c);
+  }
+
+  return (
+    <div>
+      <ul className="noticeMenu">
+        <li className={menu === "notify" ? "active":""}>
+          <Link to={`/users/${username}/notice`} onClick={changeNum}>
+            <span>通知</span>
+            {messagesCount ? <span className="unNum">{messagesCount}</span>:""}
+          </Link>
+        </li>
+        <li className={menu === "undo" ? "active":""}>
+          <Link to={`/users/${username}/notice/undo`}>
+            <span>接收仓库</span>
+            {transferCount ? <span className="unNum">{transferCount}</span>:""}
+          </Link>
+        </li>
+        <li className={menu === "apply" ? "active":""}>
+          <Link to={`/users/${username}/notice/apply`}>
+            <span>成员申请</span>
+            {applyCount ? <span className="unNum">{applyCount}</span>:""}
+          </Link>
+        </li>
+      </ul>
+      <Switch>
+        <Route
+          path="/users/:username/notice/apply"
+          render={(p) => {
+            return <Apply {...props} {...p} deleteEvent={deleteEvent}/>;
+          }}
+        ></Route>
+        <Route
+          path="/users/:username/notice/undo"
+          render={(p) => {
+            return <UndoEvent {...props} {...p} deleteEvent={deleteEvent}/>;
+          }}
+        ></Route>
+        <Route
+          path="/users/:username/notice"
+          render={(p) => {
+            return <Notify {...props} {...p} deleteEvent={deleteEvent}/>;
+          }}
+        ></Route>
+      </Switch>
+  </div>
+  );
+}
+export default Index;

src/forge/Notice/Index.scss

@@ -26,7 +26,7 @@
       min-width: 23px;
       text-align: center;
       background-color: #ffe4b3;
-      margin-top: 19px;
+      margin-top: 27px;
       margin-left: 10px;
       display: block;
     }

src/forge/Notice/Notify.jsx

@@ -13,6 +13,10 @@ function Notify(props){
   const [ total , setTotal ] = useState(0);
   const [ isSpin , setIsSpin ] = useState(true);
 
+  useEffect(()=>{
+    props && props.deleteEvent("notify",0);
+  },[])
+
   useEffect(()=>{
     if(username){
       setIsSpin(true);
@@ -43,7 +47,7 @@ function Notify(props){
           return <p>取消转移【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库</p>
         case 'common':
           return <p>正在将【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库转移给【<Link to={`/users/${owner && owner.login}`}>{owner && owner.name}</Link>】</p>
-          case 'successed':
+        case 'successed':
           return <p>【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库成功转移给【<Link to={`/users/${owner && owner.login}`}>{owner && owner.name}</Link>】</p>
         default:
           return <p>拒绝转移【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】仓库</p>
@@ -53,6 +57,20 @@ function Notify(props){
     }
   }
 
+  function renderApplyStatus(status,applied) {
+    let { project } = applied;
+    if(status){
+      switch(status){
+        case 'successed':
+          return <p>已通过你加入【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】项目的申请</p>
+        default:
+          return <p>已拒绝你加入【<Link to={`/projects/${project && project.owner && project.owner.login}/${project && project.identifier}`}>{project && project.name}</Link>】项目的申请</p>
+      }
+    }else{
+      return ""
+    }
+  }
+
   return(
     <div>
       <Spin spinning={isSpin}>
@@ -70,7 +88,7 @@ function Notify(props){
                           <Link to={`/users/${i.applied_user && i.applied_user.login}`} className="font-15 mr20">{i.applied_user && i.applied_user.name}</Link>
                           <span className="color-grey-9">{i.time_ago}</span>
                         </p>
-                        {renderStatus(i.status,i.applied)}
+                        { i.applied_type === "AppliedProject" ? renderApplyStatus(i.status,i.applied):renderStatus(i.status,i.applied)}
                       </div>
                     </li>
                   )

src/forge/Notice/UndoEvent.jsx

@@ -42,7 +42,7 @@ function UndoEvent(props){
     Axios.post(url).then(result=>{
       if(result && result.data){
         getList();
-        props && props.fetchUser();
+        props && props.deleteEvent("undo",1);
       }
     }).catch(error=>{})
   }
@@ -53,7 +53,7 @@ function UndoEvent(props){
     Axios.post(url).then(result=>{
       if(result && result.data){
         getList();
-        props && props.fetchUser();
+        props && props.deleteEvent("undo",1);
       }
     }).catch(error=>{})
   }

src/forge/users/Infos.js

@@ -66,7 +66,6 @@ class Infos extends Component {
       project_type: undefined,
       route_type: undefined,
       undo_events:0,
-      undo_messages:0,
       menuKey:"0"
     };
   }
@@ -124,20 +123,14 @@ class Infos extends Component {
     });
     const { current_user } = this.props;
     const { username } = this.props.match.params;
-    const { pathname } = this.props.location;
-    const { notice } = this.state;
 
     let url = `/users/${username || (current_user && current_user.login)}.json`;
     axios.get(url).then((result) => {
       let e = result.data && result.data.undo_events;
-      let p = result.data && result.data.undo_messages;
-      let n = notice || pathname === `/users/${username}/notice` ;
       this.setState({
         user: result.data,
         isSpin: false,
-        undo_events:n ? (e-p) : e,
+        undo_events:e
-        undo_messages:0,
-        notice:n
       });
     })
     .catch((error) => {
@@ -161,7 +154,6 @@ class Infos extends Component {
     this.setState({
       route_type: undefined,
       project_type:"notice",
-      notice:true
     },()=>{
       this.props.history.push(`/users/${user && user.login}/notice`);
       this.fetchUser();
@@ -190,6 +182,15 @@ class Infos extends Component {
     resetUserInfo && resetUserInfo();
   }
 
+  // 修改待办事项右侧的数量
+  deleteUndoEvent=(count)=>{
+    let { undo_events } = this.state;
+    let undo = undo_events - count;
+    this.setState({
+      undo_events:undo
+    })
+  }
+
   render() {
     const { current_user } = this.props;
     const { username } = this.props.match.params;
@@ -306,7 +307,7 @@ class Infos extends Component {
                   <Route
                     path="/users/:username/notice"
                     render={() => {
-                      return <Notice {...this.props} {...this.state} fetchUser={this.fetchUser}/>;
+                      return <Notice {...this.props} {...this.state} deleteUndoEvent={this.deleteUndoEvent}/>;
                     }}
                   ></Route>
                   <Route