feat: add group

client/actions/group.js

@@ -17,18 +17,3 @@ export function setCurrGroup(group) {
     payload: group
   }
 }
-
-export function addGroup(groupName) {
-  return function(dispatch, getState) {
-    const group = getState().group;
-    const groupList = group.groupList || [];
-    const newGroupList = groupList.concat([{ group_name: groupName + groupList.length }]);
-    dispatch({
-      type: FETCH_GROUP_LIST,
-      payload: { data: {
-        data: newGroupList,
-        errcode: 0
-      }}
-    });
-  }
-}

client/containers/ProjectGroups/GroupList/GroupList.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { Card, Button } from 'antd'
+import { Card, Button, Icon, Modal, Input, message } from 'antd'
 import { autobind } from 'core-decorators';
+import axios from 'axios';
 
 import {
   fetchGroupList,
@@ -28,25 +29,61 @@ export default class GroupList extends Component {
   static propTypes = {
     groupList: PropTypes.array,
     currGroup: PropTypes.object,
-    addGroup: PropTypes.func,
     fetchGroupList: PropTypes.func,
     setCurrGroup: PropTypes.func
   }
 
+  state = {
+    addGroupModalVisible: false,
+    newGroupName: '',
+    newGroupDesc: ''
+  }
+
   constructor(props) {
     super(props)
   }
 
   componentWillMount() {
     this.props.fetchGroupList().then(() => {
-      const currGroup = this.props.groupList[0] || { group_name: '' };
+      const currGroup = this.props.groupList[0] || { group_name: '', group_desc: '' };
       this.props.setCurrGroup(currGroup)
     });
   }
 
+  @autobind
+  showModal() {
+    this.setState({
+      addGroupModalVisible: true
+    });
+  }
   @autobind
   addGroup() {
-    this.props.addGroup('group');
+    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});
   }
 
   render () {
@@ -54,13 +91,25 @@ export default class GroupList extends Component {
 
     return (
       <Card title="Groups">
-        <Button type="primary" onClick={this.addGroup}>添加分组</Button>
-        <div>{currGroup.group_name}</div>
+        <Button type="primary" onClick={this.showModal}>添加分组</Button>
+        <div className="curr-group">{currGroup.group_name}</div>
         {
           groupList.map((group, index) => (
-            <div key={index}>{group.group_name}</div>
+            <div key={index}>
+              <div className="group-name">{group.group_name}</div>
+              <Icon type="edit" />
+            </div>
           ))
         }
+        <Modal
+          title="添加分组"
+          visible={this.state.addGroupModalVisible}
+          onOk={this.addGroup}
+          onCancel={this.handleCancel}
+        >
+          <Input placeholder="请输入分组名称" onChange={this.inputNewGroupName}></Input>
+          <Input placeholder="请输入分组描述" onChange={this.inputNewGroupDesc}></Input>
+        </Modal>
       </Card>
     )
   }

client/containers/ProjectGroups/GroupList/GroupList.scss

@@ -0,0 +1,8 @@
+.group-name {
+  display: inline-block;
+}
+.curr-group {
+  background: #34495E;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
+  border-radius: 4px 4px 0 0;
+}