项目邀请码-第一版测试版上线
This commit is contained in:
parent
32299252ad
commit
63e9cfe394
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
})
|
||||
)
|
||||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
min-width: 23px;
|
||||
text-align: center;
|
||||
background-color: #ffe4b3;
|
||||
margin-top: 19px;
|
||||
margin-top: 27px;
|
||||
margin-left: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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=>{})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue