From ed7a4ee584eca368c1250cd0ff6d0daee22de124 Mon Sep 17 00:00:00 2001
From: sorrycc <sorrycc@gmail.com>
Date: Mon, 19 Dec 2016 18:28:46 +0800
Subject: [PATCH] 11. Handle user edit

---
 src/components/Users/UserModal.css |  3 +
 src/components/Users/UserModal.js  | 97 ++++++++++++++++++++++++++++++
 src/components/Users/Users.js      | 16 ++++-
 src/models/users.js                |  5 ++
 src/services/users.js              |  7 +++
 5 files changed, 125 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Users/UserModal.css
 create mode 100644 src/components/Users/UserModal.js

diff --git a/src/components/Users/UserModal.css b/src/components/Users/UserModal.css
new file mode 100644
index 0000000..3224ee4
--- /dev/null
+++ b/src/components/Users/UserModal.css
@@ -0,0 +1,3 @@
+
+.normal {
+}
diff --git a/src/components/Users/UserModal.js b/src/components/Users/UserModal.js
new file mode 100644
index 0000000..bff8062
--- /dev/null
+++ b/src/components/Users/UserModal.js
@@ -0,0 +1,97 @@
+import React, { Component } from 'react';
+import { Modal, Form, Input } from 'antd';
+import styles from './UserModal.css';
+
+const FormItem = Form.Item;
+
+class UserEditModal extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      visible: false,
+    };
+  }
+
+  showModelHandler = (e) => {
+    if (e) e.stopPropagation();
+    this.setState({
+      visible: true,
+    });
+  };
+
+  hideModelHandler = () => {
+    this.setState({
+      visible: false,
+    });
+  };
+
+  okHandler = () => {
+    const { onOk } = this.props;
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        onOk(values);
+        this.hideModelHandler();
+      }
+    });
+  };
+
+  render() {
+    const { children } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    const { name, email, website } = this.props.record;
+    const formItemLayout = {
+      labelCol: { span: 6 },
+      wrapperCol: { span: 14 },
+    };
+
+    return (
+      <span>
+        <span onClick={this.showModelHandler}>
+          { children }
+        </span>
+        <Modal
+          title="Edit User"
+          visible={this.state.visible}
+          onOk={this.okHandler}
+          onCancel={this.hideModelHandler}
+        >
+          <Form horizontal onSubmit={this.okHandler}>
+            <FormItem
+              {...formItemLayout}
+              label="Name"
+            >
+              {
+                getFieldDecorator('name', {
+                  initialValue: name,
+                })(<Input />)
+              }
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="Email"
+            >
+              {
+                getFieldDecorator('email', {
+                  initialValue: email,
+                })(<Input />)
+              }
+            </FormItem>
+            <FormItem
+              {...formItemLayout}
+              label="Website"
+            >
+              {
+                getFieldDecorator('website', {
+                  initialValue: website,
+                })(<Input />)
+              }
+            </FormItem>
+          </Form>
+        </Modal>
+      </span>
+    );
+  }
+}
+
+export default Form.create()(UserEditModal);
diff --git a/src/components/Users/Users.js b/src/components/Users/Users.js
index eb3ea53..344a1a3 100644
--- a/src/components/Users/Users.js
+++ b/src/components/Users/Users.js
@@ -4,6 +4,7 @@ import { Table, Pagination, Popconfirm } from 'antd';
 import { routerRedux } from 'dva/router';
 import styles from './Users.css';
 import { PAGE_SIZE } from '../../constants';
+import UserModal from './UserModal';
 
 function Users({ dispatch, list: dataSource, loading, total, page: current }) {
   function deleteHandler(id) {
@@ -20,6 +21,13 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
     }));
   }
 
+  function editHandler(id, values) {
+    dispatch({
+      type: 'users/patch',
+      payload: { id, values },
+    });
+  }
+
   const columns = [
     {
       title: 'Name',
@@ -40,10 +48,12 @@ function Users({ dispatch, list: dataSource, loading, total, page: current }) {
     {
       title: 'Operation',
       key: 'operation',
-      render: (text, { id }) => (
+      render: (text, record) => (
         <span className={styles.operation}>
-          <a href="">Edit</a>
-          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, id)}>
+          <UserModal record={record} onOk={editHandler.bind(null, record.id)}>
+            <a>Edit</a>
+          </UserModal>
+          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, record.id)}>
             <a href="">Delete</a>
           </Popconfirm>
         </span>
diff --git a/src/models/users.js b/src/models/users.js
index c13d529..6c0fd17 100644
--- a/src/models/users.js
+++ b/src/models/users.js
@@ -29,6 +29,11 @@ export default {
       const page = yield select(state => state.users.page);
       yield put({ type: 'fetch', payload: { page } });
     },
+    *patch({ payload: { id, values } }, { call, put, select }) {
+      yield call(usersService.patch, id, values);
+      const page = yield select(state => state.users.page);
+      yield put({ type: 'fetch', payload: { page } });
+    },
   },
   subscriptions: {
     setup({ dispatch, history }) {
diff --git a/src/services/users.js b/src/services/users.js
index c4dd1bd..aa8b25a 100644
--- a/src/services/users.js
+++ b/src/services/users.js
@@ -10,3 +10,10 @@ export function remove(id) {
     method: 'DELETE',
   });
 }
+
+export function patch(id, values) {
+  return request(`/api/users/${id}`, {
+    method: 'PATCH',
+    body: JSON.stringify(values),
+  });
+}