129 lines
3.9 KiB
JavaScript
129 lines
3.9 KiB
JavaScript
import React , { useEffect , useState } from 'react';
|
||
import styled from 'styled-components';
|
||
import Box from './Box';
|
||
import axios from 'axios';
|
||
import { getImageUrl } from 'educoder';
|
||
import { Link } from 'react-router-dom';
|
||
import Nodata from '../Nodata';
|
||
|
||
import CheckProfile from '../Component/ProfileModal/Profile';
|
||
|
||
const Span = styled.span`{
|
||
color:#888;
|
||
font-size:12px;
|
||
margin-right:10px;
|
||
}`
|
||
const Align = styled.div`{
|
||
display:flex;
|
||
aligin:center;
|
||
}`
|
||
const ListName = styled.div`{
|
||
font-size:14px;
|
||
color:#333;
|
||
margin-bottom:8px;
|
||
height:18px;
|
||
line-height:18px;
|
||
}`;
|
||
const ColorListName = styled.div`{
|
||
color:#5091FF;
|
||
font-size:14px;
|
||
margin-bottom:8px;
|
||
height:18px;
|
||
line-height:18px;
|
||
}`
|
||
const Img = styled.img`{
|
||
border-radius:50%;
|
||
width:45px;
|
||
height:45px;
|
||
margin-right:12px;
|
||
}`
|
||
function RightBox({ OIdentifier , history , admin , showCompeleteDialog ,completeProfile }) {
|
||
const [ memberData, setMemberData ] = useState(undefined);
|
||
const [ groupData, setGroupData ] = useState(undefined);
|
||
|
||
useEffect(()=>{
|
||
if(OIdentifier){
|
||
getMember(OIdentifier);
|
||
getGroup(OIdentifier);
|
||
}
|
||
},[OIdentifier])
|
||
|
||
function getMember(iden){
|
||
const url = `/organizations/${iden}/organization_users.json`;
|
||
axios.get(url,{params:{limit:5}}).then(result=>{
|
||
if(result && result.data){
|
||
setMemberData(result.data);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
function getGroup(iden){
|
||
const url = `/organizations/${iden}/teams.json`;
|
||
axios.get(url,{params:{limit:5}}).then(result=>{
|
||
if(result && result.data){
|
||
setGroupData(result.data);
|
||
}
|
||
}).catch(error=>{})
|
||
}
|
||
return(
|
||
<div className="list-r">
|
||
{
|
||
memberData && memberData.organization_users && memberData.organization_users.length>0 ?
|
||
<Box name="组织成员" count={memberData && memberData.total_count} url={`/${OIdentifier}/members`}>
|
||
{
|
||
memberData.organization_users.map((item,key)=>{
|
||
return(
|
||
<div className="teammembers" key={key}>
|
||
<Link to={`/${item.user && item.user.login}`}><Img src={getImageUrl(`/${item.user && item.user.image_url}`)} alt="" className="m-img"/></Link>
|
||
<div>
|
||
<Link to={`/${item.user && item.user.login}`}><ListName>{item.user && item.user.name}</ListName></Link>
|
||
<Align><i className="iconfont icon-shijian color-green mr3 font-13"></i><Span>加入时间：{item.created_at}</Span></Align>
|
||
</div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</Box>
|
||
:""
|
||
}
|
||
<Box
|
||
name="组织团队"
|
||
count={groupData && groupData.total_count}
|
||
bottom={
|
||
admin &&
|
||
<CheckProfile
|
||
showCompeleteDialog={showCompeleteDialog}
|
||
completeProfile={completeProfile}
|
||
sureFunc={()=>history.push(`/${OIdentifier}/teams/new`)}
|
||
className={"ant-btn ant-btn-primary"}
|
||
>新建团队</CheckProfile>
|
||
}
|
||
url={`/${OIdentifier}/teams`}
|
||
>
|
||
{
|
||
groupData && groupData.teams && groupData.teams.length>0?
|
||
<React.Fragment>
|
||
{groupData.teams.map((item,key)=>{
|
||
return(
|
||
<div className="teammembers" key={key}>
|
||
<div>
|
||
{
|
||
(item.is_admin || item.is_member) ?
|
||
<Link to={`/${OIdentifier}/teams/${item.id}`}><ColorListName>{item.name}</ColorListName></Link>
|
||
:
|
||
<ColorListName>{item.name}</ColorListName>
|
||
}
|
||
<Align>
|
||
<Span>{item.num_users}名成员</Span>
|
||
<Span>{item.num_projects}个仓库</Span>
|
||
</Align>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</React.Fragment>:<Nodata _html="暂无团队" small/>
|
||
}
|
||
</Box>
|
||
</div>
|
||
)
|
||
}
|
||
export default RightBox; |