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

2021-06-11 09:25:59 +08:00 · 2021-06-11 09:25:59 +08:00 · 63e9cfe394
parent 32299252ad
commit 63e9cfe394
10 changed files with 309 additions and 38 deletions
--- a/src/AppConfig.js
+++ b/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) {
--- a/src/forge/Head/AddProjectModal.jsx
+++ b/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>
+    )
+  })
+)
--- a/src/forge/Head/Header.js
+++ b/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(
--- a/src/forge/Head/header.scss
+++ b/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;
@ -105,3 +111,12 @@
    }
  }
 }
+.inviteForm{
+  .ant-form-item{
+    margin-right: 0px;
+  }
+  .ant-form-item-label{
+    width: 110px;
+    text-align: right;
+  }
+}
--- a/src/forge/Notice/Apply.jsx
+++ b/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;
--- a/src/forge/Notice/Index.jsx
+++ b/src/forge/Notice/Index.jsx
@ -6,6 +6,10 @@ 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,
@ -18,38 +22,62 @@ function Index(props){
  const username = props.match.params.username;
  const pathname = props.history.location.pathname;
  const user = props.user;
-  const undo_messages = props.undo_messages;

  const [ menu , setMenu ] = useState("notify");
-  const [ messages , setMessages ] = useState(0);
-  const [ transferProjects , setTransferProjects ] = useState(0);
+  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){
-      setTransferProjects(user.undo_transfer_projects);
+      setTransferCount(user.undo_transfer_projects);
+      setApplyCount(user.undo_join_projects);
+      setMessagesCount(user.undo_messages);
    }
-    if(undo_messages){
-      setMessages(undo_messages);
-    }
-  },[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])
-
-  function fetchUser(){
-    props && props.fetchUser();
    }
+  },[pathname,user])

  function changeNum(){
-    fetchUser();
+    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 (
@ -58,27 +86,39 @@ function Index(props){
        <li className={menu === "notify" ? "active":""}>
          <Link to={`/users/${username}/notice`} onClick={changeNum}>
            <span>通知</span>
-            {messages ? <span className="unNum">{messages}</span>:""}
+            {messagesCount ? <span className="unNum">{messagesCount}</span>:""}
          </Link>
        </li>
        <li className={menu === "undo" ? "active":""}>
          <Link to={`/users/${username}/notice/undo`}>
            <span>接收仓库</span>
-            {transferProjects ? <span className="unNum">{transferProjects}</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} fetchUser={fetchUser}/>;
+            return <UndoEvent {...props} {...p} deleteEvent={deleteEvent}/>;
          }}
        ></Route>
        <Route
          path="/users/:username/notice"
          render={(p) => {
-            return <Notify {...props} {...p} fetchUser={fetchUser}/>;
+            return <Notify {...props} {...p} deleteEvent={deleteEvent}/>;
          }}
        ></Route>
      </Switch>
--- a/src/forge/Notice/Index.scss
+++ b/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;
    }
--- a/src/forge/Notice/Notify.jsx
+++ b/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);
@ -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>
                  )
--- a/src/forge/Notice/UndoEvent.jsx
+++ b/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=>{})
  }
--- a/src/forge/users/Infos.js
+++ b/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_messages:0,
-        notice:n
+        undo_events:e
      });
    })
    .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