yapi/client/containers/ProjectGroups/GroupList/GroupList.js

160 lines
4.2 KiB
JavaScript
Raw Normal View History

2017-07-12 11:43:10 +08:00
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Button, Icon, Modal, Input, message, Menu, Row, Col } from 'antd'
2017-07-12 15:41:11 +08:00
import { autobind } from 'core-decorators';
2017-07-18 15:06:12 +08:00
import axios from 'axios';
2017-07-12 11:43:10 +08:00
2017-07-18 18:23:38 +08:00
const Search = Input.Search;
2017-07-12 11:43:10 +08:00
import {
fetchGroupList,
2017-07-17 10:17:29 +08:00
setCurrGroup,
addGroup,
fetchProjectList
2017-07-12 11:43:10 +08:00
} from '../../../actions/group.js'
import './GroupList.scss'
@connect(
state => ({
groupList: state.group.groupList,
2017-07-12 14:18:17 +08:00
currGroup: state.group.currGroup
2017-07-12 11:43:10 +08:00
}),
{
fetchGroupList,
2017-07-17 10:17:29 +08:00
setCurrGroup,
addGroup,
fetchProjectList
2017-07-12 11:43:10 +08:00
}
)
export default class GroupList extends Component {
static propTypes = {
groupList: PropTypes.array,
2017-07-17 10:17:29 +08:00
currGroup: PropTypes.object,
fetchGroupList: PropTypes.func,
setCurrGroup: PropTypes.func,
fetchProjectList: PropTypes.func
2017-07-12 16:38:42 +08:00
}
2017-07-18 15:06:12 +08:00
state = {
addGroupModalVisible: false,
newGroupName: '',
newGroupDesc: ''
}
2017-07-12 16:38:42 +08:00
constructor(props) {
super(props)
}
componentWillMount() {
2017-07-17 10:17:29 +08:00
this.props.fetchGroupList().then(() => {
2017-07-18 15:06:12 +08:00
const currGroup = this.props.groupList[0] || { group_name: '', group_desc: '' };
2017-07-17 10:17:29 +08:00
this.props.setCurrGroup(currGroup)
});
2017-07-12 15:41:11 +08:00
}
2017-07-18 15:06:12 +08:00
@autobind
showModal() {
this.setState({
addGroupModalVisible: true
});
}
2017-07-12 15:41:11 +08:00
@autobind
addGroup() {
2017-07-18 15:06:12 +08:00
const { newGroupName: group_name, newGroupDesc: group_desc } = this.state;
axios.post('/group/add', { group_name, group_desc }).then(res => {
if (res.data.errcode) {
message.error(res.data.errmsg);
} else {
this.setState({
addGroupModalVisible: false
});
this.props.fetchGroupList()
}
});
}
@autobind
handleCancel(e) {
console.log(e);
this.setState({
addGroupModalVisible: false
});
}
@autobind
inputNewGroupName(e) {
this.setState({newGroupName: e.target.value});
}
@autobind
inputNewGroupDesc(e) {
this.setState({newGroupDesc: e.target.value});
2017-07-12 11:43:10 +08:00
}
@autobind
selectGroup(e) {
const groupId = e.key;
2017-07-19 11:05:22 +08:00
const currGroup = this.props.groupList.find((group) => { return +group._id === +groupId });
this.props.setCurrGroup(currGroup);
// this.props.fetchProjectList(groupId);
}
2017-07-12 11:43:10 +08:00
render () {
const { groupList, currGroup } = this.props;
return (
2017-07-18 17:32:32 +08:00
<div>
<div className="group-bar">
<div className="curr-group">
2017-07-18 18:23:38 +08:00
<div className="curr-group-name">{currGroup.group_name}<Icon className="edit-group" type="edit"/></div>
2017-07-18 17:32:32 +08:00
<div className="curr-group-desc">简介{currGroup.group_desc}</div>
</div>
<div className="group-operate">
2017-07-18 18:23:38 +08:00
<div className="search">
<Search
placeholder="input search text"
onSearch={value => console.log(value)}
/>
</div>
2017-07-18 17:32:32 +08:00
<Button type="primary" onClick={this.showModal}>添加分组</Button>
</div>
<Menu
className="group-list"
mode="inline"
onClick={this.selectGroup}
2017-07-19 11:05:22 +08:00
selectedKeys={[currGroup._id]}
>
2017-07-18 17:32:32 +08:00
{
groupList.map((group) => (
<Menu.Item key={group._id} className="group-item">
2017-07-18 18:23:38 +08:00
<Icon type="folder-open" />{group.group_name}
2017-07-18 17:32:32 +08:00
</Menu.Item>
))
}
</Menu>
</div>
2017-07-18 15:06:12 +08:00
<Modal
title="添加分组"
visible={this.state.addGroupModalVisible}
onOk={this.addGroup}
onCancel={this.handleCancel}
className="add-group-modal"
2017-07-18 15:06:12 +08:00
>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">分组名</div></Col>
<Col span="15">
<Input placeholder="请输入分组名称" onChange={this.inputNewGroupName}></Input>
</Col>
</Row>
<Row gutter={6} className="modal-input">
<Col span="5"><div className="label">简介</div></Col>
<Col span="15">
<Input placeholder="请输入分组描述" onChange={this.inputNewGroupDesc}></Input>
</Col>
</Row>
2017-07-18 15:06:12 +08:00
</Modal>
2017-07-18 17:32:32 +08:00
</div>
2017-07-12 11:43:10 +08:00
)
}
}